@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/elements/react/TyCommandPalette.ts

@@ -0,0 +1,120 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/command-palette/definition.ts. Do not edit.
+import { createElement, forwardRef, useEffect, 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)
+
+/** Global search-and-commands dialog in the top layer: a combobox field over grouped, fuzzy-matched results with scopes, per-item actions, fallback actions and recents. The query, the highlight and the actions sub-list reset on each open. */
+export interface TyCommandPaletteProps {
+  /** Shown (a modal dialog in the top layer). The element closes itself after a choice or the stepped-back Escape — removing the attribute and asking the host with `ty-close` — so a controlled host follows the attribute. */
+  open?: boolean
+  /** JSON array of groups: `{ id, heading, scopeId?, items: [{ id, label, description?, icon?, iconPath?, keywords?, hint?, shortcut?, scopeId?, actions?: [{ id, label, icon?, iconPath?, shortcut? }] }] }`. `keywords` are matched but not shown; `icon` is a text glyph; `iconPath` is 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. Unparseable or missing: no groups. */
+  groups?: string
+  /** JSON array of scopes: `[{ id, label, icon? }]`; empty means no scoping (no scope column, no scope keys). */
+  scopes?: string
+  /** The active scope id; unset: everything. The element reflects user changes back to this attribute and reports them with `ty-scope-change`. */
+  activeScope?: string
+  /** Shows skeleton rows and announces the loading label instead of results. */
+  loading?: boolean
+  /** JSON array of actions offered when the query matches nothing: `[{ id, label, icon?, iconPath?, shortcut? }]`; `{query}` in a label is replaced by the query. `iconPath` is as in `groups` (an SVG icon wins over the `icon` text glyph). */
+  fallbackActions?: string
+  /** Browser-storage key of the recent store; enables it. Records the chosen item id with a count and a time, tolerant of storage being unavailable. */
+  recentKey?: string
+  /** Recents shown when the query is empty, most chosen first (ties: most recent). Default: `5`. */
+  recentVisible?: number
+  /** Most recent ids the store keeps. Default: `12`. */
+  recentKeep?: number
+  /** Accessible name of the dialog and the field. Default: `Search and commands`. */
+  label?: string
+  /** Field placeholder. Default: `Search or type a command`. */
+  placeholder?: string
+  /** Shown on an empty query with nothing to list. Default: `Type to search records, sources and screens.`. */
+  emptyLabel?: string
+  /** Shown and announced when the query matches nothing; {query} is replaced. Default: `Nothing matches “{query}”.`. */
+  noResultsLabel?: string
+  /** Announced in the status region while `loading`. Default: `Loading results`. */
+  loadingLabel?: string
+  /** Accessible name of the scope chip; {scope} is replaced by the scope label. Default: `Remove scope {scope}`. */
+  removeScopeLabel?: string
+  /** Heading of the actions sub-list; {label} is replaced by the item label. Default: `Actions for {label}`. */
+  actionsForLabel?: string
+  /** Heading of the recent group. Default: `Recent`. */
+  recentLabel?: string
+  /** Announced result count; {count} is replaced. Default: `{count} results`. */
+  resultsLabel?: string
+  /** Accessible name of the scope column. Default: `Scopes`. */
+  scopesLabel?: string
+  /** Heading of the fallback group. Default: `Other actions`. */
+  fallbackLabel?: string
+  /** Footer hint beside ↑↓. Default: `move`. */
+  hintNavigate?: string
+  /** Footer hint beside ↵. Default: `open`. */
+  hintSelect?: string
+  /** Footer hint beside →. Default: `actions`. */
+  hintActions?: string
+  /** Footer hint beside ←. Default: `back`. */
+  hintBack?: string
+  /** Footer hint beside esc. Default: `close`. */
+  hintClose?: string
+  /** A row was chosen: an item (`kind: "item"`, `id` the item id), a secondary action (`kind: "action"`, `id` the action id, `itemId` its item) or a fallback action (`kind: "fallback"`). `itemId` is empty except for actions. The palette then closes itself and asks the host with `ty-close`. */
+  onSelect?: (detail: { id: string; kind: string; itemId: string }) => void
+  /** The active scope changed (a scope button, the chip, Tab or Backspace); `scope` is the scope id, empty when cleared. The element reflects it to the `active-scope` attribute. */
+  onScopeChange?: (detail: { scope: string }) => void
+  /** The palette asks to close (the stepped-back Escape reaching the top level, a press outside, or after a choice). The element closes itself too. */
+  onClose?: () => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { recentVisible: 5, recentKeep: 12, label: "Search and commands", placeholder: "Search or type a command", emptyLabel: "Type to search records, sources and screens.", noResultsLabel: "Nothing matches “{query}”.", loadingLabel: "Loading results", removeScopeLabel: "Remove scope {scope}", actionsForLabel: "Actions for {label}", recentLabel: "Recent", resultsLabel: "{count} results", scopesLabel: "Scopes", fallbackLabel: "Other actions", hintNavigate: "move", hintSelect: "open", hintActions: "actions", hintBack: "back", hintClose: "close" } as const
+
+export const TyCommandPalette = forwardRef<HTMLElement, TyCommandPaletteProps>(function TyCommandPalette(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-select", (event) => handlers.current.onSelect?.((event as CustomEvent).detail)],
+      ["ty-scope-change", (event) => handlers.current.onScopeChange?.((event as CustomEvent).detail)],
+      ["ty-close", () => handlers.current.onClose?.()],
+    ]
+    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,
+    groups: props.groups,
+    scopes: props.scopes,
+    activeScope: props.activeScope,
+    loading: props.loading,
+    fallbackActions: props.fallbackActions,
+    recentKey: props.recentKey,
+    recentVisible: props.recentVisible ?? DEFAULTS.recentVisible,
+    recentKeep: props.recentKeep ?? DEFAULTS.recentKeep,
+    label: props.label ?? DEFAULTS.label,
+    placeholder: props.placeholder ?? DEFAULTS.placeholder,
+    emptyLabel: props.emptyLabel ?? DEFAULTS.emptyLabel,
+    noResultsLabel: props.noResultsLabel ?? DEFAULTS.noResultsLabel,
+    loadingLabel: props.loadingLabel ?? DEFAULTS.loadingLabel,
+    removeScopeLabel: props.removeScopeLabel ?? DEFAULTS.removeScopeLabel,
+    actionsForLabel: props.actionsForLabel ?? DEFAULTS.actionsForLabel,
+    recentLabel: props.recentLabel ?? DEFAULTS.recentLabel,
+    resultsLabel: props.resultsLabel ?? DEFAULTS.resultsLabel,
+    scopesLabel: props.scopesLabel ?? DEFAULTS.scopesLabel,
+    fallbackLabel: props.fallbackLabel ?? DEFAULTS.fallbackLabel,
+    hintNavigate: props.hintNavigate ?? DEFAULTS.hintNavigate,
+    hintSelect: props.hintSelect ?? DEFAULTS.hintSelect,
+    hintActions: props.hintActions ?? DEFAULTS.hintActions,
+    hintBack: props.hintBack ?? DEFAULTS.hintBack,
+    hintClose: props.hintClose ?? DEFAULTS.hintClose,
+  }
+  return createElement("ty-command-palette", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "open": truthy(p.open) ? true : undefined, "groups": text(p.groups), "scopes": text(p.scopes), "active-scope": text(p.activeScope), "loading": truthy(p.loading) ? true : undefined, "fallback-actions": text(p.fallbackActions), "recent-key": text(p.recentKey), "recent-visible": text(p.recentVisible), "recent-keep": text(p.recentKeep), "label": text(p.label), "placeholder": text(p.placeholder), "empty-label": text(p.emptyLabel), "no-results-label": text(p.noResultsLabel), "loading-label": text(p.loadingLabel), "remove-scope-label": text(p.removeScopeLabel), "actions-for-label": text(p.actionsForLabel), "recent-label": text(p.recentLabel), "results-label": text(p.resultsLabel), "scopes-label": text(p.scopesLabel), "fallback-label": text(p.fallbackLabel), "hint-navigate": text(p.hintNavigate), "hint-select": text(p.hintSelect), "hint-actions": text(p.hintActions), "hint-back": text(p.hintBack), "hint-close": text(p.hintClose) })
+})

package/src/elements/react/TyCurrencyField.ts

@@ -0,0 +1,126 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/currency-field/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 !== ''
+
+/** Money or count entry with live grouping in the locale's separators; reports a plain canonical number (digits, an optional dot and decimals, never grouped). A native <input> inside, so typing, keyboard, autofill and form participation are the platform's; the element regroups the display on every edit, keeps the caret after the same digit, shows the currency symbol and names the currency to assistive technology. */
+export interface TyCurrencyFieldProps {
+  /** Canonical value: digits with an optional dot and decimals, never grouped ("1500000.5"); "" when empty. The element mirrors it into the control as grouped display text (while the user types, the live value is the control's own). */
+  value?: string
+  /** Initial canonical value of an uncontrolled field, applied once on connect; a form reset returns to it. */
+  defaultValue?: string
+  /** ISO 4217 code ("BRL"); the symbol is shown (visual only) and the currency name is announced as part of the description. Omit for plain counts. */
+  currency?: string
+  /** Maximum fraction digits; 0 means integers only (the decimal separator is ignored and the mobile keyboard is numeric). Default: `2`. */
+  decimals?: number
+  /** Locale that decides the group and decimal separators ("pt-BR"); the document language, then the browser locale, when unset. Changing it changes only the display, never the canonical value. */
+  locale?: string
+  /** Type scale step; `display` uses the KPI numeral style. Default: `medium`. */
+  size?: "small" | "medium" | "large" | "display"
+  /** Template of the visually hidden currency note; `{currency}` is filled with the locale's currency name ("Currency: Brazilian real"). Default: `Currency: {currency}`. */
+  currencyLabel?: string
+  /** Native required. */
+  required?: boolean
+  /** Native disabled. */
+  disabled?: boolean
+  /** Shown but not changeable. */
+  readOnly?: boolean
+  /** Painted and announced as invalid without an error message (a surrounding field marks it). */
+  invalid?: boolean
+  /** Form field name. */
+  name?: string
+  /** Native placeholder. */
+  placeholder?: string
+  /** Accessible name when there is no visible label. */
+  accessibleLabel?: string
+  /** `aria-labelledby` from a surrounding field (used when there is no visible label and no `accessibleLabel`). */
+  labelledBy?: string
+  /** `aria-describedby` from a surrounding field, joined before the field's own parts. */
+  describedBy?: string
+  /** Explicit id of the control (a surrounding field's control id); `<instance>-input` otherwise. */
+  controlId?: string
+  /** Test hook on the root (`data-testid`). */
+  testId?: string
+  /** The visible label, targeting the input. */
+  label?: ReactNode
+  /** Help text above the group, announced as the description. */
+  hint?: ReactNode
+  /** The error message; marks the field invalid and is announced. */
+  error?: ReactNode
+  /** After every edit; `value` is the canonical number (digits, an optional dot and decimals, never grouped; "" when empty). The display text is never reported. */
+  onValueChange?: (detail: { value: string }) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { decimals: 2, size: "medium", currencyLabel: "Currency: {currency}" } as const
+
+export const TyCurrencyField = forwardRef<HTMLElement, TyCurrencyFieldProps>(function TyCurrencyField(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-value-change", (event) => handlers.current.onValueChange?.((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 = {
+    value: props.value,
+    defaultValue: props.defaultValue,
+    currency: props.currency,
+    decimals: props.decimals ?? DEFAULTS.decimals,
+    locale: props.locale,
+    size: props.size ?? DEFAULTS.size,
+    currencyLabel: props.currencyLabel ?? DEFAULTS.currencyLabel,
+    required: props.required,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    invalid: props.invalid,
+    name: props.name,
+    placeholder: props.placeholder,
+    accessibleLabel: props.accessibleLabel,
+    labelledBy: props.labelledBy,
+    describedBy: props.describedBy,
+    controlId: props.controlId,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "label": filled(props.label), "hint": filled(props.hint), "error": filled(props.error) }
+  return createElement("ty-currency-field", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "value": text(p.value), "default-value": text(p.defaultValue), "currency": text(p.currency), "decimals": text(p.decimals), "locale": text(p.locale), "size": text(p.size), "currency-label": text(p.currencyLabel), "required": truthy(p.required) ? true : undefined, "disabled": truthy(p.disabled) ? true : undefined, "read-only": truthy(p.readOnly) ? true : undefined, "invalid": truthy(p.invalid) ? true : undefined, "name": text(p.name), "placeholder": text(p.placeholder), "accessible-label": text(p.accessibleLabel), "labelled-by": text(p.labelledBy), "described-by": text(p.describedBy), "control-id": text(p.controlId), "test-id": text(p.testId) },
+    createElement("div", { className: "ty-currency-field", "data-size": p.size, "data-invalid": (truthy(p.invalid) || slots["error"]) ? ("") : undefined, "data-readonly": truthy(p.readOnly) ? '' : undefined, "data-disabled": truthy(p.disabled) ? '' : undefined, "data-testid": p.testId },
+      createElement("div", { className: "ty-currency-field__field" },
+        (slots["label"]) ? createElement("label", { className: "ty-fb-line", "data-line": "label", htmlFor: (text(p.controlId) ?? `${instance}-input`) },
+          props.label,
+        ) : null,
+        (slots["hint"]) ? createElement("p", { className: "ty-fb-line", "data-line": "hint", id: `${instance}-hint` },
+          props.hint,
+        ) : null,
+        createElement("div", { className: "ty-currency-field__box" },
+          (truthy(p.currency)) ? createElement("span", { className: "ty-currency-field__symbol", "aria-hidden": "true" }) : null,
+          createElement("input", { className: "ty-currency-field__input", id: (text(p.controlId) ?? `${instance}-input`), type: "text", name: p.name, placeholder: p.placeholder, autoComplete: "off", disabled: truthy(p.disabled) || undefined, readOnly: truthy(p.readOnly) || undefined, required: truthy(p.required) || undefined, "aria-label": (!(slots["label"])) ? (p.accessibleLabel) : undefined, "aria-labelledby": (!(slots["label"])) && (!(truthy(p.accessibleLabel))) ? (p.labelledBy) : undefined, "aria-describedby": [text(p.describedBy) ?? '', (((slots["hint"])) ? `${instance}-hint` : ''), (((truthy(p.currency))) ? `${instance}-currency` : ''), (((slots["error"])) ? `${instance}-error` : '')].filter(Boolean).join(' ') || undefined, "aria-invalid": (truthy(p.invalid) || slots["error"]) ? ("true") : undefined }),
+        ),
+        (truthy(p.currency)) ? createElement("span", { className: "ty-visually-hidden ty-currency-field__currency", id: `${instance}-currency` }) : null,
+        (slots["error"]) ? createElement("p", { className: "ty-fb-line", "data-line": "error", id: `${instance}-error` },
+          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-currency-field__glyph", cx: "12", cy: "12", r: "10" }),
+            createElement("line", { className: "ty-currency-field__glyph", x1: "12", y1: "8", x2: "12", y2: "12" }),
+            createElement("line", { className: "ty-currency-field__glyph", x1: "12", y1: "16", x2: "12.01", y2: "16" }),
+          ),
+          createElement("span", { className: "ty-currency-field__error-text" },
+            props.error,
+          ),
+        ) : null,
+      ),
+    ))
+})

package/src/elements/react/TyDataTable.ts

@@ -0,0 +1,105 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/data-table/definition.ts. Do not edit.
+import { createElement, forwardRef, useEffect, 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)
+
+/** Records as rows and attributes as columns, with sorting, optional row selection, row navigation, loading and empty states, in three densities. Data arrives as JSON attributes; sort, selection and row activation are controlled: the element emits `ty-sort-change`, `ty-selection-change` and `ty-row-action`, and the host writes the new `sort-column`/`sort-direction`/`selected-keys` back. */
+export interface TyDataTableProps {
+  /** Accessible name of the table (required); visually hidden unless `captionVisible`. */
+  caption?: string
+  /** Show the caption above the table; it always names the table. */
+  captionVisible?: boolean
+  /** JSON array of column definitions: { id, header, sortable?, align?: "start"|"end", numeric? }. `numeric` implies end alignment and tabular figures. */
+  columns?: string
+  /** JSON array of rows: { id, cells: { "<columnId>": "<text>" }, href?, label? }. `href` makes the whole row the target (one link per row in the tab order); `label` names the row link. */
+  rows?: string
+  /** Row height and cell padding: comfortable 52 px, standard 44 px, compact 36 px. Default: `standard`. */
+  density?: "comfortable" | "standard" | "compact"
+  /** The currently sorted column id (controlled). */
+  sortColumn?: string
+  /** Direction of `sortColumn` (controlled); unset: no sort. */
+  sortDirection?: "ascending" | "descending"
+  /** `multiple` adds a checkbox column and a select-all header checkbox. Default: `none`. */
+  selectionMode?: "none" | "multiple"
+  /** JSON array of the selected row ids (controlled). */
+  selectedKeys?: string
+  /** Show skeleton rows instead of data; the table is `aria-busy` and a polite status announces `loadingLabel`. */
+  loading?: boolean
+  /** Number of skeleton rows while loading. Default: `10`. */
+  loadingRowCount?: number
+  /** Polite status announced while loading. Default: `Loading the list`. */
+  loadingLabel?: string
+  /** Title of the built-in empty state, shown in a single cell spanning all columns when not loading and rows are empty. Default: `No rows to show`. */
+  emptyLabel?: string
+  /** Optional description under the empty title. */
+  emptyDescription?: string
+  /** Accessible name of the header checkbox. Default: `Select all rows`. */
+  selectAllLabel?: string
+  /** Accessible name template of a row checkbox; `{label}` is the row label. Default: `Select {label}`. */
+  selectRowLabel?: string
+  /** Rows are activatable: Enter or a press on a row without `href` emits `ty-row-action` (the presence of the spec's `onRowAction`). */
+  actionable?: boolean
+  /** `true` or `false`; unset: the first column stays visible while scrolling horizontally. */
+  stickyFirstColumn?: string
+  /** Vertical dividers between columns. */
+  showColumnLines?: boolean
+  /** Maximum height of the scroll container, enabling the sticky header. */
+  maxBlockSize?: string
+  /** A sortable header cycled (none → ascending → descending → none). `direction` is `ascending`, `descending` or null when the sort cleared (the attribute reads an empty string for the cleared state). Controlled: the host writes `sort-column`/`sort-direction`. */
+  onSortChange?: (detail: { column: string; direction: string }) => void
+  /** The selection changed (a row checkbox, the select-all header checkbox, or Space on a focused row); `keys` is a JSON array of the selected row ids. Controlled: the host writes `selected-keys`. */
+  onSelectionChange?: (detail: { keys: string }) => void
+  /** A row without `href` was activated (Enter or a press). */
+  onRowAction?: (detail: { id: string }) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { density: "standard", selectionMode: "none", loadingRowCount: 10, loadingLabel: "Loading the list", emptyLabel: "No rows to show", selectAllLabel: "Select all rows", selectRowLabel: "Select {label}" } as const
+
+export const TyDataTable = forwardRef<HTMLElement, TyDataTableProps>(function TyDataTable(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-sort-change", (event) => handlers.current.onSortChange?.((event as CustomEvent).detail)],
+      ["ty-selection-change", (event) => handlers.current.onSelectionChange?.((event as CustomEvent).detail)],
+      ["ty-row-action", (event) => handlers.current.onRowAction?.((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 = {
+    caption: props.caption,
+    captionVisible: props.captionVisible,
+    columns: props.columns,
+    rows: props.rows,
+    density: props.density ?? DEFAULTS.density,
+    sortColumn: props.sortColumn,
+    sortDirection: props.sortDirection,
+    selectionMode: props.selectionMode ?? DEFAULTS.selectionMode,
+    selectedKeys: props.selectedKeys,
+    loading: props.loading,
+    loadingRowCount: props.loadingRowCount ?? DEFAULTS.loadingRowCount,
+    loadingLabel: props.loadingLabel ?? DEFAULTS.loadingLabel,
+    emptyLabel: props.emptyLabel ?? DEFAULTS.emptyLabel,
+    emptyDescription: props.emptyDescription,
+    selectAllLabel: props.selectAllLabel ?? DEFAULTS.selectAllLabel,
+    selectRowLabel: props.selectRowLabel ?? DEFAULTS.selectRowLabel,
+    actionable: props.actionable,
+    stickyFirstColumn: props.stickyFirstColumn,
+    showColumnLines: props.showColumnLines,
+    maxBlockSize: props.maxBlockSize,
+  }
+  return createElement("ty-data-table", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "caption": text(p.caption), "caption-visible": truthy(p.captionVisible) ? true : undefined, "columns": text(p.columns), "rows": text(p.rows), "density": text(p.density), "sort-column": text(p.sortColumn), "sort-direction": text(p.sortDirection), "selection-mode": text(p.selectionMode), "selected-keys": text(p.selectedKeys), "loading": truthy(p.loading) ? true : undefined, "loading-row-count": text(p.loadingRowCount), "loading-label": text(p.loadingLabel), "empty-label": text(p.emptyLabel), "empty-description": text(p.emptyDescription), "select-all-label": text(p.selectAllLabel), "select-row-label": text(p.selectRowLabel), "actionable": truthy(p.actionable) ? true : undefined, "sticky-first-column": text(p.stickyFirstColumn), "show-column-lines": truthy(p.showColumnLines) ? true : undefined, "max-block-size": text(p.maxBlockSize) })
+})

package/src/elements/react/TyDrawer.ts

@@ -0,0 +1,99 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/drawer/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 !== ''
+
+/** Modal panel sliding in from an edge of the viewport for a secondary task: a backdrop, a panel anchored to the bottom (sheet) or end (side panel) edge, a header with the title and an always-present close button, an optional grab handle, a scrolling body and a bottom safe-area inset. Controlled through `open`; the element asks to close with `ty-open-change` (Escape, close button, an allowed backdrop press, a drag past the threshold) and the host flips `open`. Focus moves into the panel on open, is trapped while open, and returns to the invoking element on close; the page behind is inert and does not scroll. */
+export interface TyDrawerProps {
+  /** Shown (controlled). The anatomy stays mounted but `hidden` while closed, so nothing reaches the accessibility tree. */
+  open?: boolean
+  /** The edge the panel attaches to; `end` follows the reading direction. Default: `bottom`. */
+  placement?: "bottom" | "end"
+  /** Maximum width step of an end-placed panel. Default: `medium`. */
+  width?: "medium" | "large" | "wide"
+  /** Maximum height of a bottom-placed panel (a CSS length, e.g. `85dvh`); applied to the panel on upgrade. */
+  maxHeight?: string
+  /** `true` or `false`; unset: the grab handle shows on bottom placement. */
+  showHandle?: string
+  /** `true` or `false`; unset (or `true`): a backdrop press and a drag past the threshold dismiss. Escape and the close button always work. */
+  dismissible?: string
+  /** Accessible name of the close button. Default: `Close`. */
+  closeLabel?: string
+  /** Accessible name of the dialog when the title slot is empty. */
+  accessibleLabel?: string
+  /** Test hook on the panel (`data-testid`). */
+  panelTestId?: string
+  /** Test hook on the backdrop (`data-testid`). */
+  backdropTestId?: string
+  /** The visible heading; also the accessible name (`accessibleLabel` when empty). */
+  title?: ReactNode
+  /** The body; scrolls when long. */
+  children?: ReactNode
+  /** The element asks the host to change visibility — `open: false` on Escape, the close button, an allowed backdrop press or a drag past the threshold. Controlled: the element does not close itself; the host flips `open`. */
+  onOpenChange?: (detail: { open: boolean }) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { placement: "bottom", width: "medium", closeLabel: "Close" } as const
+
+export const TyDrawer = forwardRef<HTMLElement, TyDrawerProps>(function TyDrawer(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-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,
+    placement: props.placement ?? DEFAULTS.placement,
+    width: props.width ?? DEFAULTS.width,
+    maxHeight: props.maxHeight,
+    showHandle: props.showHandle,
+    dismissible: props.dismissible,
+    closeLabel: props.closeLabel ?? DEFAULTS.closeLabel,
+    accessibleLabel: props.accessibleLabel,
+    panelTestId: props.panelTestId,
+    backdropTestId: props.backdropTestId,
+  }
+  const slots: Record<string, boolean> = { "title": filled(props.title), "default": filled(props.children) }
+  return createElement("ty-drawer", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "open": truthy(p.open) ? true : undefined, "placement": text(p.placement), "width": text(p.width), "max-height": text(p.maxHeight), "show-handle": text(p.showHandle), "dismissible": text(p.dismissible), "close-label": text(p.closeLabel), "accessible-label": text(p.accessibleLabel), "panel-test-id": text(p.panelTestId), "backdrop-test-id": text(p.backdropTestId) },
+    createElement("div", { className: "ty-drawer__backdrop", hidden: (!(truthy(p.open))) ? (true) : undefined, "data-placement": p.placement, "data-testid": p.backdropTestId },
+      createElement("div", { className: "ty-drawer", "data-placement": p.placement, "data-width": p.width },
+        createElement("div", { className: "ty-drawer__dialog", role: "dialog", "aria-modal": "true", tabIndex: "-1", "aria-labelledby": (slots["title"]) ? (`${instance}-title`) : undefined, "aria-label": (!(slots["title"])) ? (p.accessibleLabel) : undefined, "data-testid": p.panelTestId },
+          createElement("header", { className: "ty-drawer__header" },
+            (p.placement === "bottom") && (!(p.showHandle === "false")) ? createElement("span", { className: "ty-drawer__handle", "aria-hidden": "true" }) : null,
+            (slots["title"]) ? createElement("h2", { className: "ty-drawer__title", id: `${instance}-title` },
+              props.title,
+            ) : null,
+            createElement("button", { className: "ty-button ty-drawer__close", type: "button", "aria-label": p.closeLabel, title: p.closeLabel, "data-variant": "quiet", "data-size": "compact", "data-shape": "circle", "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("path", { className: "ty-drawer__glyph", d: "M18 6 6 18" }),
+                  createElement("path", { className: "ty-drawer__glyph", d: "m6 6 12 12" }),
+                ),
+              ),
+            ),
+          ),
+          (slots["default"]) ? createElement("div", { className: "ty-drawer__body" },
+            props.children,
+          ) : null,
+          (p.placement === "bottom") ? createElement("div", { className: "ty-drawer__inset", "aria-hidden": "true" }) : null,
+        ),
+      ),
+    ))
+})

package/src/elements/react/TyGradientMark.ts

@@ -0,0 +1,52 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/gradient-mark/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 !== ''
+
+/** App-icon style badge: a rounded square filled with the brand gradient, holding an arbitrary glyph (the default slot). Named by `label` (an img role) or decorative without one. The gradient and corner radius default to token values and can be overridden per instance with CSS values. */
+export interface TyGradientMarkProps {
+  /** Accessible name; set it and the badge is an img role, leave it out and the badge is decorative (`aria-hidden`). */
+  label?: string
+  /** Badge size step (24 / 32 / 48 px from the spacing scale). Default: `medium`. */
+  size?: "small" | "medium" | "large"
+  /** CSS gradient image of the badge (e.g. `linear-gradient(135deg, #e11d48, #7c3aed)`); the default is the token brand gradient (`--ty-info` → `--ty-brand` → `--ty-brand-strong`). Applied as the `--ty-gradient-mark-gradient` custom property when the element upgrades. */
+  gradient?: string
+  /** CSS corner-radius override (a length or `50%` for a circle); the default is a squircle scaled from the size. Applied as the `--ty-gradient-mark-radius` custom property when the element upgrades. */
+  radius?: string
+  /** Test hook on the badge (`data-testid`). */
+  testId?: string
+  /** The glyph inside the badge (an icon or an initial); decorative — the badge is named by `label`. */
+  children?: ReactNode
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { size: "medium" } as const
+
+export const TyGradientMark = forwardRef<HTMLElement, TyGradientMarkProps>(function TyGradientMark(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,
+    size: props.size ?? DEFAULTS.size,
+    gradient: props.gradient,
+    radius: props.radius,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children) }
+  return createElement("ty-gradient-mark", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "label": text(p.label), "size": text(p.size), "gradient": text(p.gradient), "radius": text(p.radius), "test-id": text(p.testId) },
+    createElement("span", { className: "ty-gradient-mark", role: (truthy(p.label)) ? ("img") : undefined, "aria-label": p.label, "aria-hidden": (!(truthy(p.label))) ? ("true") : undefined, "data-size": p.size, "data-testid": p.testId },
+      (slots["default"]) ? createElement("span", { className: "ty-gradient-mark__glyph", "aria-hidden": "true" },
+        props.children,
+      ) : null,
+    ))
+})

package/src/elements/react/TyHeading.ts

@@ -0,0 +1,65 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/heading/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)
+
+/** Section title whose document level (`level`, h1 to h6) and visual step (`appearance`: display, h1, h2, h3 or label) are set independently; unset, the step derives from the level. An optional `eyebrow` labels the section above the heading, outside the heading element. The heading id (`heading-id`, generated otherwise) lets a section or dialog reference it with `aria-labelledby`. `level="2" appearance="h3"` is the Subheading. */
+export interface TyHeadingProps {
+  /** Document outline level (1 to 6, as its attribute spelling); one h1 per page, no skipped levels. Default: `1`. */
+  level?: "1" | "2" | "3" | "4" | "5" | "6"
+  /** Visual step from the type scale of §2.2, decoupled from `level`; derived from the level when unset (1 → h1, 2 → h2, 3+ → h3). */
+  appearance?: "display" | "h1" | "h2" | "h3" | "label"
+  /** Small uppercase label rendered before, and outside, the heading element (the §2.2 eyebrow token); the heading text alone stays the accessible name. */
+  eyebrow?: string
+  /** Stable id of the heading element, for `aria-labelledby` of the enclosing section or dialog; `<instance>-heading` when unset. */
+  headingId?: string
+  /** The heading text. */
+  children?: ReactNode
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { level: "1" } as const
+
+export const TyHeading = forwardRef<HTMLElement, TyHeadingProps>(function TyHeading(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 = {
+    level: props.level ?? DEFAULTS.level,
+    appearance: props.appearance,
+    eyebrow: props.eyebrow,
+    headingId: props.headingId,
+  }
+  return createElement("ty-heading", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "level": text(p.level), "appearance": text(p.appearance), "eyebrow": text(p.eyebrow), "heading-id": text(p.headingId) },
+    createElement("div", { className: "ty-heading-group" },
+      (truthy(p.eyebrow)) ? createElement("p", { className: "ty-heading__eyebrow" },
+        text(p.eyebrow),
+      ) : null,
+      (p.level === "1") ? createElement("h1", { className: "ty-heading", id: (text(p.headingId) ?? `${instance}-heading`), "data-appearance": truthy(p.appearance) ? ({"display":"display","h1":"h1","h2":"h2","h3":"h3","label":"label"} as Record<string, string>)[String(p.appearance)] : ({"1":"h1","2":"h2","3":"h3","4":"h3","5":"h3","6":"h3"} as Record<string, string>)[String(p.level)] },
+        props.children,
+      ) : null,
+      (p.level === "2") ? createElement("h2", { className: "ty-heading", id: (text(p.headingId) ?? `${instance}-heading`), "data-appearance": truthy(p.appearance) ? ({"display":"display","h1":"h1","h2":"h2","h3":"h3","label":"label"} as Record<string, string>)[String(p.appearance)] : ({"1":"h1","2":"h2","3":"h3","4":"h3","5":"h3","6":"h3"} as Record<string, string>)[String(p.level)] },
+        props.children,
+      ) : null,
+      (p.level === "3") ? createElement("h3", { className: "ty-heading", id: (text(p.headingId) ?? `${instance}-heading`), "data-appearance": truthy(p.appearance) ? ({"display":"display","h1":"h1","h2":"h2","h3":"h3","label":"label"} as Record<string, string>)[String(p.appearance)] : ({"1":"h1","2":"h2","3":"h3","4":"h3","5":"h3","6":"h3"} as Record<string, string>)[String(p.level)] },
+        props.children,
+      ) : null,
+      (p.level === "4") ? createElement("h4", { className: "ty-heading", id: (text(p.headingId) ?? `${instance}-heading`), "data-appearance": truthy(p.appearance) ? ({"display":"display","h1":"h1","h2":"h2","h3":"h3","label":"label"} as Record<string, string>)[String(p.appearance)] : ({"1":"h1","2":"h2","3":"h3","4":"h3","5":"h3","6":"h3"} as Record<string, string>)[String(p.level)] },
+        props.children,
+      ) : null,
+      (p.level === "5") ? createElement("h5", { className: "ty-heading", id: (text(p.headingId) ?? `${instance}-heading`), "data-appearance": truthy(p.appearance) ? ({"display":"display","h1":"h1","h2":"h2","h3":"h3","label":"label"} as Record<string, string>)[String(p.appearance)] : ({"1":"h1","2":"h2","3":"h3","4":"h3","5":"h3","6":"h3"} as Record<string, string>)[String(p.level)] },
+        props.children,
+      ) : null,
+      (p.level === "6") ? createElement("h6", { className: "ty-heading", id: (text(p.headingId) ?? `${instance}-heading`), "data-appearance": truthy(p.appearance) ? ({"display":"display","h1":"h1","h2":"h2","h3":"h3","label":"label"} as Record<string, string>)[String(p.appearance)] : ({"1":"h1","2":"h2","3":"h3","4":"h3","5":"h3","6":"h3"} as Record<string, string>)[String(p.level)] },
+        props.children,
+      ) : null,
+    ))
+})