` skips the type scale, the muted tone and the outline rules this component encodes. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `Create story} />` * ✅ `Clear filters} headingLevel={4} />` passed as `DataTable` `emptyText`, so the toolbar and active filters stay. * ✅ `} title="You're all caught up" />` as a page’s only content under its `h1`. * ❌ `

Nothing here

` — off-system and unspecific. * ❌ `` — failures are a `Banner`, not an empty state. **See also:** `DataTable` (`emptyText` for an exhausted filter), `Banner` for failures, `Skeleton` while loading; system guidelines `data-display` (when a collection shows an EmptyState) and `content` (title, description, and action copy). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ----------------- | ----------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `title` \* | `string` | — | Short, specific headline — say what is empty ("No stories yet"), not just "Nothing here". | | `description` | `ReactNode` | — | One or two sentences: why it is empty and what to do next. Inline content (rendered in a muted `Text`). | | `icon` | `ReactNode` | — | Decorative illustration or icon; wrapped `aria-hidden` — the title carries the meaning. | | `action` | `ReactNode` | — | The primary next step, usually a `Button variant="primary"`. | | `secondaryAction` | `ReactNode` | — | An optional secondary step next to `action` (a default/invisible `Button` or a `Link`). | | `size` | `'medium' \| 'large'`EmptyStateSize | `medium` | Overall scale: `medium` for a region inside a page, `large` for a whole-page/first-run state. | | `headingLevel` | `2 \| 3 \| 4`EmptyStateHeadingLevel | `3` | Semantic heading rank of the title (`h2`/`h3`/`h4`) so it fits the surrounding outline. The visual size follows `size`, not this prop. | \* required ## Related components * [Heading](/components/heading/) * [Text](/components/text/) * [Button](/components/button/) * [DataTable](/components/data-table/) * [Card](/components/card/) * [Banner](/components/banner/) * [Icon](/components/icon/) * [Table](/components/table/) # FormControl > When to use: every labeled form field. FormControl wraps a label, a field, and optional caption/validation, and wires the accessibility for you. Build forms by Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { FormControl } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes`. Source: [src/components/FormControl/FormControl.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/FormControl/FormControl.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** every labeled form field. `FormControl` wraps a label, a field, and optional caption/validation, and wires the accessibility for you. Build forms by stacking `FormControl`s in a `Stack`. ## Rules [Section titled “Rules”](#rules) * Wrap text-like fields (`TextInput`, `Textarea`, `Select`) in a `FormControl` with a `FormControl.Label`. The control generates a shared id and sets `htmlFor`, `aria-describedby`, `aria-invalid`, `required`, and `disabled` automatically — **don’t** wire ids by hand, and **never** use a placeholder as the label. * Use `FormControl.Caption` for help text and `FormControl.Validation variant="error"` for errors (it also flips the field to invalid). Use `variant="success"` for confirmation. * For booleans use `Checkbox` (with its own `label`); for one-of-many use `RadioGroup` + `Radio` (a `

`/`

` group). Don’t put these in a `FormControl`. * Lay out fields with `` (or a `Grid` for side-by-side fields); submit with `` (one per form). Spacing comes from the `space` scale only. * Mark required fields with `required` on the `FormControl` (it propagates to the field and marks the label). Use `FormControl.Label visuallyHidden` only for a single search-style field. * Field errors are inline `FormControl.Validation`; a form-level or server error is a `Banner variant="danger"` above the fields, never a toast. * **Never** use raw ``, ``, `<select>`, or a styled `<div>` toggle — every field has a design-system component. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ ```tsx <FormControl required> <FormControl.Label>Email</FormControl.Label> <TextInput type="email" /> <FormControl.Validation variant="error">Enter a valid email.</FormControl.Validation> </FormControl> ``` * ❌ `<label>Email</label><input style={{ border: '1px solid #d0d7de' }} />` — raw element, hardcoded border, label not associated, no error wiring. **See also:** System guidelines `forms` (composition, validation display, widths, actions) and `feedback` (Validation vs Banner vs Toast vs Dialog). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) ### `FormControl` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | -------------------------------------------------------------------------------------------- | | `id` | `string` | — | Override the generated id shared by the label and field. | | `required` | `boolean` | `false` | Marks the field required (asterisk on the label + `required` on the input). | | `disabled` | `boolean` | `false` | Disables the field. | | `invalid` | `boolean` | — | Force the invalid state. Otherwise inferred from a `FormControl.Validation variant="error"`. | | `children` | `ReactNode` | — | | ### `FormControl.Label` | Prop | Type | Default | Description | | ---------------- | ----------- | ------- | -------------------------------------------------------- | | `visuallyHidden` | `boolean` | `false` | Visually hide the label but keep it for screen readers. | | `required` | `boolean` | `false` | Injected by FormControl — renders the required asterisk. | | `children` | `ReactNode` | — | | ### `FormControl.Caption` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `FormControl.Validation` | Prop | Type | Default | Description | | ---------- | --------------------------------------- | ------- | ------------------------------------------------------------------- | | `variant` | `'error' \| 'success'`ValidationVariant | `error` | Tone of the message. `error` also drives the field's invalid state. | | `children` | `ReactNode` | — | | ## Related components * [TextInput](/components/text-input/) * [Textarea](/components/textarea/) * [Select](/components/select/) * [NumberInput](/components/number-input/) * [DatePicker](/components/date-picker/) * [Banner](/components/banner/) * [Calendar](/components/calendar/) * [Checkbox](/components/checkbox/) * [RadioGroup](/components/radio-group/) * [Switch](/components/switch/) # Grid > When to use: laying out equal-width columns that reflow with the viewport — a row of stat cards, a card gallery, a two-column form section, a dashboard of panel Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Grid } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLDivElement>`. Source: [src/components/Grid/Grid.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Grid/Grid.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** laying out equal-width columns that reflow with the viewport — a row of stat cards, a card gallery, a two-column form section, a dashboard of panels. `Grid` and `Stack` are the only layout primitives: `Stack` for one axis (toolbars, form fields, vertical rhythm), `Grid` for two. Reach for it instead of `display: grid` with pixel gaps or a hand-written media query. ## Rules [Section titled “Rules”](#rules) * `columns` is the number of equal tracks, fixed (`columns={3}`) or per breakpoint (`columns={{ base: 1, sm: 2, lg: 4 }}`). It is mobile-first: `base` applies from 0, `sm`/`md`/`lg` switch on at the `breakpoint-sm/md/lg` tokens (640 / 960 / 1280) and a missing step inherits the previous one. Always give a `base` (or a plain number) — a grid that is 4-wide on phones is a bug. * `gap` maps to the `space` scale (`condensed`=8, `normal`=16, `spacious`=24) and applies to both axes; `rowGap` overrides the row spacing only. **Never** set a pixel gap or margins between grid children. * Use `Grid.Item span` for a child that should cover several columns (a featured card, a full-width footer row). `span` accepts the same responsive object, so a sidebar can be `span={{ base: 1, md: 2 }}`. Don’t let a span exceed the column count at that breakpoint. * Tracks are `minmax(0, 1fr)`, so long unbroken content truncates or wraps inside its cell rather than widening the column. Put `truncate` on the `Heading`/`Text` inside, not `overflow` on the grid. * `align` controls block-axis alignment within a row (`stretch` makes cards in a row equal height, `start` keeps short items at the top). * Don’t nest a `Grid` to fake a table — tabular data is a `Table`/`DataTable`. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Grid columns={{ base: 1, sm: 2, lg: 4 }} gap="normal">{stats.map(s => <Card key={s.id}>…</Card>)}</Grid>` * ✅ `<Grid columns={3}><Grid.Item span={2}>…main…</Grid.Item><aside>…</aside></Grid>` * ✅ `<Grid columns={2} gap="condensed" rowGap="normal">` — tight columns, roomier rows, both from the scale. * ❌ `<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>` — raw grid, off-scale gap, no responsive story. * ❌ `<Grid columns={4}>` for a phone-first page — fixed four columns squeeze to nothing at 375px; give it a `base`. **See also:** `Stack` for one-axis layout, `Card` for the tiles a grid usually holds; system guideline `layout` (gap scale, breakpoints, container widths). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) ### `Grid` | Prop | Type | Default | Description | | ---------- | -------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `columns` | `number \| GridResponsive`GridResponsiveValue | `1` | Number of equal-width columns, either fixed or per breakpoint, e.g. `{ base: 1, sm: 2, lg: 4 }`. Each column is `minmax(0, 1fr)` so long content can't blow the track out. | | `gap` | `'none' \| 'condensed' \| 'normal' \| 'spacious'`GridGap | `normal` | Space between rows and columns, from the `space` scale (condensed=8, normal=16, spacious=24). | | `rowGap` | `'none' \| 'condensed' \| 'normal' \| 'spacious'`GridGap | — | Overrides the row spacing only, from the same scale; defaults to `gap`. | | `align` | `'start' \| 'center' \| 'end' \| 'stretch'`GridAlign | — | Block-axis alignment of items within their row (maps to `align-items`). | | `children` | `ReactNode` | — | | ### `Grid.Item` | Prop | Type | Default | Description | | ---------- | --------------------------------------------- | ------- | ----------------------------------------------------------------------------------- | | `span` | `number \| GridResponsive`GridResponsiveValue | — | Number of columns this item spans (`grid-column: span N`), fixed or per breakpoint. | | `children` | `ReactNode` | — | | ## Related types ### `GridResponsive` A value per breakpoint. `base` applies from 0 up; `sm`/`md`/`lg` apply from `breakpoint-sm` (640), `breakpoint-md` (960) and `breakpoint-lg` (1280) upward. Missing steps inherit the previous one (lg → md → sm → base). | Member | Type | Default | Description | | ------ | -------- | ------- | --------------------------------------- | | `base` | `number` | — | Value from 0 up (mobile-first). | | `sm` | `number` | — | Value from `breakpoint-sm` (640px) up. | | `md` | `number` | — | Value from `breakpoint-md` (960px) up. | | `lg` | `number` | — | Value from `breakpoint-lg` (1280px) up. | ## Related components * [Stack](/components/stack/) * [Card](/components/card/) # Heading > When to use: every page, section, card and dialog title. Heading is the only way to put the display (serif) type scale on screen — reach for it instead of a raw Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Heading } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLHeadingElement>`. Source: [src/components/Heading/Heading.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Heading/Heading.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** every page, section, card and dialog title. `Heading` is the only way to put the display (serif) type scale on screen — reach for it instead of a raw `<h1 className="page-title">` with custom CSS. For body copy, captions and labels use `Text`. ## Rules [Section titled “Rules”](#rules) * `level` (1–4) picks the **size** from the type scale (36 / 28 / 20 / 16) and the default element (`h1`…`h4`). Never set `fontSize` or `fontFamily` inline — the scale is the token. * `as` picks the **element** when semantics and size must differ. Keep the document outline honest: one `h1` per page, then `h2`, `h3`… in order without skipping ranks. If a section title should *look* big but sit under the page `h1`, write `<Heading level={1} as="h2">`; if a card title is visually small but is the card’s own `h2`, write `<Heading level={4} as="h2">`. * Use `as="p"` / `"div"` / `"span"` for display-styled text that is *not* a heading (a hero stat, a decorative quote) so screen readers don’t announce a false section. * `truncate` clips to one line with an ellipsis — use it in constrained rows (table titles, cards in a grid); make sure the full text is reachable elsewhere (a tooltip, the detail page). * Color is always `fgColor-default`; a muted or accent title is a `Text` with `weight="semibold"`, not a recolored heading. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Heading level={1}>Newsroom</Heading>` — the page title. * ✅ `<Heading level={3} as="h2">Recent stories</Heading>` — a section `h2` at the level-3 size. * ✅ `<Heading level={4} truncate>{story.title}</Heading>` — a card title that must fit one line. * ❌ `<h1 style={{ fontSize: 36, fontFamily: 'Georgia' }}>` — off-scale, off-token. * ❌ `<Heading level={4} as="h1">Settings</Heading>` next to `<Heading level={1} as="h5">` — the outline no longer matches what people see; keep ranks in reading order. **See also:** `Text` for everything that is not a section title; system guidelines `typography` (the scale, one `level={1}` per page, `as` for honest ranks) and `content` (sentence case). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ---------- | -------------------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `level` | `1 \| 2 \| 3 \| 4`HeadingLevel | `2` | Visual size on the type scale: 1 → `fontSize-5` (36), 2 → `fontSize-4` (28), 3 → `fontSize-3` (20), 4 → `fontSize-2` (16). Also picks the default element (`h1`…`h4`). | | `as` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'div' \| 'span'`HeadingElement | `` `h${level}` `` | Element to render, so document semantics and visual size can differ (e.g. a level-1 look on an `h2` in a page that already has an `h1`). | | `truncate` | `boolean` | `false` | Clip overflowing text to a single line with an ellipsis. | | `children` | `ReactNode` | — | Heading text. | ## Related components * [Text](/components/text/) * [EmptyState](/components/empty-state/) * [Stack](/components/stack/) * [Accordion](/components/accordion/) * [Breadcrumbs](/components/breadcrumbs/) * [Card](/components/card/) # Icon > When to use: to reinforce an action, status or object next to text, or as the only content of an IconButton. Icons are drawn from the curated tenet set (Lucide, Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Icon } from 'tenet-ui'; ``` Also accepts every prop of `Omit<SVGAttributes<SVGSVGElement>, 'children' | 'width' | 'height' | 'viewBox'>`. Source: [src/components/Icon/Icon.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Icon/Icon.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** to reinforce an action, status or object next to text, or as the only content of an `IconButton`. Icons are drawn from the curated tenet set (Lucide, ISC) exported from `tenet-ui/icons`; `generated/icons.json` is the searchable manifest. ## Sizes [Section titled “Sizes”](#sizes) * **16** (default) — inside controls: `Button` leading/trailing icons, `IconButton`, input adornments, table-row actions, tag/label prefixes. Sits on the 14px body text line. * **20** — large controls (`size="large"` buttons), list rows and navigation items with 16px text. * **24** — empty states, page/section headers, stat tiles, dialog titles. Never larger: for illustrations use an image, not a stroked icon. * Do not set `width`/`height`/`viewBox` yourself; `size` owns geometry so every icon in a row lines up. Stroke width is a constant 2 across sizes (Lucide’s native weight). ## Decorative vs meaningful — the `label` rule [Section titled “Decorative vs meaningful — the label rule”](#decorative-vs-meaningful--the-label-rule) * **Default is decorative.** An icon renders `aria-hidden="true"`. This is right whenever the meaning is already in adjacent text or in the control’s name: `\<Button leadingIcon=\{\<PlusIcon />\}>New article\</Button>`, a status word with a check next to it, a chevron on a disclosure. * **Pass `label` only when the icon stands alone.** A lone glyph in a table cell that carries information no text does (`<PaperclipIcon label="Has attachments" />`), a sole indicator in a header. A *status* is never a lone icon: it is a word in a `Tag` (`<Tag variant="success">Published</Tag>`). `label` sets `role="img"` + `aria-label`, so screen readers announce it. Name the **meaning**, not the glyph: `label="Published"`, not `label="Check circle"`. * Never give an icon a `label` that duplicates visible text beside it — the name is read twice. ## Pairing with IconButton and Button [Section titled “Pairing with IconButton and Button”](#pairing-with-iconbutton-and-button) * In `IconButton` the accessible name goes on the **button** (`aria-label="Delete row"`); the icon stays decorative. `IconButton` already wraps the icon in an `aria-hidden` span, so do not add a `label` to the glyph — the button would then have two competing names. * `Button`’s `leadingIcon`/`trailingIcon` slots are `aria-hidden` too; pass bare glyphs (`<ChevronDownIcon />`) and let the label text speak. * Icon color is `currentColor`: it inherits the button/text token automatically. Do not set `color` on the icon; set it on the parent (or pick a token variant of the parent). ## Naming and imports [Section titled “Naming and imports”](#naming-and-imports) * Every glyph is `<Thing>Icon` from `tenet-ui/icons`: `import \{ SearchIcon, MoreHorizontalIcon \} from 'tenet-ui/icons'`. The tenet name is in `generated/icons.json` (`search` → `SearchIcon`); the Lucide source name may differ (`more-horizontal` is Lucide’s `ellipsis`). * **Never inline arbitrary SVG when an icon exists** in the set. Search `generated/icons.json` by keyword first. If a glyph is genuinely missing, add it to `icons/manifest.json` and run `node scripts/build-icons.mjs`; as a last resort wrap a one-off path in `<Icon>` so it still gets the system’s size, stroke and a11y defaults. * Do not add a runtime dependency on `lucide-react` or another icon package in product code; the tenet set is the vocabulary the docs, catalog and MCP tools know about. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Button leadingIcon={<PlusIcon />}>New article</Button>` — decorative icon, text carries meaning. * ✅ `<IconButton icon={<TrashIcon />} variant="danger" aria-label="Delete row" />` — name on the button. * ✅ `<PaperclipIcon label="Has attachments" size={16} />` alone in a table cell — meaningful, labelled. * ❌ `<CheckCircleIcon label="Published" size={16} />` alone in a status cell — a status is a `Tag` word, not a glyph. * ❌ `<svg width="16" height="16"><path d="M…" /></svg>` — inline SVG for a glyph that exists (`SearchIcon`). * ❌ `<IconButton icon={<TrashIcon label="Delete" />} />` — name on the icon, button still nameless. * ❌ `<SearchIcon style={{ width: 18, color: '#c2410c' }} />` — off-scale size and a hardcoded color; use `size` and inherit the parent’s token. **See also:** `IconButton` for an icon-only action, `Button` `leadingIcon` when a label fits, `Tag` for status words; system guidelines `iconography` (sizes, decorative vs meaningful, naming) and `accessibility`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `size` | `16 \| 20 \| 24`IconSize | `16` | Rendered width and height in pixels. `16` sits on the text line inside controls (Button, IconButton, inputs); `20` for large controls and list rows; `24` for empty states, page headers and stat tiles. | | `label` | `string` | — | Accessible name. Set it ONLY when the icon carries meaning on its own (no adjacent text names it). When set the SVG gets `role="img"` and `aria-label`; when absent the icon is decorative (`aria-hidden="true"`) and the surrounding control must carry the name. | | `children` \* | `ReactNode` | — | The glyph: SVG shape nodes (``, ``, …) drawn on Lucide's 24×24 grid. Consumers normally render a named glyph from `tenet-ui/icons` (``) which supplies this. | \* required ## Related components * [IconButton](/components/icon-button/) * [Button](/components/button/) * [EmptyState](/components/empty-state/) * [TextInput](/components/text-input/) # IconButton > A square, icon-only button for compact actions where a text label won't fit. Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { IconButton } from 'tenet-ui'; ``` Also accepts every prop of `ButtonHTMLAttributes<HTMLButtonElement>`. Source: [src/components/IconButton/IconButton.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/IconButton/IconButton.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) A square, icon-only button for compact actions where a text label won’t fit. ## When to use [Section titled “When to use”](#when-to-use) * Use **IconButton** for dense surfaces: toolbars, table-row actions, the close affordance in a dialog/banner corner, segmented toolbars. * Use **Button** (with a `leadingIcon`) whenever you have room for a label — a visible label is always clearer than an icon alone. Reach for IconButton only when space is genuinely the constraint. * For a menu of actions behind one trigger, use **Menu**; IconButton is a single action, not a disclosure. ## Rules [Section titled “Rules”](#rules) * **It must have an accessible name.** The icon is the only visible content and is rendered `aria-hidden`, so the name has to come from `aria-label` (or `aria-labelledby`). With neither, screen-reader users hear nothing. In development the component logs a `console.warn` when the name is missing. * The name should describe the **action**, not the glyph: `aria-label="Delete row"`, not `aria-label="Trash icon"`. * Variants mirror `Button`: `primary` for the single most important action, `default` for secondary, `invisible` for tertiary/toolbar, `danger` for destructive. * Sizes map to the control-height tokens (`small` 28 / `medium` 32 / `large` 40) and the control is square, so it lines up with same-size inputs and buttons. * The whole control is a real `<button>`, so keyboard activation (Enter/Space) and the `:focus-visible` ring come for free. Pass `disabled` as usual. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) Do — give it an action name and pass the icon via the `icon` prop: ```tsx <IconButton icon={<TrashIcon />} variant="danger" aria-label="Delete row" onClick={remove} /> ``` Don’t — ship a nameless icon button (axe failure; the dev warning fires): ```tsx // ❌ no accessible name — screen readers announce nothing <IconButton icon={<TrashIcon />} variant="danger" onClick={remove} /> ``` Don’t — bake the label into the icon and leave the button unnamed: ```tsx // ❌ the <span> text is aria-hidden with the icon; the button is still nameless <IconButton icon={<><TrashIcon /> Delete</>} /> ``` **See also:** `Button` with `leadingIcon` when a label fits, `Tooltip` to reveal the name on hover; system guidelines `iconography` and `accessibility`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | --------- | -------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------ | | `icon` \* | `ReactNode` | — | The icon to render. This is the only visible content, so the button must also have an accessible name. | | `variant` | `'default' \| 'primary' \| 'danger' \| 'invisible'`IconButtonVariant | `default` | Visual style of the button. Use `primary` for the single most important action per surface. | | `size` | `'small' \| 'medium' \| 'large'`IconButtonSize | `medium` | Square control size (height = width), mapped to the control-height tokens. | \* required ## Related components * [Button](/components/button/) * [Icon](/components/icon/) * [Tooltip](/components/tooltip/) * [Menu](/components/menu/) * [Badge](/components/badge/) # Label > Deprecated since 0.4.0 — use Tag. Tag carries the same status variants (success, danger, attention, muted, accent, default) and is read-only when onRemove is a Status: deprecatedAccessibility reviewedDeprecatedtenet-ui\@0.4.0 **Deprecated.** Use \`Tag\` instead (since 0.4.0). \`Tag\` now carries the same status variants (\`success\` / \`danger\` / \`attention\` / \`muted\` / \`accent\`) and is read-only when \`onRemove\` is absent, so one pill component covers both status words and removable chips — and the name no longer collides with \`FormControl.Label\`. \`Label\` keeps rendering until 0.5.0. (since 0.4.0) Import ```tsx import { Label } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLSpanElement>`. Source: [src/components/Label/Label.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Label/Label.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) > **Deprecated since 0.4.0 — use `Tag`.** `Tag` carries the same status variants (`success`, `danger`, `attention`, `muted`, `accent`, `default`) and is read-only when `onRemove` is absent. Replace `<Label variant="success">Published</Label>` with `<Tag variant="success">Published</Tag>`. `Label` keeps rendering (with a dev warning) until 0.5.0. The rules below describe the legacy behaviour. **When to use:** a small status / category pill attached to an item (e.g. `bug`, `triaged`, `ready`). Use `Label` instead of a hand-styled `<span>` so the color schemes stay owned by the design system. ## Rules [Section titled “Rules”](#rules) * Choose `variant` by **meaning**, not by color: `success` for positive/done, `danger` for problems, `accent` for emphasis, `muted`/`default` for neutral tags. * Do **not** compute your own fills, borders, or translucent backgrounds from a hex value — that is exactly the anti-pattern this component exists to remove. Map your data’s category to a `variant`. * Keep label text short (one or two words). For long-form status, use text, not a Label. * `Label` is non-interactive. For a clickable tag, wrap or use a button/link, don’t add click handlers that look like plain text. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Label variant="danger">bug</Label>` * ✅ map data → variant: `const variant = issue.blocking ? 'danger' : 'muted'` * ❌ `<span style={{ background: 'rgba(207,34,46,.18)', color: '#ff8182', border: '1px solid rgba(207,34,46,.35)' }}>bug</span>` — hand-tuned translucent colors; reinvents the component. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ---------- | -------------------------------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------- | | `variant` | `'default' \| 'accent' \| 'success' \| 'danger' \| 'attention' \| 'muted'`LabelVariant | `default` | Semantic color scheme. Pick by meaning (success/danger/accent), not by raw color. | | `size` | `'small' \| 'medium'`LabelSize | `medium` | Label size. | | `children` | `ReactNode` | — | | ## Related components * [Tag](/components/tag/) * [Badge](/components/badge/) * [Text](/components/text/) # Link > When to use: inline navigation — sending the user to another page or resource within flowing text or alongside other content. For an action that does something Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Link } from 'tenet-ui'; ``` Also accepts every prop of `AnchorHTMLAttributes<HTMLAnchorElement>`. Source: [src/components/Link/Link.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Link/Link.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** inline navigation — sending the user to another page or resource within flowing text or alongside other content. For an action that *does* something (submit, open a dialog, delete) use a `Button`; for a button styled as a link use `Button` with the `invisible` variant. A link navigates; a button acts. ## Rules [Section titled “Rules”](#rules) * It renders a real `<a>` and forwards its ref. Always give it descriptive link text (“View billing settings”), never “click here” or a bare URL — the text is the accessible name. * `underline` defaults to `'hover'`. Prefer `'always'` for links sitting inside a paragraph of body text so they’re distinguishable without relying on color alone; `'none'` is for links that already have another affordance (e.g. card-wide links, nav rows). * `muted` swaps the accent color for the muted foreground (secondary/utility links). It still resolves to the accent color on hover for affordance. * Pass `external` for off-site links: it sets `target="_blank"` + `rel="noopener noreferrer"` and appends a visually-hidden ” (opens in new tab)” so screen-reader users are warned. A small `↗` glyph is shown (`aria-hidden`). * The focus ring is a `:focus-visible` accent outline — don’t suppress it. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Link href="/settings/billing">View billing settings</Link>` * ✅ `<Link href="https://example.com" external>Open the changelog</Link>` * ❌ `<Link href="https://x.com" target="_blank">x.com</Link>` — opens a new tab with no `rel` and no screen-reader warning; use `external` instead. * ❌ `<Link onClick={save}>Save</Link>` — that’s an action, use a `Button`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ----------- | -------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `muted` | `boolean` | `false` | Use the muted foreground color instead of the accent color. | | `underline` | `'hover' \| 'always' \| 'none'`LinkUnderline | `hover` | When the underline is shown. | | `external` | `boolean` | `false` | Marks the link as leading off-site: sets `target="_blank"` + `rel="noopener noreferrer"` and appends a visually-hidden " (opens in new tab)" warning for screen-reader users. | ## Related components * [Button](/components/button/) * [Breadcrumbs](/components/breadcrumbs/) * [Text](/components/text/) # Menu > When to use: a list of actions triggered from a button (a row's "⋯" overflow, a "New ▾" split of choices). For picking a value from a list use Select; for navig Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Menu } from 'tenet-ui'; ``` Source: [src/components/Menu/Menu.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Menu/Menu.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** a list of **actions** triggered from a button (a row’s ”⋯” overflow, a “New ▾” split of choices). For picking a **value** from a list use `Select`; for navigation use links. ## Rules [Section titled “Rules”](#rules) * Pass a focusable `trigger` (a `Button`) — it’s wired with `aria-haspopup="menu"`, `aria-expanded`, and open/close handling. Each item runs its `onSelect` and the menu closes. * Give an `aria-label` describing the menu (e.g. “Repository actions”); otherwise it falls back to the trigger’s text. * Keyboard + ARIA are handled: arrows move, Enter/Space invoke, Escape closes and returns focus to the trigger, click-outside closes. Don’t rebuild this with a div of onClick rows. * Mark dangerous actions `destructive` (renders in the danger color); use a `{ type: 'separator' }` to group. Keep menus short — long lists belong in a `Select` or a dedicated page. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Menu aria-label="Row actions" trigger={<IconButton icon={<MoreHorizontalIcon />} aria-label="Row actions" />} items={[{label:'Edit',onSelect},{type:'separator'},{label:'Delete',onSelect,destructive:true}]} />` * ❌ Using a Menu to choose a value that should persist in a field — that’s `Select`. * ❌ A non-focusable trigger (plain `<div>`). **See also:** `IconButton` as the overflow trigger, `Select` for values, `Popover` for arbitrary content. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ------------ | ------------------ | --------------- | --------------------------------------------------------------------------------------- | | `trigger` \* | `ReactElement` | — | The trigger element (e.g. a Button). It is wired with the menu's aria + click handling. | | `items` \* | `MenuItem[]` | — | The actions to show. | | `aria-label` | `string` | `trigger label` | Accessible name for the menu. | | `align` | `'start' \| 'end'` | `start` | Menu alignment relative to the trigger. | | `className` | `string` | — | | \* required ## Related types ### `MenuAction` | Member | Type | Default | Description | | ------------- | ------------ | ------- | --------------------------------------------------- | | `type` | `'item'` | — | | | `label` \* | `ReactNode` | — | Visible label. | | `onSelect` \* | `() => void` | — | Invoked when the item is chosen (menu then closes). | | `icon` | `ReactNode` | — | Optional leading icon. | | `disabled` | `boolean` | — | Disable this item. | | `destructive` | `boolean` | — | Render in the danger color for destructive actions. | ### `MenuSeparator` | Member | Type | Default | Description | | --------- | ------------- | ------- | ----------- | | `type` \* | `'separator'` | — | | ## Related components * [IconButton](/components/icon-button/) * [Button](/components/button/) * [Select](/components/select/) * [Popover](/components/popover/) * [Divider](/components/divider/) # NumberInput > When to use: entering a bounded quantity — a count, a price, a limit, a percentage. For free-form text use TextInput; for picking from a fixed list use Select. Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { NumberInput } from 'tenet-ui'; ``` Also accepts every prop of `Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange'>`. Source: [src/components/NumberInput/NumberInput.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/NumberInput/NumberInput.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** entering a bounded quantity — a count, a price, a limit, a percentage. For free-form text use `TextInput`; for picking from a fixed list use `Select`. ## Rules [Section titled “Rules”](#rules) * Give it an accessible name via `FormControl.Label` or `aria-label`. * It reports a parsed `number | null` through `onChange` — **don’t** re-parse a string. An empty field is `null`, not `0`. * Set `min` / `max` so the steppers and arrow keys clamp; set `step` to the natural increment (e.g. `5`, `0.1`). * Control it with `value` + `onChange`, or leave uncontrolled with `defaultValue`. * Use `size` / `fullWidth` from the scale (`block` is the deprecated 0.3.0 name and warns); use `invalid` for validation state. * **Never** use a raw `<input type="number">` styled by hand — you lose the token chrome, the clamping, and the number-typed change handler. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<NumberInput aria-label="Quantity" defaultValue={1} min={1} max={99} />` * ✅ controlled: `<NumberInput value={qty} onChange={setQty} min={0} step={5} />` * ❌ `<input type="number" className="myfield" />` — off-system, no `number | null` contract. * ❌ Treating the empty state as `0` — it is `null`; decide intent explicitly. **See also:** `FormControl`, `TextInput`; system guideline `forms`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ----------------- | ----------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `number \| null` | — | Controlled value. Use `null`/`undefined` for an empty field. | | `defaultValue` | `number \| null` | — | Uncontrolled initial value. | | `onChange` | `(value: number \| null) => void` | — | Called with the parsed numeric value (or `null` when the field is cleared). | | `min` | `number` | — | Smallest allowed value. Stepping/clamping respects it. | | `max` | `number` | — | Largest allowed value. Stepping/clamping respects it. | | `step` | `number` | `1` | Increment applied by the steppers and arrow keys. | | `size` | `'small' \| 'medium' \| 'large'`NumberInputSize | `medium` | Control height / font scale. | | `fullWidth` | `boolean` | — | Stretch the field to fill the available width. | | `block`deprecated | `boolean` | — | Stretch the field to fill the available width.**Deprecated since 0.4.0.** Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | `invalid` | `boolean` | `false` | Mark the field as invalid (sets `aria-invalid` and a danger border). | Deprecated props keep working for one minor release; the replacement is named in the row. ## Related components * [TextInput](/components/text-input/) * [FormControl](/components/form-control/) * [Select](/components/select/) # Pagination > When to use: moving through a large result set split into pages (a table, search results). For infinite streams prefer "load more"; for hierarchy use Breadcrumb Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Pagination } from 'tenet-ui'; ``` Source: [src/components/Pagination/Pagination.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Pagination/Pagination.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** moving through a large result set split into pages (a table, search results). For infinite streams prefer “load more”; for hierarchy use `Breadcrumbs`. ## Rules [Section titled “Rules”](#rules) * It’s controlled: pass `page` (1-based) + `pageCount` and handle `onPageChange`. Keep `page` in sync with your data fetch. * Every control is a real `<button>`, so it’s keyboard-operable; the current page is marked `aria-current="page"` and Previous/Next disable at the ends. Don’t reimplement with click-only `<span>`s. * Long ranges collapse with ellipses around `siblingCount` pages — tune `siblingCount`, don’t render 42 buttons. * It’s wrapped in a `<nav aria-label>`; give a distinct label if more than one nav is on the page. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Pagination page={page} pageCount={total} onPageChange={setPage} />` * ❌ Rendering all pages with no ellipsis for large counts. * ❌ Click-only page numbers with no `aria-current` and no keyboard support. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ----------------- | ------------------------ | ------------ | ------------------------------------------------------- | | `page` \* | `number` | — | Current page (1-based). | | `pageCount` \* | `number` | — | Total number of pages. | | `onPageChange` \* | `(page: number) => void` | — | Called with the requested page when the user navigates. | | `siblingCount` | `number` | `1` | How many page numbers to show around the current page. | | `aria-label` | `string` | `Pagination` | Accessible name for the nav landmark. | | `className` | `string` | — | | \* required ## Related components * [DataTable](/components/data-table/) * [Table](/components/table/) * [Breadcrumbs](/components/breadcrumbs/) # Popover > When to use: a lightweight floating container anchored to a control — a filter panel, a small form, rich help, an account summary. It's non-modal: the page behi Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Popover } from 'tenet-ui'; ``` Source: [src/components/Popover/Popover.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Popover/Popover.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** a lightweight floating container anchored to a control — a filter panel, a small form, rich help, an account summary. It’s **non-modal**: the page behind stays interactive. For a blocking task or confirmation (focus trap, scroll lock, dimmed background) use `Dialog`; for a plain text hint use `Tooltip`; for a list of actions use `Menu`; for picking a value use `Select`. ## Rules [Section titled “Rules”](#rules) * Pass a focusable `trigger` (a `Button`). It’s cloned and wired with `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, an onClick toggle, and a ref so focus returns to it on close. A non-focusable trigger (a plain `<div>`) strands keyboard users. * Give an `aria-label` — it names the `role="dialog"` surface (it falls back to “Popover”, which isn’t descriptive). * Focus + keyboard are handled: on open focus moves into the surface (first focusable child, else the container); Escape closes and returns focus to the trigger; click-outside closes; and focus leaving the wrapper (Tab-out) closes it so it can’t strand open behind the page. * It is **non-modal** (`aria-modal="false"`): no focus trap, no scroll lock, no background `aria-hidden`. If you need any of those, you want `Dialog`, not a Popover with hacks bolted on. * Choose `placement` to keep the surface on-screen near the trigger (`bottom-start` default, plus `bottom-end`, `top-start`, `top-end`). Keep the content short — a popover is not a page. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Popover aria-label="Filters" trigger={<Button>Filters ▾</Button>}><FilterForm /></Popover>` * ❌ `<Popover trigger={<div>Open</div>}>…</Popover>` — a non-focusable trigger; keyboard users can’t reach it. * ❌ Reaching for a Popover for a destructive confirm that must block the flow — that’s a `Dialog`. * ❌ Omitting `aria-label` — the dialog is then named only “Popover”. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ------------- | ---------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `trigger` \* | `ReactElement` | — | The trigger element (e.g. a Button). It is cloned and wired with `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, an onClick toggle, and a ref so focus can be restored to it on close. | | `children` \* | `ReactNode` | — | The floating content rendered inside the popover surface. | | `placement` | `'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`PopoverPlacement | `bottom-start` | Where the surface is anchored relative to the trigger. | | `aria-label` | `string` | `Popover` | Accessible name for the popover dialog (falls back to "Popover"). | | `className` | `string` | — | | \* required ## Related components * [Dialog](/components/dialog/) * [Menu](/components/menu/) * [Tooltip](/components/tooltip/) * [Button](/components/button/) * [Calendar](/components/calendar/) * [DatePicker](/components/date-picker/) # ProgressBar > A thin, pill-shaped bar that communicates the progress of a task — a file upload, a multi-step form, a background job. Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { ProgressBar } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLDivElement>`. Source: [src/components/ProgressBar/ProgressBar.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/ProgressBar/ProgressBar.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) A thin, pill-shaped bar that communicates the progress of a task — a file upload, a multi-step form, a background job. ## When to use [Section titled “When to use”](#when-to-use) * Use **ProgressBar** when you can express progress as a fraction of a known total (determinate) — pass `value` (and `max` if it isn’t 100). * Use the **indeterminate** ProgressBar (omit `value`) when work is underway but its duration is unknown. * Reach for **Spinner** instead when the indicator must be compact (inline, inside a button) rather than a full-width bar. ## Rules [Section titled “Rules”](#rules) * **Always give it an accessible name.** A progressbar has no intrinsic label, so pass `aria-label` or `aria-labelledby`. Without one it is announced nameless — an axe failure. * `value` is clamped to `[0, max]`; you don’t have to pre-clamp. `max` defaults to `100`. * Determinate bars expose `aria-valuenow` and a human-readable `aria-valuetext` (e.g. `"42%"`). Indeterminate bars omit `aria-valuenow` and run an animated sweep. * The sweep respects `prefers-reduced-motion`: under reduced motion it becomes a calm opacity pulse rather than a traveling bar. * Track is `bgColor-muted`; the fill uses the variant’s emphasis token. Pick `variant` for meaning (`success` when complete, `danger` for an at-risk quota), not decoration. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) ✅ Determinate with a name and a real total: ```tsx <ProgressBar value={file.uploaded} max={file.size} aria-label="Upload progress" /> ``` ✅ Indeterminate while the duration is unknown: ```tsx <ProgressBar aria-label="Loading report" /> ``` ❌ No accessible name (announced nameless): ```tsx <ProgressBar value={42} /> ``` ❌ Faking indeterminate with `value={0}` — that’s a real, stalled 0%. Omit `value` instead. **See also:** `Spinner` and `Skeleton`; system guideline `data-display` (loading rules). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | --------- | ----------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `number` | — | Current progress, from 0 to `max`. Values are clamped into range. Omit (or pass `undefined`) for an INDETERMINATE bar that shows an animated sweep instead of a fixed fill. | | `max` | `number` | `100` | Upper bound of the scale. Defaults to 100. | | `size` | `'small' \| 'medium'`ProgressBarSize | `medium` | Track/fill height from the size scale. Defaults to 'medium'. | | `variant` | `'accent' \| 'success' \| 'danger'`ProgressBarVariant | `accent` | Fill color, mapped to the matching emphasis token. Defaults to 'accent'. | ## Related components * [Spinner](/components/spinner/) * [Skeleton](/components/skeleton/) * [Text](/components/text/) # RadioGroup > When to use: choosing exactly one option from a small, visible set. Always use Radio inside a RadioGroup — never a lone radio or a styled <div. Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { RadioGroup } from 'tenet-ui'; ``` Also accepts every prop of `Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'>`. Source: [src/components/Radio/Radio.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Radio/Radio.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** choosing exactly one option from a small, visible set. Always use `Radio` inside a `RadioGroup` — never a lone radio or a styled `<div>`. ## Rules [Section titled “Rules”](#rules) * `RadioGroup` renders a `<fieldset>`/`<legend>` and shares the `name` + selection with its `Radio` children — don’t set `name` on each radio by hand. * Give the group a `label`; give each `Radio` a `label` and a unique `value`. Add `caption` on the group or per radio for help text. * Control with `value` + `onChange(value)`, or leave uncontrolled with `defaultValue`. * The dot color comes from the accent token — **never** hardcode it. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ ```tsx <RadioGroup label="Visibility" defaultValue="public"> <Radio value="public" label="Public" /> <Radio value="private" label="Private" /> </RadioGroup> ``` * ❌ three `<input type="radio">` with a hand-set `name` and separate `<label>`s — reinvents the group, easy to get a11y wrong. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) ### `RadioGroup` | Prop | Type | Default | Description | | -------------- | ------------------------- | ------- | -------------------------------------------------- | | `name` | `string` | — | Shared form field name. Auto-generated if omitted. | | `label` \* | `ReactNode` | — | Group label (rendered as a fieldset legend). | | `caption` | `ReactNode` | — | Optional helper text for the whole group. | | `value` | `string` | — | Controlled selected value. | | `defaultValue` | `string` | — | Uncontrolled initial selected value. | | `onChange` | `(value: string) => void` | — | Called with the newly selected value. | | `required` | `boolean` | `false` | Mark the group required (asterisk on the legend). | | `disabled` | `boolean` | `false` | Disable every radio in the group. | | `children` | `ReactNode` | — | Radio children. | \* required ### `Radio` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------------------------------------------------------- | | `value` \* | `string` | — | The value submitted when this radio is selected (required). | | `label` | `ReactNode` | — | Visible label rendered next to the control. | | `caption` | `ReactNode` | — | Optional helper text under the label. | \* required ## Related components * [Checkbox](/components/checkbox/) * [Switch](/components/switch/) * [Select](/components/select/) * [FormControl](/components/form-control/) # SegmentedControl > When to use: switching between a few (2–5) mutually exclusive views or modes that take effect immediately — a List/Board/Timeline view toggle, a chart range. Fo Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { SegmentedControl } from 'tenet-ui'; ``` Also accepts every prop of `Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>`. Source: [src/components/SegmentedControl/SegmentedControl.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/SegmentedControl/SegmentedControl.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** switching between a few (2–5) mutually exclusive views or modes that take effect immediately — a List/Board/Timeline view toggle, a chart range. For many options or free text use `Select`; for on/off use `Switch`; for navigating peer content panes use `Tabs`. ## Rules [Section titled “Rules”](#rules) * Give it an `aria-label` — it’s an ARIA radiogroup and needs a group name. * Control with `value` + `onChange`, or uncontrolled with `defaultValue` (defaults to the first enabled segment). * Keep labels to one word where possible; the control is meant to be compact. * Keyboard is built in: arrows move and select (selection follows focus), Home/End jump, with a roving tab stop. Don’t rebuild it from styled buttons. * Use `fullWidth` to stretch segments across the container (`block` is the deprecated 0.3.0 name and warns). * Don’t exceed \~5 segments — past that, it gets cramped and a `Select` is clearer. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<SegmentedControl aria-label="View" options={[{value:'list',label:'List'},{value:'board',label:'Board'}]} defaultValue="list" />` * ❌ Using it for a long list of options, or for a binary on/off (use Switch). * ❌ Omitting `aria-label`. **See also:** `Tabs` for content panes, `Select` for long lists, `Switch` for on/off. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ----------------- | ----------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | `options` \* | `SegmentedControlOption[]` | — | The segments to choose from. | | `value` | `string` | — | Controlled selected value. | | `defaultValue` | `string` | `first enabled option` | Uncontrolled initial value. | | `onChange` | `(value: string) => void` | — | Called with the newly selected value. | | `size` | `'small' \| 'medium'`SegmentedControlSize | `medium` | Control height / font scale. | | `fullWidth` | `boolean` | — | Stretch segments to fill the available width. | | `block`deprecated | `boolean` | — | Stretch segments to fill the available width.**Deprecated since 0.4.0.** Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | `aria-label` | `string` | — | Accessible name for the group (required for screen readers). | | `className` | `string` | — | | \* requiredDeprecated props keep working for one minor release; the replacement is named in the row. ## Related types ### `SegmentedControlOption` | Member | Type | Default | Description | | ---------- | --------- | ------- | ------------------------- | | `value` \* | `string` | — | Value reported on change. | | `label` \* | `string` | — | Visible label. | | `disabled` | `boolean` | — | Disable this segment. | ## Related components * [Tabs](/components/tabs/) * [Select](/components/select/) * [Switch](/components/switch/) * [Button](/components/button/) # Select > When to use: choosing one option from a known list. Select is a fully accessible listbox combobox (keyboard, typeahead, aria-activedescendant) — not a native <s Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Select } from 'tenet-ui'; ``` Also accepts every prop of `Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue'>`. Source: [src/components/Select/Select.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Select/Select.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** choosing one option from a known list. `Select` is a fully accessible listbox combobox (keyboard, typeahead, `aria-activedescendant`) — not a native `<select>`. Use it inside a `FormControl`. ## Rules [Section titled “Rules”](#rules) * Give it an accessible name via `FormControl.Label` or `aria-label`. * Pass choices as the `options` array (`{ value, label, disabled? }`); use `placeholder` for the unselected state. * Control it with `value` + `onChange(value)`, or leave uncontrolled with `defaultValue`. For form submission, pass `name` (it emits a hidden input). * Use `size` / `fullWidth` from the scale (`block` is the deprecated 0.3.0 name and warns); use `invalid` for validation state. * **Never** build a div-based dropdown by hand — getting the ARIA listbox + keyboard right is exactly what this component does for you. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Select options={[{ value: 'public', label: 'Public' }]} placeholder="Choose…" />` * ✅ inside a form: `<FormControl><FormControl.Label>Visibility</FormControl.Label><Select options={…} /></FormControl>` * ❌ `<div className="dropdown" onClick={…}>` — not keyboard-accessible, no roles, no typeahead. **See also:** `Menu` for actions, `RadioGroup` or `SegmentedControl` for a few visible options; system guideline `forms`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ------------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `options` \* | `SelectOption[]` | — | The options to choose from. | | `value` | `string` | — | Controlled selected value. | | `defaultValue` | `string` | — | Uncontrolled initial value. | | `onChange` | `(value: string) => void` | — | Called with the newly selected value. | | `placeholder` | `string` | `Select…` | Text shown when nothing is selected. | | `size` | `'small' \| 'medium' \| 'large'`SelectSize | `medium` | Control height / font scale. | | `fullWidth` | `boolean` | — | Stretch to fill the available width. | | `block`deprecated | `boolean` | — | Stretch to fill the available width.**Deprecated since 0.4.0.** Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | `invalid` | `boolean` | `false` | Invalid state (danger border + aria-invalid). | | `disabled` | `boolean` | `false` | Disable the control. | | `required` | `boolean` | `false` | Required (sets aria-required; pairs with FormControl). | | `name` | `string` | — | Form field name — emits a hidden input so the value submits with a form. | | `id` | `string` | — | Id applied to the trigger (FormControl sets this automatically). | | `className` | `string` | — | | | `aria-label` | `string` | — | | | `aria-describedby` | `string` | — | | \* requiredDeprecated props keep working for one minor release; the replacement is named in the row. ## Related types ### `SelectOption` | Member | Type | Default | Description | | ---------- | --------- | ------- | ------------------------------------- | | `value` \* | `string` | — | Value submitted / reported on change. | | `label` \* | `string` | — | Visible option text. | | `disabled` | `boolean` | — | Disable this option. | ## Related components * [FormControl](/components/form-control/) * [Menu](/components/menu/) * [TextInput](/components/text-input/) * [SegmentedControl](/components/segmented-control/) * [RadioGroup](/components/radio-group/) * [DataTable](/components/data-table/) * [NumberInput](/components/number-input/) # Skeleton > When to use: as a placeholder for content whose shape you know while it loads (a card, an avatar + name, a few lines of copy). It reduces perceived wait and pre Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Skeleton } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLSpanElement>`. Source: [src/components/Skeleton/Skeleton.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Skeleton/Skeleton.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** as a placeholder for content whose *shape* you know while it loads (a card, an avatar + name, a few lines of copy). It reduces perceived wait and prevents layout shift versus a blank space. If you can’t predict the layout, or the wait is short/indeterminate with no structure to mimic, use a Spinner instead. If you can show real progress, use a progress bar. ## Rules [Section titled “Rules”](#rules) * **The skeleton is decorative.** It renders `aria-hidden="true"`, so screen readers skip it. Announce the wait on the **surrounding region**, e.g. `aria-busy="true"` on the container plus a visually-hidden status (or a `Spinner` with a `label`). Don’t rely on the skeleton blocks to convey “loading” to assistive tech. * **Match the shape and size of the real content** so swapping in the loaded UI doesn’t shift layout. Use `width`/`height` to size `rect`, and one `circle` for an avatar. * `width`/`height` are applied inline (number → px, string like `'60%'` → as-is). This is the one place inline `style` is correct — caller-driven dimensions aren’t a token concern. All color, radius, and spacing stay on tokens. * `circle` is always a full-radius square: pass `width` and it mirrors to height; the `radius` prop is ignored for it. * The shimmer honors `prefers-reduced-motion` — it drops to a gentle opacity pulse — so you don’t need to gate it yourself. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ Stack a few `text` lines of decreasing width to mimic a paragraph: ```tsx <div aria-busy="true"> <span className="sr-only">Loading article…</span> <Skeleton variant="text" /> <Skeleton variant="text" width="80%" /> <Skeleton variant="text" width="60%" /> </div> ``` * ✅ Avatar + name placeholder: `<Skeleton variant="circle" width={48} />` * ❌ Relying on the skeleton alone for the loading announcement — it’s `aria-hidden`, so this strands screen-reader users: ```tsx <Skeleton aria-label="Loading" /> {/* hidden from AT — the label never reaches anyone */} ``` **See also:** `Spinner` and `ProgressBar` for other waits, `EmptyState` once data loads empty; system guideline `data-display` (loading rules). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | --------- | -------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `variant` | `'text' \| 'rect' \| 'circle'`SkeletonVariant | `text` | Shape of the placeholder. `text` mimics a line of copy, `rect` a block, `circle` an avatar/icon. | | `width` | `string \| number` | — | Width applied inline (number → px, string → as-is, e.g. '60%'). | | `height` | `string \| number` | — | Height applied inline (number → px, string → as-is). For `circle` it mirrors width. | | `radius` | `'small' \| 'medium' \| 'large' \| 'full'`SkeletonRadius | — | Corner radius token. `circle` always renders as `full` regardless of this prop. | ## Related components * [Spinner](/components/spinner/) * [ProgressBar](/components/progress-bar/) * [Card](/components/card/) * [Avatar](/components/avatar/) # Spinner > When to use: an indeterminate wait where you can't show progress (loading a panel, submitting). If you know the proportion done, use a progress bar instead; for Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Spinner } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLSpanElement>`. Source: [src/components/Spinner/Spinner.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Spinner/Spinner.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** an indeterminate wait where you can’t show progress (loading a panel, submitting). If you know the proportion done, use a progress bar instead; for content placeholders, prefer a skeleton. ## Rules [Section titled “Rules”](#rules) * It renders `role="status"` with a visually-hidden `label` — keep the label meaningful (“Loading repositories”) so screen-reader users hear what’s pending. * It inherits `currentColor`, so place it inside text of the right color (e.g. inside a Button it picks up the button text color) rather than restyling it. * Don’t block the whole screen with a bare spinner for long waits — pair it with context or a skeleton. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Spinner label="Loading repositories" />` * ✅ inside a button: `<Button disabled><Spinner size="small" /> Saving…</Button>` * ❌ A spinning `<div>` with no role/label — invisible to assistive tech. **See also:** `Skeleton` and `ProgressBar`; system guideline `data-display` (loading rules). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ------- | ------------------------------------------- | --------- | --------------------------------------------------------------- | | `size` | `'small' \| 'medium' \| 'large'`SpinnerSize | `medium` | Size from the scale. | | `label` | `string` | `Loading` | Accessible label announced to assistive tech (visually hidden). | ## Related components * [Skeleton](/components/skeleton/) * [ProgressBar](/components/progress-bar/) * [Button](/components/button/) * [Toast](/components/toast/) # Stack > When to use: any time you place two or more elements next to or above each other with space between them. Stack is the design-system layout primitive — reach fo Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Stack } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLDivElement>`. Source: [src/components/Stack/Stack.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Stack/Stack.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** any time you place two or more elements next to or above each other with space between them. `Stack` is the design-system layout primitive — reach for it instead of writing `display: flex` with hardcoded gaps, and instead of reinventing a generic `Box`. ## Rules [Section titled “Rules”](#rules) * Use `direction` for the axis and `gap` for spacing — `gap` values map to the `space` scale (`condensed`=8, `normal`=16, `spacious`=24). **Never** set a pixel gap or margins between Stack children. * Use `Stack.Item grow` for the child that should absorb extra space (e.g. a search field in a toolbar) rather than `flex: 1` inline. * Use `align` / `justify` for alignment; don’t add wrapper `<div>`s just to center things. * `padding` (optional) also comes from the `space` scale. * `Stack` is one axis. For columns (tiles, side-by-side fields) use `Grid` with `columns` and `Grid.Item span`; it shares the same `gap` scale. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Stack direction="horizontal" gap="condensed" align="center">…</Stack>` * ✅ `<Stack.Item grow><TextInput … /></Stack.Item>` * ❌ `<div style={{ display: 'flex', gap: 12 }}>` — raw flex, hardcoded gap. * ❌ A bespoke `Box` component that re-implements spacing with a custom `sx` prop. **See also:** `Grid` for columns and responsive layouts; system guideline `layout` (gap scale, breakpoints, Card vs plain section). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) ### `Stack` | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------- | | `direction` | `'horizontal' \| 'vertical'`StackDirection | `vertical` | Main-axis direction. | | `gap` | `'none' \| 'condensed' \| 'normal' \| 'spacious'`StackGap | `normal` | Space between children, from the `space` scale (condensed=8, normal=16, spacious=24). | | `align` | `'start' \| 'center' \| 'end' \| 'stretch'`StackAlign | — | Cross-axis alignment (maps to `align-items`). | | `justify` | `'start' \| 'center' \| 'end' \| 'between'`StackJustify | — | Main-axis distribution (maps to `justify-content`). | | `wrap` | `boolean` | `false` | Allow children to wrap onto multiple lines. | | `padding` | `'none' \| 'condensed' \| 'normal' \| 'spacious'`StackPadding | — | Inner padding, from the `space` scale. | | `children` | `ReactNode` | — | | ### `Stack.Item` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------------------------------------------------- | | `grow` | `boolean` | `false` | Grow to fill the available space along the main axis. | | `children` | `ReactNode` | — | | ## Related components * [Grid](/components/grid/) * [Card](/components/card/) * [Divider](/components/divider/) * [Accordion](/components/accordion/) * [Heading](/components/heading/) # Switch > When to use: an immediate on/off setting that takes effect right away (e.g. "Enable notifications"). For a choice the user confirms later with a Save/Submit but Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Switch } from 'tenet-ui'; ``` Also accepts every prop of `Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>`. Source: [src/components/Switch/Switch.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Switch/Switch.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** an immediate on/off setting that takes effect right away (e.g. “Enable notifications”). For a choice the user confirms later with a Save/Submit button, prefer `Checkbox`. ## Rules [Section titled “Rules”](#rules) * Give it a label via the `label` prop (or an associated `aria-label`). A switch with no name is unusable on a screen reader. * It is a real `<input type="checkbox" role="switch">` — control it with `checked` + `onChange`, or leave it uncontrolled with `defaultChecked`. * Use `caption` for a one-line explanation; don’t pile a paragraph next to a toggle. * Use `size="small"` only in dense rows (e.g. a settings table). Default to `medium`. * **Never** build a toggle out of a `<div>` with an `onClick` — you lose the role, the checked state, and keyboard support. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Switch label="Enable notifications" defaultChecked />` * ✅ controlled: `<Switch label="Dark mode" checked={dark} onChange={e => setDark(e.target.checked)} />` * ❌ `<Switch>` with no label and no `aria-label`. * ❌ Using a Switch for a form value you submit on save — that’s a `Checkbox`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | --------- | ------------------------------- | -------- | -------------------------------------------------------------------- | | `label` | `ReactNode` | — | Visible label rendered next to the switch. | | `caption` | `ReactNode` | — | Optional helper text under the label. | | `size` | `'small' \| 'medium'`SwitchSize | `medium` | Control track / knob scale. | | `invalid` | `boolean` | `false` | Mark the field as invalid (sets `aria-invalid` and a danger border). | ## Related components * [Checkbox](/components/checkbox/) * [RadioGroup](/components/radio-group/) * [FormControl](/components/form-control/) * [SegmentedControl](/components/segmented-control/) # Table > When to use: to present rows of structured, comparable data (repos, users, runs). Use the Table family — real <table semantics — not a grid of styled <divs. Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Table } from 'tenet-ui'; ``` Also accepts every prop of `TableHTMLAttributes<HTMLTableElement>`. Source: [src/components/Table/Table.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Table/Table.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** to present rows of structured, comparable data (repos, users, runs). Use the `Table` family — real `<table>` semantics — not a grid of styled `<div>`s. ## Rules [Section titled “Rules”](#rules) * Compose `Table.Head` → `Table.Row` → `Table.Header` for the header, and `Table.Body` → `Table.Row` → `Table.Cell` for data. Header cells are real `<th scope="col">` for screen readers. * Wrap in `Table.Container` with `Table.Title` / `Table.Subtitle` when the table needs a heading or actions — don’t hand-build a bordered header. * Use `density` (`condensed` | `normal` | `spacious`) for row height; never set row padding inline. * Use `align="end"` on numeric columns (header **and** cells) so figures line up. * For sortable columns set `sortDirection` on the `Table.Header` (it renders the indicator and `aria-sort`) and handle `onClick`. * When the collection has zero records, render an `EmptyState` in place of the table; an empty filter result is one `Table.Cell` message inside the table. * **Never** hardcode borders, row striping, or padding — they come from `borderColor`, `bgColor`, and the `space` scale. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Table.Header align="end" sortDirection="descending">Stars</Table.Header>` * ❌ `<div className="row" style={{ display: 'flex', borderBottom: '1px solid #d0d7de' }}>` — not a table, hardcoded border, no semantics. **See also:** `DataTable` when users sort, search, or filter; `EmptyState`; system guideline `data-display`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) ### `Table` | Prop | Type | Default | Description | | ---------- | --------------------------------------------------- | -------- | -------------------------------- | | `density` | `'condensed' \| 'normal' \| 'spacious'`TableDensity | `normal` | Row height / cell padding scale. | | `children` | `ReactNode` | — | | ### `Table.Container` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `Table.Title` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `Table.Subtitle` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `Table.Actions` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `Table.Head` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `Table.Body` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `Table.Row` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------- | | `children` | `ReactNode` | — | | ### `Table.Header` | Prop | Type | Default | Description | | --------------- | ---------------------------------------------------- | ------- | ----------------------------------------------------------------------------------- | | `align` | `'start' \| 'center' \| 'end'`CellAlign | `start` | Text alignment within the header cell. | | `sortDirection` | `'ascending' \| 'descending' \| 'none'`SortDirection | — | When set, renders a sort indicator and exposes `aria-sort`. Combine with `onClick`. | | `children` | `ReactNode` | — | | ### `Table.Cell` | Prop | Type | Default | Description | | ---------- | --------------------------------------- | ------- | ------------------------------- | | `align` | `'start' \| 'center' \| 'end'`CellAlign | `start` | Text alignment within the cell. | | `children` | `ReactNode` | — | | ## Related components * [DataTable](/components/data-table/) * [EmptyState](/components/empty-state/) * [Pagination](/components/pagination/) * [Tag](/components/tag/) # Tabs > When to use: switching between peer views of the same context without navigating away (an entity's Overview / Issues / Settings). For navigation between pages u Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Tabs } from 'tenet-ui'; ``` Source: [src/components/Tabs/Tabs.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Tabs/Tabs.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** switching between peer views of the same context without navigating away (an entity’s Overview / Issues / Settings). For navigation between pages use links; for a small either/or use a SegmentedControl. ## Rules [Section titled “Rules”](#rules) * Compose `Tabs.List` (give it an `aria-label`) with `Tabs.Tab`s, and one `Tabs.Panel` per tab value. Tab `value` must match its Panel `value`. * Control it with `value` + `onChange`, or leave uncontrolled with `defaultValue`. * Keep tab labels short (one or two words). Don’t overflow a dozen tabs — that’s navigation, not tabs. * Keyboard and ARIA are handled: arrows move (selection follows focus), Home/End jump, roles + `aria-controls`/`aria-labelledby` are wired. **Don’t** rebuild this with buttons that toggle `display:none` divs. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Tabs defaultValue="overview"><Tabs.List aria-label="Sections">…</Tabs.List><Tabs.Panel value="overview">…</Tabs.Panel></Tabs>` * ❌ `<button onClick>` + conditionally rendered divs with no roles/keyboard. * ❌ Tabs as primary site navigation. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) ### `Tabs` | Prop | Type | Default | Description | | -------------- | ------------------------- | ------- | -------------------------------------- | | `value` | `string` | — | Controlled active tab value. | | `defaultValue` | `string` | — | Uncontrolled initial active tab value. | | `onChange` | `(value: string) => void` | — | Called when the active tab changes. | | `children` | `ReactNode` | — | | | `className` | `string` | — | | ### `Tabs.List` | Prop | Type | Default | Description | | ------------ | ----------- | ------- | -------------------------------- | | `aria-label` | `string` | — | Accessible name for the tablist. | | `children` | `ReactNode` | — | | ### `Tabs.Tab` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | --------------------------------------------------------- | | `value` \* | `string` | — | Value this tab selects — must match a `Tabs.Panel` value. | | `disabled` | `boolean` | `false` | Disable this tab. | | `children` | `ReactNode` | — | | \* required ### `Tabs.Panel` | Prop | Type | Default | Description | | ---------- | ----------- | ------- | ------------------------------ | | `value` \* | `string` | — | Value this panel is shown for. | | `children` | `ReactNode` | — | | \* required ## Related components * [SegmentedControl](/components/segmented-control/) * [Accordion](/components/accordion/) * [Breadcrumbs](/components/breadcrumbs/) # Tag > When to use: a short word attached to an item. Tag is the system's one pill and has two modes: Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Tag } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLSpanElement>`. Source: [src/components/Tag/Tag.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Tag/Tag.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** a short word attached to an item. `Tag` is the system’s one pill and has two modes: * **Read-only status or category** (no `onRemove`): `Published`, `In review`, `Draft`, `Culture`. Pick `variant` by meaning. * **Removable chip** (`onRemove` set): a user-applied token the user can dismiss — an active filter, a selected recipient, a keyword. **When to use a neighbour instead:** * For a **count** or presence dot (`3 unread`) use `Badge`. Badge is a number or a dot; Tag is a word. * For a **contextual message** with a sentence of text use `Banner`, not a long Tag. * If the chip’s whole body should toggle a choice, use `SegmentedControl` or `Checkbox`, not a Tag with a click handler on the span. * `Label` (0.3.0 and earlier) is **deprecated**: it was a second pill with the same variants. Replace `<Label variant="success">` with `<Tag variant="success">`. The name is now free of the `FormControl.Label` collision. ## Rules [Section titled “Rules”](#rules) * Choose `variant` by **meaning**, never by colour: `success` for positive/done, `danger` for problems or blocked, `attention` for pending/needs review, `accent` for the active or selected token, `muted` for quiet neutrals (drafts, archived), `default` otherwise. Do not compute your own fills or borders from a hex value — that is the anti-pattern this component removes. * Map data to a variant once, in one place: `const variant = statusVariant[article.status]`. * **Tag is stateless.** Setting `onRemove` renders a real `<button>`, but Tag never removes itself — your handler must drop the item from the collection you render from. * The remove control is a real `<button>` so it is keyboard operable (Tab, then Enter/Space) with a `:focus-visible` ring. Never replace it with a clickable `<span>`. * The remove button is named automatically: `Remove ${text}` when `children` is a string. If `children` is not a plain string (icon + element), pass `removeLabel`. * `leadingIcon` and the ✕ glyph are decorative (`aria-hidden`); meaning comes from the text and, for removal, the button label. Use an icon from `tenet-ui/icons` at size 16. * Tag text is **normal-case, readable words** (sentence case, one or two words). Do not uppercase it and do not put a sentence in it. * A read-only Tag must not carry `onClick`; if a status needs to be actionable, put the action in a `Menu` or `Button` next to it. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Tag variant="success">Published</Tag>` — read-only status word. * ✅ `<Tag variant="accent" onRemove={() => setFilters((f) => f.filter((x) => x !== id))}>{name}</Tag>` — removable filter chip; the parent drops the item. * ✅ `<Tag leadingIcon={<UserIcon />} removeLabel="Remove Ada Lovelace">Ada</Tag>` — named remove button when children are not a plain string. * ❌ `<Tag onRemove={() => {}}>Design</Tag>` — a no-op handler; the chip looks removable but nothing happens. * ❌ `<span className="pill" style={{ background: 'rgba(79,111,58,.15)', color: '#3c5630' }}>Published</span>` — hand-tuned colours; reinvents the component. * ❌ `<Label variant="success">Published</Label>` — deprecated; use `Tag`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `variant` | `'default' \| 'accent' \| 'success' \| 'danger' \| 'attention' \| 'muted'`TagVariant | `default` | Semantic color scheme. Pick by meaning, never by raw color: `accent` for an active/selected token, `success` / `danger` / `attention` for status words, `muted` for a quiet neutral, `default` otherwise. | | `size` | `'small' \| 'medium'`TagSize | `medium` | Tag size. | | `leadingIcon` | `ReactNode` | — | Optional leading icon rendered before the label; decorative (aria-hidden). | | `children` | `ReactNode` | — | The tag label content. | | `onRemove` | `() => void` | — | When provided, renders a real remove button. Wire it to drop the tag from your collection. Tag does not remove itself — it has no internal state. | | `removeLabel` | `string` | — | Accessible label for the remove button when `children` is not a plain string. Falls back to the string children, otherwise "Remove". | ## Related components * [Badge](/components/badge/) * [Label](/components/label/)deprecated * [Text](/components/text/) * [Avatar](/components/avatar/) * [DataTable](/components/data-table/) * [Table](/components/table/) # Text > When to use: any run of body copy — paragraphs, descriptions, helper and validation messages, captions, table cell text, inline emphasis. Text is the body half Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Text } from 'tenet-ui'; ``` Also accepts every prop of `HTMLAttributes<HTMLElement>`. Source: [src/components/Text/Text.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Text/Text.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** any run of body copy — paragraphs, descriptions, helper and validation messages, captions, table cell text, inline emphasis. `Text` is the body half of the typography system (`Heading` is the display half). Reach for it instead of a `<p>`/`<span>` with an inline `fontSize`/`color`. For a one-word status chip use `Tag`; for a form field’s label use `FormControl.Label` (it wires the `htmlFor` and required marker for you). ## Rules [Section titled “Rules”](#rules) * `size` maps to the body scale: `small`=12, `medium`=14 (default), `large`=16. Don’t go bigger — anything larger is a `Heading` (possibly with `as="p"`). * `tone` is semantic, not decorative: `muted` for secondary copy, `success`/`danger`/`attention` for state and validation messages, `accent` sparingly for emphasis that matches the clay accent. Never pick a tone for its color; never convey a status by color alone — pair it with words or an icon. * `as` sets the element: `p` for block copy, `span` inline, `strong`/`em` for inline emphasis (they keep their native semantics; `weight` still controls the visual), `label` for a caption that names a control — pass `htmlFor` so it is associated. * `truncate` clips to a single line with an ellipsis; use it only where the full text is available elsewhere (a tooltip, the row’s detail view). * `align` is logical (`start`/`end`), so it follows RTL. Centering is for empty states and cards, not for running paragraphs. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Text tone="muted" size="small">Last updated 3 minutes ago</Text>` * ✅ `<Text as="label" htmlFor="email" weight="medium">Email</Text>` (outside `FormControl`) * ✅ `<Text tone="danger">Enter a valid email address.</Text>` next to `aria-invalid` on the field. * ❌ `<p style={{ color: '#6e6049', fontSize: 13 }}>` — off-scale, off-token, untethered from dark mode. * ❌ `<Text tone="success">Draft</Text>` for a table status — a `Tag` gives it the tint + hairline treatment and reads as a status. **See also:** `Heading` for text that structures the page, `Tag` for status words, `FormControl.Caption` and `FormControl.Validation` for field text; system guidelines `typography` and `color` (which `tone` sits on which surface). ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ---------- | ---------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------- | | `as` | `'p' \| 'span' \| 'div' \| 'label' \| 'strong' \| 'em'`TextElement | `p` | Element to render. | | `size` | `'small' \| 'medium' \| 'large'`TextSize | `medium` | Size on the body type scale (small=12, medium=14, large=16). | | `tone` | `'default' \| 'muted' \| 'accent' \| 'success' \| 'danger' \| 'attention'`TextTone | `default` | Semantic color: `muted` for secondary copy, status tones for validation and state messages. | | `weight` | `'normal' \| 'medium' \| 'semibold'`TextWeight | `normal` | Font weight. | | `truncate` | `boolean` | `false` | Clip overflowing text to a single line with an ellipsis. | | `align` | `'start' \| 'center' \| 'end'`TextAlign | — | Horizontal text alignment (logical: `start`/`end` follow writing direction). | | `htmlFor` | `string` | — | Associates the text with a form control; only meaningful with `as="label"`. | | `children` | `ReactNode` | — | Text content. | ## Related components * [Heading](/components/heading/) * [EmptyState](/components/empty-state/) * [Label](/components/label/)deprecated * [Badge](/components/badge/) * [Link](/components/link/) * [ProgressBar](/components/progress-bar/) * [Tag](/components/tag/) * [Tooltip](/components/tooltip/) # TextInput > When to use: any single-line text entry — search, email, name, filter. Use TextInput instead of a raw <input so border, height, focus ring, and spacing stay on- Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { TextInput } from 'tenet-ui'; ``` Also accepts every prop of `Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>`. Source: [src/components/TextInput/TextInput.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/TextInput/TextInput.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** any single-line text entry — search, email, name, filter. Use `TextInput` instead of a raw `<input>` so border, height, focus ring, and spacing stay on-system. ## Rules [Section titled “Rules”](#rules) * Always give the field an accessible name: an associated `<label>` or an `aria-label`. A placeholder is **not** a label. * Use `leadingVisual` / `trailingVisual` for icons (e.g. a search glyph) rather than absolutely-positioning your own. * Use `size` from the scale (`small` | `medium` | `large`); use `fullWidth` to fill the container width instead of inline `width: 100%` (`block` is the deprecated 0.3.0 name and warns). * Use `invalid` to signal validation errors — it sets `aria-invalid` and the danger border. Don’t recolor the border by hand. * **Never** hardcode height, border, or colors — they come from `control.*`, `borderColor`, and `bgColor`/`fgColor` tokens. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<TextInput aria-label="Search all issues" leadingVisual={<SearchIcon />} fullWidth />` * ❌ `<input style={{ height: 32, border: '1px solid #d0d7de', padding: '0 12px' }} />` — raw element, hardcoded chrome, no accessible name. **See also:** `FormControl` for the label, caption, and validation wiring; `SearchIcon` and friends from `tenet-ui/icons` for `leadingVisual`; system guideline `forms`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ----------------- | --------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `'small' \| 'medium' \| 'large'`TextInputSize | `medium` | Control height / font scale. | | `fullWidth` | `boolean` | — | Stretch the field to fill the available width. | | `block`deprecated | `boolean` | — | Stretch the field to fill the available width.**Deprecated since 0.4.0.** Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | `leadingVisual` | `ReactNode` | — | Element rendered before the input (e.g. a search icon). | | `trailingVisual` | `ReactNode` | — | Element rendered after the input. | | `invalid` | `boolean` | `false` | Mark the field as invalid (sets `aria-invalid` and a danger border). | Deprecated props keep working for one minor release; the replacement is named in the row. ## Related components * [FormControl](/components/form-control/) * [Textarea](/components/textarea/) * [NumberInput](/components/number-input/) * [Select](/components/select/) * [Icon](/components/icon/) * [DatePicker](/components/date-picker/) # Textarea > When to use: multi-line free text (descriptions, comments). Use Textarea inside a FormControl, not a raw <textarea. Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Textarea } from 'tenet-ui'; ``` Also accepts every prop of `Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>`. Source: [src/components/Textarea/Textarea.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Textarea/Textarea.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** multi-line free text (descriptions, comments). Use `Textarea` inside a `FormControl`, not a raw `<textarea>`. ## Rules [Section titled “Rules”](#rules) * Give it an accessible name via `FormControl.Label` (or `aria-label`). A placeholder is not a label. * Use `fullWidth` to fill width (`block` is the deprecated 0.3.0 name and warns); use `rows` for initial height; let users resize vertically (`resize="vertical"`, the default). * Use `invalid` for validation state — don’t recolor the border by hand. * **Never** hardcode border, padding, or colors — they come from tokens. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<FormControl><FormControl.Label>Notes</FormControl.Label><Textarea fullWidth /></FormControl>` * ❌ `<textarea style={{ border: '1px solid #d0d7de', padding: 8 }} />` — raw element, hardcoded chrome. **See also:** `TextInput` for single-line entry; system guideline `forms`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ----------------- | -------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `fullWidth` | `boolean` | — | Stretch to fill the available width. | | `block`deprecated | `boolean` | — | Stretch to fill the available width.**Deprecated since 0.4.0.** Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | `invalid` | `boolean` | `false` | Mark the field invalid (sets aria-invalid and a danger border). | | `resize` | `'none' \| 'vertical' \| 'horizontal' \| 'both'`TextareaResize | `vertical` | Which directions the user may resize. | | `size` | `'small' \| 'medium' \| 'large'`TextareaSize | `medium` | Padding / font scale — matches TextInput so fields line up in a form. | Deprecated props keep working for one minor release; the replacement is named in the row. ## Related components * [TextInput](/components/text-input/) * [FormControl](/components/form-control/) # Toast > When to use: brief, transient, non-blocking feedback about something that just happened ("Saved", "Copied", "Upload failed"). For a message anchored to content Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Toast, useToast } from 'tenet-ui'; ``` Source: [src/components/Toast/Toast.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Toast/Toast.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** brief, transient, non-blocking feedback about something that just happened (“Saved”, “Copied”, “Upload failed”). For a message anchored to content use `Banner`; for something that must be acknowledged use `Dialog`. ## Setup [Section titled “Setup”](#setup) * Wrap your app once in `<ToastProvider>` (optionally set `duration` and `placement`). Call `const { toast } = useToast()` anywhere beneath it. ## Rules [Section titled “Rules”](#rules) * Keep it short — a `title` plus one line of `message`. Toasts are glanceable, not a place for forms or long text. * Pick `variant` by meaning; `danger` is announced assertively (`role="alert"`), the rest politely (`role="status"`). The viewport is a labelled live region. * Let them auto-dismiss (default 5s); only set `duration: 0` for a message the user must dismiss, and always keep the manual dismiss button. * Never put critical, must-act information **only** in a toast — it disappears. Mirror it in a `Banner` or inline error. * Don’t stack many at once; collapse repeats rather than flooding the corner. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `toast({ variant: 'success', title: 'Saved', message: 'Your changes are live.' })` * ✅ `<ToastProvider placement="bottom-right"><App /></ToastProvider>` * ❌ A toast as the only record of a validation error the user must fix. * ❌ Long, interactive content inside a toast — use a Dialog. **See also:** `Banner` for persistent or anchored messages, `Dialog` for decisions, `FormControl.Validation` for field errors; system guideline `feedback` has the decision table. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) ### `Toast` | Prop | Type | Default | Description | | ----------- | -------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------- | | `duration` | `number` | `5000` | Default auto-dismiss duration (ms) when an individual toast doesn't set one. | | `placement` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `bottom-right` | Viewport corner. | | `children` | `ReactNode` | — | | ### `ToastProvider` | Prop | Type | Default | Description | | ----------- | -------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------- | | `duration` | `number` | `5000` | Default auto-dismiss duration (ms) when an individual toast doesn't set one. | | `placement` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `bottom-right` | Viewport corner. | | `children` | `ReactNode` | — | | ### `useToast` hook | Prop | Type | Default | Description | | ------------ | ----------------------------------- | ------- | ----------------------------- | | `toast` \* | `(options: ToastOptions) => string` | — | Show a toast; returns its id. | | `dismiss` \* | `(id: string) => void` | — | Dismiss a toast by id. | \* required ## Related types ### `ToastOptions` | Member | Type | Default | Description | | ------------ | ---------------------------------------------- | ------- | ---------------------------------------------------- | | `variant` | `'info' \| 'success' \| 'warning' \| 'danger'` | — | Semantic tone. | | `title` | `ReactNode` | — | Optional bold lead-in line. | | `message` \* | `ReactNode` | — | Main message. | | `duration` | `number` | — | Auto-dismiss after N ms. 0 keeps it until dismissed. | ### `ToastEntry` | Member | Type | Default | Description | | ------------ | ---------------------------------------------- | ------- | ---------------------------------------------------- | | `variant` | `'info' \| 'success' \| 'warning' \| 'danger'` | — | Semantic tone. | | `title` | `ReactNode` | — | Optional bold lead-in line. | | `message` \* | `ReactNode` | — | Main message. | | `duration` | `number` | — | Auto-dismiss after N ms. 0 keeps it until dismissed. | | `id` \* | `string` | — | | ## Related components * [Banner](/components/banner/) * [Dialog](/components/dialog/) * [Spinner](/components/spinner/) # Tooltip > When to use: a brief text hint that supplements an already-labelled control (clarifying an icon button, explaining what an action does). Never the only place cr Status: stableAccessibility reviewedtenet-ui\@0.4.0 Import ```tsx import { Tooltip } from 'tenet-ui'; ``` Source: [src/components/Tooltip/Tooltip.tsx](https://github.com/apurvkhare/tenet-ui/blob/main/src/components/Tooltip/Tooltip.tsx) ## Usage guidelines [Section titled “Usage guidelines”](#usage-guidelines) **When to use:** a brief text hint that supplements an already-labelled control (clarifying an icon button, explaining what an action does). Never the *only* place critical information lives. ## Rules [Section titled “Rules”](#rules) * The trigger must be a single **focusable** element (a button, link, or input) — the tooltip shows on hover **and** on keyboard focus, and Escape dismisses it. Don’t wrap a bare `<div>`/`<span>` that can’t receive focus. * Keep `content` short — a phrase, not a paragraph. For rich, interactive content use a popover/dialog. * The trigger is wired to the bubble via `aria-describedby`, so screen readers announce it. Don’t duplicate the same text as a visible label and a tooltip. * The bubble color comes from the inverse surface tokens, so it stays high-contrast in light and dark — don’t recolor it. ## Do / Don’t [Section titled “Do / Don’t”](#do--dont) * ✅ `<Tooltip content="Saves immediately"><Button>Publish</Button></Tooltip>` * ✅ icon button: `<Tooltip content="Delete row"><IconButton icon={<TrashIcon />} aria-label="Delete row" /></Tooltip>` * ❌ `<Tooltip content="…"><span>text</span></Tooltip>` — not focusable, keyboard users can’t reach it. * ❌ Hiding must-have instructions behind hover only. **See also:** `Popover` for rich content, `IconButton` (the usual trigger); system guideline `iconography`. ## Examples [Section titled “Examples”](#examples) ## Props [Section titled “Props”](#props) | Prop | Type | Default | Description | | ------------- | -------------------------------------------------------- | ------- | ------------------------------------------------------------------ | | `content` \* | `ReactNode` | — | Tooltip text/content. | | `placement` | `'top' \| 'bottom' \| 'left' \| 'right'`TooltipPlacement | `top` | Side of the trigger to render on. | | `children` \* | `ReactElement` | — | The single trigger element (must be focusable for keyboard users). | | `className` | `string` | — | | \* required ## Related components * [Popover](/components/popover/) * [IconButton](/components/icon-button/) * [Text](/components/text/) * [Avatar](/components/avatar/) # Icons > The tenet-ui icon set: searchable by name, keyword and category, with the import for each glyph. Icons are React components exported from `tenet-ui/icons` (sourced from lucide-static\@1.45.0). 80 icons in 8 categories; sizes: 16, 20, 24. Pass icons to `Button`’s `leadingIcon`/`trailingIcon` or `IconButton`’s `icon` prop; decorative icons are `aria-hidden` by default, so name the control, not the glyph. ```tsx import { AlertCircleIcon } from 'tenet-ui/icons'; <IconButton icon={<AlertCircleIcon />} aria-label="Search" /> ``` # Tokens > Every design token in tenet-ui: CSS variable, light and dark values, and where it is safe to use. Tokens are CSS custom properties shipped in `tenet-ui/styles.css`. Theme-agnostic tokens live on `:root`; themed tokens (`fgColor`, `bgColor`, `borderColor`) switch on `[data-color-mode="light" | "dark"]`. Components reference **semantic** tokens only — the `base` palette at the bottom exists to be aliased, not used. 104 tokens · 15 groups · `tenet-ui@0.4.0` ## fontFamily [Section titled “fontFamily”](#fontfamily) Type faces. The serif display face is the editorial signature; body and mono cover everything else. | Token | CSS variable | Value | Description | | -------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | `fontFamily-display` | `var(--fontFamily-display)` | Aa`'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif` | Serif display face for headings — the editorial signature. | | `fontFamily-body` | `var(--fontFamily-body)` | Aa`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` | Humanist sans for body and controls. | | `fontFamily-mono` | `var(--fontFamily-mono)` | Aa`ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace` | Monospace for counts / code. | ## space [Section titled “space”](#space) The spacing scale. Every gap, padding and margin in the system is one of these steps. | Token | CSS variable | Value | Description | | --------- | ---------------- | ------ | ----------- | | `space-1` | `var(--space-1)` | `4px` | 4px | | `space-2` | `var(--space-2)` | `8px` | 8px | | `space-3` | `var(--space-3)` | `12px` | 12px | | `space-4` | `var(--space-4)` | `16px` | 16px | | `space-5` | `var(--space-5)` | `24px` | 24px | | `space-6` | `var(--space-6)` | `32px` | 32px | ## borderWidth [Section titled “borderWidth”](#borderwidth) Border widths. | Token | CSS variable | Value | Description | | ------------------- | -------------------------- | ----- | ------------------------ | | `borderWidth-thin` | `var(--borderWidth-thin)` | `1px` | Default hairline border. | | `borderWidth-thick` | `var(--borderWidth-thick)` | `2px` | Emphasized border. | ## borderRadius [Section titled “borderRadius”](#borderradius) Corner radii. | Token | CSS variable | Value | Description | | --------------------- | ---------------------------- | -------- | ---------------------- | | `borderRadius-small` | `var(--borderRadius-small)` | `3px` | Crisp — tags, options. | | `borderRadius-medium` | `var(--borderRadius-medium)` | `5px` | Controls, cards. | | `borderRadius-large` | `var(--borderRadius-large)` | `9px` | Surfaces, popovers. | | `borderRadius-full` | `var(--borderRadius-full)` | `9999px` | — | ## fontSize [Section titled “fontSize”](#fontsize) The type scale. | Token | CSS variable | Value | Description | | ------------ | ------------------- | ------ | --------------------------------------------- | | `fontSize-0` | `var(--fontSize-0)` | `12px` | — | | `fontSize-1` | `var(--fontSize-1)` | `14px` | — | | `fontSize-2` | `var(--fontSize-2)` | `16px` | — | | `fontSize-3` | `var(--fontSize-3)` | `20px` | — | | `fontSize-4` | `var(--fontSize-4)` | `28px` | — | | `fontSize-5` | `var(--fontSize-5)` | `36px` | Display size — page titles (Heading level 1). | ## lineHeight [Section titled “lineHeight”](#lineheight) Line heights. | Token | CSS variable | Value | Description | | -------------------- | --------------------------- | ----- | ---------------------------------- | | `lineHeight-tight` | `var(--lineHeight-tight)` | `1.2` | Headings and single-line controls. | | `lineHeight-default` | `var(--lineHeight-default)` | `1.5` | Body copy. | ## fontWeight [Section titled “fontWeight”](#fontweight) Font weights. | Token | CSS variable | Value | Description | | --------------------- | ---------------------------- | ----- | ----------- | | `fontWeight-normal` | `var(--fontWeight-normal)` | `400` | — | | `fontWeight-medium` | `var(--fontWeight-medium)` | `500` | — | | `fontWeight-semibold` | `var(--fontWeight-semibold)` | `600` | — | | `fontWeight-bold` | `var(--fontWeight-bold)` | `700` | — | ## letterSpacing [Section titled “letterSpacing”](#letterspacing) Letter spacing (tracking). | Token | CSS variable | Value | Description | | ------------------- | -------------------------- | -------- | ------------------------------------------- | | `letterSpacing-tag` | `var(--letterSpacing-tag)` | `0.04em` | Slight tracking for the uppercase tag look. | ## control [Section titled “control”](#control) Control heights for small / medium / large interactive elements. | Token | CSS variable | Value | Description | | --------------------- | ---------------------------- | ------ | ---------------------- | | `control-small-size` | `var(--control-small-size)` | `28px` | Small control height. | | `control-medium-size` | `var(--control-medium-size)` | `32px` | Medium control height. | | `control-large-size` | `var(--control-large-size)` | `40px` | Large control height. | ## shadow [Section titled “shadow”](#shadow) Elevation shadows. | Token | CSS variable | Value | Description | | ---------------- | ----------------------- | --------------------------------------- | ------------------------------------------ | | `shadow-resting` | `var(--shadow-resting)` | `0 1px 2px rgba(31, 27, 22, 0.06)` | Resting elevation (warm). | | `shadow-medium` | `var(--shadow-medium)` | `0 6px 16px rgba(31, 27, 22, 0.12)` | Raised elevation (cards, menus, popovers). | | `shadow-focus` | `var(--shadow-focus)` | `0 0 0 3px var(--bgColor-accent-muted)` | Focus ring halo for fields. | ## breakpoint [Section titled “breakpoint”](#breakpoint) Layout breakpoints. `@media` cannot read `var()`, so components hardcode the same values with a comment. | Token | CSS variable | Value | Description | | --------------- | ---------------------- | -------- | --------------------------------------------------------------------------------------------------------------------- | | `breakpoint-sm` | `var(--breakpoint-sm)` | `640px` | Small: phones landscape / narrow tablets. CSS @media cannot read var(); Grid hardcodes the same value with a comment. | | `breakpoint-md` | `var(--breakpoint-md)` | `960px` | Medium: tablets / narrow laptops. | | `breakpoint-lg` | `var(--breakpoint-lg)` | `1280px` | Large: desktop. | ## fgColor [Section titled “fgColor”](#fgcolor) Foreground (text and icon) colors, themed. The AA column lists the `bgColor` tokens each is rated on. | Token | CSS variable | Light | Dark | AA on (light / dark) | Description | | --------------------- | ---------------------------- | --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | `fgColor-default` | `var(--fgColor-default)` | `#2a241b` | `#f4eee3` | light: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-emphasis``bgColor-attention-muted` (large text only: `bgColor-accent-emphasis`)dark: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-emphasis``bgColor-success-muted``bgColor-danger-emphasis``bgColor-danger-muted``bgColor-attention-muted` (large text only: `bgColor-accent-emphasis`) | Primary text color. | | `fgColor-muted` | `var(--fgColor-muted)` | `#6e6049` | `#a1927a` | light: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted`dark: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted` | Secondary text (AA on paper / muted). | | `fgColor-onEmphasis` | `var(--fgColor-onEmphasis)` | `#ffffff` | `#ffffff` | light: `bgColor-emphasis``bgColor-accent-emphasis``bgColor-success-emphasis``bgColor-danger-emphasis` (large text only: `bgColor-attention-emphasis`)dark: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-emphasis``bgColor-accent-muted``bgColor-success-emphasis``bgColor-success-muted``bgColor-danger-emphasis``bgColor-danger-muted``bgColor-attention-muted` (large text only: `bgColor-attention-emphasis`) | Text on a solid emphasis background. | | `fgColor-accent` | `var(--fgColor-accent)` | `#a23e1f` | `#e9a487` | light: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted`dark: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted` (large text only: `bgColor-danger-emphasis`) | Accent / link text color. | | `fgColor-danger` | `var(--fgColor-danger)` | `#8a2817` | `#e7a99b` | light: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted`dark: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted` (large text only: `bgColor-danger-emphasis`) | Danger text color. | | `fgColor-success` | `var(--fgColor-success)` | `#3c5630` | `#9cb87a` | light: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted`dark: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted` (large text only: `bgColor-danger-emphasis`) | Success text color. | | `fgColor-attention` | `var(--fgColor-attention)` | `#80600f` | `#dcc06a` | light: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted`dark: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-muted` (large text only: `bgColor-success-emphasis``bgColor-danger-emphasis`) | Attention / warning text color. | | `fgColor-onAttention` | `var(--fgColor-onAttention)` | `#2a241b` | `#2a241b` | light: `bgColor-default``bgColor-muted``bgColor-inset``bgColor-accent-muted``bgColor-success-muted``bgColor-danger-muted``bgColor-attention-emphasis``bgColor-attention-muted` (large text only: `bgColor-accent-emphasis`)dark: `bgColor-emphasis``bgColor-attention-emphasis` (large text only: `bgColor-accent-emphasis`) | Dark text on a solid attention (ochre) background — same ink in both themes. | ## bgColor [Section titled “bgColor”](#bgcolor) Background colors, themed. | Token | CSS variable | Light | Dark | Description | | ---------------------------- | ----------------------------------- | ----------------------- | -------------------- | ----------------------------------------- | | `bgColor-default` | `var(--bgColor-default)` | `#ffffff` | `#1a1712` | Default surface background. | | `bgColor-muted` | `var(--bgColor-muted)` | `#f4eee3` | `#211d17` | Muted surface background. | | `bgColor-inset` | `var(--bgColor-inset)` | `#fbf7f0` | `#14110d` | Page / inset background (warm paper). | | `bgColor-backdrop` | `var(--bgColor-backdrop)` | `rgba(20, 17, 13, 0.5)` | `rgba(0, 0, 0, 0.6)` | Modal scrim behind dialogs. | | `bgColor-emphasis` | `var(--bgColor-emphasis)` | `#2a241b` | `#f4eee3` | High-contrast background (ink). | | `bgColor-accent-emphasis` | `var(--bgColor-accent-emphasis)` | `#c2502e` | `#c2502e` | Solid accent background (primary action). | | `bgColor-accent-muted` | `var(--bgColor-accent-muted)` | `#f5e4db` | `#3a2117` | Soft accent tint (tags, focus halo). | | `bgColor-success-emphasis` | `var(--bgColor-success-emphasis)` | `#4f6f3a` | `#4f6f3a` | Solid success background. | | `bgColor-success-muted` | `var(--bgColor-success-muted)` | `#e7eedd` | `#24301a` | Soft success tint. | | `bgColor-danger-emphasis` | `var(--bgColor-danger-emphasis)` | `#a8341f` | `#a8341f` | Solid danger background. | | `bgColor-danger-muted` | `var(--bgColor-danger-muted)` | `#f8e3dc` | `#3a1e18` | Soft danger tint. | | `bgColor-attention-emphasis` | `var(--bgColor-attention-emphasis)` | `#b5851f` | `#b5851f` | Solid attention background. | | `bgColor-attention-muted` | `var(--bgColor-attention-muted)` | `#f6ecd2` | `#332813` | Soft attention tint. | ## borderColor [Section titled “borderColor”](#bordercolor) Border colors, themed. | Token | CSS variable | Light | Dark | Description | | ----------------------------- | ------------------------------------ | --------- | --------- | -------------------------- | | `borderColor-default` | `var(--borderColor-default)` | `#ddd2bf` | `#3d3528` | Default border color. | | `borderColor-muted` | `var(--borderColor-muted)` | `#ebe3d5` | `#2a241b` | Muted / subtle border. | | `borderColor-accent-emphasis` | `var(--borderColor-accent-emphasis)` | `#c2502e` | `#d9744e` | Accent border color. | | `borderColor-accent-muted` | `var(--borderColor-accent-muted)` | `#ecc9b8` | `#5a3320` | Soft accent tag border. | | `borderColor-success-muted` | `var(--borderColor-success-muted)` | `#cfe0bc` | `#33492a` | Soft success tag border. | | `borderColor-danger-muted` | `var(--borderColor-danger-muted)` | `#efc9be` | `#5a2c22` | Soft danger tag border. | | `borderColor-attention-muted` | `var(--borderColor-attention-muted)` | `#ead9a8` | `#4d3c1c` | Soft attention tag border. | ## base [Section titled “base”](#base) Primitive palette and size values. Components never use these directly — they reference the semantic tokens above. | Token | CSS variable | Value | Description | | ------------------------- | -------------------------------- | --------- | --------------------------------------- | | `base-color-white` | `var(--base-color-white)` | `#ffffff` | — | | `base-color-black` | `var(--base-color-black)` | `#14110d` | — | | `base-color-neutral-50` | `var(--base-color-neutral-50)` | `#fbf7f0` | Warm paper. | | `base-color-neutral-100` | `var(--base-color-neutral-100)` | `#f4eee3` | — | | `base-color-neutral-200` | `var(--base-color-neutral-200)` | `#ebe3d5` | — | | `base-color-neutral-300` | `var(--base-color-neutral-300)` | `#ddd2bf` | — | | `base-color-neutral-400` | `var(--base-color-neutral-400)` | `#c7b9a1` | — | | `base-color-neutral-500` | `var(--base-color-neutral-500)` | `#a1927a` | — | | `base-color-neutral-600` | `var(--base-color-neutral-600)` | `#807156` | — | | `base-color-neutral-650` | `var(--base-color-neutral-650)` | `#6e6049` | Muted text — AA on paper/white/muted. | | `base-color-neutral-700` | `var(--base-color-neutral-700)` | `#574b39` | — | | `base-color-neutral-800` | `var(--base-color-neutral-800)` | `#3d3528` | — | | `base-color-neutral-900` | `var(--base-color-neutral-900)` | `#2a241b` | Primary ink. | | `base-color-neutral-950` | `var(--base-color-neutral-950)` | `#211d17` | — | | `base-color-neutral-1000` | `var(--base-color-neutral-1000)` | `#14110d` | — | | `base-color-clay-300` | `var(--base-color-clay-300)` | `#e9a487` | — | | `base-color-clay-400` | `var(--base-color-clay-400)` | `#d9744e` | — | | `base-color-clay-500` | `var(--base-color-clay-500)` | `#c2502e` | Primary accent (terracotta). | | `base-color-clay-600` | `var(--base-color-clay-600)` | `#a23e1f` | Accent text — AA on light. | | `base-color-olive-300` | `var(--base-color-olive-300)` | `#9cb87a` | — | | `base-color-olive-400` | `var(--base-color-olive-400)` | `#6e8c4f` | — | | `base-color-olive-500` | `var(--base-color-olive-500)` | `#4f6f3a` | Success solid. | | `base-color-olive-600` | `var(--base-color-olive-600)` | `#3c5630` | Success text — AA on light. | | `base-color-brick-300` | `var(--base-color-brick-300)` | `#e7a99b` | — | | `base-color-brick-400` | `var(--base-color-brick-400)` | `#d07a66` | — | | `base-color-brick-500` | `var(--base-color-brick-500)` | `#a8341f` | Danger solid. | | `base-color-brick-600` | `var(--base-color-brick-600)` | `#8a2817` | Danger text — AA on light. | | `base-color-ochre-300` | `var(--base-color-ochre-300)` | `#dcc06a` | — | | `base-color-ochre-400` | `var(--base-color-ochre-400)` | `#c49a3d` | — | | `base-color-ochre-500` | `var(--base-color-ochre-500)` | `#b5851f` | Attention solid. | | `base-color-ochre-600` | `var(--base-color-ochre-600)` | `#80600f` | Attention text — AA on light + on tint. | | `base-size-4` | `var(--base-size-4)` | `4px` | — | | `base-size-8` | `var(--base-size-8)` | `8px` | — | | `base-size-12` | `var(--base-size-12)` | `12px` | — | | `base-size-16` | `var(--base-size-16)` | `16px` | — | | `base-size-24` | `var(--base-size-24)` | `24px` | — | | `base-size-28` | `var(--base-size-28)` | `28px` | — | | `base-size-32` | `var(--base-size-32)` | `32px` | — | | `base-size-40` | `var(--base-size-40)` | `40px` | — | # Changelog > Release notes for tenet-ui and the deprecation registry (what was renamed or removed, and what replaces it). ## Deprecations [Section titled “Deprecations”](#deprecations) 8 entries in the registry (`generated/deprecations.json`), generated from `@deprecated` JSDoc tags. Deprecated APIs keep working for one minor release. | Kind | Component | Prop | Replacement | Since | Message | | --------- | -------------------------------------------------- | ------- | ----------- | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | prop | [Button](/components/button/) | `block` | `fullWidth` | 0.4.0 | Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | prop | [DatePicker](/components/date-picker/) | `block` | `fullWidth` | 0.4.0 | Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | component | [Label](/components/label/) | — | `Tag` | 0.4.0 | Use `Tag` instead (since 0.4.0). `Tag` now carries the same status variants (`success` / `danger` / `attention` / `muted` / `accent`) and is read-only when `onRemove` is absent, so one pill component covers both status words and removable chips — and the name no longer collides with `FormControl.Label`. `Label` keeps rendering until 0.5.0. | | prop | [NumberInput](/components/number-input/) | `block` | `fullWidth` | 0.4.0 | Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | prop | [SegmentedControl](/components/segmented-control/) | `block` | `fullWidth` | 0.4.0 | Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | prop | [Select](/components/select/) | `block` | `fullWidth` | 0.4.0 | Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | prop | [TextInput](/components/text-input/) | `block` | `fullWidth` | 0.4.0 | Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | | prop | [Textarea](/components/textarea/) | `block` | `fullWidth` | 0.4.0 | Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.5.0. | All notable changes to **tenet-ui** are documented here. This project follows [Semantic Versioning](https://semver.org/). Pre-1.0, breaking changes may land in a **minor** release. ## 0.4.0 — 2026-09-12 [Section titled “0.4.0 — 2026-09-12”](#040--2026-09-12) tenet-ui now lives in its own repository ([apurvkhare/tenet-ui](https://github.com/apurvkhare/tenet-ui)) with a docs site, a Storybook, an icon set, an ESLint plugin, and a type-derived catalog. This release also carries the first **deliberate deprecations**, so consumers (and tooling) can exercise a migration path. ### Added [Section titled “Added”](#added) * **Heading** — levels 1–4 mapped to the type scale (`--fontSize-5/4/3/2`), `as` to decouple the element from the size, `truncate`. * **Text** — body copy with `size`, `tone`, `weight`, `as`, `truncate`, `align`. * **Grid** — CSS-grid layout primitive next to `Stack`: `columns` (number or `{ base, sm, md, lg }`), `gap`/`rowGap` from the space scale, `Grid.Item span`. * **Icon** and the **icon set** (`tenet-ui/icons`) — a curated subset of Lucide (ISC) re-packaged as React components: `size` 16 | 20 | 24, decorative by default, `label` makes an icon meaningful (`role="img"`). The manifest ships as `generated/icons.json` for tooling (icon search, docs gallery). * **EmptyState** — title, description, decorative icon, primary and secondary actions; composes Heading, Text and Stack. * **Tag** gains the status variants `success`, `danger`, `attention`, `muted` and is the read-only status pill when `onRemove` is absent (see Deprecated). * **Tokens:** `fontSize.5` (36px display), `lineHeight.tight` / `.default`, `breakpoint.sm` / `.md` / `.lg`. Every `fgColor.*` token now carries machine-readable contrast pairs in `$extensions.tenet.contrast` (`aa` and `aaLarge` lists of `bgColor.*` tokens), copied to `dist/tokens.json` as `contrast` and **verified at build time** (a pair that stops meeting its rating fails the build). * **Catalog:** `generated/components.json` (schema 2) is now derived from the TypeScript types (props, defaults, JSDoc `@default` / `@deprecated`, story ids), plus a small hand-kept `<Name>.meta.json` per component (`status`, `a11yReviewed`, subcomponent → interface mapping, `related`). New `generated/deprecations.json` (the migration registry) and `generated/guidelines/` (per-component and system guidelines, shipped in the tarball). * **System guidelines** in `guidelines/system/`: color, typography, layout, forms, feedback, data display, iconography, accessibility, content. * **Storybook** (React + Vite) with a light/dark toolbar, play functions on the interactive components, `scripts/check-a11y.mjs` (axe over every story in both themes), `scripts/build-baselines.mjs` (per-story screenshots at 1280, both themes, with a manifest) and `scripts/check-story-ids.mjs`. * **Docs site** (`docs/`, Astro Starlight) generated from the repo: getting started, tokens, components with live examples, icons, foundations, changelog; emits `llms.txt`, `llms-full.txt`, `llms-small.txt`. * **eslint-plugin-tenet-ui** (`packages/eslint-plugin`): `no-raw-color`, `no-raw-spacing`, `no-unknown-token`, `prefer-component`, `require-styles-import`, `no-deprecated-api`. * `package.json` gains `repository`, `homepage`, `bugs`, and the exports `./icons`, `./generated/icons.json`, `./generated/deprecations.json`. ### Deprecated (still working; removed in 0.5.0) [Section titled “Deprecated (still working; removed in 0.5.0)”](#deprecated-still-working-removed-in-050) * The `block` prop is renamed **`fullWidth`** on `Button`, `TextInput`, `Textarea`, `NumberInput`, `Select`, `SegmentedControl` and `DatePicker`. `block` keeps working with a one-time dev warning; `fullWidth` wins when both are passed. Codemod: `sed -i '' 's/\bblock\b/fullWidth/'` on JSX props, or `eslint --fix` with the `tenet-ui/no-deprecated-api` rule. * **`Label` → `Tag`.** `Tag` now covers the read-only status pill, so one component owns both status words and removable chips, and the name no longer collides with `FormControl.Label`. `<Label variant="x">` becomes `<Tag variant="x">` (same variant names). `Label` renders unchanged with a dev warning. ### Changed [Section titled “Changed”](#changed) * Component folders follow one convention: `<Name>.tsx`, `.types.ts`, `.css`, `.stories.tsx`, `.guidelines.md` (moved from `guidelines/<name>.md`, with frontmatter) and `.meta.json` (replaces `.docs.json`). * The runtime contract is one stylesheet: `import 'tenet-ui/styles.css'` (`src/index.ts` used to say `tokens.css`). * Stories import from `@storybook/react-vite`. ## 0.3.0 — 2026-06-23 [Section titled “0.3.0 — 2026-06-23”](#030--2026-06-23) Hardening pass from a systematic audit (accessibility, CSS/layout, and API reviews across all components, plus a runtime sweep at multiple viewports and in both themes). ### Changed (potentially breaking) [Section titled “Changed (potentially breaking)”](#changed-potentially-breaking) * **Table** now renders its `<table>` inside a `<div class="Tenet-Table__scroll">` scroll viewport so wide tables scroll horizontally instead of being clipped. Update any CSS that assumed `<table>` was a direct child of `.Tenet-Table__container`. * **Overlays** (`Menu`, `Select`, `Popover`, `DatePicker`, `Tooltip`) now render their floating layer in a portal to `document.body`, positioned to the viewport (so they can’t be clipped by an `overflow:hidden` ancestor or run off-screen). Overlay `z-index` is now `150` (above `Dialog`’s `100`, below `Toast`’s `200`). Theming assumes `data-color-mode` is on `<html>`/`<body>`. ### Added [Section titled “Added”](#added-1) * `Textarea` gains a `size` scale (`small | medium | large`) to match the other fields. * `Select` and `SegmentedControl` now extend their host element’s HTML attributes and forward `...rest` (so `data-*`, `style`, `onBlur`, etc. pass through). * New semantic token `--bgColor-backdrop` (modal scrim), themed. * `ToastEntry` type is now exported. ### Fixed [Section titled “Fixed”](#fixed) * **Accessibility:** `aria-describedby` is merged (not overwritten) in `Radio`, `RadioGroup`, and `Tooltip`; `Menu`/`Popover` compose the caller’s `onClick`/`onKeyDown`/`ref` on the trigger instead of clobbering them. * **Dialog** no longer hides notification layers (`Toast`) from screen readers while open (layers marked `data-tenet-layer` are skipped in its `aria-hidden` sweep). * **Layout:** long labels in `Menu`/`Select` and long `Accordion` titles now ellipsize/wrap instead of spilling; `Pagination` wraps at narrow widths; a global `box-sizing: border-box` reset (scoped to tenet-ui elements) prevents `width:100%`+padding overflow (e.g. fields inside a `Dialog`). * **Tokens:** `Dialog` backdrop and `Switch` focus ring now use tokens instead of hardcoded values. * `docs.json` catalog drift fixed (`Checkbox` `invalid`/`indeterminate`, `Select` `className`, `Textarea` `size`). ## 0.2.0 — 2026-06-21 [Section titled “0.2.0 — 2026-06-21”](#020--2026-06-21) * “Editorial Ink” visual identity (token-layer rebrand) across light and dark. * Expanded to 36 components. * Dual-package correctness: per-condition `types` in `exports` (ESM `.d.ts` / CJS `.d.cts`), `engines.node >= 18`. publint + @arethetypeswrong/cli clean. ## 0.1.0 — 2026-06-21 [Section titled “0.1.0 — 2026-06-21”](#010--2026-06-21) * Initial release: design tokens + React component library.