@filipgutica/ui 1.10.0 → 1.11.1

package/README.md

@@ -1,7 +1,14 @@
 # @filipgutica/ui
 
-Compact Vue 3.5+ components built on [Reka UI](https://reka-ui.com), with
-Tailwind CSS 4 and VS Code theme support.
+@filipgutica/ui is a compact Vue 3.5+ component library built on
+[Reka UI](https://reka-ui.com) and styled with Tailwind CSS 4. You can recolor
+it with a VS Code color theme: the theme supplies the colors, and the library
+keeps typography, spacing, and component structure the same.
+
+Use it when you want dense, calm controls: neutral surfaces with one accent
+color, compact sizes on a 4px rhythm, and visible keyboard focus. It also
+provides the shared header, navigation, and page components of Filip's project
+sites.
 
 [Docs and playground](https://filipgutica.github.io/ui/) ·
 [GitHub](https://github.com/filipgutica/ui) ·
@@ -9,6 +16,9 @@ Tailwind CSS 4 and VS Code theme support.
 
 ## Install
 
+You need a Vue 3.5+ app whose stylesheet Tailwind CSS 4 already builds. This
+package does not install Tailwind.
+
 ```sh
 pnpm add @filipgutica/ui
 ```
@@ -22,6 +32,9 @@ Import the styles from your application stylesheet:
 @import "@filipgutica/ui/components.css";
 ```
 
+The third import adds Graphite Indigo, the palette of the project sites. Leave
+it out to keep the base theme from `theme.css`, with blue actions.
+
 ## Use
 
 ```vue
@@ -37,45 +50,12 @@ import { UiButton } from '@filipgutica/ui'
 ```
 
 The [component docs](https://filipgutica.github.io/ui/#/components/button)
-cover examples, props, slots, and events. Place inputs and selects inside
-`UiField` to connect labels, descriptions, and errors automatically.
-
-## Page navigation
-
-`UiDrawer` provides modal focus containment, Escape dismissal, and trigger focus
-restoration. Keep native navigation in the server-rendered page until hydration;
-the application decides when to replace it and when to close the drawer at a
-desktop breakpoint. To focus a link destination after closing, prevent the
-cancelable `closeAutoFocus` event and focus that heading.
-
-`UiTabs` renders every labelled panel during SSR and initial hydration. After
-mounting, it adds keyboard-accessible tabs and hides inactive panels without
-unmounting them. A tab strip narrower than its tabs scrolls, fades each clipped
-edge, and keeps the selected tab in view when it resizes. Use unique item values
-and keep page anchor headings outside the panels. Re-align an initial hash after
-layout settles if enhancement changes the page height.
-
-Track page sections from a component's setup function:
-
-```ts
-import { useActiveSection } from '@filipgutica/ui'
-
-const activeSection = useActiveSection({
-  targetIds: ['overview', 'install', 'commands'],
-})
-```
-
-The returned readonly ref contains the last supplied heading above the root's
-CSS `scroll-padding-top` inset, or the final section at the document bottom.
-IDs must remain stable and in page order; missing elements are ignored after
-mounting. Bind matching links to `aria-current="location"`. Scrolling, resizing,
-layout changes, completed transitions, and restored pages update the value. After
-a jump to a section, through a `#id` link, a hash change, or a deep link, that
-section stays current until the reader scrolls away from where the jump lands, so
-a page too short to bring it to the top still marks it.
-The composable does not change focus, the URL, or browser history, and removes
-its listeners and observer when the component unmounts. During SSR it returns
-the first supplied ID without accessing browser globals.
+show an example, a sandbox, and the props, slots, and events of the components
+in `@filipgutica/ui`. Read the
+[Drawer](https://filipgutica.github.io/ui/#/components/drawer) and
+[Tabs](https://filipgutica.github.io/ui/#/components/tabs) pages before you use
+them for page navigation: they explain how each one behaves before and after
+hydration.
 
 ## Themes
 
@@ -88,20 +68,47 @@ const theme = parseVsCodeTheme({ source, fileName })
 applySemanticTheme({ root: document.documentElement, theme })
 ```
 
-Themes supply colors; the library keeps typography, spacing, and component
-structure consistent. Open VSX search and imports are available through
-`createOpenVsxThemeService` from `@filipgutica/ui/open-vsx`. It runs on Node
-or in a browser with HTTPS and Web Crypto. Browser requests depend on the
-registry and its resource host allowing cross-origin access.
+The theme must define a background color and a foreground color, such as
+`editor.background` and `editor.foreground`.
+
+To let people search for and import themes from Open VSX, use
+`createOpenVsxThemeService` from `@filipgutica/ui/open-vsx`. It runs on Node or
+in a browser with HTTPS and Web Crypto. In a browser, it works only when the
+registry and its resource host allow cross-origin requests.
+
+The theme search-and-install dialog on the docs site is not exported. Build
+your own picker from the exported components and theme helpers.
 
-The gallery's search-and-install dialog is docs-only, not an exported component.
-Applications can build their own picker with the exported components and theme
-helpers. `UiSiteHeader` includes the built-in System, Light, and Dark control.
+## Track the current section
+
+`useActiveSection` tells you which section of a long page the reader is on,
+so you can mark its link. Call it from a component's setup function:
+
+```ts
+import { useActiveSection } from '@filipgutica/ui'
+
+const activeSection = useActiveSection({
+  targetIds: ['overview', 'install', 'commands'],
+})
+```
 
-The install steps above import Graphite Indigo, the palette of the project
-sites, after `theme.css`. To keep the base theme instead, with blue actions and
-warm greys, leave out the `themes/graphite-indigo.css` import. Graphite Indigo
-stays opt-in: `theme.css` alone still gives the base theme.
+Bind `aria-current="location"` to the link whose section matches the value.
+
+- The returned readonly ref holds the last supplied heading above the root's
+  CSS `scroll-padding-top` inset. At the bottom of the document, it holds the
+  final section.
+- Keep the IDs stable and in page order. IDs with no element on the page are
+  ignored after mounting.
+- Scrolling, resizing, layout changes, completed transitions, and restored
+  pages update the value.
+- After a jump to a section, through a `#id` link, a hash change, or a deep
+  link, that section stays current until the reader scrolls away from where the
+  jump lands. So a page too short to bring the section to the top still marks
+  it.
+- It does not change focus, the URL, or browser history. It removes its
+  listeners and observer when the component unmounts.
+- During SSR it returns the first supplied ID without accessing browser
+  globals.
 
 ## Project sites
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [

package/src/site.css

@@ -222,6 +222,8 @@
     flex: none;
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-control);
+    /* A muted track, so the pressed choice reads as a raised thumb in both themes. */
+    background: var(--color-surface-muted);
   }
   .fg-site-appearance__choice {
     display: inline-flex;
@@ -240,7 +242,16 @@
   .fg-site-appearance__choice:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
   .fg-site-appearance__choice:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
   .fg-site-appearance__choice:hover { color: var(--color-text); background: var(--color-row-hover); }
-  .fg-site-appearance__choice[aria-pressed="true"] { color: var(--color-text); background: var(--color-row-selected); }
+  /* The ring gives the pressed choice 3:1 against the track in both themes (WCAG 1.4.11). */
+  .fg-site-appearance__choice[aria-pressed="true"] {
+    color: var(--color-text);
+    background: var(--color-row-selected);
+    box-shadow: inset 0 0 0 1px var(--color-border);
+  }
+  /* Forced colors drop the fill and the ring, so the pressed choice takes the system highlight. */
+  @media (forced-colors: active) {
+    .fg-site-appearance__choice[aria-pressed="true"] { forced-color-adjust: none; color: HighlightText; background: Highlight; }
+  }
 
   /* Focus is a 2px outline outside the control, which forced-colors mode keeps. An
    * inset ring is used only where a scrolling ancestor would clip an outer one. */
@@ -367,7 +378,7 @@
   .fg-capture__screen .tb1 { background: var(--t1, #f0776c); }
   .fg-capture__screen .tb2 { background: var(--t2, #4cc38a); }
   .fg-capture__screen .tb3 { background: var(--t3, #e2a54b); }
-  .fg-capture__screen .tb4 { background: var(--t4, #7d97ff); }
+  .fg-capture__screen .tb4 { background: var(--t4, #3354c4); }
   .fg-capture__screen .tb5 { background: var(--t5, #c792ea); }
   .fg-capture__screen .tb6 { background: var(--t6, #5fd3d9); }
   .fg-capture__screen .tb7 { background: var(--t7, #c8c8d0); }
@@ -382,6 +393,8 @@
   .fg-capture__screen .tf-dim { color: var(--t-dim, #a0a0ab); }
   .fg-capture__screen .tf-bg { color: var(--t-bg, #131316); }
   .fg-capture__screen .tb-fg { background: var(--t-fg, #e6e6ea); }
+  /* Text on the light selection row stays dark, whatever its own colour class. */
+  .fg-capture__screen .tb8 { color: #1b1b1f; }
   .fg-capture__screen .tbold { font-weight: var(--weight-semibold); }
   .fg-capture__screen .tital { font-style: italic; }
   .fg-capture__screen .tul { text-decoration: underline; text-underline-offset: 0.18em; }
@@ -612,6 +625,12 @@
     }
   }
   @media (max-width: 640px) {
+    /* Phones: three or more site links do not fit beside the project menu, so the menu and
+     * the header controls share the first row and the links take the second. That keeps the
+     * header to two rows. With fewer links, the header keeps its wrapping row. */
+    .fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-header__end { display: contents; }
+    .fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-projects { margin-inline-end: auto; }
+    .fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-header__links { order: 1; flex-basis: 100%; }
     .fg-site-docs { padding-inline: var(--space-4); }
     /* Docs-shell pages keep one header row on phones and repeat these links in their footer. */
     .fg-site-docs .fg-site-header__links { display: none; }

package/src/themes/graphite-indigo.css

@@ -5,7 +5,7 @@
 
 :root {
   color-scheme: light;
-  --color-bg: #f4f5f8;
+  --color-bg: #f8f9fb;
   --color-surface: #e7e8ec;
   --color-surface-raised: #ffffff;
   --color-surface-muted: #e4e6eb;