fix: stop focus rings on open lists and the 1px page scroll from the header border (0.4.1)

README.md

@@ -11,7 +11,7 @@ router: apps pass their own link component in through `UiProvider`.
 Install a release by URL. No registry account or token is needed:
 
 ```sh
-npm install --save-exact https://github.com/project-graphite/graphite-ui/releases/download/v0.4.0/project-graphite-ui-0.4.0.tgz
+npm install --save-exact https://github.com/project-graphite/graphite-ui/releases/download/v0.4.1/project-graphite-ui-0.4.1.tgz
 ```
 
 Load the theme after Tailwind. `@source` lets Tailwind see the classes the components use, and its

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@project-graphite/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Project Graphite design tokens, theme and React components.",
   "license": "MIT",
   "repository": {

src/components/AppShell.tsx

@@ -70,8 +70,8 @@ export function AppShell({
         <a className="skip-link" href="#content">
           skip to content
         </a>
-        <header className="sticky top-0 z-20 border-b border-line-soft bg-paper/90 backdrop-blur-md">
-          <div className={sidebar ? 'shell-bar flex h-16 items-center gap-2' : 'shell flex h-16 items-center gap-6'}>
+        <header className="sticky top-0 z-20 h-(--header-height) border-b border-line-soft bg-paper/90 backdrop-blur-md">
+          <div className={sidebar ? 'shell-bar flex h-full items-center gap-2' : 'shell flex h-full items-center gap-6'}>
             {sidebar && (
               <button
                 aria-controls="app-sidebar"

src/theme.css

@@ -235,9 +235,11 @@ body {
   }
 }
 
-:focus-visible {
-  outline: 2px solid var(--color-ink);
-  outline-offset: 3px;
+@layer base {
+  :focus-visible {
+    outline: 2px solid var(--color-ink);
+    outline-offset: 3px;
+  }
 }
 
 @layer components {