@signal9/era-ui 32.0.0 → 33.0.0

package/dist/docs/index.d.ts

@@ -1,5 +0,0 @@
-import { type ComponentEntry } from '../../routes/registry.js';
-export declare const docs: Record<string, string>;
-export declare function getDoc(slug: string): string | undefined;
-export declare function hasDoc(slug: string): boolean;
-export declare function listEntries(): ComponentEntry[];

package/dist/docs/index.js

@@ -1,66 +0,0 @@
-import { components, guides } from '../../routes/registry.js';
-import { buildComponentDoc } from './component-docs.js';
-import { utilitiesDoc } from './utilities.js';
-const rootUiIndexSources = import.meta.glob('../ui/index.ts', {
-    query: '?raw',
-    import: 'default',
-    eager: true
-});
-const markdownModules = import.meta.glob('./*.md', {
-    query: '?raw',
-    import: 'default',
-    eager: true
-});
-function slugFromPath(path) {
-    return path.replace(/^\.\//, '').replace(/\.md$/, '');
-}
-const appendices = Object.fromEntries(Object.entries(markdownModules).map(([path, body]) => [slugFromPath(path), body]));
-// The utilities guide has no component source to synthesize from — its body is
-// parsed out of the `@utility` doc comments in src/lib/styles instead.
-appendices.utilities = [appendices.utilities, utilitiesDoc].filter(Boolean).join('\n\n');
-function titleFromSlug(slug) {
-    return slug
-        .split('-')
-        .map((part) => part[0]?.toUpperCase() + part.slice(1))
-        .join(' ');
-}
-function inferMissingEntriesFromRootUiIndex() {
-    const src = Object.values(rootUiIndexSources)[0] ?? '';
-    const mentioned = new Set();
-    for (const m of src.matchAll(/from\s+['"]\.\/([^/'"]+)\/index\.js['"]/g)) {
-        mentioned.add(m[1]);
-    }
-    // Provider exports theme tokens/types rather than a renderable component.
-    mentioned.delete('provider');
-    const existing = new Set([...guides, ...components].map((entry) => entry.slug));
-    const fallbackIcon = components[0]?.icon ?? guides[0].icon;
-    return [...mentioned]
-        .filter((slug) => !existing.has(slug))
-        .sort((a, b) => a.localeCompare(b))
-        .map((slug) => ({
-        name: titleFromSlug(slug),
-        slug,
-        description: `Component docs for ${titleFromSlug(slug)} (auto-discovered from src/lib/ui/index.ts exports).`,
-        icon: fallbackIcon
-    }));
-}
-const inferredEntries = inferMissingEntriesFromRootUiIndex();
-const allEntries = [...guides, ...components, ...inferredEntries];
-const entriesBySlug = Object.fromEntries(allEntries.map((e) => [e.slug, e]));
-// Synthesize every entry at module-init. Hand-authored markdown under
-// `src/lib/docs/<slug>.md` (if present) is appended verbatim as additional
-// notes — the header, import snippet, and props table always come from the
-// component source so the library stays in sync with itself.
-export const docs = Object.fromEntries(Object.values(entriesBySlug).map((entry) => [
-    entry.slug,
-    buildComponentDoc(entry, appendices[entry.slug])
-]));
-export function getDoc(slug) {
-    return docs[slug];
-}
-export function hasDoc(slug) {
-    return slug in docs;
-}
-export function listEntries() {
-    return allEntries;
-}

package/dist/docs/notes.md

@@ -1,83 +0,0 @@
-## Usage
-
-**Notes is not published.** It lives in `src/apps/` in the era-ui repository,
-outside the packaged `src/lib`, so there is no import path that reaches it — the
-`@signal9/era-ui/apps` subpath was removed in v13.
-
-A design system that also ships a note-taking application is two products in one
-package: Notes alone brings fifteen TipTap packages, and its release cadence and
-support expectations are nothing like a primitive's. It stays in the repo as a
-reference implementation and a demo — read it, copy it, or lift it into the
-product that renders it.
-
-What era DOES publish is the part that generalises: `@signal9/era-ui/styles/prose`
-is the document typography Notes uses, available to anyone building an editor.
-
-Read as a reference, the integration is: a sidebar with filter, pin, and delete; a TipTap
-document with a `/` command menu and a selection toolbar; and persistence to
-`localStorage` under `era-ui:notes`.
-
-## Peer dependencies
-
-Install alongside the library (they are not bundled):
-
-```
-@tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/suggestion
-@tiptap/extension-code-block-lowlight @tiptap/extension-details
-@tiptap/extension-highlight @tiptap/extension-image
-@tiptap/extension-placeholder @tiptap/extension-table
-@tiptap/extension-task-item @tiptap/extension-task-list
-@tiptap/extension-typography @tiptap/extension-unique-id
-lowlight tiptap-markdown
-```
-
-## Props
-
-| Prop         | Type             | Default            | Notes                                                             |
-| ------------ | ---------------- | ------------------ | ----------------------------------------------------------------- |
-| `store`      | `NotesStore`     | created internally | Bring your own; when set, the host owns its lifecycle.            |
-| `adapter`    | `NotesAdapter`   | `localStorage`     | Persistence for the internally-created store.                     |
-| `storageKey` | `string`         | `era-ui:notes`     | Key for the default adapter.                                      |
-| `noteId`     | `string \| null` | `null`             | `$bindable` — the open note, for deep-linking or session restore. |
-| `seed`       | `NoteInit[]`     | —                  | Created only when storage comes back empty (first-run sample).    |
-
-## Persistence
-
-Persistence is one small interface, so server-backed hosting is a drop-in swap —
-`load`/`save` may be sync or async:
-
-```ts
-import { Notes, NotesStore } from '$apps/index.js'; // in-repo; not published
-
-const store = new NotesStore({
-	adapter: {
-		load: () => fetch('/api/notes').then((r) => r.json()),
-		save: (notes) => fetch('/api/notes', { method: 'PUT', body: JSON.stringify(notes) })
-	}
-});
-```
-
-`NotesStore` is the reactive source of truth (`notes`, `ordered`, `loading`,
-`status`, `lastError`) with `create` / `update` / `remove` / `togglePin` /
-`setIcon` / `search` / `toMarkdown` / `flush`. Writes are debounced and
-coalesced, so a burst of keystrokes costs one `save`.
-
-## The heading index
-
-Every document is also a tree. `buildGlobalTree()` walks heading structure,
-`treeToText()` renders it as a table of contents a model can read, and
-`extractSection(title, doc, headingId)` returns just the requested slice as
-structure-preserving markdown — reasoning-based retrieval rather than
-embeddings. Heading ids are stable (`@tiptap/extension-unique-id`), so a section
-address survives edits above it.
-
-## Notes
-
-- Keyboard: `/` opens the command menu, `Mod-K` links a selection, `Mod-S`
-  flushes pending writes immediately.
-- The slash menu and selection toolbar are real Svelte components mounted into
-  the document root, so they follow every axis — density tiers, surface chrome,
-  corners, motion, font — instead of carrying their own hardcoded styling.
-- `@tiptap/extension-mathematics` is deliberately absent: it needs KaTeX's
-  stylesheet and fonts to render. Spread `noteExtensions` and add it yourself if
-  you want math.

package/dist/docs/scroll-area.md

@@ -1,7 +0,0 @@
-## Notes
-
-- For a region that should scroll but show no scrollbar at all — an overflowing
-  tab strip, a chip rail, a small pane handle — you don't need ScrollArea: put
-  the `scrollbar-none` CSS utility on the overflowing element. See
-  [Utilities](/utilities.md). ScrollArea is for the case where the bar itself is
-  part of the design.

package/dist/docs/separator.md

@@ -1,20 +0,0 @@
-## Usage
-
-```svelte
-<script>
-	import { Separator } from '@signal9/era-ui/separator';
-</script>
-
-<p>
-	era
-	<Separator variant="slant" decorative />
-	ui
-	<Separator variant="slant" decorative />
-	separator
-</p>
-```
-
-## Notes
-
-- `variant="slant"` is for inline text separators only, such as breadcrumbs, compact metadata, and split titles.
-- Mark slant separators `decorative` unless they communicate a meaningful boundary to assistive technology.

package/dist/docs/table.md

@@ -1,35 +0,0 @@
-## Usage
-
-```svelte
-<script lang="ts">
-	import { Table } from '@signal9/era-ui/table';
-
-	const rows = [
-		{ id: 1, name: 'Ada', role: 'Engineer' },
-		{ id: 2, name: 'Grace', role: 'Designer' }
-	];
-</script>
-
-<Table.Root>
-	<Table.Head>
-		<Table.Row>
-			<Table.HeadCell>Name</Table.HeadCell>
-			<Table.HeadCell>Role</Table.HeadCell>
-		</Table.Row>
-	</Table.Head>
-	<Table.Body>
-		{#each rows as row (row.id)}
-			<Table.Row>
-				<Table.Cell>{row.name}</Table.Cell>
-				<Table.Cell>{row.role}</Table.Cell>
-			</Table.Row>
-		{/each}
-	</Table.Body>
-</Table.Root>
-```
-
-## Notes
-
-- Composition-first API (like `Table.Row`), not a single data-driven component — keeps layout decisions local to the call site.
-- All parts pass through `class` and standard HTML attrs.
-- Density tokens drive row height and cell padding.

package/dist/docs/utilities.d.ts

@@ -1,4 +0,0 @@
-import { type CssUtility } from './css-utilities.js';
-export declare const utilities: CssUtility[];
-export declare const utilitiesDoc: string;
-export type { CssUtility };

package/dist/docs/utilities.js

@@ -1,15 +0,0 @@
-/*
- * Runtime side of the CSS-utility docs: globs the shipped stylesheets and parses
- * their `@utility` blocks. The node build script (scripts/build-llm-docs.ts)
- * feeds the same parser from the filesystem, so the site and the generated
- * markdown can never disagree about what era exposes.
- */
-import { buildUtilitiesDoc, parseUtilities } from './css-utilities.js';
-const cssSources = import.meta.glob('../styles/**/*.css', {
-    query: '?raw',
-    import: 'default',
-    eager: true
-});
-const sources = Object.fromEntries(Object.entries(cssSources).map(([path, body]) => [path.replace(/^\.\.\/styles\//, ''), body]));
-export const utilities = parseUtilities(sources);
-export const utilitiesDoc = buildUtilitiesDoc(utilities);

package/dist/generated-docs/accordion.md

@@ -1,57 +0,0 @@
-# Accordion
-
-Collapsible content sections.
-
-## Import
-
-```ts
-import * as Accordion from "@signal9/era-ui/accordion";
-```
-
-Composed from sub-components — compose explicitly at the call site:
-
-- `Accordion.Root`
-- `Accordion.Item`
-- `Accordion.Header`
-- `Accordion.Trigger`
-- `Accordion.Content`
-
-## Accordion.Root
-
-Inherits all props from `Accordion.RootProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## Accordion.Item
-
-Inherits all props from `Accordion.ItemProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## Accordion.Header
-
-Inherits all props from `Accordion.HeaderProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## Accordion.Trigger
-
-Inherits all props from `OwnedPartProps<Accordion.TriggerProps>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## Accordion.Content
-
-Inherits all props from `Accordion.ContentProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |

package/dist/generated-docs/alert-dialog.md

@@ -1,91 +0,0 @@
-# Alert Dialog
-
-A modal confirmation before destructive actions.
-
-## Import
-
-```ts
-import * as AlertDialog from "@signal9/era-ui/alert-dialog";
-```
-
-Composed from sub-components — compose explicitly at the call site:
-
-- `AlertDialog.Root`
-- `AlertDialog.Trigger`
-- `AlertDialog.Content`
-- `AlertDialog.Overlay`
-- `AlertDialog.Title`
-- `AlertDialog.Description`
-- `AlertDialog.Cancel`
-- `AlertDialog.Action`
-
-## AlertDialog.Root
-
-Inherits all props from `AlertDialog.RootProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `children?` | `Snippet` | — | — |
-| `open?` | `(forwarded)` | `false` | bindable |
-
-## AlertDialog.Trigger
-
-Inherits all props from `WithoutChildrenOrChild<AlertDialog.TriggerProps>`.
-Inherits all props from `ButtonVariants`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `children?` | `Snippet` | — | — |
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## AlertDialog.Content
-
-Inherits all props from `OwnedPartProps<AlertDialog.ContentProps>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## AlertDialog.Overlay
-
-Inherits all props from `AlertDialog.OverlayProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## AlertDialog.Title
-
-Inherits all props from `AlertDialog.TitleProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## AlertDialog.Description
-
-Inherits all props from `AlertDialog.DescriptionProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## AlertDialog.Cancel
-
-Inherits all props from `WithoutChildrenOrChild<AlertDialog.CancelProps>`.
-Inherits all props from `Omit<ButtonVariants, 'active'>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `children?` | `Snippet` | — | — |
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## AlertDialog.Action
-
-Inherits all props from `WithoutChildrenOrChild<AlertDialog.ActionProps>`.
-Inherits all props from `Omit<ButtonVariants, 'active'>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `children?` | `Snippet` | — | — |
-| `ref?` | `(forwarded)` | `null` | bindable |

package/dist/generated-docs/aspect-ratio.md

@@ -1,17 +0,0 @@
-# Aspect Ratio
-
-Maintains a specified aspect ratio for content.
-
-## Import
-
-```ts
-import { AspectRatio } from "@signal9/era-ui/aspect-ratio";
-```
-
-## Props
-
-Inherits all props from `PartProps<AspectRatio.RootProps>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |

package/dist/generated-docs/avatar.md

@@ -1,39 +0,0 @@
-# Avatar
-
-An image with optional initials/icon fallback.
-
-## Import
-
-```ts
-import * as Avatar from "@signal9/era-ui/avatar";
-```
-
-Composed from sub-components — compose explicitly at the call site:
-
-- `Avatar.Root`
-- `Avatar.Image`
-- `Avatar.Fallback`
-
-## Avatar.Root
-
-Inherits all props from `PartProps<Avatar.RootProps>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## Avatar.Image
-
-Inherits all props from `Avatar.ImageProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## Avatar.Fallback
-
-Inherits all props from `PartProps<Avatar.FallbackProps>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `(forwarded)` | `null` | bindable |

package/dist/generated-docs/badge.md

@@ -1,41 +0,0 @@
-# Badge
-
-A small label for status or categorization.
-
-## Import
-
-```ts
-import { Badge } from "@signal9/era-ui/badge";
-```
-
-## Props
-
-Inherits all props from `HTMLAttributes<HTMLSpanElement>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `HTMLSpanElement \| null` | `null` | bindable |
-| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning' \| 'info'` | `'default'` | — |
-| `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
-an icon in `children`: the label then gets its own box, which is the only
-place era's ink centring can reach. |
-| `children?` | `Snippet` | — | — |
-
-## Usage
-
-```svelte
-<script>
-	import { Badge } from '@signal9/era-ui/badge';
-</script>
-
-<Badge>draft</Badge>
-<Badge tone="accent">new</Badge>
-<Badge tone="success">passing</Badge>
-<Badge tone="destructive">failing</Badge>
-```
-
-## Notes
-
-- Non-interactive. For dismissible tokens use `Chip`. For labelled pairs use `KV`.
-- Uses the `xxs` tier tokens (height, radius, inset).
-- Inter-icon gap tightens to `--era-inset-pill` when an SVG is present.

package/dist/generated-docs/bar.md

@@ -1,41 +0,0 @@
-# Bar
-
-A flex container for toolbars and headers, in three heights.
-
-## Import
-
-```ts
-import { Bar } from "@signal9/era-ui/bar";
-```
-
-## Props
-
-Inherits all props from `HTMLAttributes<HTMLDivElement>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `size?` | `'chip' \| 'control' \| 'bar'` | `'bar'` | Height tier (scales with density). Default `lg` — a full toolbar. |
-| `content?` | `BarContent` | — | Tier of the controls inside — drives the bar's padding and gap so they
-stay concentric to them. Omit this for the next canonical rung, or name
-the actual tier when the contents are smaller. |
-| `divider?` | `boolean` | `false` | The flush cap-a-panel chrome: an outset rule below, and a rounded
-BOTTOM only — the top defers to the panel's own radius.
-THE BOTTOM RADIUS IS LOAD-BEARING FOR THE RULE. The divider is an
-outset `box-shadow`, so it follows the box's corners: the rounded
-bottom is what curves the line up at the ends and makes the bar read
-as a long pill. Overriding the radius therefore changes the RULE, not
-just the corners. Measured against `cn`:
-- `rounded-none` drops both — a square bar with a dead-straight rule.
-  That is the intended square mode (an in-app Notes bar passes it).
-- `rounded-b-*` or `rounded-b-none` replaces the curve — this is the
-  one that surprises, because the rule changes shape when the caller
-  thought they were only squaring a corner.
-- `rounded-t-*` is SAFE: it wins against `rounded-t-none` and leaves
-  `rounded-b-control` standing, so the curve survives.
-A consumer lost the curve this way. The coupling was already written
-down — on the variant, inside `<script module>`, where someone
-hovering this prop never reaches it. Docs are only as good as the
-place the reader is standing. |
-| `topology?` | `'nested' \| 'docked'` | `'nested'` | `docked` removes one or more exposed curves; strict radius nesting does not apply. |
-| `children?` | `Snippet` | — | — |

package/dist/generated-docs/button-group.md

@@ -1,19 +0,0 @@
-# Button Group
-
-Groups buttons with consistent spacing.
-
-## Import
-
-```ts
-import { ButtonGroup } from "@signal9/era-ui/button-group";
-```
-
-## Props
-
-Inherits all props from `HTMLAttributes<HTMLDivElement>`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `children?` | `Snippet` | — | — |
-| `orientation?` | `'horizontal' \| 'vertical'` | `'horizontal'` | — |

package/dist/generated-docs/button.md

@@ -1,117 +0,0 @@
-# Button
-
-A flexible button or link element.
-
-## Import
-
-```ts
-import { Button } from "@signal9/era-ui/button";
-```
-
-## Props
-
-Inherits all props from `Button.RootProps`.
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning' \| 'info'` | `'default'` | — |
-| `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | — |
-| `variant?` | `'filled' \| 'link'` | `'filled'` | — |
-| `active?` | `boolean` | `false` | — |
-| `icon?` | `boolean` | `false` | — |
-| `loading?` | `boolean` | `false` | In flight: disables the button, sets `aria-busy`, and puts a spinner
-over the label.
-THE GEOMETRY DOES NOT MOVE. That is the requirement, not a detail. A
-button is loading because it was just CLICKED, so anything `loading`
-changes about the box moves the page under the pointer that is still
-on it — and a spinner PREPENDED to the label (what this used to do)
-costs an icon's width plus a gap, measured on a wrapping header row
-that reflowed everything beside it. A consumer hit exactly that and
-stopped using the prop, hand-rolling `disabled` + `aria-busy`
-instead, which is the report that produced this note.
-So the spinner is absolutely positioned and takes no part in the
-flex layout, and the label goes to `opacity-0` rather than being
-unmounted: the box that holds the width stays, and the text stays in
-the accessibility tree as the button's accessible name.
-The visible label is therefore HIDDEN in flight — the one thing this
-trades away, and the reason `loadingLabel` exists.
-IF YOU DO NOT WANT A SPINNER, use `busy`. Not showing one is a
-supported posture, not a legacy one — see that prop. |
-| `busy?` | `boolean` | `false` | In flight, WITHOUT a spinner: disables the button and sets `aria-busy`,
-and changes nothing else. The label stays visible and legible.
-This exists because "show a spinner" is a taste, not a requirement,
-and era had only one answer. A consumer whose house style is that
-spinners should not appear had to spell the posture out themselves —
-`disabled` plus a restated `aria-busy` — and rely on knowing that
-`restProps` spreads last, which is a real fact about this component
-that no reader should have to depend on. Two words for two postures
-is clearer than one word plus a workaround.
-`loading` implies this: it is `busy` plus the spinner and the hidden
-label. What you get from `busy` alone is a control that is visibly
-disabled (the era-interactive opacity) and announced as busy, with
-its geometry and its ink untouched — which is also why it needs no
-`loadingLabel`: nothing about the button changed except that you
-cannot press it.
-Reported by a consumer whose user asked for no spinners anywhere.
-They were right that a fix for the width shift did not answer it: a
-spinner that no longer moves its neighbours is still a spinner. |
-| `loadingLabel?` | `string` | — | Screen-reader-only label announced while `loading` is true. |
-| `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
-an icon in `children`: the label then gets its own box, which is the only
-place era's ink centring can reach (see era-label-ink). |
-| `trail?` | `Snippet` | — | Icon rendered AFTER the label, outside it. Same reason as `lead`. |
-| `caps?` | `boolean` | `false` | Trim this label to the CAP band instead of the x-height band — for a
-label whose ink runs cap-to-baseline: "PDF", "CSV", "OK", "API".
-THE NAME SAYS CAPS AND THE MECHANISM IS DESCENDERS. Worth knowing before
-you reach for it, because it decides where it helps. A controlled A/B on
-one real button — same element, same classes, only the STRING changing —
-says case is not the variable at all:
-  Save   asc 9  desc 0   ink 1.28px high
-  SAVE   asc 9  desc 0   ink 1.28px high   ← identical to "Save"
-  Savg   asc 9  desc 3   ink 0.22px low
-  savg   asc 7  desc 3   ink 1.22px low
-The ex band runs x-height to baseline, so ink above the x-height pulls
-the visual centre up and ink below the baseline pushes it back down;
-(xh − asc + desc)/2 predicts every row within 0.3px. A caps string is
-simply one that always has an ascender and never a descender, which is
-why the cap band boxes it exactly. "Save" has the same offset and this
-prop would fix it too. Measured by signalnine.org and reproduced here.
-WHAT IT COSTS, and why it is not the default. A fixed band gives every
-label the SAME baseline whatever it contains — measured spread across
-Save/Savg/save/savg/SAVE/PDF/Cancel/"Copy page" is 0.00px. Changing one
-label's band moves that label alone: in a Bar holding bold/italic/PDF/
-publish, the caps label sits 1.06px below the other three. So this trades
-a uniform offset the eye cannot see for a local misalignment it can, and
-it is the right trade only when the label has no neighbour to align with
-— a lone action, a label paired with an icon (the reported case, where
-the comparison is against an optically-centred glyph rather than against
-other text). Beside other labels in a bar, prefer leaving it off.
-A PROP because nothing can infer it: `text-transform: uppercase` is a
-different question (a label typed "PDF" carries no transform), and a
-snippet's text cannot be read before it renders.
-Only reaches the label when `lead`/`trail` give it its own box. Without
-one the label is an anonymous flex item that no selector can address,
-which is the whole reason those snippets exist. |
-| `topology?` | `'bounded' \| 'docked'` | `'bounded'` | `docked` joins this control to a neighbour and removes one or more curves. |
-| `children?` | `Snippet` | — | — |
-| `ref?` | `(forwarded)` | `null` | bindable |
-
-## Usage
-
-```svelte
-<script>
-	import { Button } from '@signal9/era-ui/button';
-</script>
-
-<Button onclick={() => console.log('clicked')}>Save</Button>
-<Button tone="accent" size="chip">Confirm</Button>
-<Button tone="destructive" variant="link">Delete</Button>
-<Button icon size="icon" aria-label="Close"><X /></Button>
-```
-
-## Notes
-
-- Heights, radii, paddings, and gaps come from density tokens — never hard-code px.
-- `link` variant intentionally does not change color on hover (underline only) so it reads as static prose until confirmed interactive.
-- `variant="link"` is for a _control_ that should look like a link (a button that reveals a panel, a destructive action in a row). For a link in body copy or prose, use the `era-link` CSS utility on an `<a>` instead — see [Utilities](/utilities.md).
-- For a segmented row of buttons, use `ButtonGroup`.