@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/elements/react/TyInlineNotice.ts

@@ -0,0 +1,191 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/inline-notice/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 !== ''
+
+/** Short message about the state of a form, section or page. Assertive tones (danger and warning unless `urgency` says otherwise) are `role="alert"`, polite ones `role="status"`; a visually hidden tone word precedes the message. Dismissal is the host's: the element emits `ty-dismiss` and moves focus to the next logical element. */
+export interface TyInlineNoticeProps {
+  /** Semantic tone; colours the surface and picks the default icon and tone word. Default: `info`. */
+  tone?: "danger" | "warning" | "info" | "success"
+  /** `centre` only for short single-message confirmations. Default: `start`. */
+  align?: "start" | "centre"
+  /** How the notice is announced when it appears; unset: assertive for danger and warning, polite otherwise. `none` (no live role) for notices present on page load. */
+  urgency?: "polite" | "assertive" | "none"
+  /** Element for the title; a plain strong paragraph unless configured. Default: `p`. */
+  titleAs?: "p" | "h2" | "h3" | "h4"
+  /** Shows the dismiss button; the host removes the notice on `ty-dismiss`. */
+  dismissible?: boolean
+  /** Accessible name of the dismiss button. Default: `Dismiss`. */
+  dismissLabel?: string
+  /** Visually hidden word announced before a danger notice. Default: `Error: `. */
+  toneWordDanger?: string
+  /** Visually hidden word announced before a warning notice. Default: `Warning: `. */
+  toneWordWarning?: string
+  /** Visually hidden word announced before an info notice. Default: `Information: `. */
+  toneWordInfo?: string
+  /** Visually hidden word announced before a success notice. Default: `Success: `. */
+  toneWordSuccess?: string
+  /** The message body. */
+  children?: ReactNode
+  /** Short heading above the message. */
+  title?: ReactNode
+  /** Overrides the tone's icon (decorative). */
+  icon?: ReactNode
+  /** Buttons or links below the message (up to two). */
+  actions?: ReactNode
+  /** The dismiss button was pressed; the host removes the notice. Focus has moved to the next logical element. */
+  onDismiss?: () => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { tone: "info", align: "start", titleAs: "p", dismissLabel: "Dismiss", toneWordDanger: "Error: ", toneWordWarning: "Warning: ", toneWordInfo: "Information: ", toneWordSuccess: "Success: " } as const
+
+export const TyInlineNotice = forwardRef<HTMLElement, TyInlineNoticeProps>(function TyInlineNotice(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-dismiss", () => handlers.current.onDismiss?.()],
+    ]
+    for (const [type, listener] of listeners) element.addEventListener(type, listener)
+    return () => { for (const [type, listener] of listeners) element.removeEventListener(type, listener) }
+  }, [])
+  const p = {
+    tone: props.tone ?? DEFAULTS.tone,
+    align: props.align ?? DEFAULTS.align,
+    urgency: props.urgency,
+    titleAs: props.titleAs ?? DEFAULTS.titleAs,
+    dismissible: props.dismissible,
+    dismissLabel: props.dismissLabel ?? DEFAULTS.dismissLabel,
+    toneWordDanger: props.toneWordDanger ?? DEFAULTS.toneWordDanger,
+    toneWordWarning: props.toneWordWarning ?? DEFAULTS.toneWordWarning,
+    toneWordInfo: props.toneWordInfo ?? DEFAULTS.toneWordInfo,
+    toneWordSuccess: props.toneWordSuccess ?? DEFAULTS.toneWordSuccess,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "title": filled(props.title), "icon": filled(props.icon), "actions": filled(props.actions) }
+  return createElement("ty-inline-notice", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "tone": text(p.tone), "align": text(p.align), "urgency": text(p.urgency), "title-as": text(p.titleAs), "dismissible": truthy(p.dismissible) ? true : undefined, "dismiss-label": text(p.dismissLabel), "tone-word-danger": text(p.toneWordDanger), "tone-word-warning": text(p.toneWordWarning), "tone-word-info": text(p.toneWordInfo), "tone-word-success": text(p.toneWordSuccess) },
+    createElement("div", { className: "ty-notice", role: truthy(p.urgency) ? ({"assertive":"alert","polite":"status"} as Record<string, string>)[String(p.urgency)] : ({"danger":"alert","warning":"alert","info":"status","success":"status"} as Record<string, string>)[String(p.tone)], "data-tone": p.tone, "data-align": p.align },
+      createElement("span", { className: "ty-notice__icon", "aria-hidden": "true" },
+        (!(slots["icon"])) && (p.tone === "danger") ? 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-notice__glyph", cx: "12", cy: "12", r: "10" }),
+          createElement("line", { className: "ty-notice__glyph", x1: "12", x2: "12", y1: "8", y2: "12" }),
+          createElement("line", { className: "ty-notice__glyph", x1: "12", x2: "12.01", y1: "16", y2: "16" }),
+        ) : null,
+        (!(slots["icon"])) && (p.tone === "warning") ? 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-notice__glyph", d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+          createElement("path", { className: "ty-notice__glyph", d: "M12 9v4" }),
+          createElement("path", { className: "ty-notice__glyph", d: "M12 17h.01" }),
+        ) : null,
+        (!(slots["icon"])) && (p.tone === "info") ? 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-notice__glyph", cx: "12", cy: "12", r: "10" }),
+          createElement("path", { className: "ty-notice__glyph", d: "M12 16v-4" }),
+          createElement("path", { className: "ty-notice__glyph", d: "M12 8h.01" }),
+        ) : null,
+        (!(slots["icon"])) && (p.tone === "success") ? 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-notice__glyph", cx: "12", cy: "12", r: "10" }),
+          createElement("path", { className: "ty-notice__glyph", d: "m16 9-5.5 5.5L8 12" }),
+        ) : null,
+        ((slots["icon"])) ? props.icon : null,
+      ),
+      createElement("div", { className: "ty-notice__body" },
+        (slots["title"]) && (p.titleAs === "p") ? createElement("p", { className: "ty-notice__title" },
+          (p.tone === "danger") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordDanger),
+          ) : null,
+          (p.tone === "warning") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordWarning),
+          ) : null,
+          (p.tone === "info") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordInfo),
+          ) : null,
+          (p.tone === "success") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordSuccess),
+          ) : null,
+          props.title,
+        ) : null,
+        (slots["title"]) && (p.titleAs === "h2") ? createElement("h2", { className: "ty-notice__title" },
+          (p.tone === "danger") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordDanger),
+          ) : null,
+          (p.tone === "warning") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordWarning),
+          ) : null,
+          (p.tone === "info") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordInfo),
+          ) : null,
+          (p.tone === "success") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordSuccess),
+          ) : null,
+          props.title,
+        ) : null,
+        (slots["title"]) && (p.titleAs === "h3") ? createElement("h3", { className: "ty-notice__title" },
+          (p.tone === "danger") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordDanger),
+          ) : null,
+          (p.tone === "warning") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordWarning),
+          ) : null,
+          (p.tone === "info") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordInfo),
+          ) : null,
+          (p.tone === "success") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordSuccess),
+          ) : null,
+          props.title,
+        ) : null,
+        (slots["title"]) && (p.titleAs === "h4") ? createElement("h4", { className: "ty-notice__title" },
+          (p.tone === "danger") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordDanger),
+          ) : null,
+          (p.tone === "warning") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordWarning),
+          ) : null,
+          (p.tone === "info") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordInfo),
+          ) : null,
+          (p.tone === "success") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordSuccess),
+          ) : null,
+          props.title,
+        ) : null,
+        createElement("div", { className: "ty-notice__message" },
+          (!(slots["title"])) && (p.tone === "danger") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordDanger),
+          ) : null,
+          (!(slots["title"])) && (p.tone === "warning") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordWarning),
+          ) : null,
+          (!(slots["title"])) && (p.tone === "info") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordInfo),
+          ) : null,
+          (!(slots["title"])) && (p.tone === "success") ? createElement("span", { className: "ty-visually-hidden" },
+            text(p.toneWordSuccess),
+          ) : null,
+          props.children,
+        ),
+        (slots["actions"]) ? createElement("div", { className: "ty-notice__actions" },
+          props.actions,
+        ) : null,
+      ),
+      (truthy(p.dismissible)) ? createElement("button", { className: "ty-button ty-notice__dismiss", type: "button", "data-variant": "quiet", "data-size": "compact", "data-icon-only": "", "aria-label": p.dismissLabel },
+        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-notice__glyph", d: "M18 6 6 18" }),
+            createElement("path", { className: "ty-notice__glyph", d: "m6 6 12 12" }),
+          ),
+        ),
+      ) : null,
+    ))
+})

package/src/elements/react/TyLink.ts

@@ -0,0 +1,65 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/link/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)
+
+/** Moves to another location. A native <a> inside, so focus, keyboard activation and opening in a new context are the platform's; an external destination opens in a new context with a safe rel, an icon and a screen-reader hint. */
+export interface TyLinkProps {
+  /** Destination. The element is a navigation link; an inline action without one is a plain <button class="ty-link" data-action=""> */
+  href?: string
+  /** `subtle` hides the underline at rest (only where the context makes the link obvious). Default: `underlined`. */
+  emphasis?: "underlined" | "subtle"
+  /** Opens in a new context with `rel="noopener noreferrer"`, an icon and a screen-reader hint. Inferred on upgrade from absolute URLs to another origin; hosts render it explicitly. */
+  external?: boolean
+  /** Marks the link as the current page (`aria-current="page"`). */
+  current?: boolean
+  /** Standalone links (lists, footers) get a 44 px tall hit area; inline prose links do not. */
+  standalone?: boolean
+  /** Screen-reader hint appended to an external link's name on upgrade; translate through this attribute. Default: `(opens in a new tab)`. */
+  newTabLabel?: string
+  /** Accessible name when the visible text is not enough (`aria-label`). */
+  accessibleLabel?: string
+  /** Id of an element describing the link (`aria-describedby`). */
+  describedBy?: string
+  /** The link text. */
+  children?: ReactNode
+  /** The native click of the anchor. */
+  onClick?: (event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { emphasis: "underlined", newTabLabel: "(opens in a new tab)" } as const
+
+export const TyLink = forwardRef<HTMLElement, TyLinkProps>(function TyLink(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 = {
+    href: props.href,
+    emphasis: props.emphasis ?? DEFAULTS.emphasis,
+    external: props.external,
+    current: props.current,
+    standalone: props.standalone,
+    newTabLabel: props.newTabLabel ?? DEFAULTS.newTabLabel,
+    accessibleLabel: props.accessibleLabel,
+    describedBy: props.describedBy,
+  }
+  return createElement("ty-link", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "href": text(p.href), "emphasis": text(p.emphasis), "external": truthy(p.external) ? true : undefined, "current": truthy(p.current) ? true : undefined, "standalone": truthy(p.standalone) ? true : undefined, "new-tab-label": text(p.newTabLabel), "accessible-label": text(p.accessibleLabel), "described-by": text(p.describedBy) },
+    createElement("a", { className: "ty-link", href: p.href, target: (truthy(p.external)) ? ("_blank") : undefined, rel: (truthy(p.external)) ? ("noopener noreferrer") : undefined, "aria-current": (truthy(p.current)) ? ("page") : undefined, "aria-label": p.accessibleLabel, "aria-describedby": p.describedBy, "data-emphasis": p.emphasis, "data-standalone": truthy(p.standalone) ? '' : undefined, onClick: (event: ChangeEvent<HTMLAnchorElement>) => handlers.current.onClick?.(event) },
+      props.children,
+      (truthy(p.external)) ? createElement("svg", { className: "ty-icon ty-mirror-rtl ty-link__external", "aria-hidden": "true", focusable: "false", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        createElement("path", { d: "M15 3h6v6" }),
+        createElement("path", { d: "M10 14 21 3" }),
+        createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+      ) : null,
+      (truthy(p.external)) ? createElement("span", { className: "ty-visually-hidden ty-link__hint" }) : null,
+    ))
+})

package/src/elements/react/TyMarkdownView.ts

@@ -0,0 +1,46 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/markdown-view/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)
+
+/** Safely renders a small, product-relevant subset of Markdown written by people or produced by models, without ever interpreting raw HTML: paragraphs, lists, headings (real `h2`–`h6`, offset by `headingBase`), fenced code blocks, and inline code, strong, emphasis and http(s) links; everything else is literal text. Static — links are the only focusable content, plus a code block that overflows (a labelled scroll region). */
+export interface TyMarkdownViewProps {
+  /** Markdown source (the supported subset; anything else renders as literal text). Empty renders nothing. */
+  text?: string
+  /** Level used for a Markdown level-1 heading (2 to 6); deeper levels follow, capped at 6. Default: `3`. */
+  headingBase?: number
+  /** Spacing between blocks. Default: `regular`. */
+  density?: "regular" | "compact"
+  /** Accessible name of a code block that overflows (a scroll region) when it has no language tag; translate through this attribute. Default: `Code block`. */
+  codeBlockLabel?: string
+  /** Accessible name of an overflowing code block with a language tag; `{language}` is replaced by the tag. Default: `Code block, {language}`. */
+  codeBlockLanguageLabel?: string
+  /** Screen-reader hint appended to every link (all links open in a new tab); translate through this attribute. Default: `(opens in a new tab)`. */
+  newTabLabel?: string
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { headingBase: 3, density: "regular", codeBlockLabel: "Code block", codeBlockLanguageLabel: "Code block, {language}", newTabLabel: "(opens in a new tab)" } as const
+
+export const TyMarkdownView = forwardRef<HTMLElement, TyMarkdownViewProps>(function TyMarkdownView(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,
+    headingBase: props.headingBase ?? DEFAULTS.headingBase,
+    density: props.density ?? DEFAULTS.density,
+    codeBlockLabel: props.codeBlockLabel ?? DEFAULTS.codeBlockLabel,
+    codeBlockLanguageLabel: props.codeBlockLanguageLabel ?? DEFAULTS.codeBlockLanguageLabel,
+    newTabLabel: props.newTabLabel ?? DEFAULTS.newTabLabel,
+  }
+  return createElement("ty-markdown-view", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "text": text(p.text), "heading-base": text(p.headingBase), "density": text(p.density), "code-block-label": text(p.codeBlockLabel), "code-block-language-label": text(p.codeBlockLanguageLabel), "new-tab-label": text(p.newTabLabel) })
+})

package/src/elements/react/TyModal.ts

@@ -0,0 +1,118 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/modal/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 !== ''
+
+/** Focused modal window for a decision or a short form: a backdrop and a panel (title, optional description, scrolling body, actions row, optional close button). Controlled through `open`; the element asks to close with `ty-open-change` (Escape, the close button, an allowed backdrop press) 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 TyModalProps {
+  /** Shown (controlled). The anatomy stays mounted but `hidden` while closed, so nothing reaches the accessibility tree. */
+  isOpen?: boolean
+  /** Maximum panel width step. Default: `regular`. */
+  width?: "narrow" | "regular" | "wide" | "xwide"
+  /** `alertdialog` for destructive or blocking confirmations: the backdrop never dismisses it and the close button is hidden, unless the props below say otherwise. Default: `dialog`. */
+  role?: "dialog" | "alertdialog"
+  /** `true` or `false`; unset: the backdrop dismisses a `dialog`, never an `alertdialog`. */
+  dismissOnBackdrop?: string
+  /** `true` or `false`; unset: shown on a `dialog`, hidden on an `alertdialog`. */
+  showCloseButton?: string
+  /** Where focus lands on open; a `[data-autofocus]` control inside wins either way. Unset on an `alertdialog`: the first action (the least destructive, by convention). Default: `first`. */
+  initialFocus?: "first" | "title"
+  /** An action is pending: closing (Escape, the backdrop, the close button) is disabled and the panel is `aria-busy`. */
+  busy?: boolean
+  /** Accessible name of the close button. Default: `Close`. */
+  closeLabel?: string
+  /** Accessible name of the panel when the title slot is empty and no `labelledBy` is given. */
+  accessibleLabel?: string
+  /** `aria-labelledby` of the panel (a host that renders its own title element), joined before the title slot's heading. */
+  labelledBy?: string
+  /** `aria-describedby` of the panel, joined before the description slot's paragraph. */
+  describedBy?: string
+  /** Test hook on the panel (`data-testid`). */
+  panelTestId?: string
+  /** Test hook on the backdrop (`data-testid`). */
+  backdropTestId?: string
+  /** The accessible name, rendered as the panel's heading (required by the spec; `accessibleLabel` or `labelledBy` names the panel when it is empty). */
+  title?: ReactNode
+  /** Accessible description under the header. */
+  description?: ReactNode
+  /** The body; scrolls when long while the header and the actions stay visible. */
+  children?: ReactNode
+  /** The actions row (primary last on the end side). Pressing an action runs its own handler; the dialog stays open unless the host flips `isOpen`. */
+  actions?: ReactNode
+  /** The element asks the host to change visibility — `open: false` on Escape, the close button or an allowed backdrop press. Controlled: the element does not close itself; the host flips `isOpen`. */
+  onOpenChange?: (detail: { open: boolean }) => void
+  id?: string
+  className?: string
+}
+
+const DEFAULTS = { width: "regular", role: "dialog", initialFocus: "first", closeLabel: "Close" } as const
+
+export const TyModal = forwardRef<HTMLElement, TyModalProps>(function TyModal(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 = {
+    isOpen: props.isOpen,
+    width: props.width ?? DEFAULTS.width,
+    role: props.role ?? DEFAULTS.role,
+    dismissOnBackdrop: props.dismissOnBackdrop,
+    showCloseButton: props.showCloseButton,
+    initialFocus: props.initialFocus ?? DEFAULTS.initialFocus,
+    busy: props.busy,
+    closeLabel: props.closeLabel ?? DEFAULTS.closeLabel,
+    accessibleLabel: props.accessibleLabel,
+    labelledBy: props.labelledBy,
+    describedBy: props.describedBy,
+    panelTestId: props.panelTestId,
+    backdropTestId: props.backdropTestId,
+  }
+  const slots: Record<string, boolean> = { "title": filled(props.title), "description": filled(props.description), "default": filled(props.children), "actions": filled(props.actions) }
+  return createElement("ty-modal", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "open": truthy(p.isOpen) ? true : undefined, "width": text(p.width), "dialog-role": text(p.role), "dismiss-on-backdrop": text(p.dismissOnBackdrop), "show-close-button": text(p.showCloseButton), "initial-focus": text(p.initialFocus), "busy": truthy(p.busy) ? true : undefined, "close-label": text(p.closeLabel), "accessible-label": text(p.accessibleLabel), "labelled-by": text(p.labelledBy), "described-by": text(p.describedBy), "panel-test-id": text(p.panelTestId), "backdrop-test-id": text(p.backdropTestId) },
+    createElement("div", { className: "ty-modal-dialog__backdrop", hidden: (!(truthy(p.isOpen))) ? (true) : undefined, "data-testid": p.backdropTestId },
+      createElement("div", { className: "ty-modal-dialog", "data-width": p.width },
+        createElement("div", { className: "ty-modal-dialog__panel", role: p.role, "aria-modal": "true", tabIndex: "-1", "aria-labelledby": [text(p.labelledBy) ?? '', (((slots["title"])) ? `${instance}-title` : '')].filter(Boolean).join(' ') || undefined, "aria-describedby": [text(p.describedBy) ?? '', (((slots["description"])) ? `${instance}-description` : '')].filter(Boolean).join(' ') || undefined, "aria-label": (!(slots["title"])) && (!(truthy(p.labelledBy))) ? (p.accessibleLabel) : undefined, "data-busy": truthy(p.busy) ? '' : undefined, "data-testid": p.panelTestId },
+          createElement("div", { className: "ty-modal-dialog__inner", "aria-busy": truthy(p.busy) ? 'true' : undefined },
+            (slots["title"] || p.showCloseButton === "true" || !(p.role === "alertdialog")) && (slots["title"] || !(p.showCloseButton === "false")) ? createElement("header", { className: "ty-modal-dialog__header" },
+              (slots["title"]) ? createElement("h2", { className: "ty-modal-dialog__title", id: `${instance}-title`, tabIndex: "-1" },
+                props.title,
+              ) : null,
+              (!(p.showCloseButton === "false")) && (p.showCloseButton === "true" || !(p.role === "alertdialog")) ? createElement("button", { className: "ty-button ty-modal-dialog__close", type: "button", "aria-label": p.closeLabel, title: p.closeLabel, disabled: truthy(p.busy) || undefined, "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-modal-dialog__glyph", d: "M18 6 6 18" }),
+                    createElement("path", { className: "ty-modal-dialog__glyph", d: "m6 6 12 12" }),
+                  ),
+                ),
+              ) : null,
+            ) : null,
+            (slots["description"]) ? createElement("p", { className: "ty-modal-dialog__description", id: `${instance}-description` },
+              props.description,
+            ) : null,
+            (slots["default"]) ? createElement("div", { className: "ty-modal-dialog__body" },
+              props.children,
+            ) : null,
+            (slots["actions"]) ? createElement("footer", { className: "ty-modal-dialog__actions" },
+              props.actions,
+            ) : null,
+          ),
+        ),
+      ),
+    ))
+})

package/src/elements/react/TyNativeSelect.ts

@@ -0,0 +1,96 @@
+// Generated by tools/elements/generate.mjs from packages/ui/src/elements/native-select/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 !== ''
+
+/** One value from a short list with the platform select. A native <select> inside, so the picker on touch devices, keyboard, screen-reader support and form participation are the platform's. The options are the host's children. */
+export interface TyNativeSelectProps {
+  /** The selected value; the element mirrors it into the control (while the user chooses, the live value is the control's own). */
+  value?: string
+  /** Text of the empty, disabled first option, shown while nothing is selected. */
+  placeholder?: string
+  /** Form field name; the selected value is sent. */
+  name?: string
+  /** Native required; the form will not submit while the empty option is the selection. */
+  required?: boolean
+  /** Native disabled. */
+  disabled?: boolean
+  /** Painted and announced as invalid without an error message (a surrounding field marks it). */
+  invalid?: boolean
+  /** 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 select's own parts. */
+  describedBy?: string
+  /** Explicit id of the control (a surrounding field's control id); `<instance>-control` otherwise. */
+  controlId?: string
+  /** Test hook on the native select (`data-testid`). */
+  testId?: string
+  /** The `<option>` and `<optgroup>` children. */
+  children?: ReactNode
+  /** The visible label above the control. */
+  label?: ReactNode
+  /** Help text between the label and the control, announced as the description. */
+  hint?: ReactNode
+  /** The error message; marks the control invalid and is announced. */
+  error?: ReactNode
+  /** The native change of the select; `value` is the new value. */
+  onChange?: (detail: { value: string }, event: SyntheticEvent) => void
+  id?: string
+  className?: string
+}
+
+export const TyNativeSelect = forwardRef<HTMLElement, TyNativeSelectProps>(function TyNativeSelect(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 = {
+    value: props.value,
+    placeholder: props.placeholder,
+    name: props.name,
+    required: props.required,
+    disabled: props.disabled,
+    invalid: props.invalid,
+    accessibleLabel: props.accessibleLabel,
+    labelledBy: props.labelledBy,
+    describedBy: props.describedBy,
+    controlId: props.controlId,
+    testId: props.testId,
+  }
+  const slots: Record<string, boolean> = { "default": filled(props.children), "label": filled(props.label), "hint": filled(props.hint), "error": filled(props.error) }
+  return createElement("ty-native-select", { ref: host, id: props.id, className: props.className, 'data-ty-instance': instance, "value": text(p.value), "placeholder": text(p.placeholder), "name": text(p.name), "required": truthy(p.required) ? true : undefined, "disabled": truthy(p.disabled) ? true : undefined, "invalid": truthy(p.invalid) ? true : undefined, "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-native-select", "data-invalid": (truthy(p.invalid) || slots["error"]) ? ("") : undefined, "data-disabled": truthy(p.disabled) ? '' : undefined },
+      (slots["label"]) ? createElement("label", { className: "ty-native-select__label", htmlFor: (text(p.controlId) ?? `${instance}-control`) },
+        props.label,
+      ) : null,
+      (slots["hint"]) ? createElement("p", { className: "ty-native-select__hint", id: `${instance}-hint` },
+        props.hint,
+      ) : null,
+      createElement("div", { className: "ty-native-select__frame" },
+        createElement("select", { className: "ty-native-select__control", id: (text(p.controlId) ?? `${instance}-control`), name: p.name, required: truthy(p.required) || undefined, disabled: truthy(p.disabled) || 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` : ''), (((slots["error"])) ? `${instance}-error` : '')].filter(Boolean).join(' ') || undefined, "aria-invalid": (truthy(p.invalid) || slots["error"]) ? ("true") : undefined, "data-testid": p.testId, onChange: (event: ChangeEvent<HTMLSelectElement>) => handlers.current.onChange?.({ value: event.currentTarget.value }, event) },
+          (truthy(p.placeholder)) ? createElement("option", { className: "ty-native-select__placeholder", label: p.placeholder, value: "", disabled: true }) : null,
+          props.children,
+        ),
+        createElement("svg", { className: "ty-icon ty-native-select__chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+          createElement("path", { className: "ty-native-select__chevron-path", d: "m6 9 6 6 6-6" }),
+        ),
+      ),
+      (slots["error"]) ? createElement("p", { className: "ty-native-select__error", id: `${instance}-error`, role: "alert" },
+        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-native-select__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-native-select__error-text" },
+          props.error,
+        ),
+      ) : null,
+    ))
+})