npm - @ultimat3/ui - Versions diffs - 1.0.0 → 1.2.0 - Mend

@ultimat3/ui 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/CATALOG.md +848 -0
package/README.md +87 -3
package/package.json +8 -6
package/src/catalog/build-catalog.ts +32 -0
package/src/catalog/parse-component.ts +142 -0
package/src/catalog/render-catalog.ts +116 -0
package/src/components/AppShell.module.scss +110 -0
package/src/components/AppShell.tsx +61 -0
package/src/components/Button.module.scss +2 -46
package/src/components/Dialog.module.scss +1 -4
package/src/components/Drawer.module.scss +1 -3
package/src/components/IconButton.module.scss +4 -34
package/src/components/PageHeader.module.scss +47 -0
package/src/components/PageHeader.tsx +46 -0
package/src/components/Section.module.scss +38 -0
package/src/components/Section.tsx +55 -0
package/src/components/Tabs.module.scss +1 -4
package/src/components/Toolbar.module.scss +26 -0
package/src/components/Toolbar.tsx +48 -0
package/src/components/app-shell-view.ts +35 -0
package/src/components/heading-level.ts +25 -0
package/src/errors.ts +30 -3
package/src/i18n-keys.ts +4 -0
package/src/index.ts +27 -1
package/src/theme/brand.ts +155 -0
package/src/tokens/_colors.scss +11 -7
package/src/tokens/_mixins.scss +84 -0
package/src/tokens/contrast.ts +63 -0
package/src/tokens/tokens.ts +9 -7

package/README.md CHANGED Viewed

@@ -2,6 +2,10 @@
 SolidJS design system. Semantic tokens, SCSS modules, dark + RTL by construction.
+**[`CATALOG.md`](CATALOG.md) is the reference** — every component, every prop, every
+token, generated from source by `bun run catalog` and drift-checked by
+`catalog.test.ts`. Read it instead of reading `src/`.
 ## Token roles
 Every colour in every component is one of these, stored as **space-separated RGB
@@ -31,6 +35,85 @@ Scales: `--space-*` (4px base), `--text-*` (fluid `clamp()`), `--radius-*`,
 | No physical directions | `margin-inline`, `inset-inline-start`, `text-align: start` — RTL needs no second stylesheet |
 | No hardcoded strings | labels are props, or `t()` through `UI_KEYS` |
 | One token source | `src/tokens/*.scss` is canonical; `tokens.ts` mirrors it and `x verify` fails on drift |
+| AA contrast, both themes | `contrast.test.ts` measures every pairing a component renders — text, status fills, soft tints, focus rings, borders |
+## Contrast
+`As of 2026-08` every foreground/background pairing the components render clears
+**WCAG AA (4.5:1)** in light *and* dark, and borders clear a 1.4:1 visible-edge floor.
+It is measured, not asserted: `roleContrast('dark', 'fg-muted', 'surface-raised')`
+returns the number, and the test fails the build on a regression.
+```ts
+import { AA_TEXT, contrastRatio, roleContrast } from '@ultimat3/ui';
+roleContrast('dark', 'accent', 'bg') >= AA_TEXT;   // true
+contrastRatio('31 110 178', '253 246 240');        // 4.99 — check a brand before shipping it
+```
+## Page layout
+Four composites cover the frame of an app screen. Below them are `Container`,
+`Stack` and `Grid`; there is no fifth way to build a page.
+| Component | Renders | Use for |
+|---|---|---|
+| `AppShell` | skip link + `header` / `nav` / `main` / `footer` landmarks on a CSS grid | the frame every screen sits in — one per document |
+| `PageHeader` | breadcrumbs, the page's one `h1`, description, actions | the top of a screen |
+| `Section` | a labelled `section` with a real heading and `aria-labelledby` | second-level structure inside a page |
+| `Toolbar` | `role="toolbar"` strip, start + end slots, arrow-key roving | filters and actions above a table or list |
+`AppShell` holds no state: below `md` the sidebar becomes a band above the content,
+and an off-canvas menu is `Drawer` — the one component that already does that.
+Heading levels are props (`headingTag`, `nextHeadingLevel`), so a nested `Section`
+never skips a level.
+```tsx
+<AppShell header={<Toolbar label={t('nav.main')}>{nav}</Toolbar>} sidebar={<SideNav />}>
+  <PageHeader
+    title={t('orders.title')}
+    description={t('orders.subtitle')}
+    breadcrumbs={[{ label: t('nav.home'), href: '/' }, { label: t('orders.title') }]}
+    actions={<Button>{t('orders.new')}</Button>}
+  />
+  <Section title={t('orders.recent')} actions={<Toolbar label={t('orders.filters')}>{filters}</Toolbar>}>
+    <DataTable caption={t('orders.title')} columns={columns} rows={rows} rowKey={(row) => row.id} />
+  </Section>
+</AppShell>
+```
+## Branding
+`defineTheme()` is the **only** seam for restyling. No SCSS `@use ... with ()`
+override, no forked package, no second entry point — one call, validated, rendered
+as the custom properties that beat `theme.scss` at every specificity level it emits.
+```ts
+import { brandStyleTag, defineTheme } from '@ultimat3/ui';
+export const brand = defineTheme({
+  colors: {
+    light: { accent: '99 46 210', 'accent-strong': '76 32 168' },
+    dark: { accent: '178 148 255', 'accent-strong': '198 176 255' },
+  },
+  radius: { md: '0.125rem', lg: '0.25rem' },
+  font: { sans: "Inter, system-ui, sans-serif" },
+});
+// in <head>, AFTER global.scss
+`${brandStyleTag(brand)}`;
+```
+| Slot | Accepts | Refused with |
+|---|---|---|
+| `colors.light` / `colors.dark` | any `ColorRole`, as `R G B` channels | `X_TOKEN_UNKNOWN` for the role, `X_UI_INVALID_VALUE` for the value |
+| `radius` | any `RadiusName`, as a bare CSS length | `X_TOKEN_UNKNOWN` / `X_UI_INVALID_VALUE` |
+| `font` | `sans`, `mono`, as a `font-family` list | `X_TOKEN_UNKNOWN` / `X_UI_INVALID_VALUE` |
+Values are validated, never escaped: the output goes into a `<style>` element, so
+anything carrying `;`, `}` or `</style>` is a refusal at the app's entry point rather
+than a CSS injection. Every component in the system follows the override — they only
+ever read the roles, never a colour.
 ## Example
@@ -95,14 +178,15 @@ Content-Security-Policy: script-src 'self' 'sha256-…'   # themeInlineScriptCsp
 | Code | When |
 |---|---|
-| `X_TOKEN_UNKNOWN` | a token role the SCSS source does not define |
+| `X_TOKEN_UNKNOWN` | a token role the SCSS source does not define — including a `defineTheme()` override of a role, radius or font slot that is not in the scale |
 | `X_THEME_INVALID` | a theme other than `light` / `dark` |
 | `X_UI_RUNTIME_MISSING` | reactive context or DOM APIs used where they do not exist |
-| `X_UI_INVALID_VALUE` | `<Money>` given a float, `<DateTime>` given an unparseable instant, `<Image>` given mixed `w`/`x` descriptors or one dimension without the other |
+| `X_UI_INVALID_VALUE` | `<Money>` given a float, `<DateTime>` given an unparseable instant, `<Image>` given mixed `w`/`x` descriptors or one dimension without the other, a heading level off 1–6, or a `defineTheme()` value that is not a token value |
 ## Commands
 ```
-bun test                 # token parity, theme resolution, cx, a11y, formatting cores
+bun test                 # token parity, contrast, theme resolution, brand, catalog drift, a11y
 bun run typecheck
+bun run catalog          # regenerate CATALOG.md after changing a component's props
 ```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/ui",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
   "license": "MIT",
   "type": "module",
@@ -23,6 +23,7 @@
   "files": [
     "src",
     "!src/**/*.test.ts",
+    "CATALOG.md",
     "README.md",
     "LICENSE"
   ],
@@ -31,13 +32,14 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "bun test"
+    "test": "bun test",
+    "catalog": "bun run src/catalog/build-catalog.ts"
   },
   "dependencies": {
-    "@ultimat3/core": "1.0.0",
-    "@ultimat3/i18n": "1.0.0",
-    "@ultimat3/money": "1.0.0",
-    "@ultimat3/time": "1.0.0"
+    "@ultimat3/core": "1.2.0",
+    "@ultimat3/i18n": "1.2.0",
+    "@ultimat3/money": "1.2.0",
+    "@ultimat3/time": "1.2.0"
   },
   "peerDependencies": {
     "solid-js": "^2.0.0"

package/src/catalog/build-catalog.ts ADDED Viewed

@@ -0,0 +1,32 @@
+// The one walk over `src/components/*.tsx` that both the writer and the drift test use, so the
+// committed CATALOG.md and the test's expectation can never come from two different file sets.
+import type { ComponentDoc } from './parse-component';
+import { parseComponents } from './parse-component';
+import { renderCatalog } from './render-catalog';
+const COMPONENTS_DIR = new URL('../components/', import.meta.url).pathname;
+export const CATALOG_PATH = new URL('../../CATALOG.md', import.meta.url).pathname;
+/** Alphabetical by file, so the page's order is the order an agent scans for a name. */
+export async function collectComponents(): Promise<ComponentDoc[]> {
+  const files: string[] = [];
+  for await (const file of new Bun.Glob('*.tsx').scan({ cwd: COMPONENTS_DIR })) {
+    files.push(file);
+  }
+  files.sort();
+  const docs: ComponentDoc[] = [];
+  for (const file of files) {
+    docs.push(...parseComponents(await Bun.file(`${COMPONENTS_DIR}${file}`).text()));
+  }
+  return docs;
+}
+export async function buildCatalog(): Promise<string> {
+  return renderCatalog(await collectComponents());
+}
+if (import.meta.main) {
+  await Bun.write(CATALOG_PATH, await buildCatalog());
+}

package/src/catalog/parse-component.ts ADDED Viewed

@@ -0,0 +1,142 @@
+// Reads a component's contract out of its own source: the header comment, the exported
+// component(s), and every prop with its type and doc line. Text in, data out — no filesystem, so
+// the rule is testable, and the catalog it feeds cannot describe a component that isn't there.
+export interface PropDoc {
+  readonly name: string;
+  /** Normalised: `| undefined` stripped, whitespace collapsed. */
+  readonly type: string;
+  readonly required: boolean;
+  readonly doc: string;
+}
+export interface ComponentDoc {
+  readonly name: string;
+  /** The file's header comment, which is the component's one-paragraph purpose. */
+  readonly summary: string;
+  readonly props: readonly PropDoc[];
+}
+// The generic slot is optional: `DataTable<Row>(props: DataTableProps<Row>)` is still a component.
+const COMPONENT_PATTERN = /export function ([A-Z]\w*)(?:<[^>]*>)?\(\s*props: (\w+)/g;
+/** Every exported component in one source file, in source order. */
+export function parseComponents(source: string): ComponentDoc[] {
+  const summary = headerComment(source);
+  const out: ComponentDoc[] = [];
+  for (const match of source.matchAll(COMPONENT_PATTERN)) {
+    const [, name = '', propsType = ''] = match;
+    out.push({ name, summary, props: parseProps(source, propsType) });
+  }
+  return out;
+}
+/** The `// …` block at the top of the file, before the first import. */
+export function headerComment(source: string): string {
+  const lines: string[] = [];
+  for (const line of source.split('\n')) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('//')) {
+      lines.push(trimmed.slice(2).trim());
+      continue;
+    }
+    if (lines.length > 0) break;
+    if (trimmed !== '') break;
+  }
+  return lines.join(' ').trim();
+}
+/** The members of `export interface <name> { … }`, generics and all. */
+export function parseProps(source: string, interfaceName: string): PropDoc[] {
+  const body = interfaceBody(source, interfaceName);
+  if (body === undefined) return [];
+  const props: PropDoc[] = [];
+  let doc: string[] = [];
+  let buffer = '';
+  let depth = 0;
+  for (const raw of body.split('\n')) {
+    const line = raw.trim();
+    if (line === '') continue;
+    if (buffer === '' && isComment(line)) {
+      doc.push(stripComment(line));
+      continue;
+    }
+    buffer = buffer === '' ? line : `${buffer} ${line}`;
+    depth = nesting(buffer);
+    // A member ends at a `;` that is not inside a function type or an inline object type.
+    if (depth > 0 || !buffer.endsWith(';')) continue;
+    const prop = toProp(buffer, doc.join(' ').trim());
+    if (prop !== undefined) props.push(prop);
+    buffer = '';
+    doc = [];
+  }
+  return props;
+}
+function isComment(line: string): boolean {
+  return line.startsWith('//') || line.startsWith('/*') || line.startsWith('*');
+}
+function stripComment(line: string): string {
+  return line
+    .replace(/^\/\*\*?/, '')
+    .replace(/^\/\//, '')
+    .replace(/^\*+\/?/, '')
+    .replace(/\*\/$/, '')
+    .trim();
+}
+/**
+ * Brackets only — never `<`/`>`, because `=>` in a function-type prop would read as a closing
+ * angle and end the member one line early.
+ */
+function nesting(text: string): number {
+  let depth = 0;
+  for (const char of text) {
+    if (char === '(' || char === '{' || char === '[') depth += 1;
+    if (char === ')' || char === '}' || char === ']') depth -= 1;
+  }
+  return depth;
+}
+function toProp(declaration: string, doc: string): PropDoc | undefined {
+  const match = /^(?:readonly\s+)?('[^']+'|"[^"]+"|\w+)(\?)?:\s*([\s\S]+);$/.exec(declaration);
+  if (match === null) return undefined;
+  const [, rawName = '', optional, rawType = ''] = match;
+  return {
+    name: rawName.replace(/^['"]|['"]$/g, ''),
+    type: normaliseType(rawType),
+    required: optional === undefined,
+    doc,
+  };
+}
+function normaliseType(type: string): string {
+  return (
+    type
+      .replace(/\s+/g, ' ')
+      .split('|')
+      .map((part) => part.trim())
+      // The empty part is a leading `|` in a wrapped union, which is style, not a member.
+      .filter((part) => part !== 'undefined' && part !== '')
+      .join(' | ')
+      .trim()
+  );
+}
+/** Brace-matched so a nested object type does not end the interface early. */
+function interfaceBody(source: string, interfaceName: string): string | undefined {
+  const header = new RegExp(`export interface ${interfaceName}(?:<[^>]*>)?\\s*\\{`).exec(source);
+  if (header === null) return undefined;
+  const start = header.index + header[0].length;
+  let depth = 1;
+  for (let i = start; i < source.length; i += 1) {
+    const char = source[i];
+    if (char === '{') depth += 1;
+    if (char === '}') depth -= 1;
+    if (depth === 0) return source.slice(start, i);
+  }
+  return undefined;
+}

package/src/catalog/render-catalog.ts ADDED Viewed

@@ -0,0 +1,116 @@
+// Renders the parsed component contracts plus the token vocabulary as one markdown page. The
+// point is an agent picking a component and a token WITHOUT opening source — so every table here
+// is derived, never typed by hand, and `catalog.test.ts` fails the build when the file drifts.
+import { BUTTON_VARIANTS, SIZES, TONES } from '../components/variants';
+import {
+  breakpointTokens,
+  COLOR_ROLES,
+  durationTokens,
+  easingTokens,
+  fontSizeTokens,
+  fontWeightTokens,
+  lineHeightTokens,
+  radiusTokens,
+  spaceTokens,
+  zTokens,
+} from '../tokens/tokens';
+import type { ComponentDoc } from './parse-component';
+export const CATALOG_BANNER =
+  '<!-- GENERATED by `bun run catalog` from packages/ui/src. Do not edit by hand. -->';
+/** Pipes inside a union type would end the markdown cell. */
+function cell(text: string): string {
+  return text.replace(/\|/g, '\\|');
+}
+function table(headers: readonly string[], rows: readonly (readonly string[])[]): string {
+  const head = `| ${headers.join(' | ')} |`;
+  const rule = `|${headers.map(() => '---').join('|')}|`;
+  return [head, rule, ...rows.map((row) => `| ${row.join(' | ')} |`)].join('\n');
+}
+function scaleTable(title: string, tokens: Readonly<Record<string, string>>): string {
+  const rows = Object.entries(tokens).map(([name, value]) => [`\`${name}\``, `\`${cell(value)}\``]);
+  return `### ${title}\n\n${table(['Token', 'Value'], rows)}`;
+}
+function componentSection(doc: ComponentDoc): string {
+  const rows = doc.props.map((prop) => [
+    `\`${prop.name}\``,
+    `\`${cell(prop.type)}\``,
+    prop.required ? 'yes' : '—',
+    cell(prop.doc),
+  ]);
+  const props =
+    rows.length === 0 ? '_No props._' : table(['Prop', 'Type', 'Required', 'Notes'], rows);
+  return `### ${doc.name}\n\n${doc.summary}\n\n${props}`;
+}
+export function renderCatalog(components: readonly ComponentDoc[]): string {
+  const index = components.map((doc) => `\`${doc.name}\``).join(' · ');
+  return `${CATALOG_BANNER}
+# @ultimat3/ui catalog
+Every component and every token, projected from source. Import all of it from \`@ultimat3/ui\`.
+${components.length} components: ${index}
+## Vocabulary
+One size scale, one tone scale, one variant scale — shared by every component that has them.
+${table(
+  ['Scale', 'Values'],
+  [
+    ['`Size`', SIZES.map((size) => `\`${size}\``).join(' · ')],
+    ['`Tone`', TONES.map((tone) => `\`${tone}\``).join(' · ')],
+    ['`ButtonVariant`', BUTTON_VARIANTS.map((variant) => `\`${variant}\``).join(' · ')],
+    [
+      '`SpaceStep`',
+      Object.keys(spaceTokens)
+        .map((step) => `\`${step}\``)
+        .join(' · '),
+    ],
+  ],
+)}
+## Components
+${components.map(componentSection).join('\n\n')}
+## Tokens
+Colour roles are the only colours that exist. Use them through SCSS (\`t.role('accent')\`) or
+CSS (\`rgb(var(--color-accent) / 0.12)\`); \`colorRgb(theme, role)\` resolves one for canvas,
+charts and email.
+### Colour roles
+${table(
+  ['Role', 'Custom property'],
+  COLOR_ROLES.map((role) => [`\`${role}\``, `\`--color-${role}\``]),
+)}
+${scaleTable('Space — `--space-*`', spaceTokens)}
+${scaleTable('Radius — `--radius-*`', radiusTokens)}
+${scaleTable('Font size — `--text-*`', fontSizeTokens)}
+${scaleTable('Font weight — `--weight-*`', fontWeightTokens)}
+${scaleTable('Line height — `--leading-*`', lineHeightTokens)}
+${scaleTable('Duration — `--duration-*`', durationTokens)}
+${scaleTable('Easing — `--easing-*`', easingTokens)}
+${scaleTable('Z-index — `--z-*`', zTokens)}
+${scaleTable('Breakpoints — `@include t.respond-to(<name>)`', breakpointTokens)}
+`;
+}

package/src/components/AppShell.module.scss ADDED Viewed

@@ -0,0 +1,110 @@
+@use '../tokens' as t;
+// Grid areas, not floats or fixed positioning: the areas re-flow at one breakpoint and the
+// writing mode is handled by the grid itself, so RTL needs no second rule.
+.shell {
+  display: grid;
+  grid-template-areas: 'header' 'sidebar' 'main' 'footer';
+  grid-template-rows: auto auto 1fr auto;
+  min-block-size: 100dvh;
+  background: t.role('bg');
+  color: t.role('fg');
+  @include t.respond-to(md) {
+    grid-template-columns: var(--shell-sidebar, 16rem) minmax(0, 1fr);
+    grid-template-areas: 'header header' 'sidebar main' 'footer footer';
+    grid-template-rows: auto 1fr auto;
+  }
+}
+.no-sidebar {
+  grid-template-areas: 'header' 'main' 'footer';
+  grid-template-rows: auto 1fr auto;
+  @include t.respond-to(md) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: 'header' 'main' 'footer';
+  }
+}
+// Off-screen but focusable — the first Tab on any page reveals it.
+.skip {
+  @include t.focus-ring;
+  @include t.transition(translate);
+  position: fixed;
+  z-index: t.z(skip-nav);
+  inset-block-start: t.space(2);
+  inset-inline-start: t.space(2);
+  padding-block: t.space(2);
+  padding-inline: t.space(4);
+  border: 1px solid t.role('line');
+  border-radius: t.radius(md);
+  background: t.role('surface-raised');
+  color: t.role('fg-strong');
+  box-shadow: t.shadow(md);
+  font-weight: t.weight(semibold);
+  text-decoration: none;
+  translate: 0 -400%;
+  &:focus-visible {
+    translate: 0 0;
+  }
+}
+.header {
+  @include t.row(t.space(4), center, space-between);
+  grid-area: header;
+  padding-block: t.space(3);
+  padding-inline: t.space(4);
+  border-block-end: 1px solid t.role('line');
+  background: t.role('surface');
+}
+.sticky {
+  position: sticky;
+  z-index: t.z(sticky);
+  inset-block-start: 0;
+}
+// Below `md` the sidebar is a band above the content; from `md` it is the inline-start column.
+.sidebar {
+  @include t.custom-scrollbar;
+  grid-area: sidebar;
+  padding: t.space(4);
+  border-block-end: 1px solid t.role('line');
+  background: t.role('bg-soft');
+  overflow: auto;
+  // Deliberately not sticky: a sticky sidebar and a sticky header both anchored at 0 overlap,
+  // and the header's height is not knowable in CSS. The page scrolls as one.
+  @include t.respond-to(md) {
+    border-block-end: 0;
+    border-inline-end: 1px solid t.role('line');
+  }
+}
+.main {
+  grid-area: main;
+  min-inline-size: 0;
+  padding-block: t.space(6);
+  padding-inline: t.space(4);
+  // The skip link moves focus here; the ring would otherwise draw around the whole page.
+  &:focus-visible {
+    outline: none;
+  }
+  @include t.respond-to(md) {
+    padding-inline: t.space(6);
+  }
+}
+.footer {
+  grid-area: footer;
+  padding-block: t.space(5);
+  padding-inline: t.space(4);
+  border-block-start: 1px solid t.role('line');
+  background: t.role('surface');
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+}

package/src/components/AppShell.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+// The page frame every app screen sits in: skip link, banner, navigation, main, contentinfo.
+// Stateless on purpose — below `md` the sidebar becomes a band above the content instead of
+// growing an open/closed flag, because an off-canvas menu is already `Drawer` and axiom 1 allows
+// exactly one of those.
+import type { JSX } from 'solid-js';
+import { useId } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import styles from './AppShell.module.scss';
+import { shellIds } from './app-shell-view';
+export interface AppShellProps {
+  /** The page. Rendered inside the one `<main>`, which is the skip link's target. */
+  children: JSX.Element;
+  header?: JSX.Element | undefined;
+  /** Rendered inside a `<nav>` landmark at the inline start. */
+  sidebar?: JSX.Element | undefined;
+  footer?: JSX.Element | undefined;
+  /** Accessible name for the sidebar landmark. Defaults to the translated `ui.navigation`. */
+  sidebarLabel?: string | undefined;
+  /** Skip-link text. Defaults to the translated `ui.skip`. */
+  skipLabel?: string | undefined;
+  /** Sidebar track width at `md` and up. Any CSS length. */
+  sidebarWidth?: string | undefined;
+  /** Keeps the header pinned while the main region scrolls. */
+  stickyHeader?: boolean | undefined;
+  class?: string | undefined;
+}
+export function AppShell(props: AppShellProps): JSX.Element {
+  const ui = useUi();
+  const ids = shellIds(useId('shell'));
+  return (
+    <div
+      class={cx(styles['shell'], props.sidebar === undefined && styles['no-sidebar'], props.class)}
+      style={{ '--shell-sidebar': props.sidebarWidth ?? '16rem' }}
+    >
+      <a class={styles['skip']} href={ids.skipHref}>
+        {props.skipLabel ?? ui.t(UI_KEYS.skip)}
+      </a>
+      {props.header === undefined ? null : (
+        <header class={cx(styles['header'], props.stickyHeader !== false && styles['sticky'])}>
+          {props.header}
+        </header>
+      )}
+      {props.sidebar === undefined ? null : (
+        <nav class={styles['sidebar']} aria-label={props.sidebarLabel ?? ui.t(UI_KEYS.navigation)}>
+          {props.sidebar}
+        </nav>
+      )}
+      {/* tabindex="-1" is what makes the skip link move focus and not just the viewport. */}
+      <main id={ids.mainId} class={styles['main']} tabindex={-1}>
+        {props.children}
+      </main>
+      {props.footer === undefined ? null : <footer class={styles['footer']}>{props.footer}</footer>}
+    </div>
+  );
+}

package/src/components/Button.module.scss CHANGED Viewed

@@ -19,11 +19,7 @@
     transform: translateY(1px);
   }
-  &:disabled,
-  &[aria-disabled='true'] {
-    opacity: 0.55;
-    cursor: not-allowed;
-  }
+  @include t.disabled;
 }
 .full {
@@ -61,47 +57,7 @@
 // --- variants x tones --------------------------------------------------------
 // `--tone-*` is set by the tone class, so each variant is written once.
-.tone-neutral {
-  --tone: #{t.role('fg-strong')};
-  --tone-strong: #{t.role('fg')};
-  --tone-fg: #{t.role('bg')};
-  --tone-soft: #{t.role('bg-soft')};
-}
-.tone-accent {
-  --tone: #{t.role('accent')};
-  --tone-strong: #{t.role('accent-strong')};
-  --tone-fg: #{t.role('accent-fg')};
-  --tone-soft: #{t.role('accent', 0.12)};
-}
-.tone-success {
-  --tone: #{t.role('success')};
-  --tone-strong: #{t.role('success')};
-  --tone-fg: #{t.role('success-fg')};
-  --tone-soft: #{t.role('success-soft')};
-}
-.tone-warning {
-  --tone: #{t.role('warning')};
-  --tone-strong: #{t.role('warning')};
-  --tone-fg: #{t.role('warning-fg')};
-  --tone-soft: #{t.role('warning-soft')};
-}
-.tone-danger {
-  --tone: #{t.role('danger')};
-  --tone-strong: #{t.role('danger')};
-  --tone-fg: #{t.role('danger-fg')};
-  --tone-soft: #{t.role('danger-soft')};
-}
-.tone-info {
-  --tone: #{t.role('info')};
-  --tone-strong: #{t.role('info')};
-  --tone-fg: #{t.role('info-fg')};
-  --tone-soft: #{t.role('info-soft')};
-}
+@include t.tone-classes;
 .variant-primary {
   background: var(--tone);

package/src/components/Dialog.module.scss CHANGED Viewed

@@ -22,10 +22,7 @@
     animation: ultimate-dialog-in t.duration(base) t.easing(out);
   }
-  &::backdrop {
-    background: t.role('scrim', 0.45);
-    backdrop-filter: blur(2px);
-  }
+  @include t.scrim-backdrop($blur: 2px);
 }
 .size-sm {