@datatechsolutions/tympan 0.3.0 → 0.3.1

package/dist/elements-react.d.ts

@@ -0,0 +1,1378 @@
+
+import { ReactNode, SyntheticEvent } from "react";
+//#region src/elements/react/TyActionMenu.d.ts
+/** A list of commands opened from a trigger button (mode `trigger`, the APG Menu Button pattern) or at a pointer position over a target (mode `context`: secondary click, Shift+F10, the ContextMenu key, or a long press on touch). Opening moves focus to the first enabled item (ArrowUp from the trigger: the last); ArrowDown/ArrowUp move with wrapping, Home/End jump, typing a character moves to the next enabled item starting with it, Enter/Space activate, Escape closes and returns focus to the origin, Tab and an outside press close. Disabled items are skipped and announced as disabled. In context mode the surface is clamped so it never overflows the viewport. Visibility is controlled: the element asks with `ty-open-change`, the host flips `open`. */
+interface TyActionMenuProps {
+  /** Shown (controlled). The anatomy stays mounted but `hidden` while closed, so nothing reaches the accessibility tree. */
+  open?: boolean;
+  /** `trigger`: opens from the trigger button; `context`: opens at a viewport point over the trigger slot's target. Default: `trigger`. */
+  mode?: "trigger" | "context";
+  /** Accessible name of the menu (required by the spec). */
+  label?: string;
+  /** Accessible name of the built-in icon-only trigger (the React messages.moreActions default), used in trigger mode when the trigger slot is empty. Default: `More actions`. */
+  triggerLabel?: string;
+  /** JSON array of entries in order: an item `{ id, label, icon?, iconPath?, tone?, disabled?, shortcut? }` (`icon` a decorative text glyph; `iconPath` an SVG icon as 24×24 path data rendered in the standard icon frame — when both are present `iconPath` wins, and subpaths separated by " | " become one `<path>` each; `tone` "danger" marks a destructive command, `shortcut` a displayed hint only), `{ "type": "separator" }`, or `{ "type": "section", "id", "title", "items": [...] }`. The element composes the rows on upgrade. */
+  items?: string;
+  /** Context mode: the viewport point the menu opens at, "x,y" in CSS pixels (controlled); the last context-request point when unset. Clamped so the menu stays inside the viewport. */
+  position?: string;
+  /** Trigger mode: the host's own toggle — any single focusable element, wired with aria-haspopup="menu" and aria-expanded. Context mode: the target that receives the context request (secondary click, Shift+F10, long press). Empty in trigger mode: the built-in ellipsis button named by `triggerLabel`. */
+  trigger?: ReactNode;
+  /** An item was activated (pointer, Enter or Space); the element then asks to close. A disabled item never fires. */
+  onAction?: (detail: {
+    id: string;
+  }) => void;
+  /** The element asks the host to change visibility — `open: true` on a trigger activation or a context request (secondary click, Shift+F10, the ContextMenu key, a long press), `open: false` on Escape, Tab, an outside press or after an action. Controlled: the element does not toggle itself; the host flips `open`. */
+  onOpenChange?: (detail: {
+    open: boolean;
+  }) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyActionMenu: import("react").ForwardRefExoticComponent<TyActionMenuProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyAvatar.d.ts
+/** Represents a person or an agent with a picture or fallback initials, optionally as a pressable control. Static, the frame is an image role named by `name` (hidden when `decorative`); pressable, it is a link (`href`) or a button (`pressable`) named by `actionLabel`, with a 44 px hit area at every size. The fallback (initials for a person, a bot mark for an agent, a user mark otherwise) shows while there is no picture and when the picture fails to load. */
+interface TyAvatarProps {
+  /** Image URL; on load error the fallback shows. */
+  src?: string;
+  /** One or two characters shown when there is no image (derived by the host from a name); the element keeps the first two grapheme clusters. */
+  fallbackText?: string;
+  /** Accessible name; required unless `decorative`. Initials are never read as letters while it is set. */
+  name?: string;
+  /** Hides the avatar from assistive tech when the name is already shown next to it. */
+  decorative?: boolean;
+  /** `person`: circle with initials. `agent`: rounded square with a bot icon and a dashed border, never initials (§2.11). Default: `person`. */
+  actorKind?: "person" | "agent";
+  /** Size step. Default: `regular`. */
+  size?: "xsmall" | "small" | "regular" | "large";
+  /** Fallback background: accent-soft or neutral (§2.3). Default: `accent`. */
+  tint?: "accent" | "neutral";
+  /** The avatar is one press target (a button); set it when `onPress` is wired. Implied by `href`. */
+  pressable?: boolean;
+  /** Makes the avatar a link to this destination (wins over `pressable`). */
+  href?: string;
+  /** Accessible name of a pressable avatar; `{name}` is filled in. Translate through this attribute. Default: `Open profile of {name}`. */
+  actionLabel?: string;
+  /** The native click of the pressable avatar (its link or button). */
+  onPress?: (event: SyntheticEvent) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyAvatar: import("react").ForwardRefExoticComponent<TyAvatarProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyBrandWordmark.d.ts
+/** Two-tone product wordmark: the plain part (`text`) in ink and the accent part (`accent`) in the brand gradient (`background-clip: text`). Plain text for assistive tech as-is; `label` turns it into an img role with that name (a logo lockup). */
+interface TyBrandWordmarkProps {
+  /** The plain part of the wordmark, in ink. */
+  text?: string;
+  /** The accent part of the wordmark, in the brand gradient; rendered right after `text`. */
+  accent?: string;
+  /** Type step of the wordmark. Default: `medium`. */
+  size?: "small" | "medium" | "large";
+  /** Accessible name as an img role (a logo lockup); left out, the wordmark is plain text read as-is. */
+  label?: string;
+  /** Test hook on the wordmark (`data-testid`). */
+  testId?: string;
+  id?: string;
+  className?: string;
+}
+export declare const TyBrandWordmark: import("react").ForwardRefExoticComponent<TyBrandWordmarkProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyBreadcrumbs.d.ts
+/** Shows where the current page sits in the hierarchy and goes up one or more levels. A trail at 640 px and above, a compact back link (with optional centred title and trailing actions) below. The last item is the current page — static text marked `aria-current="page"`, never a link; separators are decorative. Long labels truncate with an ellipsis, the full label kept in `title` and as the accessible name. Activating a link emits a cancelable `ty-navigate`: a host with a client-side router prevents the default and navigates through its adapter. */
+interface TyBreadcrumbsProps {
+  /** JSON array of `{ "label": string, "href": string }`, ancestors first and the current page last. Composed by the element on upgrade (the theme palette's `theme-labels` precedent). */
+  items?: string;
+  /** Accessible name of the navigation landmark (the I18n adapter's default); translate through this attribute. Default: `Breadcrumb`. */
+  label?: string;
+  /** `auto` shows the trail at 640 px and above, the compact bar below; the element resolves it live. Default: `auto`. */
+  mode?: "trail" | "compact" | "auto";
+  /** Parent href of the compact back link when there is only one item. */
+  rootHref?: string;
+  /** Parent label of the compact back link when there is only one item (with `rootHref`). */
+  rootLabel?: string;
+  /** Collapses middle items into an overflow menu when the trail exceeds this many entries (the first and the last `maxVisible - 1` stay visible). */
+  maxVisible?: number;
+  /** Accessible-name template of the compact back link; `{parent}` is filled with the parent's label. Default: `Back to {parent}`. */
+  backLabel?: string;
+  /** Accessible name of the overflow menu's toggle; translate through this attribute. Default: `Show hidden levels`. */
+  overflowLabel?: string;
+  /** Replaces the centred title of the compact bar (the current page's label when empty). */
+  center?: ReactNode;
+  /** Trailing actions of the compact bar (narrow screens use it as a top bar). */
+  actions?: ReactNode;
+  /** A trail, overflow or back link was activated; `href` is its destination. Cancelable: a host with a client-side router calls `preventDefault()` and navigates through its adapter; uncanceled, the native anchor navigates. */
+  onNavigate?: (detail: {
+    href: string;
+  }) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyBreadcrumbs: import("react").ForwardRefExoticComponent<TyBreadcrumbsProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyCommandPalette.d.ts
+/** 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. */
+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;
+}
+export declare const TyCommandPalette: import("react").ForwardRefExoticComponent<TyCommandPaletteProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyCurrencyField.d.ts
+/** 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. */
+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;
+}
+export declare const TyCurrencyField: import("react").ForwardRefExoticComponent<TyCurrencyFieldProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyDataTable.d.ts
+/** 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. */
+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;
+}
+export declare const TyDataTable: import("react").ForwardRefExoticComponent<TyDataTableProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyHeading.d.ts
+/** 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. */
+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;
+}
+export declare const TyHeading: import("react").ForwardRefExoticComponent<TyHeadingProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyMarkdownView.d.ts
+/** 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). */
+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;
+}
+export declare const TyMarkdownView: import("react").ForwardRefExoticComponent<TyMarkdownViewProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyNotificationCenter.d.ts
+/** Bell button with an unseen count and the session's notification history in a modal drawer (review, dismiss one, clear all). The host owns the history and feeds it through `notices` (JSON, newest first); the element composes the badge and the entries, asks to open or close with `ty-open-change` (controlled: the host flips `open`), and reports a dismiss (`ty-dismiss`) or a clear (`ty-clear`) so the host can update its own state. Focus moves into the drawer on open, is trapped while open, Escape asks to close, and focus returns to the bell; after a dismissal focus lands on the next entry's dismiss button (or the previous one, or the heading when the list became empty). */
+interface TyNotificationCenterProps {
+  /** Drawer shown (controlled). The anatomy stays mounted but `hidden` while closed, so nothing reaches the accessibility tree. */
+  open?: boolean;
+  /** The history as a JSON array, newest first: `[{ "id", "tone", "title", "message"?, "createdAt" }]`, `tone` one of `success`/`error`/`warning`/`info`, `createdAt` a Unix ms timestamp. Left unset (not `"[]"`) while the history is empty. The element renders at most `historyLimit` entries; it never raises toasts itself — the same call that shows a toast feeds this list. */
+  notices?: string;
+  /** Cap of the rendered history (the newest survive). Default: `50`. */
+  historyLimit?: number;
+  /** Accessible name of the bell; with unseen entries the `unreadLabel` phrase is appended. Default: `Notifications`. */
+  bellLabel?: string;
+  /** Unseen phrase appended to the bell name and carried by the badge; `{count}` is replaced. Default: `{count} unread`. */
+  unreadLabel?: string;
+  /** Heading of the drawer; also its accessible name (aria-labelledby). Default: `Notifications`. */
+  titleLabel?: string;
+  /** Name of the clear-all button (shown only with entries). Default: `Clear all`. */
+  clearAllLabel?: string;
+  /** Accessible name of the close button. Default: `Close`. */
+  closeLabel?: string;
+  /** Accessible name of an entry's dismiss button; `{title}` is replaced by the entry's title. Default: `Dismiss, {title}`. */
+  dismissLabel?: string;
+  /** The empty view's sentence. Default: `There are no notifications in this session.`. */
+  emptyLabel?: string;
+  /** Announced politely after clear all (no confirmation: history only). Default: `Notifications cleared`. */
+  clearedLabel?: string;
+  /** Tone word of a success entry. Default: `Success`. */
+  toneSuccess?: string;
+  /** Tone word of an error entry. Default: `Error`. */
+  toneError?: string;
+  /** Tone word of a warning entry. Default: `Warning`. */
+  toneWarning?: string;
+  /** Tone word of an information entry. Default: `Information`. */
+  toneInfo?: string;
+  /** Relative time of an entry less than a minute old. Default: `just now`. */
+  timeJustNow?: string;
+  /** Relative time of an entry minutes old; `{count}` is replaced. Default: `{count} minutes ago`. */
+  timeMinutesAgo?: string;
+  /** Relative time of an entry hours old; `{count}` is replaced. Default: `{count} hours ago`. */
+  timeHoursAgo?: string;
+  /** Relative time of an entry days old; `{count}` is replaced. Default: `{count} days ago`. */
+  timeDaysAgo?: string;
+  /** The element asks the host to change visibility — `open: true` on a bell press, `open: false` on Escape, the close button, a backdrop press or a second bell press. Controlled: the element does not toggle itself; the host flips `open`. */
+  onOpenChange?: (detail: {
+    open: boolean;
+  }) => void;
+  /** An entry's dismiss button was pressed. The element drops the entry from its rendered history at once; the host removes it from its own state. */
+  onDismiss?: (detail: {
+    id: string;
+  }) => void;
+  /** Clear all was pressed (no confirmation: history only). The element empties its rendered history and announces the `clearedLabel` politely; the host clears its own state. */
+  onClear?: () => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyNotificationCenter: import("react").ForwardRefExoticComponent<TyNotificationCenterProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyPageHeader.d.ts
+/** The single top-of-page block that names the page: optional breadcrumbs, eyebrow, leading icon, title, reading summary, metadata row and page actions, plus a free slot below for tags, tabs or filters. `scale` picks the type step (`page` the h1 step, `display` for login and public pages, `section` inside a section); `heading-level` the document level. With `editable` the title is an input named by `title-label` and a visually hidden heading keeps the outline. Below 640 px the actions move under the summary and span the width (stylesheet). */
+interface TyPageHeaderProps {
+  /** Page title; the heading text. Not needed with `editable` (`value` carries the text). */
+  title?: string;
+  /** Heading level of the title (1, 2 or 3, as its attribute spelling); exactly one level-1 heading per page, which the header provides by default. Default: `1`. */
+  headingLevel?: "1" | "2" | "3";
+  /** `page` uses the h1 step; `display` the display step (login, public page only); `section` the h3 step. Default: `page`. */
+  scale?: "page" | "display" | "section";
+  /** Short uppercase context line above the title (the §2.2 eyebrow token). */
+  eyebrow?: string;
+  /** One or two sentences (body-lg, max 60ch) saying what the screen shows. */
+  summary?: string;
+  /** The title is an input that looks like the title (editorial screens); a visually hidden heading of the same level keeps the document outline. */
+  editable?: boolean;
+  /** The editable title's text (controlled); the element mirrors it into the input (while the user types, the live value is the input's own). */
+  value?: string;
+  /** Placeholder of the editable title (the empty state); also the hidden heading's text while empty. */
+  titlePlaceholder?: string;
+  /** Accessible name of the editable title input. Default: `Page title`. */
+  titleLabel?: string;
+  /** Id of the title heading, for `aria-labelledby` of the page region; `<instance>-title` when unset. */
+  headingId?: string;
+  /** The breadcrumb navigation, rendered above the title. */
+  breadcrumbs?: ReactNode;
+  /** A decorative leading icon, in an accent-soft container (`aria-hidden`). */
+  icon?: ReactNode;
+  /** The metadata row: `li.ty-page-header__meta-item` items of icon plus short text (owner, date, count); icons decorative, text in reading order. */
+  meta?: ReactNode;
+  /** Page actions, aligned to the end: at most one primary button plus secondary buttons (§2.10); below 640 px they move under the summary and span the width. */
+  actions?: ReactNode;
+  /** Host-provided validation message under the editable title; marks it invalid and is announced. */
+  error?: ReactNode;
+  /** Extra content below the header (tags, tabs, filters). */
+  children?: ReactNode;
+  /** Typing in the editable title; `value` is the whole text. */
+  onTitleChange?: (detail: {
+    value: string;
+  }, event: SyntheticEvent) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyPageHeader: import("react").ForwardRefExoticComponent<TyPageHeaderProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyProgressBar.d.ts
+/** Determinate or indeterminate task progress (upload, batch run, profile completion). Not focusable; the host announces completion through a Toast or status message, not through the bar. Values outside the range are clamped on upgrade; the fill width changes with `--ty-dur-quick`, instantly under reduced motion, where the indeterminate sweep becomes a static partial fill with the label still stating "in progress". */
+interface TyProgressBarProps {
+  /** Current value; clamped into the range on upgrade. Default: `0`. */
+  value?: number;
+  /** Start of the range. Default: `0`. */
+  minValue?: number;
+  /** End of the range; reaching it is the complete state. Default: `100`. */
+  maxValue?: number;
+  /** Visible and accessible name (required unless `accessibleLabel` is given). */
+  label?: string;
+  /** Accessible name when there is no visible label (`aria-label`). */
+  accessibleLabel?: string;
+  /** Custom value text, such as "3 of 8 steps"; the computed percentage when unset. */
+  valueLabel?: string;
+  /** `true` or `false`; unset: the value text shows. An indeterminate bar always shows its "in progress" text. */
+  showValue?: string;
+  /** Unknown progress: no `aria-valuenow` and no percentage, the value text states "in progress". */
+  indeterminate?: boolean;
+  /** Value text of an indeterminate bar; translate through this attribute. Default: `In progress`. */
+  inProgressLabel?: string;
+  /** Semantic tone of the fill; never the only signal (pair with value text or a status word). Default: `accent`. */
+  tone?: "accent" | "success" | "warning" | "danger";
+  /** Track thickness. Default: `regular`. */
+  size?: "thin" | "regular";
+  id?: string;
+  className?: string;
+}
+export declare const TyProgressBar: import("react").ForwardRefExoticComponent<TyProgressBarProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySectionHeading.d.ts
+/** Heads a section inside a page or a sheet: the title at the section level (h2 by default, h3 or h4 inside a sheet), an optional subtitle line (plain meta text, not a heading), an optional decorative leading icon, and a `trailing` slot for the section's own actions, a count, a toggle or a link. The title wraps by default; `truncate` clips it to one line with the full text as a tooltip. The heading id (`heading-id`, generated otherwise) lets the enclosing section name itself with `aria-labelledby`. */
+interface TySectionHeadingProps {
+  /** Section name; the heading text, and the tooltip when `truncate` clips it. */
+  title?: string;
+  /** Heading level (2, 3 or 4, as its attribute spelling); level 2 uses the h2 step, 3 and 4 the h3 step (§2.2). Default: `2`. */
+  level?: "2" | "3" | "4";
+  /** Supporting line under the title; plain meta text in reading order, not a heading. */
+  subtitle?: string;
+  /** Clip the title to one line with an ellipsis; the full text stays accessible and becomes the tooltip. Wraps by default. */
+  truncate?: boolean;
+  /** Id of the heading element, so the enclosing section can be a region labelled by it; `<instance>-heading` when unset. */
+  headingId?: string;
+  /** A decorative leading icon (`aria-hidden`). */
+  icon?: ReactNode;
+  /** Section actions, a count, a toggle or a link; follows the title in DOM order and wraps under it when it does not fit. */
+  trailing?: ReactNode;
+  /** Extra content under the heading row. */
+  children?: ReactNode;
+  id?: string;
+  className?: string;
+}
+export declare const TySectionHeading: import("react").ForwardRefExoticComponent<TySectionHeadingProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySegmentedControl.d.ts
+/** Exactly one of a small set (two to five) of mutually exclusive options, changed in place — a radio group painted as segments. The segments are composed by the element from `options` (JSON); selecting the selected segment again does nothing. With `value` the control is controlled (the host answers `ty-change`); without it the element keeps the selection and mirrors it into the `value` attribute. */
+interface TySegmentedControlProps {
+  /** The segments as a JSON array of `string` (both value and label) or `{ "value", "label", "icon"? }`; `icon` is the `d` of a 24×24 stroke path (lucide style). */
+  options?: string;
+  /** The selected value (controlled). Unset, the element keeps the selection itself and mirrors it here. */
+  value?: string;
+  /** The initially selected value when uncontrolled; the first option when unset. */
+  defaultValue?: string;
+  /** Accessible name of the group (required). */
+  label?: string;
+  /** Visible height; the hit area stays at least 44 px on every size. Default: `regular`. */
+  size?: "compact" | "regular" | "large";
+  /** The segments share the available width equally; labels truncate with the full label as the accessible name. */
+  fullWidth?: boolean;
+  /** The whole control disabled; the group is exposed as disabled and nothing selects. */
+  disabled?: boolean;
+  /** Hide the labels visually; each label stays the segment's accessible name. */
+  iconOnly?: boolean;
+  /** The selection changed; `value` is the new value. Only real changes fire it — re-selecting the selected segment does nothing. */
+  onChange?: (detail: {
+    value: string;
+  }) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TySegmentedControl: import("react").ForwardRefExoticComponent<TySegmentedControlProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySkipLink.d.ts
+/** 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. */
+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;
+}
+export declare const TySkipLink: import("react").ForwardRefExoticComponent<TySkipLinkProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyTabs.d.ts
+/** 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`. */
+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;
+}
+export declare const TyTabs: import("react").ForwardRefExoticComponent<TyTabsProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyTagField.d.ts
+/** Short values typed into removable pills, optionally assisted by (or restricted to) a suggestion list. Enter or comma commits the draft (or the highlighted suggestion), Backspace on an empty entry removes the last pill; duplicates (case-insensitive), values past `max` and — with `allow-free-text="false"` — values outside `suggestions` are refused. With suggestions the entry is an APG combobox with list autocomplete (active descendant, wrap-around arrows). */
+interface TyTagFieldProps {
+  /** JSON array of the committed values (controlled); the element asks for changes with `ty-change`, it never writes its own. */
+  value?: string;
+  /** JSON array of known values; turns the entry into a combobox. */
+  suggestions?: string;
+  /** JSON object of display text per value, used in the popup and on the pills. */
+  suggestionLabels?: string;
+  /** `true` or `false`; unset: free text is allowed. `false`: only values present in `suggestions` are accepted (the `show-arrow` precedent for a default-true switch). */
+  allowFreeText?: string;
+  /** Maximum pills; the entry is disabled at the limit and re-enabled when one is removed. */
+  max?: number;
+  /** Disables the entry and every remove control. */
+  disabled?: boolean;
+  /** Pill tint; `accent` fills with the theme accent. Default: `neutral`. */
+  tone?: "neutral" | "accent";
+  /** A categorical token (1 to 8) as the pill tint, shown as a small colour square; normalised into range on upgrade, wins over `tone`. */
+  categoryIndex?: number;
+  /** Visible label above the field, targeting the entry; if absent, `accessibleLabel` is required. */
+  label?: string;
+  /** Accessible name of the entry when there is no visible label. */
+  accessibleLabel?: string;
+  /** Hint in the entry. */
+  placeholder?: string;
+  /** Help text below the field, linked as the entry's description. */
+  helperText?: string;
+  /** Marks the field invalid; shown below the helper text and linked as description. */
+  errorText?: string;
+  /** Accessible name template of each remove control; `{value}` is the pill's display text. Default: `Remove {value}`. */
+  removeLabel?: string;
+  /** Accessible name template of the pill list; `{field}` is the label (or accessible label). Default: `{field}: chosen values`. */
+  chosenLabel?: string;
+  /** Accessible name of the suggestion popup. Default: `Suggestions`. */
+  suggestionsLabel?: string;
+  /** Test hook on the root (`data-testid`). */
+  testId?: string;
+  /** A value was added or removed; `value` is the next list as a JSON array. Controlled: the host writes it back to the `value` attribute. */
+  onChange?: (detail: {
+    value: string;
+  }) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyTagField: import("react").ForwardRefExoticComponent<TyTagFieldProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyToast.d.ts
+/** Brief, non-blocking confirmation or warning after an action, shown in a fixed landmark region with one live-region politeness per tone (errors assertive, the rest polite). The element owns the queue and the history; toasts arrive through its imperative API (`show`, `success`/`error`/`warning`/`info`, `dismiss`, `history`), reachable through the host ref. Auto-dismiss pauses on hover, focus and a hidden window; errors and toasts with an action stay until dismissed. */
+interface TyToastProps {
+  /** Region position (`data-placement`); `bottom-center` is recommended below 640 px. Default: `top-end`. */
+  placement?: "top-end" | "top-center" | "bottom-center";
+  /** Toasts shown at once; the rest wait in the queue and appear as earlier ones dismiss. Default: `3`. */
+  maxVisible?: number;
+  /** How many past toasts the history keeps (newest first); feeds the notification history. Default: `50`. */
+  historyLimit?: number;
+  /** Accessible name of the region landmark (the I18nAdapter's toast.region in React). Default: `Notifications`. */
+  regionLabel?: string;
+  /** Accessible name of each toast's dismiss button. Default: `Dismiss notification`. */
+  dismissLabel?: string;
+  /** A toast was dismissed — timeout, dismiss button, Escape, swipe, its action, or a `dismiss(id)` call; the detail carries its id (the spec's `onDismiss`). */
+  onDismiss?: (detail: {
+    id: string;
+  }) => void;
+  /** A toast's action was pressed; its `onPress` ran too and the toast dismissed itself. Lets hosts that cannot pass a callback still react to the action. */
+  onAction?: (detail: {
+    id: string;
+  }) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyToast: import("react").ForwardRefExoticComponent<TyToastProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyWheelPicker.d.ts
+/** Touch-friendly vertical scroller that picks one value from an ordered list by centring it in a selection band (drag or flick scrolls and snaps, a tap selects, the keyboard moves by row, page or ends). With `columns`, several wheels sit side by side for compound values (day, month, year), each with its own width share. */
+interface TyWheelPickerProps {
+  /** JSON array of the ordered choices: plain strings, or { "value", "label" } objects when the shown text differs from the reported value. */
+  options?: string;
+  /** Selected value. A value no option holds centres the first row and reports nothing until the wheel moves; programmatic changes animate the wheel to the new row. */
+  value?: string;
+  /** Accessible name of the wheel; with `columns`, of the whole group. */
+  label?: string;
+  /** Rows visible at once; an even number rounds up to the next odd one (minimum 3). Default: `5`. */
+  visibleRows?: number;
+  /** Shown but not changeable: the wheel stays focusable, taps, scrolling and keys do not select. */
+  disabled?: boolean;
+  /** Multi-column form: JSON array of { "label", "options", "value", "share"? }, one wheel per entry; `share` is its relative width. Wins over `options` and `value`. */
+  columns?: string;
+  /** Test hook on the wheel (`data-testid`). */
+  testId?: string;
+  /** The wheel settled on a new value, or a row was activated (tap, arrows, PageUp/PageDown, Home/End, typeahead). `value` is the option's value, not its label; `column` is the wheel's index (0 for a single wheel). */
+  onChange?: (detail: {
+    value: string;
+    column: number;
+  }) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyWheelPicker: import("react").ForwardRefExoticComponent<TyWheelPickerProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyButton.d.ts
+/** Triggers one action. A native <button> inside, so focus, keyboard activation and form submission are the platform's. */
+interface TyButtonProps {
+  /** Visual weight; at most one primary per view. Default: `secondary`. */
+  variant?: "primary" | "secondary" | "quiet" | "danger";
+  /** Height step. Default: `regular`. */
+  size?: "compact" | "regular" | "large";
+  /** `circle` only for icon-only buttons. Default: `rounded`. */
+  shape?: "rounded" | "pill" | "circle";
+  /** Hides the label; `accessibleLabel` is then required. */
+  iconOnly?: boolean;
+  /** Stretches to the container width. */
+  fullWidth?: boolean;
+  /** Shows the busy indicator and blocks presses (`aria-busy`, `aria-disabled`). */
+  busy?: boolean;
+  /** Native disabled. */
+  disabled?: boolean;
+  /** Native button type; `submit` submits the enclosing form. Default: `button`. */
+  type?: "button" | "submit" | "reset";
+  /** Form field name sent with a submit. */
+  name?: string;
+  /** Form field value sent with a submit. */
+  value?: string;
+  /** Accessible name when there is no visible label; also the tooltip of an icon-only button. */
+  accessibleLabel?: string;
+  /** A toggle button's state, `true` or `false` (`aria-pressed`); left out for an ordinary button. */
+  pressed?: string;
+  /** `true` or `false` while the button shows or hides a popup or region (`aria-expanded`). */
+  expanded?: string;
+  /** Id of the element the button controls (`aria-controls`). */
+  controls?: string;
+  /** The kind of popup the button opens (`aria-haspopup`: `menu`, `dialog`, `listbox`, …). */
+  haspopup?: string;
+  /** Test hook on the native button (`data-testid`). */
+  testId?: string;
+  /** The label. */
+  children?: ReactNode;
+  /** A leading icon (decorative). */
+  icon?: ReactNode;
+  /** A trailing icon (decorative). */
+  trailingIcon?: ReactNode;
+  /** The native click (not fired while busy or disabled). */
+  onClick?: (event: SyntheticEvent) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyButton: import("react").ForwardRefExoticComponent<TyButtonProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyCheckbox.d.ts
+/** A labelled choice that submits with its form. A native checkbox inside a <label> row, so labelling, keyboard (Space) and form participation are the platform's. The indicator holds both marks; CSS shows the check while the input is :checked, the minus while it is :indeterminate, so every renderer (and the page before upgrade) shows the right state. */
+interface TyCheckboxProps {
+  /** On. */
+  checked?: boolean;
+  /** Mixed state for "select all" rows (the input's `indeterminate` property); cleared by the next toggle. */
+  indeterminate?: boolean;
+  /** Native disabled. */
+  disabled?: boolean;
+  /** Native required; the form will not submit while off. */
+  required?: boolean;
+  /** Form field name; the value is sent while on. */
+  name?: string;
+  /** Form value sent while on (the browser sends "on" without one). */
+  value?: string;
+  /** `tile` draws a surface around the row; `bare` is indicator plus text. Default: `tile`. */
+  appearance?: "tile" | "bare";
+  /** Accessible name when there is no visible label. */
+  accessibleLabel?: string;
+  /** Test hook on the native checkbox (`data-testid`). */
+  testId?: string;
+  /** The visible label. */
+  children?: ReactNode;
+  /** A secondary line, announced as the description. */
+  description?: ReactNode;
+  /** The error message; marks the checkbox invalid (`aria-invalid`, `aria-errormessage`). */
+  error?: ReactNode;
+  /** The native change of the checkbox; `checked` is the new state. */
+  onChange?: (detail: {
+    checked: boolean;
+  }, event: SyntheticEvent) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyCheckbox: import("react").ForwardRefExoticComponent<TyCheckboxProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyDrawer.d.ts
+/** 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. */
+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;
+}
+export declare const TyDrawer: import("react").ForwardRefExoticComponent<TyDrawerProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyGradientMark.d.ts
+/** 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. */
+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;
+}
+export declare const TyGradientMark: import("react").ForwardRefExoticComponent<TyGradientMarkProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyInlineNotice.d.ts
+/** 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. */
+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;
+}
+export declare const TyInlineNotice: import("react").ForwardRefExoticComponent<TyInlineNoticeProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyLink.d.ts
+/** 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. */
+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;
+}
+export declare const TyLink: import("react").ForwardRefExoticComponent<TyLinkProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyModal.d.ts
+/** 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. */
+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;
+}
+export declare const TyModal: import("react").ForwardRefExoticComponent<TyModalProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyNativeSelect.d.ts
+/** 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. */
+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 declare const TyNativeSelect: import("react").ForwardRefExoticComponent<TyNativeSelectProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyPopover.d.ts
+/** Non-modal floating panel anchored to a trigger, for short explanations or arbitrary small content (help text, a mini form, a brand menu). The trigger is the host's own focusable element in the trigger slot — or the built-in info button when the slot is empty and `triggerLabel` names it. The element wires aria-expanded on the trigger, places the panel with the shared placement model (side preference, collision flip, viewport clamp, arrow inset), and asks to close with `ty-open-change` on Escape, an outside press, or focus leaving the panel; the host flips `open`. Not a focus trap — content that needs one is a dialog, not a popover. */
+interface TyPopoverProps {
+  /** Shown (controlled). The anatomy stays mounted but `hidden` while closed, so nothing reaches the accessibility tree. */
+  open?: boolean;
+  /** Accessible name of the built-in info trigger (required when the trigger slot is empty). */
+  triggerLabel?: string;
+  /** Heading at the top of the panel; also its accessible name. */
+  title?: string;
+  /** Preferred side; `start`/`end` follow the reading direction. Flips when there is no room. Default: `bottom`. */
+  placement?: "top" | "end" | "bottom" | "start";
+  /** Alignment along the chosen side. Default: `center`. */
+  align?: "start" | "center" | "end";
+  /** Gap between trigger and panel as a step of the spacing scale (0–9); the arrow's inset is added to it. Default: `2`. */
+  offset?: string;
+  /** `true` or `false`; unset: the arrow shows. */
+  showArrow?: string;
+  /** Test hook on the panel (`data-testid`). */
+  panelTestId?: string;
+  /** Accessible name of the panel when `title` is empty. */
+  accessibleLabel?: string;
+  /** The host's own toggle — any single focusable element; wired to the panel (aria-expanded, activation). Empty: the built-in info button. */
+  trigger?: ReactNode;
+  /** The panel body. */
+  children?: ReactNode;
+  /** The element asks the host to change visibility — `open: false` on Escape, an outside press or focus leaving the panel, `open: true` on a trigger activation. Controlled: the element does not toggle itself; the host flips `open`. */
+  onOpenChange?: (detail: {
+    open: boolean;
+  }) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyPopover: import("react").ForwardRefExoticComponent<TyPopoverProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySeparator.d.ts
+/** 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. */
+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;
+}
+export declare const TySeparator: import("react").ForwardRefExoticComponent<TySeparatorProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySkeleton.d.ts
+/** 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. */
+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;
+}
+export declare const TySkeleton: import("react").ForwardRefExoticComponent<TySkeletonProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySpinner.d.ts
+/** 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. */
+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;
+}
+export declare const TySpinner: import("react").ForwardRefExoticComponent<TySpinnerProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyStatusPill.d.ts
+/** 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. */
+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;
+}
+export declare const TyStatusPill: import("react").ForwardRefExoticComponent<TyStatusPillProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySurface.d.ts
+/** 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). */
+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;
+}
+export declare const TySurface: import("react").ForwardRefExoticComponent<TySurfaceProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TySwitch.d.ts
+/** 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. */
+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;
+}
+export declare const TySwitch: import("react").ForwardRefExoticComponent<TySwitchProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyTag.d.ts
+/** 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). */
+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;
+}
+export declare const TyTag: import("react").ForwardRefExoticComponent<TyTagProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyTextArea.d.ts
+/** Multi-line text entry. A native <textarea> inside, so input, keyboard and form participation are the platform's; the element adds the character counter, the over-limit state and auto-grow. */
+interface TyTextAreaProps {
+  /** Controlled text; the element mirrors it into the textarea (while the user types, the live value is the textarea's own). */
+  value?: string;
+  /** Initial text of an uncontrolled area, applied once on connect; a form reset returns to it. */
+  defaultValue?: string;
+  /** Initial visible lines. Default: `3`. */
+  rows?: number;
+  /** Grows with the content up to `maxRows`, then scrolls. */
+  autoGrow?: boolean;
+  /** Growth limit of `autoGrow`; past it the area scrolls (`data-scrolling`). */
+  maxRows?: number;
+  /** The native resize handle; `autoGrow` always disables it. Default: `vertical`. */
+  resize?: "vertical" | "none";
+  /** Counted for the counter and the over-limit state; typing is not cut off. */
+  maxLength?: number;
+  /** A character counter under the area (needs `maxLength`). */
+  showCounter?: boolean;
+  /** Counter template; `{count}` and `{max}` are filled in. Default: `{count} of {max} characters`. */
+  counterLabel?: string;
+  /** Counter template past the limit; `{over}` is the excess. Default: `{count} of {max} characters, {over} over the limit`. */
+  overLimitLabel?: string;
+  /** Mono family for code, keys or JSON. */
+  monospace?: boolean;
+  /** 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 area'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 area. */
+  label?: ReactNode;
+  /** Help text under the area, announced as the description. */
+  hint?: ReactNode;
+  /** The error message; marks the area invalid and is announced. */
+  error?: ReactNode;
+  /** The native input of the textarea; `value` is the whole text. */
+  onChange?: (detail: {
+    value: string;
+  }, event: SyntheticEvent) => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyTextArea: import("react").ForwardRefExoticComponent<TyTextAreaProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyTextField.d.ts
+/** Single-line text entry: plain, search and password. A native <input> inside, so typing, keyboard, autofill and form participation are the platform's; the element adds the clear action (search mode, or `clearable`), the reveal action (password mode), the character counter and the over-limit state. */
+interface TyTextFieldProps {
+  /** `search` adds the magnifier and the clear action (Escape clears); `password` adds the reveal action. Default: `text`. */
+  mode?: "text" | "search" | "password";
+  /** Native type for `mode="text"` (`text` when unset); `mode` wins when both are set. */
+  inputType?: "text" | "email" | "url" | "tel" | "number";
+  /** Controlled text; the element mirrors it into the input (while the user types, the live value is the input's own). */
+  value?: string;
+  /** Initial text of an uncontrolled field, applied once on connect; a form reset returns to it. */
+  defaultValue?: string;
+  /** Surface treatment of the group. Default: `outlined`. */
+  appearance?: "outlined" | "filled";
+  /** The clear action outside search mode (search always has it); shown while the field is non-empty and editable. */
+  clearable?: boolean;
+  /** Accessible name of the clear action. Default: `Clear`. */
+  clearLabel?: string;
+  /** Accessible name of the reveal action while the password is hidden. Default: `Show password`. */
+  showPasswordLabel?: string;
+  /** Accessible name of the reveal action while the password is shown. Default: `Hide password`. */
+  hidePasswordLabel?: string;
+  /** Counted for the counter and the over-limit state; typing is not cut off. */
+  maxLength?: number;
+  /** A character counter under the field (needs `maxLength`). */
+  showCounter?: boolean;
+  /** Counter template; `{count}` and `{max}` are filled in. Default: `{count} of {max} characters`. */
+  counterLabel?: string;
+  /** Counter template past the limit; `{over}` is the excess. Default: `{count} of {max} characters, {over} over the limit`. */
+  overLimitLabel?: 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;
+  /** Native autocomplete hint. */
+  autoComplete?: 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;
+  /** Confirmation of a valid value; only without an error, and hidden while over the limit. */
+  success?: ReactNode;
+  /** A decorative leading icon; wins over the search magnifier. */
+  leading?: ReactNode;
+  /** The native input of the field; `value` is the whole text. */
+  onChange?: (detail: {
+    value: string;
+  }, event: SyntheticEvent) => void;
+  /** The clear action ran (its button, or Escape in search mode); the value is already empty and focus is back on the input. */
+  onClear?: () => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyTextField: import("react").ForwardRefExoticComponent<TyTextFieldProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/elements/react/TyThemePalette.d.ts
+/** Theme, mode and density picker in the command palette's look; a native <dialog> in the top layer while open. */
+interface TyThemePaletteProps {
+  /** Shown (a modal dialog in the top layer). */
+  open?: boolean;
+  /** Apply the stored choice (or the defaults) to the document as soon as the element connects, and again when a default changes. */
+  apply?: boolean;
+  /** localStorage key of the choice ({ theme, mode, density } JSON, as ThemeProvider stores it). Default: `ty-theme`. */
+  storageKey?: string;
+  /** Theme when nothing is stored (a host passes its organization default here). Default: `tympan`. */
+  defaultTheme?: string;
+  /** Mode when nothing is stored. Default: `system`. */
+  defaultMode?: "system" | "light" | "dark";
+  /** Density when nothing is stored. Default: `default`. */
+  defaultDensity?: "compact" | "default" | "comfortable";
+  /** Comma-separated theme names to offer; all of them when empty. */
+  themes?: string;
+  /** URL of print-themes.css, linked while a print theme is applied. */
+  printStylesheet?: string;
+  /** Link the font stylesheet a theme names (off: no request to a font host). */
+  loadFonts?: boolean;
+  /** JSON object of translated theme names, by theme name. */
+  themeLabels?: string;
+  /** Accessible name of the dialog and the field. Default: `Appearance`. */
+  label?: string;
+  /** Field placeholder. Default: `Search themes, modes and densities`. */
+  placeholder?: string;
+  /** Shown when nothing matches. Default: `No matches`. */
+  emptyLabel?: string;
+  /** Announced result count; {count} is replaced. Default: `{count} results`. */
+  resultsLabel?: string;
+  /** Heading of the built-in themes. Default: `Themes`. */
+  groupPresets?: string;
+  /** Heading of the print themes. Default: `Print styles`. */
+  groupPrint?: string;
+  /** Heading of the colour modes. Default: `Mode`. */
+  groupMode?: string;
+  /** Heading of the densities. Default: `Density`. */
+  groupDensity?: string;
+  /** Label of the system colour mode. Default: `System`. */
+  modeSystem?: string;
+  /** Label of the light mode. Default: `Light`. */
+  modeLight?: string;
+  /** Label of the dark mode. Default: `Dark`. */
+  modeDark?: string;
+  /** Label of the compact density. Default: `Compact`. */
+  densityCompact?: string;
+  /** Label of the default density. Default: `Default`. */
+  densityDefault?: string;
+  /** Label of the comfortable density. Default: `Comfortable`. */
+  densityComfortable?: string;
+  /** Marks the row in use. Default: `Current`. */
+  currentLabel?: string;
+  /** Footer hint beside ↑↓. Default: `move`. */
+  hintNavigate?: string;
+  /** Footer hint beside ↵. Default: `choose`. */
+  hintSelect?: string;
+  /** Footer hint beside esc. Default: `close`. */
+  hintClose?: string;
+  /** A row was chosen and applied; the detail is the whole appearance. */
+  onThemeChange?: (detail: {
+    theme: string;
+    mode: string;
+    density: string;
+  }) => void;
+  /** The palette asks to close (Escape, a press outside, or after a choice). The element closes itself too. */
+  onClose?: () => void;
+  id?: string;
+  className?: string;
+}
+export declare const TyThemePalette: import("react").ForwardRefExoticComponent<TyThemePaletteProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export type { TyActionMenuProps, TyAvatarProps, TyBrandWordmarkProps, TyBreadcrumbsProps, TyButtonProps, TyCheckboxProps, TyCommandPaletteProps, TyCurrencyFieldProps, TyDataTableProps, TyDrawerProps, TyGradientMarkProps, TyHeadingProps, TyInlineNoticeProps, TyLinkProps, TyMarkdownViewProps, TyModalProps, TyNativeSelectProps, TyNotificationCenterProps, TyPageHeaderProps, TyPopoverProps, TyProgressBarProps, TySectionHeadingProps, TySegmentedControlProps, TySeparatorProps, TySkeletonProps, TySkipLinkProps, TySpinnerProps, TyStatusPillProps, TySurfaceProps, TySwitchProps, TyTabsProps, TyTagFieldProps, TyTagProps, TyTextAreaProps, TyTextFieldProps, TyThemePaletteProps, TyToastProps, TyWheelPickerProps };
+//# sourceMappingURL=elements-react.d.ts.map