@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/elements/react/TySeparator.ts

@@ -0,0 +1,51 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/separator/definition.ts. Do not edit.
+import { createElement, forwardRef, 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 !== ''
+
+/** Thin rule between groups of content, optionally with a short caption centred on it ("or"). Decorative by default (`aria-hidden`); `semantic` exposes the non-focusable separator role. A captioned rule keeps the caption readable as plain text and the strokes decorative, so it never carries the role. */
+export interface TySeparatorProps {
+  /** Direction of the rule; vertical takes the height of its row. Default: `horizontal`. */
+  orientation?: "horizontal" | "vertical"
+  /** Line strength: `--ty-line` or the fainter `--ty-line-soft`. Default: `regular`. */
+  emphasis?: "regular" | "soft"
+  /** Exposes the separator role (with `aria-orientation`); decorative otherwise. */
+  semantic?: boolean
+  /** Margin step from the spacing scale. Default: `regular`. */
+  spacing?: "none" | "regular" | "roomy"
+  /** Short text centred on the rule, such as "or"; readable plain text between the two decorative strokes. */
+  caption?: ReactNode
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { orientation: "horizontal", emphasis: "regular", spacing: "regular" } as const
+
+export const TySeparator = forwardRef<HTMLElement, TySeparatorProps>(function TySeparator(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 = {
+    orientation: props.orientation ?? DEFAULTS.orientation,
+    emphasis: props.emphasis ?? DEFAULTS.emphasis,
+    semantic: props.semantic,
+    spacing: props.spacing ?? DEFAULTS.spacing,
+  }
+  const slots: Record<string, boolean> = { "caption": filled(props.caption) }
+  return createElement("ty-separator", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "orientation": text(p.orientation), "emphasis": text(p.emphasis), "semantic": truthy(p.semantic) ? true : undefined, "spacing": text(p.spacing) },
+    createElement("div", { className: "ty-separator", role: (truthy(p.semantic)) && (!(slots["caption"])) ? ("separator") : undefined, "aria-orientation": (truthy(p.semantic)) && (!(slots["caption"])) ? (p.orientation) : undefined, "aria-hidden": (!(truthy(p.semantic))) && (!(slots["caption"])) ? ("true") : undefined, "data-orientation": p.orientation, "data-emphasis": p.emphasis, "data-spacing": p.spacing, "data-captioned": (slots["caption"]) ? ("") : undefined },
+      (slots["caption"]) ? createElement("span", { className: "ty-separator__line", "aria-hidden": "true" }) : null,
+      (slots["caption"]) ? createElement("span", { className: "ty-separator__caption" },
+        props.caption,
+      ) : null,
+      (slots["caption"]) ? createElement("span", { className: "ty-separator__line", "aria-hidden": "true" }) : null,
+    ))
+})

package/src/elements/react/TySkeleton.ts

@@ -0,0 +1,61 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/skeleton/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)
+
+/** Content-shaped placeholder, hidden from assistive technology; with `label`, one polite status announces the loading and the region is marked busy. Presets (stats, cards, section-heading, filters, analysis) are composed by the element on upgrade. */
+export interface TySkeletonProps {
+  /** Block form: a text line, a heading line, a circle (avatar) or a rectangle (media, a chart). Default: `line`. */
+  shape?: "line" | "heading" | "circle" | "rect"
+  /** Named width (`short`, `medium`, `long`, `full`) or any CSS length; full width when unset. A custom length resolves on upgrade (`data-width="custom"` and an inline size). */
+  width?: string
+  /** Stacked text lines for the `line` and `heading` shapes, widths varied automatically (the last is short). Default: `1`. */
+  lines?: number
+  /** A composed skeleton instead of blocks; the element composes it on upgrade. */
+  preset?: "stats" | "cards" | "section-heading" | "filters" | "analysis"
+  /** Repetitions of the preset (tiles, pills, items); the preset's default when unset. */
+  count?: number
+  /** Grid columns of a tiled preset (1 to 4); the preset's default when unset. */
+  columns?: number
+  /** Announced once in a visually-hidden status while loading, the region marked `aria-busy` (the PageLoadingState pattern); unset, the skeleton is purely decorative and the host announces. */
+  label?: string
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { shape: "line", lines: 1 } as const
+
+export const TySkeleton = forwardRef<HTMLElement, TySkeletonProps>(function TySkeleton(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 = {
+    shape: props.shape ?? DEFAULTS.shape,
+    width: props.width,
+    lines: props.lines ?? DEFAULTS.lines,
+    preset: props.preset,
+    count: props.count,
+    columns: props.columns,
+    label: props.label,
+  }
+  return createElement("ty-skeleton", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "shape": text(p.shape), "width": text(p.width), "lines": text(p.lines), "preset": text(p.preset), "count": text(p.count), "columns": text(p.columns), "label": text(p.label) },
+    createElement("span", { className: "ty-skeleton-root", "aria-busy": truthy(p.label) ? 'true' : undefined },
+      createElement("span", { className: "ty-skeleton-content", "aria-hidden": "true" },
+        (!(truthy(p.preset))) && (p.shape === "line" || p.shape === "heading") ? createElement("span", { className: "ty-skeleton-lines" },
+          createElement("span", { className: "ty-skeleton", "data-shape": p.shape, "data-width": p.width }),
+        ) : null,
+        (!(truthy(p.preset))) && (p.shape === "circle" || p.shape === "rect") ? createElement("span", { className: "ty-skeleton", "data-shape": p.shape, "data-width": p.width }) : null,
+        (truthy(p.preset)) ? createElement("span", { className: "ty-skeleton-preset", "data-preset": p.preset }) : null,
+      ),
+      (truthy(p.label)) ? createElement("span", { className: "ty-visually-hidden", role: "status" },
+        text(p.label),
+      ) : null,
+    ))
+})

package/src/elements/react/TySkipLink.ts

@@ -0,0 +1,39 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/skip-link/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)
+
+/** First focusable element of the page: jumps past the navigation straight to the main content (WCAG 2.4.1 Bypass Blocks). A native anchor to the target's fragment, visually hidden until focused — never `display: none`, so it stays in the accessibility tree. On activation the element moves focus to the target (a temporary negative tabindex when the target is not natively focusable) and scrolls it clear of the sticky top bar. */
+export interface TySkipLinkProps {
+  /** Id of the main content element; the anchor's href is its fragment (`#main-content`). Default: `main-content`. */
+  targetId?: string
+  /** Link text (the I18n adapter's default); translate through this attribute. Default: `Skip to main content`. */
+  label?: string
+  /** The native click of the anchor, before the focus move. */
+  onClick?: (event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { targetId: "main-content", label: "Skip to main content" } as const
+
+export const TySkipLink = forwardRef<HTMLElement, TySkipLinkProps>(function TySkipLink(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 = {
+    targetId: props.targetId ?? DEFAULTS.targetId,
+    label: props.label ?? DEFAULTS.label,
+  }
+  return createElement("ty-skip-link", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "target-id": text(p.targetId), "label": text(p.label) },
+    createElement("a", { className: "ty-skip-link", onClick: (event: ChangeEvent<HTMLAnchorElement>) => handlers.current.onClick?.(event) },
+      text(p.label),
+    ))
+})

package/src/elements/react/TySpinner.ts

@@ -0,0 +1,55 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/spinner/definition.ts. Do not edit.
+import { createElement, forwardRef, 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 !== ''
+
+/** Indeterminate work indicator: an indeterminate progressbar named by `label`, drawn as a CSS ring or three pulsing dots (never announced). Under reduced motion the animation stops (the stylesheet) and the element reveals the label as text. */
+export interface TySpinnerProps {
+  /** Accessible name; the visible caption should say the same. Default: `Loading`. */
+  label?: string
+  /** Diameter step (`small` follows the text size). Default: `medium`. */
+  size?: "small" | "medium" | "large"
+  /** The drawing: a border-arc ring or three pulsing dots. Default: `ring`. */
+  shape?: "ring" | "dots"
+  /** Colour; `inherit` takes the current text colour. Default: `inherit`. */
+  tone?: "inherit" | "accent" | "on-accent" | "neutral"
+  /** The visible label next to the indicator (keep it the same text as `label`; it is decorative, the progressbar is named by `label`). */
+  children?: ReactNode
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { label: "Loading", size: "medium", shape: "ring", tone: "inherit" } as const
+
+export const TySpinner = forwardRef<HTMLElement, TySpinnerProps>(function TySpinner(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 = {
+    label: props.label ?? DEFAULTS.label,
+    size: props.size ?? DEFAULTS.size,
+    shape: props.shape ?? DEFAULTS.shape,
+    tone: props.tone ?? DEFAULTS.tone,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children) }
+  return createElement("ty-spinner", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "label": text(p.label), "size": text(p.size), "shape": text(p.shape), "tone": text(p.tone) },
+    createElement("span", { className: "ty-spinner", role: "progressbar", "aria-label": p.label, "data-size": p.size, "data-shape": p.shape, "data-tone": p.tone },
+      (p.shape === "ring") ? createElement("span", { className: "ty-spinner__ring", "aria-hidden": "true" }) : null,
+      (p.shape === "dots") ? createElement("span", { className: "ty-spinner__dots", "aria-hidden": "true" },
+        createElement("span", { className: "ty-spinner__dot" }),
+        createElement("span", { className: "ty-spinner__dot" }),
+        createElement("span", { className: "ty-spinner__dot" }),
+      ) : null,
+      (slots["default"]) ? createElement("span", { className: "ty-spinner__label", "aria-hidden": "true" },
+        props.children,
+      ) : null,
+    ))
+})

package/src/elements/react/TyStatusPill.ts

@@ -0,0 +1,66 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/status-pill/definition.ts. Do not edit.
+import { createElement, forwardRef, 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 !== ''
+
+/** Current state of an item as icon, word and semantic tone. Nothing interactive inside; a known `status` takes its tone and busy state from the element's status map unless `tone` overrides. */
+export interface TyStatusPillProps {
+  /** The status key (`data-status`); the built-in map colours the common ones (`pending`, `approved`, `processing`, …) while `tone` is absent. */
+  status?: string
+  /** The semantic tone (`data-tone`); left out, the status map decides (server renderings pass it themselves). */
+  tone?: "neutral" | "info" | "success" | "warning" | "danger"
+  /** Pill size. Default: `regular`. */
+  size?: "small" | "regular"
+  /** In-progress: the icon spins (static under reduced motion). */
+  busy?: boolean
+  /** Announce changes politely (`role="status"`); off by default, so tables of pills create no live regions. */
+  announce?: boolean
+  /** Plain-HTML label text; the default slot (what frameworks render) wins, then the status map's label, then the status key. */
+  label?: string
+  /** Accessible name of the pill (`aria-label`), e.g. "Status: Running" on an announced badge. */
+  accessibleLabel?: string
+  /** Test hook on the pill (`data-testid`). */
+  testId?: string
+  /** The status word. */
+  children?: ReactNode
+  /** The status icon (decorative); spins while busy. */
+  icon?: ReactNode
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { size: "regular" } as const
+
+export const TyStatusPill = forwardRef<HTMLElement, TyStatusPillProps>(function TyStatusPill(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 = {
+    status: props.status,
+    tone: props.tone,
+    size: props.size ?? DEFAULTS.size,
+    busy: props.busy,
+    announce: props.announce,
+    label: props.label,
+    accessibleLabel: props.accessibleLabel,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "icon": filled(props.icon) }
+  return createElement("ty-status-pill", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "status": text(p.status), "tone": text(p.tone), "size": text(p.size), "busy": truthy(p.busy) ? true : undefined, "announce": truthy(p.announce) ? true : undefined, "label": text(p.label), "accessible-label": text(p.accessibleLabel), "test-id": text(p.testId) },
+    createElement("span", { className: "ty-status", role: (truthy(p.announce)) ? ("status") : undefined, "aria-label": p.accessibleLabel, "data-tone": p.tone, "data-size": p.size, "data-busy": truthy(p.busy) ? '' : undefined, "data-status": p.status, "data-testid": p.testId },
+      (slots["icon"]) ? createElement("span", { className: "ty-status__icon", "aria-hidden": "true" },
+        props.icon,
+      ) : null,
+      createElement("span", { className: "ty-status__label" },
+        props.children,
+      ),
+    ))
+})

package/src/elements/react/TySurface.ts

@@ -0,0 +1,104 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/surface/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 !== ''
+
+/** Bounded container at a chosen elevation. A titled surface is a region named by its title; a pressable one forwards presses anywhere on it to the single primary control in the title (a link with `href`, a button otherwise). */
+export interface TySurfaceProps {
+  /** Level 1 (sheet glass), 2 (raised card), 3 (floating) or 0 (flat). Default: `sheet`. */
+  elevation?: "sheet" | "raised" | "floating" | "flat"
+  /** Internal padding step. Default: `regular`. */
+  padding?: "none" | "regular" | "roomy"
+  /** Heading level of the title. Default: `h3`. */
+  titleLevel?: "h2" | "h3" | "h4"
+  /** The whole surface is one press target that forwards to the title's primary control; set it when `onclick` is wired. Implied by `href`. */
+  pressable?: boolean
+  /** Makes the surface a whole-card link: the title's primary control is an anchor and its hit area stretches over the card. */
+  href?: string
+  /** A chosen card (accent-soft state). */
+  selected?: boolean
+  /** Pressable surfaces only: inert primary control, no forwarding. */
+  disabled?: boolean
+  /** Accessible name of the region when there is no visible title. */
+  accessibleLabel?: string
+  /** The body. */
+  children?: ReactNode
+  /** The header title (a heading). Required on a pressable surface: it holds the primary control. */
+  title?: ReactNode
+  /** A secondary line under the title. */
+  description?: ReactNode
+  /** The footer region, usually actions. */
+  footer?: ReactNode
+  /** A press of the primary control (directly, or forwarded from anywhere on the surface). */
+  onClick?: (event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { elevation: "sheet", padding: "regular", titleLevel: "h3" } as const
+
+export const TySurface = forwardRef<HTMLElement, TySurfaceProps>(function TySurface(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 = {
+    elevation: props.elevation ?? DEFAULTS.elevation,
+    padding: props.padding ?? DEFAULTS.padding,
+    titleLevel: props.titleLevel ?? DEFAULTS.titleLevel,
+    pressable: props.pressable,
+    href: props.href,
+    selected: props.selected,
+    disabled: props.disabled,
+    accessibleLabel: props.accessibleLabel,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "title": filled(props.title), "description": filled(props.description), "footer": filled(props.footer) }
+  return createElement("ty-surface", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "elevation": text(p.elevation), "padding": text(p.padding), "title-level": text(p.titleLevel), "pressable": truthy(p.pressable) ? true : undefined, "href": text(p.href), "selected": truthy(p.selected) ? true : undefined, "disabled": truthy(p.disabled) ? true : undefined, "accessible-label": text(p.accessibleLabel) },
+    createElement("section", { className: "ty-surface", "aria-labelledby": (slots["title"]) ? (`${instance}-title`) : undefined, "aria-label": (!(slots["title"])) ? (p.accessibleLabel) : undefined, "data-elevation": p.elevation, "data-padding": p.padding, "data-pressable": (truthy(p.pressable) || truthy(p.href)) ? ("") : undefined, "data-selected": truthy(p.selected) ? '' : undefined, "data-disabled": (truthy(p.pressable) || truthy(p.href)) && (truthy(p.disabled)) ? ("") : undefined },
+      (slots["title"] || slots["description"]) ? createElement("header", { className: "ty-surface__header" },
+        (slots["title"]) && (p.titleLevel === "h2") ? createElement("h2", { className: "ty-surface__title", id: `${instance}-title` },
+          (truthy(p.href)) ? createElement("a", { className: "ty-surface__primary", href: (!(truthy(p.disabled))) ? (p.href) : undefined, "aria-disabled": truthy(p.disabled) ? 'true' : undefined, onClick: (event: ChangeEvent<HTMLAnchorElement>) => handlers.current.onClick?.(event) },
+            props.title,
+          ) : null,
+          (!(truthy(p.href))) && (truthy(p.pressable)) ? createElement("button", { className: "ty-surface__primary", type: "button", disabled: truthy(p.disabled) || undefined, onClick: (event: ChangeEvent<HTMLButtonElement>) => handlers.current.onClick?.(event) },
+            props.title,
+          ) : null,
+          ((!(truthy(p.href))) && (!(truthy(p.pressable)))) ? props.title : null,
+        ) : null,
+        (slots["title"]) && (p.titleLevel === "h3") ? createElement("h3", { className: "ty-surface__title", id: `${instance}-title` },
+          (truthy(p.href)) ? createElement("a", { className: "ty-surface__primary", href: (!(truthy(p.disabled))) ? (p.href) : undefined, "aria-disabled": truthy(p.disabled) ? 'true' : undefined, onClick: (event: ChangeEvent<HTMLAnchorElement>) => handlers.current.onClick?.(event) },
+            props.title,
+          ) : null,
+          (!(truthy(p.href))) && (truthy(p.pressable)) ? createElement("button", { className: "ty-surface__primary", type: "button", disabled: truthy(p.disabled) || undefined, onClick: (event: ChangeEvent<HTMLButtonElement>) => handlers.current.onClick?.(event) },
+            props.title,
+          ) : null,
+          ((!(truthy(p.href))) && (!(truthy(p.pressable)))) ? props.title : null,
+        ) : null,
+        (slots["title"]) && (p.titleLevel === "h4") ? createElement("h4", { className: "ty-surface__title", id: `${instance}-title` },
+          (truthy(p.href)) ? createElement("a", { className: "ty-surface__primary", href: (!(truthy(p.disabled))) ? (p.href) : undefined, "aria-disabled": truthy(p.disabled) ? 'true' : undefined, onClick: (event: ChangeEvent<HTMLAnchorElement>) => handlers.current.onClick?.(event) },
+            props.title,
+          ) : null,
+          (!(truthy(p.href))) && (truthy(p.pressable)) ? createElement("button", { className: "ty-surface__primary", type: "button", disabled: truthy(p.disabled) || undefined, onClick: (event: ChangeEvent<HTMLButtonElement>) => handlers.current.onClick?.(event) },
+            props.title,
+          ) : null,
+          ((!(truthy(p.href))) && (!(truthy(p.pressable)))) ? props.title : null,
+        ) : null,
+        (slots["description"]) ? createElement("div", { className: "ty-surface__description" },
+          props.description,
+        ) : null,
+      ) : null,
+      (slots["default"]) ? createElement("div", { className: "ty-surface__body" },
+        props.children,
+      ) : null,
+      (slots["footer"]) ? createElement("footer", { className: "ty-surface__footer" },
+        props.footer,
+      ) : null,
+    ))
+})

package/src/elements/react/TySwitch.ts

@@ -0,0 +1,77 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/switch/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 !== ''
+
+/** On/off setting with immediate effect. A native checkbox with role="switch" inside a <label>, so labelling, keyboard and form participation are the platform's; Enter toggles as well as Space. */
+export interface TySwitchProps {
+  /** On. */
+  checked?: boolean
+  /** Native disabled. */
+  disabled?: boolean
+  /** Shown but not changeable (`aria-readonly`). */
+  readOnly?: 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
+  /** Track size. Default: `regular`. */
+  size?: "small" | "regular" | "large"
+  /** `tile`: text at the start, control at the end, the whole row is the target. Default: `inline`. */
+  layout?: "inline" | "tile"
+  /** 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 native change of the checkbox; `checked` is the new state. */
+  onChange?: (detail: { checked: boolean }, event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { size: "regular", layout: "inline" } as const
+
+export const TySwitch = forwardRef<HTMLElement, TySwitchProps>(function TySwitch(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,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    name: props.name,
+    value: props.value,
+    size: props.size ?? DEFAULTS.size,
+    layout: props.layout ?? DEFAULTS.layout,
+    accessibleLabel: props.accessibleLabel,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "description": filled(props.description) }
+  return createElement("ty-switch", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "checked": truthy(p.checked) ? true : undefined, "disabled": truthy(p.disabled) ? true : undefined, "read-only": truthy(p.readOnly) ? true : undefined, "name": text(p.name), "value": text(p.value), "size": text(p.size), "layout": text(p.layout), "accessible-label": text(p.accessibleLabel), "test-id": text(p.testId) },
+    createElement("label", { className: "ty-switch", "data-layout": p.layout, "data-size": p.size, "data-selected": truthy(p.checked) ? '' : undefined, "data-disabled": truthy(p.disabled) ? '' : undefined, "data-readonly": truthy(p.readOnly) ? '' : undefined },
+      createElement("input", { className: "ty-visually-hidden", type: "checkbox", role: "switch", name: p.name, value: p.value, checked: Boolean(p.checked), disabled: truthy(p.disabled) || undefined, "aria-readonly": truthy(p.readOnly) ? 'true' : undefined, "aria-label": (!(slots["default"])) ? (p.accessibleLabel) : undefined, "aria-labelledby": (slots["default"]) ? (`${instance}-label`) : undefined, "aria-describedby": (slots["description"]) ? (`${instance}-description`) : undefined, "data-testid": p.testId, onChange: (event: ChangeEvent<HTMLInputElement>) => handlers.current.onChange?.({ checked: event.currentTarget.checked }, event) }),
+      createElement("span", { className: "ty-switch__track", "aria-hidden": "true" },
+        createElement("span", { className: "ty-switch__thumb" }),
+      ),
+      (slots["default"] || slots["description"]) ? createElement("span", { className: "ty-switch__text" },
+        (slots["default"]) ? createElement("span", { className: "ty-switch__label", id: `${instance}-label` },
+          props.children,
+        ) : null,
+        (slots["description"]) ? createElement("span", { className: "ty-switch__description", id: `${instance}-description` },
+          props.description,
+        ) : null,
+      ) : null,
+    ))
+})

package/src/elements/react/TyTabs.ts

@@ -0,0 +1,66 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/tabs/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)
+
+/** Sibling views of one object, one panel at a time (the APG tabs pattern). The tab list is one tab stop: the arrow keys move along the `orientation` axis, wrapping and skipping disabled tabs, Home and End jump, and Left/Right follow the reading direction. `activation` decides whether moving focus also selects. Selection is controlled with `selected-key` or uncontrolled from `default-selected-key` (the first enabled tab when neither is set); a different selection is reported with `ty-selection-change`. */
+export interface TyTabsProps {
+  /** Controlled selection: the selected tab's id. The element asks for a change with `ty-selection-change`; the host flips the attribute. */
+  selectedKey?: string
+  /** Initial selection of an uncontrolled list; the first enabled tab when unset. */
+  defaultSelectedKey?: string
+  /** Layout of the list and the arrow-key axis: Left/Right (following the reading direction), or Up/Down when vertical. Default: `horizontal`. */
+  orientation?: "horizontal" | "vertical"
+  /** Automatic selects on focus; manual needs Enter or Space on the focused tab. Default: `automatic`. */
+  activation?: "automatic" | "manual"
+  /** Accessible name of the tab list (required). */
+  label?: string
+  /** JSON array of the tabs: [{ "id", "label", "count"?, "disabled"? }]. The count follows the label and joins the accessible name; a disabled tab cannot be selected and the arrow keys skip it. (The React component's decorative icon has no attribute form.) */
+  tabs?: string
+  /** Keep inactive panels in the DOM (hidden) to preserve their state. The element always keeps them — their nodes belong to the host — so the attribute only tells a wrapper it may unmount. */
+  keepMounted?: boolean
+  /** The panels: one element per tab, keyed by `data-panel` (the tab's id). The element wires the role, id, `aria-labelledby` and visibility; only the selected panel shows. */
+  children?: ReactNode
+  /** A different tab was selected (a click, or the keyboard per `activation`). Uncontrolled, the element has already applied it; controlled (`selected-key`), the host flips the attribute. */
+  onSelectionChange?: (detail: { key: string }) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { orientation: "horizontal", activation: "automatic" } as const
+
+export const TyTabs = forwardRef<HTMLElement, TyTabsProps>(function TyTabs(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-selection-change", (event) => handlers.current.onSelectionChange?.((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 = {
+    selectedKey: props.selectedKey,
+    defaultSelectedKey: props.defaultSelectedKey,
+    orientation: props.orientation ?? DEFAULTS.orientation,
+    activation: props.activation ?? DEFAULTS.activation,
+    label: props.label,
+    tabs: props.tabs,
+    keepMounted: props.keepMounted,
+  }
+  return createElement("ty-tabs", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "selected-key": text(p.selectedKey), "default-selected-key": text(p.defaultSelectedKey), "orientation": text(p.orientation), "activation": text(p.activation), "label": text(p.label), "tabs": text(p.tabs), "keep-mounted": truthy(p.keepMounted) ? true : undefined },
+    createElement("div", { className: "ty-tabs", "data-orientation": p.orientation },
+      createElement("div", { className: "ty-tabs__list", role: "tablist", "aria-label": p.label, "aria-orientation": p.orientation, "data-orientation": p.orientation }),
+      props.children,
+    ))
+})

package/src/elements/react/TyTag.ts

@@ -0,0 +1,71 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/tag/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 !== ''
+
+/** Small label for static metadata (a badge or chip), optionally removable; the remove button is a native <button>. An interactive tag (pressable or a link) is a plain styled native — <button class="ty-tag" data-interactive> or <a class="ty-tag" href> — not this element (see docs/html-contract.md). */
+export interface TyTagProps {
+  /** `accent` fills with the theme accent. Default: `neutral`. */
+  tone?: "neutral" | "accent"
+  /** A categorical token (1 to 8) shown as a small colour square; normalised into range on upgrade. */
+  categoryIndex?: number
+  /** Text step; `small` never goes below the meta size. Default: `regular`. */
+  size?: "small" | "regular" | "large"
+  /** Shows the remove button at the end. */
+  removable?: boolean
+  /** Accessible name of the remove button; must include the tag text (defaults to "Remove <text>" on upgrade). */
+  removeLabel?: string
+  /** A polite live region (`role="status"`) for a tag whose text updates dynamically. */
+  live?: boolean
+  /** Test hook on the tag (`data-testid`). */
+  testId?: string
+  /** The text; truncates with an ellipsis. */
+  children?: ReactNode
+  /** A leading icon (decorative); wins over the category square. */
+  icon?: ReactNode
+  /** The remove button's native click (wired on that button). */
+  onClick?: (event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { tone: "neutral", size: "regular" } as const
+
+export const TyTag = forwardRef<HTMLElement, TyTagProps>(function TyTag(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 = {
+    tone: props.tone ?? DEFAULTS.tone,
+    categoryIndex: props.categoryIndex,
+    size: props.size ?? DEFAULTS.size,
+    removable: props.removable,
+    removeLabel: props.removeLabel,
+    live: props.live,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "icon": filled(props.icon) }
+  return createElement("ty-tag", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "tone": text(p.tone), "category-index": text(p.categoryIndex), "size": text(p.size), "removable": truthy(p.removable) ? true : undefined, "remove-label": text(p.removeLabel), "live": truthy(p.live) ? true : undefined, "test-id": text(p.testId) },
+    createElement("span", { className: "ty-tag", role: (truthy(p.live)) ? ("status") : undefined, "aria-live": (truthy(p.live)) ? ("polite") : undefined, "data-tone": p.tone, "data-size": p.size, "data-removable": truthy(p.removable) ? '' : undefined, "data-testid": p.testId },
+      (slots["icon"]) ? createElement("span", { className: "ty-tag__icon", "aria-hidden": "true" },
+        props.icon,
+      ) : null,
+      (!(slots["icon"])) && (truthy(p.categoryIndex)) ? createElement("span", { className: "ty-tag__swatch", "aria-hidden": "true", "data-category": p.categoryIndex }) : null,
+      createElement("span", { className: "ty-tag__text" },
+        props.children,
+      ),
+      (truthy(p.removable)) ? createElement("button", { className: "ty-tag__remove", type: "button", "aria-label": p.removeLabel, onClick: (event: ChangeEvent<HTMLButtonElement>) => handlers.current.onClick?.(event) },
+        createElement("svg", { className: "ty-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" },
+          createElement("path", { d: "M2.5 2.5l7 7M9.5 2.5l-7 7" }),
+        ),
+      ) : null,
+    ))
+})