@fairgarden/design 0.1.0-alpha.1 → 0.1.0-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Connor Davis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Readme.md

@@ -2,34 +2,15 @@
 
 <!-- fg:version -->
 
-Version **0.1.0-alpha.0**
+Version **0.1.0-alpha.2**
 
 <!-- /fg:version -->
 
-<!-- fg:releasing -->
-
-## Releasing
-
-This module releases on its own. `0.1.0-alpha.0` is what main is working towards,
-not what is published — the version here is always the next one.
-
-1. **Publish it.** Run the *Publish* workflow from the Actions tab, picking the
-   dist tag. It refuses if that version is already on npm.
-2. **Move it on.** `pnpm release` — opens a pull request bumping this branch
-   to `0.1.0-alpha.1`, or `pnpm release --id rc` to change
-   identifier. A prerelease gets no maintenance branch; there is no released
-   line behind it yet.
-
-Every push to main publishes `@fairgarden/design@canary`. A canary is not a release and
-carries no promise; it is there so main can be tried without a checkout.
-
-<!-- /fg:releasing -->
-
 ## Stack
 
 - **React 19** and **Base UI** (`@base-ui/react`, a peer dependency): unstyled, accessible primitives under every interactive component.
 - **CSS Modules plus CVA** (`class-variance-authority`): one module per component, one class per variant value, typed variant axes, all in cascade layers (`reset, tokens, theme, roles, base, variants, compounds, scales, states, print`).
-- **Open Props** for the non-color tokens, plus the system's own `--ds-*` extensions. Text sizes are in rem, spacing in px.
+- **Open Props** for the non-color tokens. A step the system adds between two Open Props steps is named by its position (`--size-px-2-5` sits halfway between `--size-px-2` and `--size-px-3`); every other FairGarden-only token takes `--fgd-*`. Text sizes are in rem, spacing in px.
 - **Radix Colors**: the 31 standard scales as one unified `--{scale}{step}` set (no alpha scales). Light and dark swap the values, never the names: `data-theme="light|dark"` on `html` forces a mode, otherwise the OS `prefers-color-scheme` decides. Components read only scale steps and role variables (`--primary1…12`, `--secondary1…12`, `--role-*`) and never see the mode. Every component takes `primary` and `secondary` scale props; grounds (`Ground`: 8 page grounds, the `night` band, 7 fields) set them for a region.
 - **Material Symbols** (Rounded, FILL 0 by default) compiled to inline SVG paths by `scripts/build-icons.js`; no icon font.
 - **Recharts** for charts (SVG, role colors, opaque fills, pattern defs, no animation unless motion is allowed).
@@ -43,6 +24,8 @@ carries no promise; it is there so main can be tried without a checkout.
 pnpm add @fairgarden/design @base-ui/react
 # only for Map:
 pnpm add maplibre-gl pmtiles @protomaps/basemaps
+# only for Code Block, Demo, Types Table, Search Dialog and utils/docs:
+pnpm add @fairgarden/docs@^0.13.4-canary.18
 ```
 
 ```tsx
@@ -65,18 +48,32 @@ Each component is imported from its own path, `@fairgarden/design/<category>/<na
 
 | Category | Components (import path `@fairgarden/design/<category>/…`) |
 | --- | --- |
-| `foundations` | Ground (`ground`), Icon (`icon`), Separator (`separator`), Sticker (`sticker`) |
+| `foundations` | Ground (`ground`), Icon (`icon`), Separator (`separator`), Sticker (`sticker`), Expanding Box (`expanding-box`) |
 | `actions` | Button (`button`), Link (`link`), Toggle (`toggle`), Toggle Group (`toggle-group`), Chip (`chip`) |
-| `navigation` | Navigation Menu (`navigation-menu`), Navigation Bar (`navigation-bar`), Nav Drawer (`nav-drawer`), Breadcrumb (`breadcrumb`), Pagination (`pagination`), Tabs (`tabs`), Toolbar (`toolbar`) |
+| `navigation` | Navigation Menu (`navigation-menu`), Navigation Bar (`navigation-bar`), Nav Drawer (`nav-drawer`), Breadcrumb (`breadcrumb`), Pagination (`pagination`), Tabs (`tabs`), File Tabs (`file-tabs`: the folder-tab header Code Block and Demo use, with optional `controls` at its end and a busy `status`; no docs engine needed), Toolbar (`toolbar`), Sidebar Nav (`sidebar-nav`: the docs page tree, from plain data, in the Docs Layout's column and drawer), Table of Contents (`table-of-contents`: "On this page" as a list, or with `kind="bar"` the compact bar that names the section in view and opens the list; with the `useActiveHeading` scrollspy hook) |
 | `forms` | Field (`field`), Fieldset (`fieldset`), Form (`form`), Input (`input`), Number Field (`number-field`), Select (`select`), Combobox (`combobox`), Autocomplete (`autocomplete`), Search (`search`), Checkbox (`checkbox`), Checkbox Group (`checkbox-group`), Radio (`radio`), Radio Group (`radio-group`), Switch (`switch`), Slider (`slider`) |
 | `feedback` | Alert (`alert`), Badge (`badge`), Tag (`tag`), Avatar (`avatar`), Progress (`progress`), Meter (`meter`), Toast (`toast`) |
-| `overlays` | Dialog (`dialog`), Alert Dialog (`alert-dialog`), Popover (`popover`), Preview Card (`preview-card`), Menu (`menu`), Context Menu (`context-menu`), Menubar (`menubar`), Tooltip (`tooltip`) |
+| `overlays` | Dialog (`dialog`), Alert Dialog (`alert-dialog`), Popover (`popover`), Preview Card (`preview-card`), Menu (`menu`), Context Menu (`context-menu`), Menubar (`menubar`), Tooltip (`tooltip`), Search Dialog (`search-dialog`) |
 | `disclosure` | Accordion (`accordion`), Collapsible (`collapsible`), FAQ (`faq`) |
-| `page` | Hero (`hero`), Footer (`footer`), Section Bar (`section-bar`), Section Divider (`section-divider`), Section Header (`section-header`), CTA Block (`cta-block`), Newsletter (`newsletter`), Marquee (`marquee`), Announcement Bar (`announcement-bar`) |
-| `content` | Card (`card`), Card Grid (`card-grid`), Feature Grid (`feature-grid`), Carousel (`carousel`), Quote (`quote`), Index Rows (`index-rows`), Profile (`profile`), Pricing (`pricing`), Timeline (`timeline`), Empty State (`empty-state`) |
+| `page` | Hero (`hero`), Footer (`footer`), Section Bar (`section-bar`), Section Divider (`section-divider`), Section Header (`section-header`), CTA Block (`cta-block`), Newsletter (`newsletter`), Marquee (`marquee`), Announcement Bar (`announcement-bar`), Docs Layout (`docs-layout`: the documentation frame, with a sidebar from 1024 px, a drawer below it, and a contents column from 1440 px, the contents bar sticky under the header below it) |
+| `content` | Card (`card`), Card Grid (`card-grid`), Feature Grid (`feature-grid`), Carousel (`carousel`), Quote (`quote`), Index Rows (`index-rows`), Profile (`profile`), Pricing (`pricing`), Timeline (`timeline`), Empty State (`empty-state`), Code Block (`code-block`), Demo (`demo`), Types Table (`types-table`) |
 | `data` | Table (`table`), Scroll Area (`scroll-area`), Spec Grid (`spec-grid`), Spec List (`spec-list`), Spec Sheet (`spec-sheet`), Figure (`figure`), Stat (`stat`), Chart (`chart`), Map (`map`) |
 
-**Utilities** (`@fairgarden/design/utils/…`): the global stylesheet (`global.css`), the fonts (`fonts`), `ClientProvider`, the pattern tiles (`pattern.module.css`), the type roles (`type.module.css`), the line styles (`line.module.css`), ornaments (`Ornament`) and the navigation data type (`navigation`).
+### With `@fairgarden/docs`
+
+`@fairgarden/docs` is an optional peer dependency (`^0.13.4-canary.18`, the `canary` release; `latest` is still 0.13.3, outside the range). Four components and one utility are built on the docs engine and import it directly; no other module does, so install it only if you use them:
+
+| Import path | Exports |
+| --- | --- |
+| `@fairgarden/design/content/code-block` | `CodeBlock`: a Content component for `CodeHighlighter`. It calls `useCode(props)` and renders the engine's highlighted files, variants, TS \| JS transform, copy, swap and window. `CodeBlockLazy` is the same in its own chunk, and `CodeBlockLoading` its light loading state (the precomputed fallback in the same frame). Copies confirm with a toast through a `ToastProvider` (`feedback/toast`) in the app shell; without one they're silent. |
+| `@fairgarden/design/content/demo` | `DemoContent`: the demo factories' content. It calls `useDemo(props)` and renders the live component above the Code Block's code section. `DemoLazy` and `DemoLoading` as above; `renderPreview` wraps the preview (an iframe, say). |
+| `@fairgarden/design/content/types-table` | `TypesTable` and `TypePre`: the types factories' API table (through `useTypes`) and type signatures. |
+| `@fairgarden/design/overlays/search-dialog` | `SearchDialog`: the header search. It calls `useSearch` over your `sitemap` loader and renders the engine's results; a chosen row calls `onNavigate(href, result)` with `buildResultUrl(result)`, so pass your router: `<SearchDialog sitemap={() => import('./sitemap')} onNavigate={(href) => router.push(href)} keyboardShortcut />`. |
+| `@fairgarden/design/utils/docs` | `createDemo`, `createDemoWithVariants`, `createTypes`, `createMultipleTypes` (the engine's factories pre-wired with the components above; `createDemoFactory`, `createDemoWithVariantsFactory`, `createTypesFactory` and `createMultipleTypesFactory` take overrides) and `createMdxComponents({ Link, Image, components, … })` (the MDX map: fenced blocks as Code Blocks, headings, links, prose). `toSidebarItems(sitemap)` maps the engine's sitemap to the Sidebar Nav's page tree. Each also has its own path: `…/utils/docs/createDemo`, `…/createTypes`, `…/createMdxComponents`, `…/toSidebarItems`. |
+
+None of them contains framework code: pass navigation in (`onNavigate`, `Link`). Put the engine's `CodeProviderLazy` (`@fairgarden/docs/CodeProvider`) in your root layout, so code the browser produces is highlighted too.
+
+**Utilities** (`@fairgarden/design/utils/…`): the global stylesheet (`global.css`), the fonts (`fonts`), `ClientProvider`, the pattern tiles (`pattern.module.css`), the type roles (`type.module.css`), the syntax tiers for code outside a Code Block (`syntax.module.css`), the line styles (`line.module.css`), ornaments (`Ornament`), the navigation data type (`navigation`) and the docs factories (`docs`, above).
 
 ## Development
 
@@ -86,3 +83,30 @@ Each component is imported from its own path, `@fairgarden/design/<category>/<na
 - Documentation site in `docs/` (`@fairgarden/design-docs`, port 3032): `pnpm --filter @fairgarden/design-docs dev`. It compiles `src/` directly through tsconfig paths, with one section per category (`docs/app/<category>/<name>/`). After changing a component's props or adding a page, run `pnpm validate` in `docs/` to regenerate the `types.md` files and the section indexes.
 
 Install dependencies from the monorepo root only. The full specification lives outside this repository (`DESIGN-SYSTEM.md`).
+
+<!-- fg:releasing -->
+
+## Releasing
+
+This module releases on its own. `0.1.0-alpha.2` is what main is working towards,
+not what is published — the version here is always the next one. Its release
+notes are the top section of `CHANGELOG.md`, where every pull request adds a
+line linking itself.
+
+1. **Publish it.** Run the *Publish* workflow from the Actions tab, picking the
+   dist tag. It refuses if that version is already on npm. Once it is out, open
+   pull requests are held — their changelog check fails — so nothing is noted
+   under a version that has already shipped.
+2. **Start the next version.** `pnpm next-version` opens a pull request moving
+   main to `0.1.0-alpha.3` and starting its section of the
+   changelog, or `pnpm next-version --id rc` to change identifier. Merging it
+   lifts the hold. A prerelease gets no maintenance branch; there is no
+   released line behind it yet.
+
+A held pull request goes on once it is brought up to date with main and its
+line is moved into the new version's section.
+
+Every push to main publishes `@fairgarden/design@canary`. A canary is not a release and
+carries no promise; it is there so main can be tried without a checkout.
+
+<!-- /fg:releasing -->

package/actions/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/actions/button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAWtE;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;;;;;8EA4CjB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AAEjD,iFAAiF;AACjF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;AAIhF,KAAK,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IAC1D;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAEH,KAAK,mBAAmB,GAAG;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACvB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B,kEAAkE;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAA;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;IAC5C,yBAAyB;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,4EAA4E;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,CAAC,mBAAmB,GAAG,mBAAmB,CAAC,CAAA;AAE7C;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAwHxC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/actions/button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAYtE;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;;;;;8EA4CjB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AAEjD,iFAAiF;AACjF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;AAMhF,KAAK,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IAC1D;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAEH,KAAK,mBAAmB,GAAG;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACvB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B,kEAAkE;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAA;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;IAC5C,yBAAyB;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,4EAA4E;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,CAAC,mBAAmB,GAAG,mBAAmB,CAAC,CAAA;AAE7C;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAsIxC"}

package/actions/button/Button.js

@@ -7,6 +7,7 @@ import { assignRef } from '../../utils/assignRef';
 import { cx, resolveClassName } from '../../utils/className';
 import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
 import { useScopeAttributes } from '../../utils/scope';
+import { useReleaseMark } from '../../utils/useReleaseMark';
 import styles from './button.module.css';
 /**
  * Button classes (§9.2, §1.11.10). `primary` and `secondary` are never
@@ -98,6 +99,17 @@ export function Button(props) {
             node.style.removeProperty('--button-rest-width');
         };
     }, [busy]);
+    // A `solid` press swaps fill and ink as a pair; the release mark lets the
+    // module step the release too, never fading one over the other [D205].
+    const releaseMark = useReleaseMark(element);
+    const handlePointerDown = (event) => {
+        releaseMark.onPointerDown();
+        rest.onPointerDown?.(event);
+    };
+    const handleKeyUp = (event) => {
+        releaseMark.onKeyUp(event);
+        rest.onKeyUp?.(event);
+    };
     const handleClick = (event) => {
         if (busy) {
             event.preventDefault();
@@ -128,7 +140,7 @@ export function Button(props) {
     const label = children == null ? null : React.createElement("span", { className: styles.label }, children);
     const edge = disabled && variant !== 'text' ? (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
         React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" }))) : null;
-    return (React.createElement(BaseButton, { ...rest, ...linkSemantics, ...scope, ref: setRef, disabled: disabled, className: resolvedClassName, onClick: handleClick },
+    return (React.createElement(BaseButton, { ...rest, ...linkSemantics, ...scope, ref: setRef, disabled: disabled, className: resolvedClassName, onClick: handleClick, onPointerDown: handlePointerDown, onKeyUp: handleKeyUp },
         iconPosition === 'end' ? label : glyph,
         iconPosition === 'end' ? glyph : label,
         edge));

package/actions/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/actions/button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/actions/button/Button.tsx"],"names":[],"mappings":"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"}

package/actions/button/button.module.css

@@ -38,21 +38,21 @@
     appearance: none;
   }
 
-  /* Every target reaches --ds-size-hit; a smaller control extends it invisibly (§9.1) [D43]. */
+  /* Every target reaches --fgd-size-hit; a smaller control extends it invisibly (§9.1) [D43]. */
   .base::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
-    inline-size: var(--ds-size-hit);
-    block-size: var(--ds-size-hit);
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
     min-inline-size: 100%;
     min-block-size: 100%;
     translate: -50% -50%;
   }
 
   .label {
-    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-decoration-thickness: var(--border-size-1-5);
     text-underline-offset: 0.15em;
   }
 
@@ -64,10 +64,10 @@
   .edge {
     display: none;
     position: absolute;
-    inset-block-start: calc(var(--ds-dot-fine) / 2);
-    inset-inline-start: calc(var(--ds-dot-fine) / 2);
-    inline-size: calc(100% - var(--ds-dot-fine));
-    block-size: calc(100% - var(--ds-dot-fine));
+    inset-block-start: calc(var(--fgd-dot-fine) / 2);
+    inset-inline-start: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
     overflow: visible;
     pointer-events: none;
   }
@@ -75,7 +75,7 @@
   .edgeLine {
     fill: none;
     stroke: var(--role-disabled-edge);
-    rx: calc(var(--button-edge-radius) - var(--ds-dot-fine) / 2);
+    rx: calc(var(--button-edge-radius) - var(--fgd-dot-fine) / 2);
   }
 
   @media (forced-colors: active) {
@@ -84,14 +84,45 @@
     }
   }
 
-  /* Hover and press transitions [D181]: --ds-duration-quick, --ease-out-3; instant under --motionNotOK. */
+  /*
+   * Hover and press transitions [D181]: --fgd-duration-quick, --ease-out-3;
+   * instant under --motionNotOK. Only opaque-to-opaque changes fade [D205]:
+   * ink, edge and underline colors everywhere, and the fill of `solid`,
+   * which is opaque at rest, on hover and pressed. An `outline` or media
+   * Button's fill and ink change only together, as the inverse pair on
+   * press (the outline's fill from none), so both step at once.
+   */
   @media (prefers-reduced-motion: no-preference) {
     .base,
     .label {
-      transition-property: color, background-color, border-color, text-decoration-color;
-      transition-duration: var(--ds-duration-quick);
+      transition-property: color, border-color, text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
       transition-timing-function: var(--ease-out-3);
     }
+
+    .solid {
+      transition-property: color, background-color, border-color, text-decoration-color;
+    }
+
+    /*
+     * A `solid` press swaps fill and ink as the inverse pair, so the press
+     * and its release (marked `data-released` for two frames, since both a
+     * release and a hover-in end on :hover) step both at once: no frame shows
+     * the ink over a fill of its own tone. Hover in and out still fade.
+     */
+    .solid:active,
+    .solid:active .label,
+    .solid[data-released],
+    .solid[data-released] .label {
+      transition-property: border-color, text-decoration-color;
+    }
+
+    .outline,
+    .outline .label,
+    .onMedia,
+    .onMedia .label {
+      transition-property: border-color, text-decoration-color;
+    }
   }
 }
 
@@ -118,7 +149,7 @@
   }
 
   .md {
-    --button-height: var(--ds-size-control-md);
+    --button-height: var(--fgd-size-control-md);
   }
 
   .lg {
@@ -126,7 +157,7 @@
   }
 
   .xl {
-    --button-height: var(--ds-size-control-xl);
+    --button-height: var(--fgd-size-control-xl);
   }
 
   /*
@@ -182,8 +213,12 @@
     block-size: var(--button-height);
   }
 
+  /* Visually hidden at 1 px (as Toggle's), so a long name never widens the page's scrollable area. */
   .iconOnly .label {
     position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
     overflow: hidden;
     clip-path: inset(50%);
     white-space: nowrap;
@@ -200,12 +235,12 @@
     color: var(--primary12);
   }
 
-  /* Butted to a field (§10.3): --radius-1 outside, --ds-radius-none at the seam. */
+  /* Butted to a field (§10.3): --radius-1 outside, --radius-0 at the seam. */
   .buttedStart {
     --button-edge-radius: var(--radius-1);
 
-    border-start-start-radius: var(--ds-radius-none);
-    border-end-start-radius: var(--ds-radius-none);
+    border-start-start-radius: var(--radius-0);
+    border-end-start-radius: var(--radius-0);
     border-start-end-radius: var(--radius-1);
     border-end-end-radius: var(--radius-1);
   }
@@ -215,8 +250,8 @@
 
     border-start-start-radius: var(--radius-1);
     border-end-start-radius: var(--radius-1);
-    border-start-end-radius: var(--ds-radius-none);
-    border-end-end-radius: var(--ds-radius-none);
+    border-start-end-radius: var(--radius-0);
+    border-end-end-radius: var(--radius-0);
   }
 }
 
@@ -273,9 +308,9 @@
    *   label and edge unchanged, no underline;
    * - outline: a --primary3 fill (--role-soft-hover); where soft fills drop
    *   it stays the ground and the label takes the bare-text underline
-   *   (--ds-soft-hover-line);
+   *   (--fgd-soft-hover-line);
    * - text: the label takes --role-link-hover, underlined where that is
-   *   --primary12 (--ds-link-hover-line); the glyph swaps to the next tier's
+   *   --primary12 (--fgd-link-hover-line); the glyph swaps to the next tier's
    *   weight through Icon weight="interactive" (as on icon-only buttons).
    */
   .solid:not([data-disabled], [aria-busy='true']):hover {
@@ -287,7 +322,7 @@
   }
 
   .outline:not([data-disabled], [aria-busy='true']):hover .label {
-    text-decoration-line: var(--ds-soft-hover-line);
+    text-decoration-line: var(--fgd-soft-hover-line);
     text-decoration-color: var(--role-accent);
     text-decoration-thickness: var(--border-size-2);
     text-underline-offset: var(--size-px-1);
@@ -295,7 +330,7 @@
 
   .text:not([data-disabled], [aria-busy='true']):hover .label {
     color: var(--role-link-hover);
-    text-decoration-line: var(--ds-link-hover-line);
+    text-decoration-line: var(--fgd-link-hover-line);
     text-decoration-color: var(--role-accent);
   }
 
@@ -357,10 +392,33 @@
     text-decoration-thickness: var(--border-size-2);
   }
 
-  /* Focus: 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
+  /*
+   * Focus: 2 px --primary12 ring at the ring offset (--fgd-focus-offset,
+   * 2 px), keyboard only [D45]. A text Button has no container, so its ring
+   * stands off a padded box as tall as its size's contained Button
+   * (--button-height, centred on the words) at that 2 px offset: it sits
+   * around the words at the height of the other Buttons' rings, never on the
+   * glyphs. It is the ring only, an outline: nothing moves, the hit area and
+   * the words stay put. The offset is the local ring token, so the outline
+   * morph starts and lands on the same box [D204]. Icon-only text Buttons
+   * keep the circle's own ring.
+   */
+  .text:not(.iconOnly) {
+    /* Whole pixels, as the browser draws an outline offset. */
+    --fgd-focus-offset: max(
+      var(--border-size-2),
+      round(down, calc((var(--button-height) - 1lh) / 2 + var(--border-size-2)), 1px)
+    );
+  }
+
+  /* In running text the ring keeps to the line: --size-px-1 around the words, so it barely reaches the lines above and below. */
+  :where(p, li, dd, dt, blockquote, figcaption, td, th) > .text:not(.iconOnly) {
+    --fgd-focus-offset: var(--size-px-1);
+  }
+
   .base:focus-visible {
     outline: var(--border-size-2) solid var(--primary12);
-    outline-offset: var(--border-size-2);
+    outline-offset: var(--fgd-focus-offset);
   }
 
   /*
@@ -373,6 +431,8 @@
     border-style: none;
     background: none;
     color: var(--role-muted);
+    /* The fill goes to none, so it steps [D205]. */
+    transition-property: color, border-color, text-decoration-color;
   }
 
   .base[data-disabled] .edge {

package/actions/chip/Chip.d.ts

@@ -49,9 +49,9 @@ export type ChipProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
     secondary?: ChipVariants['secondary'];
 };
 /**
- * A removable chip: `--size-px-7` tall, a `--ds-stroke-1-5` `--role-rule`
+ * A removable chip: `--size-px-7` tall, a `--border-size-1-5` `--role-rule`
  * edge, the label in `type-body-ui` and the × (`close`, inline tier) in a
- * `--ds-size-hit` target with its own focus ring. It prints as the word.
+ * `--fgd-size-hit` target with its own focus ring. It prints as the word.
  */
 export declare function Chip(props: ChipProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export {};

package/actions/chip/Chip.js

@@ -56,9 +56,9 @@ export const chipParts = {
     edgeLine: styles.edgeLine,
 };
 /**
- * A removable chip: `--size-px-7` tall, a `--ds-stroke-1-5` `--role-rule`
+ * A removable chip: `--size-px-7` tall, a `--border-size-1-5` `--role-rule`
  * edge, the label in `type-body-ui` and the × (`close`, inline tier) in a
- * `--ds-size-hit` target with its own focus ring. It prints as the word.
+ * `--fgd-size-hit` target with its own focus ring. It prints as the word.
  */
 export function Chip(props) {
     const { render, ref, className, children, onRemove, removeLabel, removeRender, disabled, primary, secondary, ...rest } = props;

package/actions/chip/chip.module.css

@@ -2,7 +2,7 @@
  * Chip (§10.11): the removable chip. CVA function `chip`. It matches the
  * Combobox's chips (combobox.module.css) part for part, so the two read as
  * one component.
- * Color roles (§10.11): edge --role-rule at --ds-stroke-1-5; label and ×
+ * Color roles (§10.11): edge --role-rule at --border-size-1-5; label and ×
  * --primary12; × pressed: the inverse pair; disabled: --role-muted label
  * and ×, `line-dotted-fine` edge in --role-disabled-edge (--role-rule, or
  * --primary12 on one-ink grounds [D85]). Colors are role variables only;
@@ -32,7 +32,7 @@
     max-inline-size: 100%;
     block-size: var(--chip-height);
     padding-inline: var(--size-px-3);
-    border: var(--ds-stroke-1-5) solid var(--role-rule);
+    border: var(--border-size-1-5) solid var(--role-rule);
     border-radius: var(--radius-round);
     color: var(--primary12);
     vertical-align: middle;
@@ -50,7 +50,7 @@
     text-overflow: ellipsis;
   }
 
-  /* The × in its own cell, full chip height, with a --ds-size-hit target. */
+  /* The × in its own cell, full chip height, with a --fgd-size-hit target. */
   .remove {
     position: relative;
     flex: none;
@@ -73,8 +73,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
-    inline-size: var(--ds-size-hit);
-    block-size: var(--ds-size-hit);
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
     translate: -50% -50%;
   }
 
@@ -82,10 +82,10 @@
   .edge {
     display: none;
     position: absolute;
-    inset-block-start: calc(var(--ds-dot-fine) / 2);
-    inset-inline-start: calc(var(--ds-dot-fine) / 2);
-    inline-size: calc(100% - var(--ds-dot-fine));
-    block-size: calc(100% - var(--ds-dot-fine));
+    inset-block-start: calc(var(--fgd-dot-fine) / 2);
+    inset-inline-start: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
     overflow: visible;
     pointer-events: none;
   }
@@ -93,7 +93,7 @@
   .edgeLine {
     fill: none;
     stroke: var(--role-disabled-edge);
-    rx: calc(var(--chip-height) / 2 - var(--ds-dot-fine) / 2);
+    rx: calc(var(--chip-height) / 2 - var(--fgd-dot-fine) / 2);
   }
 
   @media (forced-colors: active) {
@@ -102,13 +102,7 @@
     }
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .remove {
-      transition-property: color, background-color;
-      transition-duration: var(--ds-duration-quick);
-      transition-timing-function: var(--ease-out-3);
-    }
-  }
+  /* No transition: the × cell's press is the inverse pair from none, which steps at once [D205]. */
 }
 
 @layer states {
@@ -134,7 +128,7 @@
 
   /* Disabled: fill none, muted ink, the dotted edge; the solid edge's width moves into the padding. */
   .base[data-disabled] {
-    padding-inline-start: calc(var(--size-px-3) + var(--ds-stroke-1-5));
+    padding-inline-start: calc(var(--size-px-3) + var(--border-size-1-5));
     border-style: none;
     color: var(--role-muted);
   }

package/actions/link/Link.d.ts

@@ -40,7 +40,7 @@ export interface LinkProps extends Omit<useRender.ComponentProps<'a'>, 'classNam
     /**
      * With `kind="nav"`: a list link (nav-panel, footer, drawer and breadcrumb
      * lists), whose hover is `--role-link-hover` color only, plus the
-     * `--ds-stroke-1-5` `--role-accent` underline where that ink is
+     * `--border-size-1-5` `--role-accent` underline where that ink is
      * `--primary12`. Without it, `nav` is bare navigation text (bar and
      * utility items, page numbers, toolbar links), whose hover is the
      * `--border-size-2` `--role-accent` underline (§9.3) [D181]. Default