@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/elements/react/TyActionMenu.ts

@@ -0,0 +1,79 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/action-menu/definition.ts. Do not edit.
+import { createElement, forwardRef, useEffect, useId, useImperativeHandle, useRef, type ReactNode } from 'react'
+import { defineTympanElements } from '../index.ts'
+
+if (typeof window !== 'undefined') defineTympanElements()
+
+const truthy = (v: unknown) => v !== undefined && v !== null && v !== false && v !== ''
+const text = (v: unknown) => (truthy(v) ? String(v) : undefined)
+const filled = (v: ReactNode) => v !== undefined && v !== null && v !== false && v !== ''
+
+/** A list of commands opened from a trigger button (mode `trigger`, the APG Menu Button pattern) or at a pointer position over a target (mode `context`: secondary click, Shift+F10, the ContextMenu key, or a long press on touch). Opening moves focus to the first enabled item (ArrowUp from the trigger: the last); ArrowDown/ArrowUp move with wrapping, Home/End jump, typing a character moves to the next enabled item starting with it, Enter/Space activate, Escape closes and returns focus to the origin, Tab and an outside press close. Disabled items are skipped and announced as disabled. In context mode the surface is clamped so it never overflows the viewport. Visibility is controlled: the element asks with `ty-open-change`, the host flips `open`. */
+export interface TyActionMenuProps {
+  /** Shown (controlled). The anatomy stays mounted but `hidden` while closed, so nothing reaches the accessibility tree. */
+  open?: boolean
+  /** `trigger`: opens from the trigger button; `context`: opens at a viewport point over the trigger slot's target. Default: `trigger`. */
+  mode?: "trigger" | "context"
+  /** Accessible name of the menu (required by the spec). */
+  label?: string
+  /** Accessible name of the built-in icon-only trigger (the React messages.moreActions default), used in trigger mode when the trigger slot is empty. Default: `More actions`. */
+  triggerLabel?: string
+  /** JSON array of entries in order: an item `{ id, label, icon?, iconPath?, tone?, disabled?, shortcut? }` (`icon` a decorative text glyph; `iconPath` an SVG icon as 24×24 path data rendered in the standard icon frame — when both are present `iconPath` wins, and subpaths separated by " | " become one `<path>` each; `tone` "danger" marks a destructive command, `shortcut` a displayed hint only), `{ "type": "separator" }`, or `{ "type": "section", "id", "title", "items": [...] }`. The element composes the rows on upgrade. */
+  items?: string
+  /** Context mode: the viewport point the menu opens at, "x,y" in CSS pixels (controlled); the last context-request point when unset. Clamped so the menu stays inside the viewport. */
+  position?: string
+  /** Trigger mode: the host's own toggle — any single focusable element, wired with aria-haspopup="menu" and aria-expanded. Context mode: the target that receives the context request (secondary click, Shift+F10, long press). Empty in trigger mode: the built-in ellipsis button named by `triggerLabel`. */
+  trigger?: ReactNode
+  /** An item was activated (pointer, Enter or Space); the element then asks to close. A disabled item never fires. */
+  onAction?: (detail: { id: string }) => void
+  /** The element asks the host to change visibility — `open: true` on a trigger activation or a context request (secondary click, Shift+F10, the ContextMenu key, a long press), `open: false` on Escape, Tab, an outside press or after an action. Controlled: the element does not toggle itself; the host flips `open`. */
+  onOpenChange?: (detail: { open: boolean }) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { mode: "trigger", triggerLabel: "More actions" } as const
+
+export const TyActionMenu = forwardRef<HTMLElement, TyActionMenuProps>(function TyActionMenu(props, ref) {
+  const generated = useId()
+  const instance = `ty${generated.replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const handlers = useRef(props)
+  handlers.current = props
+  const host = useRef<HTMLElement>(null)
+  useImperativeHandle(ref, () => host.current as HTMLElement)
+  useEffect(() => {
+    const element = host.current
+    if (!element) return
+    const listeners: Array<[string, EventListener]> = [
+      ["ty-action", (event) => handlers.current.onAction?.((event as CustomEvent).detail)],
+      ["ty-open-change", (event) => handlers.current.onOpenChange?.((event as CustomEvent).detail)],
+    ]
+    for (const [type, listener] of listeners) element.addEventListener(type, listener)
+    return () => { for (const [type, listener] of listeners) element.removeEventListener(type, listener) }
+  }, [])
+  const p = {
+    open: props.open,
+    mode: props.mode ?? DEFAULTS.mode,
+    label: props.label,
+    triggerLabel: props.triggerLabel ?? DEFAULTS.triggerLabel,
+    items: props.items,
+    position: props.position,
+  }
+  const slots: Record<string, boolean> = { "trigger": filled(props.trigger) }
+  return createElement("ty-action-menu", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "open": truthy(p.open) ? true : undefined, "mode": text(p.mode), "label": text(p.label), "trigger-label": text(p.triggerLabel), "items": text(p.items), "position": text(p.position) },
+    createElement("span", { className: "ty-action-menu__target", "data-mode": p.mode },
+      (!(slots["trigger"])) && (p.mode === "trigger") ? createElement("button", { className: "ty-button ty-action-menu__trigger", type: "button", "aria-label": p.triggerLabel, "aria-haspopup": "menu", "data-variant": "quiet", "data-icon-only": "" },
+        createElement("span", { className: "ty-button__icon", "aria-hidden": "true" },
+          createElement("svg", { className: "ty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+            createElement("circle", { className: "ty-action-menu__glyph", cx: "12", cy: "12", r: "1" }),
+            createElement("circle", { className: "ty-action-menu__glyph", cx: "19", cy: "12", r: "1" }),
+            createElement("circle", { className: "ty-action-menu__glyph", cx: "5", cy: "12", r: "1" }),
+          ),
+        ),
+      ) : null,
+      ((slots["trigger"])) ? props.trigger : null,
+      createElement("div", { className: "ty-action-menu", hidden: (!(truthy(p.open))) ? (true) : undefined, "data-mode": p.mode },
+        createElement("div", { className: "ty-action-menu__menu", id: `${instance}-menu`, role: "menu", "aria-label": p.label, "aria-orientation": "vertical", tabIndex: "-1" }),
+      ),
+    ))
+})

package/src/elements/react/TyAvatar.ts

@@ -0,0 +1,129 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/avatar/definition.ts. Do not edit.
+import { createElement, forwardRef, useId, useImperativeHandle, useRef, type ChangeEvent, type SyntheticEvent } from 'react'
+import { defineTympanElements } from '../index.ts'
+
+if (typeof window !== 'undefined') defineTympanElements()
+
+const truthy = (v: unknown) => v !== undefined && v !== null && v !== false && v !== ''
+const text = (v: unknown) => (truthy(v) ? String(v) : undefined)
+
+/** Represents a person or an agent with a picture or fallback initials, optionally as a pressable control. Static, the frame is an image role named by `name` (hidden when `decorative`); pressable, it is a link (`href`) or a button (`pressable`) named by `actionLabel`, with a 44 px hit area at every size. The fallback (initials for a person, a bot mark for an agent, a user mark otherwise) shows while there is no picture and when the picture fails to load. */
+export interface TyAvatarProps {
+  /** Image URL; on load error the fallback shows. */
+  src?: string
+  /** One or two characters shown when there is no image (derived by the host from a name); the element keeps the first two grapheme clusters. */
+  fallbackText?: string
+  /** Accessible name; required unless `decorative`. Initials are never read as letters while it is set. */
+  name?: string
+  /** Hides the avatar from assistive tech when the name is already shown next to it. */
+  decorative?: boolean
+  /** `person`: circle with initials. `agent`: rounded square with a bot icon and a dashed border, never initials (§2.11). Default: `person`. */
+  actorKind?: "person" | "agent"
+  /** Size step. Default: `regular`. */
+  size?: "xsmall" | "small" | "regular" | "large"
+  /** Fallback background: accent-soft or neutral (§2.3). Default: `accent`. */
+  tint?: "accent" | "neutral"
+  /** The avatar is one press target (a button); set it when `onPress` is wired. Implied by `href`. */
+  pressable?: boolean
+  /** Makes the avatar a link to this destination (wins over `pressable`). */
+  href?: string
+  /** Accessible name of a pressable avatar; `{name}` is filled in. Translate through this attribute. Default: `Open profile of {name}`. */
+  actionLabel?: string
+  /** The native click of the pressable avatar (its link or button). */
+  onPress?: (event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { actorKind: "person", size: "regular", tint: "accent", actionLabel: "Open profile of {name}" } as const
+
+export const TyAvatar = forwardRef<HTMLElement, TyAvatarProps>(function TyAvatar(props, ref) {
+  const generated = useId()
+  const instance = `ty${generated.replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const handlers = useRef(props)
+  handlers.current = props
+  const host = useRef<HTMLElement>(null)
+  useImperativeHandle(ref, () => host.current as HTMLElement)
+  const p = {
+    src: props.src,
+    fallbackText: props.fallbackText,
+    name: props.name,
+    decorative: props.decorative,
+    actorKind: props.actorKind ?? DEFAULTS.actorKind,
+    size: props.size ?? DEFAULTS.size,
+    tint: props.tint ?? DEFAULTS.tint,
+    pressable: props.pressable,
+    href: props.href,
+    actionLabel: props.actionLabel ?? DEFAULTS.actionLabel,
+  }
+  return createElement("ty-avatar", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "src": text(p.src), "fallback-text": text(p.fallbackText), "name": text(p.name), "decorative": truthy(p.decorative) ? true : undefined, "actor-kind": text(p.actorKind), "size": text(p.size), "tint": text(p.tint), "pressable": truthy(p.pressable) ? true : undefined, "href": text(p.href), "action-label": text(p.actionLabel) },
+    createElement("span", { className: "ty-avatar-root" },
+      (!(truthy(p.pressable))) && (!(truthy(p.href))) ? createElement("span", { className: "ty-avatar", "data-kind": p.actorKind, "data-size": p.size, "data-tint": p.tint, "data-image": (truthy(p.src)) ? ("") : undefined, "aria-hidden": (truthy(p.decorative)) ? ("true") : undefined, role: (!(truthy(p.decorative))) && (!(truthy(p.src))) ? ("img") : undefined, "aria-label": (!(truthy(p.decorative))) && (!(truthy(p.src))) ? (p.name) : undefined },
+        (truthy(p.src)) && (truthy(p.decorative) || truthy(p.pressable) || truthy(p.href)) ? createElement("img", { className: "ty-avatar__image", src: p.src, alt: "" }) : null,
+        (truthy(p.src)) && (!(truthy(p.decorative))) && (!(truthy(p.pressable))) && (!(truthy(p.href))) ? createElement("img", { className: "ty-avatar__image", src: p.src, alt: p.name }) : null,
+        createElement("span", { className: "ty-avatar__fallback", hidden: (truthy(p.src)) ? (true) : undefined },
+          (p.actorKind === "agent") ? createElement("svg", { className: "ty-avatar__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+            createElement("path", { className: "ty-avatar__glyph", d: "M12 8V4H8" }),
+            createElement("rect", { className: "ty-avatar__glyph", width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+            createElement("path", { className: "ty-avatar__glyph", d: "M2 14h2" }),
+            createElement("path", { className: "ty-avatar__glyph", d: "M20 14h2" }),
+            createElement("path", { className: "ty-avatar__glyph", d: "M15 13v2" }),
+            createElement("path", { className: "ty-avatar__glyph", d: "M9 13v2" }),
+          ) : null,
+          (p.actorKind === "person") && (truthy(p.fallbackText)) ? createElement("span", { className: "ty-avatar__initials", "aria-hidden": "true" },
+            text(p.fallbackText),
+          ) : null,
+          (p.actorKind === "person") && (!(truthy(p.fallbackText))) ? createElement("svg", { className: "ty-avatar__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+            createElement("path", { className: "ty-avatar__glyph", d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+            createElement("circle", { className: "ty-avatar__glyph", cx: "12", cy: "7", r: "4" }),
+          ) : null,
+        ),
+      ) : null,
+      (truthy(p.href)) ? createElement("a", { className: "ty-avatar-control", href: p.href, "data-size": p.size, onPress: (event: ChangeEvent<HTMLAnchorElement>) => handlers.current.onPress?.(event) },
+        createElement("span", { className: "ty-avatar", "data-kind": p.actorKind, "data-size": p.size, "data-tint": p.tint, "data-image": (truthy(p.src)) ? ("") : undefined, "aria-hidden": "true" },
+          (truthy(p.src)) && (truthy(p.decorative) || truthy(p.pressable) || truthy(p.href)) ? createElement("img", { className: "ty-avatar__image", src: p.src, alt: "" }) : null,
+          (truthy(p.src)) && (!(truthy(p.decorative))) && (!(truthy(p.pressable))) && (!(truthy(p.href))) ? createElement("img", { className: "ty-avatar__image", src: p.src, alt: p.name }) : null,
+          createElement("span", { className: "ty-avatar__fallback", hidden: (truthy(p.src)) ? (true) : undefined },
+            (p.actorKind === "agent") ? createElement("svg", { className: "ty-avatar__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+              createElement("path", { className: "ty-avatar__glyph", d: "M12 8V4H8" }),
+              createElement("rect", { className: "ty-avatar__glyph", width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M2 14h2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M20 14h2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M15 13v2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M9 13v2" }),
+            ) : null,
+            (p.actorKind === "person") && (truthy(p.fallbackText)) ? createElement("span", { className: "ty-avatar__initials", "aria-hidden": "true" },
+              text(p.fallbackText),
+            ) : null,
+            (p.actorKind === "person") && (!(truthy(p.fallbackText))) ? createElement("svg", { className: "ty-avatar__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+              createElement("path", { className: "ty-avatar__glyph", d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+              createElement("circle", { className: "ty-avatar__glyph", cx: "12", cy: "7", r: "4" }),
+            ) : null,
+          ),
+        ),
+      ) : null,
+      (!(truthy(p.href))) && (truthy(p.pressable)) ? createElement("button", { className: "ty-avatar-control", type: "button", "data-size": p.size, onPress: (event: ChangeEvent<HTMLButtonElement>) => handlers.current.onPress?.(event) },
+        createElement("span", { className: "ty-avatar", "data-kind": p.actorKind, "data-size": p.size, "data-tint": p.tint, "data-image": (truthy(p.src)) ? ("") : undefined, "aria-hidden": "true" },
+          (truthy(p.src)) && (truthy(p.decorative) || truthy(p.pressable) || truthy(p.href)) ? createElement("img", { className: "ty-avatar__image", src: p.src, alt: "" }) : null,
+          (truthy(p.src)) && (!(truthy(p.decorative))) && (!(truthy(p.pressable))) && (!(truthy(p.href))) ? createElement("img", { className: "ty-avatar__image", src: p.src, alt: p.name }) : null,
+          createElement("span", { className: "ty-avatar__fallback", hidden: (truthy(p.src)) ? (true) : undefined },
+            (p.actorKind === "agent") ? createElement("svg", { className: "ty-avatar__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+              createElement("path", { className: "ty-avatar__glyph", d: "M12 8V4H8" }),
+              createElement("rect", { className: "ty-avatar__glyph", width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M2 14h2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M20 14h2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M15 13v2" }),
+              createElement("path", { className: "ty-avatar__glyph", d: "M9 13v2" }),
+            ) : null,
+            (p.actorKind === "person") && (truthy(p.fallbackText)) ? createElement("span", { className: "ty-avatar__initials", "aria-hidden": "true" },
+              text(p.fallbackText),
+            ) : null,
+            (p.actorKind === "person") && (!(truthy(p.fallbackText))) ? createElement("svg", { className: "ty-avatar__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+              createElement("path", { className: "ty-avatar__glyph", d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+              createElement("circle", { className: "ty-avatar__glyph", cx: "12", cy: "7", r: "4" }),
+            ) : null,
+          ),
+        ),
+      ) : null,
+    ))
+})

package/src/elements/react/TyBrandWordmark.ts

@@ -0,0 +1,51 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/brand-wordmark/definition.ts. Do not edit.
+import { createElement, forwardRef, useId, useImperativeHandle, useRef } from 'react'
+import { defineTympanElements } from '../index.ts'
+
+if (typeof window !== 'undefined') defineTympanElements()
+
+const truthy = (v: unknown) => v !== undefined && v !== null && v !== false && v !== ''
+const text = (v: unknown) => (truthy(v) ? String(v) : undefined)
+
+/** Two-tone product wordmark: the plain part (`text`) in ink and the accent part (`accent`) in the brand gradient (`background-clip: text`). Plain text for assistive tech as-is; `label` turns it into an img role with that name (a logo lockup). */
+export interface TyBrandWordmarkProps {
+  /** The plain part of the wordmark, in ink. */
+  text?: string
+  /** The accent part of the wordmark, in the brand gradient; rendered right after `text`. */
+  accent?: string
+  /** Type step of the wordmark. Default: `medium`. */
+  size?: "small" | "medium" | "large"
+  /** Accessible name as an img role (a logo lockup); left out, the wordmark is plain text read as-is. */
+  label?: string
+  /** Test hook on the wordmark (`data-testid`). */
+  testId?: string
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { size: "medium" } as const
+
+export const TyBrandWordmark = forwardRef<HTMLElement, TyBrandWordmarkProps>(function TyBrandWordmark(props, ref) {
+  const generated = useId()
+  const instance = `ty${generated.replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const handlers = useRef(props)
+  handlers.current = props
+  const host = useRef<HTMLElement>(null)
+  useImperativeHandle(ref, () => host.current as HTMLElement)
+  const p = {
+    text: props.text,
+    accent: props.accent,
+    size: props.size ?? DEFAULTS.size,
+    label: props.label,
+    testId: props.testId,
+  }
+  return createElement("ty-brand-wordmark", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "text": text(p.text), "accent": text(p.accent), "size": text(p.size), "label": text(p.label), "test-id": text(p.testId) },
+    createElement("span", { className: "ty-brand-wordmark", role: (truthy(p.label)) ? ("img") : undefined, "aria-label": p.label, "data-size": p.size, "data-testid": p.testId },
+      (truthy(p.text)) ? createElement("span", { className: "ty-brand-wordmark__text" },
+        text(p.text),
+      ) : null,
+      (truthy(p.accent)) ? createElement("span", { className: "ty-brand-wordmark__accent" },
+        text(p.accent),
+      ) : null,
+    ))
+})

package/src/elements/react/TyBreadcrumbs.ts

@@ -0,0 +1,82 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/breadcrumbs/definition.ts. Do not edit.
+import { createElement, forwardRef, useEffect, useId, useImperativeHandle, useRef, type ReactNode } from 'react'
+import { defineTympanElements } from '../index.ts'
+
+if (typeof window !== 'undefined') defineTympanElements()
+
+const truthy = (v: unknown) => v !== undefined && v !== null && v !== false && v !== ''
+const text = (v: unknown) => (truthy(v) ? String(v) : undefined)
+const filled = (v: ReactNode) => v !== undefined && v !== null && v !== false && v !== ''
+
+/** Shows where the current page sits in the hierarchy and goes up one or more levels. A trail at 640 px and above, a compact back link (with optional centred title and trailing actions) below. The last item is the current page — static text marked `aria-current="page"`, never a link; separators are decorative. Long labels truncate with an ellipsis, the full label kept in `title` and as the accessible name. Activating a link emits a cancelable `ty-navigate`: a host with a client-side router prevents the default and navigates through its adapter. */
+export interface TyBreadcrumbsProps {
+  /** JSON array of `{ "label": string, "href": string }`, ancestors first and the current page last. Composed by the element on upgrade (the theme palette's `theme-labels` precedent). */
+  items?: string
+  /** Accessible name of the navigation landmark (the I18n adapter's default); translate through this attribute. Default: `Breadcrumb`. */
+  label?: string
+  /** `auto` shows the trail at 640 px and above, the compact bar below; the element resolves it live. Default: `auto`. */
+  mode?: "trail" | "compact" | "auto"
+  /** Parent href of the compact back link when there is only one item. */
+  rootHref?: string
+  /** Parent label of the compact back link when there is only one item (with `rootHref`). */
+  rootLabel?: string
+  /** Collapses middle items into an overflow menu when the trail exceeds this many entries (the first and the last `maxVisible - 1` stay visible). */
+  maxVisible?: number
+  /** Accessible-name template of the compact back link; `{parent}` is filled with the parent's label. Default: `Back to {parent}`. */
+  backLabel?: string
+  /** Accessible name of the overflow menu's toggle; translate through this attribute. Default: `Show hidden levels`. */
+  overflowLabel?: string
+  /** Replaces the centred title of the compact bar (the current page's label when empty). */
+  center?: ReactNode
+  /** Trailing actions of the compact bar (narrow screens use it as a top bar). */
+  actions?: ReactNode
+  /** A trail, overflow or back link was activated; `href` is its destination. Cancelable: a host with a client-side router calls `preventDefault()` and navigates through its adapter; uncanceled, the native anchor navigates. */
+  onNavigate?: (detail: { href: string }) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { label: "Breadcrumb", mode: "auto", backLabel: "Back to {parent}", overflowLabel: "Show hidden levels" } as const
+
+export const TyBreadcrumbs = forwardRef<HTMLElement, TyBreadcrumbsProps>(function TyBreadcrumbs(props, ref) {
+  const generated = useId()
+  const instance = `ty${generated.replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const handlers = useRef(props)
+  handlers.current = props
+  const host = useRef<HTMLElement>(null)
+  useImperativeHandle(ref, () => host.current as HTMLElement)
+  useEffect(() => {
+    const element = host.current
+    if (!element) return
+    const listeners: Array<[string, EventListener]> = [
+      ["ty-navigate", (event) => handlers.current.onNavigate?.((event as CustomEvent).detail)],
+    ]
+    for (const [type, listener] of listeners) element.addEventListener(type, listener)
+    return () => { for (const [type, listener] of listeners) element.removeEventListener(type, listener) }
+  }, [])
+  const p = {
+    items: props.items,
+    label: props.label ?? DEFAULTS.label,
+    mode: props.mode ?? DEFAULTS.mode,
+    rootHref: props.rootHref,
+    rootLabel: props.rootLabel,
+    maxVisible: props.maxVisible,
+    backLabel: props.backLabel ?? DEFAULTS.backLabel,
+    overflowLabel: props.overflowLabel ?? DEFAULTS.overflowLabel,
+  }
+  const slots: Record<string, boolean> = { "center": filled(props.center), "actions": filled(props.actions) }
+  return createElement("ty-breadcrumbs", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "items": text(p.items), "label": text(p.label), "mode": text(p.mode), "root-href": text(p.rootHref), "root-label": text(p.rootLabel), "max-visible": text(p.maxVisible), "back-label": text(p.backLabel), "overflow-label": text(p.overflowLabel) },
+    createElement("nav", { className: "ty-breadcrumbs", "aria-label": p.label, "data-mode": p.mode },
+      (!(p.mode === "compact")) ? createElement("ol", { className: "ty-breadcrumbs__list" }) : null,
+      (p.mode === "compact" || p.mode === "auto") ? createElement("div", { className: "ty-breadcrumbs__bar" },
+        createElement("div", { className: "ty-breadcrumbs__back" }),
+        (slots["center"] || slots["actions"]) ? createElement("div", { className: "ty-breadcrumbs__center" },
+          ((slots["center"])) ? props.center : null,
+          (!(slots["center"])) ? createElement("span", { className: "ty-breadcrumbs__title", "aria-current": "page" }) : null,
+        ) : null,
+        (slots["actions"]) ? createElement("div", { className: "ty-breadcrumbs__actions" },
+          props.actions,
+        ) : null,
+      ) : null,
+    ))
+})

package/src/elements/react/TyButton.ts

@@ -0,0 +1,98 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/button/definition.ts. Do not edit.
+import { createElement, forwardRef, useId, useImperativeHandle, useRef, type ReactNode, type ChangeEvent, type SyntheticEvent } from 'react'
+import { defineTympanElements } from '../index.ts'
+
+if (typeof window !== 'undefined') defineTympanElements()
+
+const truthy = (v: unknown) => v !== undefined && v !== null && v !== false && v !== ''
+const text = (v: unknown) => (truthy(v) ? String(v) : undefined)
+const filled = (v: ReactNode) => v !== undefined && v !== null && v !== false && v !== ''
+
+/** Triggers one action. A native <button> inside, so focus, keyboard activation and form submission are the platform's. */
+export interface TyButtonProps {
+  /** Visual weight; at most one primary per view. Default: `secondary`. */
+  variant?: "primary" | "secondary" | "quiet" | "danger"
+  /** Height step. Default: `regular`. */
+  size?: "compact" | "regular" | "large"
+  /** `circle` only for icon-only buttons. Default: `rounded`. */
+  shape?: "rounded" | "pill" | "circle"
+  /** Hides the label; `accessibleLabel` is then required. */
+  iconOnly?: boolean
+  /** Stretches to the container width. */
+  fullWidth?: boolean
+  /** Shows the busy indicator and blocks presses (`aria-busy`, `aria-disabled`). */
+  busy?: boolean
+  /** Native disabled. */
+  disabled?: boolean
+  /** Native button type; `submit` submits the enclosing form. Default: `button`. */
+  type?: "button" | "submit" | "reset"
+  /** Form field name sent with a submit. */
+  name?: string
+  /** Form field value sent with a submit. */
+  value?: string
+  /** Accessible name when there is no visible label; also the tooltip of an icon-only button. */
+  accessibleLabel?: string
+  /** A toggle button's state, `true` or `false` (`aria-pressed`); left out for an ordinary button. */
+  pressed?: string
+  /** `true` or `false` while the button shows or hides a popup or region (`aria-expanded`). */
+  expanded?: string
+  /** Id of the element the button controls (`aria-controls`). */
+  controls?: string
+  /** The kind of popup the button opens (`aria-haspopup`: `menu`, `dialog`, `listbox`, …). */
+  haspopup?: string
+  /** Test hook on the native button (`data-testid`). */
+  testId?: string
+  /** The label. */
+  children?: ReactNode
+  /** A leading icon (decorative). */
+  icon?: ReactNode
+  /** A trailing icon (decorative). */
+  trailingIcon?: ReactNode
+  /** The native click (not fired while busy or disabled). */
+  onClick?: (event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { variant: "secondary", size: "regular", shape: "rounded", type: "button" } as const
+
+export const TyButton = forwardRef<HTMLElement, TyButtonProps>(function TyButton(props, ref) {
+  const generated = useId()
+  const instance = `ty${generated.replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const handlers = useRef(props)
+  handlers.current = props
+  const host = useRef<HTMLElement>(null)
+  useImperativeHandle(ref, () => host.current as HTMLElement)
+  const p = {
+    variant: props.variant ?? DEFAULTS.variant,
+    size: props.size ?? DEFAULTS.size,
+    shape: props.shape ?? DEFAULTS.shape,
+    iconOnly: props.iconOnly,
+    fullWidth: props.fullWidth,
+    busy: props.busy,
+    disabled: props.disabled,
+    type: props.type ?? DEFAULTS.type,
+    name: props.name,
+    value: props.value,
+    accessibleLabel: props.accessibleLabel,
+    pressed: props.pressed,
+    expanded: props.expanded,
+    controls: props.controls,
+    haspopup: props.haspopup,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "icon": filled(props.icon), "trailing-icon": filled(props.trailingIcon) }
+  return createElement("ty-button", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "variant": text(p.variant), "size": text(p.size), "shape": text(p.shape), "icon-only": truthy(p.iconOnly) ? true : undefined, "full-width": truthy(p.fullWidth) ? true : undefined, "busy": truthy(p.busy) ? true : undefined, "disabled": truthy(p.disabled) ? true : undefined, "type": text(p.type), "name": text(p.name), "value": text(p.value), "accessible-label": text(p.accessibleLabel), "pressed": text(p.pressed), "expanded": text(p.expanded), "controls": text(p.controls), "haspopup": text(p.haspopup), "test-id": text(p.testId) },
+    createElement("button", { className: "ty-button", type: p.type, name: p.name, value: p.value, disabled: truthy(p.disabled) || undefined, "aria-busy": truthy(p.busy) ? 'true' : undefined, "aria-disabled": truthy(p.busy) ? 'true' : undefined, "aria-label": p.accessibleLabel, "aria-pressed": p.pressed, "aria-expanded": p.expanded, "aria-controls": p.controls, "aria-haspopup": p.haspopup, "data-testid": p.testId, title: (truthy(p.iconOnly)) ? (p.accessibleLabel) : undefined, "data-variant": p.variant, "data-size": p.size, "data-shape": p.shape, "data-icon-only": truthy(p.iconOnly) ? '' : undefined, "data-full-width": truthy(p.fullWidth) ? '' : undefined, "data-busy": truthy(p.busy) ? '' : undefined, onClick: (event: ChangeEvent<HTMLButtonElement>) => handlers.current.onClick?.(event) },
+      (truthy(p.busy)) ? createElement("span", { className: "ty-button__busy", "aria-hidden": "true" }) : null,
+      (!(truthy(p.busy))) && (slots["icon"]) ? createElement("span", { className: "ty-button__icon", "aria-hidden": "true" },
+        props.icon,
+      ) : null,
+      (!(truthy(p.iconOnly))) ? createElement("span", { className: "ty-button__label" },
+        props.children,
+      ) : null,
+      (!(truthy(p.iconOnly))) && (slots["trailing-icon"]) ? createElement("span", { className: "ty-button__icon", "aria-hidden": "true" },
+        props.trailingIcon,
+      ) : null,
+    ))
+})

package/src/elements/react/TyCheckbox.ts

@@ -0,0 +1,92 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/checkbox/definition.ts. Do not edit.
+import { createElement, forwardRef, useId, useImperativeHandle, useRef, type ReactNode, type ChangeEvent, type SyntheticEvent } from 'react'
+import { defineTympanElements } from '../index.ts'
+
+if (typeof window !== 'undefined') defineTympanElements()
+
+const truthy = (v: unknown) => v !== undefined && v !== null && v !== false && v !== ''
+const text = (v: unknown) => (truthy(v) ? String(v) : undefined)
+const filled = (v: ReactNode) => v !== undefined && v !== null && v !== false && v !== ''
+
+/** A labelled choice that submits with its form. A native checkbox inside a <label> row, so labelling, keyboard (Space) and form participation are the platform's. The indicator holds both marks; CSS shows the check while the input is :checked, the minus while it is :indeterminate, so every renderer (and the page before upgrade) shows the right state. */
+export interface TyCheckboxProps {
+  /** On. */
+  checked?: boolean
+  /** Mixed state for "select all" rows (the input's `indeterminate` property); cleared by the next toggle. */
+  indeterminate?: boolean
+  /** Native disabled. */
+  disabled?: boolean
+  /** Native required; the form will not submit while off. */
+  required?: boolean
+  /** Form field name; the value is sent while on. */
+  name?: string
+  /** Form value sent while on (the browser sends "on" without one). */
+  value?: string
+  /** `tile` draws a surface around the row; `bare` is indicator plus text. Default: `tile`. */
+  appearance?: "tile" | "bare"
+  /** Accessible name when there is no visible label. */
+  accessibleLabel?: string
+  /** Test hook on the native checkbox (`data-testid`). */
+  testId?: string
+  /** The visible label. */
+  children?: ReactNode
+  /** A secondary line, announced as the description. */
+  description?: ReactNode
+  /** The error message; marks the checkbox invalid (`aria-invalid`, `aria-errormessage`). */
+  error?: ReactNode
+  /** The native change of the checkbox; `checked` is the new state. */
+  onChange?: (detail: { checked: boolean }, event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { appearance: "tile" } as const
+
+export const TyCheckbox = forwardRef<HTMLElement, TyCheckboxProps>(function TyCheckbox(props, ref) {
+  const generated = useId()
+  const instance = `ty${generated.replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const handlers = useRef(props)
+  handlers.current = props
+  const host = useRef<HTMLElement>(null)
+  useImperativeHandle(ref, () => host.current as HTMLElement)
+  const p = {
+    checked: props.checked,
+    indeterminate: props.indeterminate,
+    disabled: props.disabled,
+    required: props.required,
+    name: props.name,
+    value: props.value,
+    appearance: props.appearance ?? DEFAULTS.appearance,
+    accessibleLabel: props.accessibleLabel,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "description": filled(props.description), "error": filled(props.error) }
+  return createElement("ty-checkbox", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "checked": truthy(p.checked) ? true : undefined, "indeterminate": truthy(p.indeterminate) ? true : undefined, "disabled": truthy(p.disabled) ? true : undefined, "required": truthy(p.required) ? true : undefined, "name": text(p.name), "value": text(p.value), "appearance": text(p.appearance), "accessible-label": text(p.accessibleLabel), "test-id": text(p.testId) },
+    createElement("div", { className: "ty-checkbox", "data-appearance": p.appearance },
+      createElement("label", { className: "ty-checkbox__row", "data-selected": truthy(p.checked) ? '' : undefined, "data-indeterminate": truthy(p.indeterminate) ? '' : undefined, "data-disabled": truthy(p.disabled) ? '' : undefined },
+        createElement("input", { className: "ty-visually-hidden", type: "checkbox", name: p.name, value: p.value, checked: Boolean(p.checked), disabled: truthy(p.disabled) || undefined, required: truthy(p.required) || undefined, "aria-label": (!(slots["default"])) ? (p.accessibleLabel) : undefined, "aria-labelledby": (slots["default"]) ? (`${instance}-label`) : undefined, "aria-describedby": (slots["description"]) ? (`${instance}-description`) : undefined, "aria-invalid": (slots["error"]) ? ("true") : undefined, "aria-errormessage": (slots["error"]) ? (`${instance}-error`) : undefined, "data-testid": p.testId, onChange: (event: ChangeEvent<HTMLInputElement>) => handlers.current.onChange?.({ checked: event.currentTarget.checked }, event) }),
+        createElement("span", { className: "ty-checkbox__indicator", "aria-hidden": "true" },
+          createElement("svg", { className: "ty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+            createElement("path", { className: "ty-checkbox__check", d: "M20 6 9 17l-5-5" }),
+            createElement("path", { className: "ty-checkbox__minus", d: "M5 12h14" }),
+          ),
+        ),
+        (slots["default"] || slots["description"]) ? createElement("span", { className: "ty-checkbox__text" },
+          (slots["default"]) ? createElement("span", { className: "ty-checkbox__label", id: `${instance}-label` },
+            props.children,
+          ) : null,
+          (slots["description"]) ? createElement("span", { className: "ty-checkbox__description", id: `${instance}-description` },
+            props.description,
+          ) : null,
+        ) : null,
+      ),
+      (slots["error"]) ? createElement("p", { className: "ty-checkbox__error", id: `${instance}-error`, "aria-live": "polite" },
+        createElement("svg", { className: "ty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+          createElement("path", { className: "ty-checkbox__error-glyph", d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM12 8v4M12 16h.01" }),
+        ),
+        createElement("span", { className: "ty-checkbox__error-text" },
+          props.error,
+        ),
+      ) : null,
+    ))
+})