\n \n \n A human-readable label for this batch job. \n \n
\n```\n\n**`aria-label` is required and is yours to pass** - name what is being explained. The glyph is\n`aria-hidden`, so a trigger without a label has no accessible name at all rather than one called\n\"i\". An icon child still renders (scaled down to fit), but it is no longer the recipe: the disc is\nalready the affordance, and an icon inside it reads as two.\n\nThe disc is `size-4`, which squares against `Counter size=\"sm\"`'s `h-4` on purpose - a section\ntitle, its `Counter` and its info disc in one `flex items-center gap-2` row is the intended cluster,\nthe solid pill reading as the count and the muted one as the meaning. Both stay filled; a stroked\nring beside a filled pill reads as a half-drawn one.\n\n16px is also exactly a `Label variant=\"sectionHeader\"`'s box height, so the disc sits level with the\ntitle instead of towering over it. That label is `text-xs`, and every step of the type scale carries\nits own line-height, so `text-xs` alone makes it a 16px box. `workbenchHeader` (`text-sm`, a 20px\nline box) is the variant `size=\"lg\"` lines up with.\n\n**`size=\"lg\"`** is the 20px disc (`size-5`, glyph at `text-xs`), for the rarer cluster built around\n`Counter size=\"default\"` rather than a section label. `size` only bites on the `info` variant - the\nother trigger treatments have no box for it to change - and it is a compound axis, so `size` on\n`inlineLink` is inert rather than wrong.\n\nBoth sizes set the glyph's type size **on the glyph** (`[&>span]:text-[10px]`), not just on the\nbutton. That looks redundant but is not: `ds-lib-tokens`' base layer carries `span { @apply text-sm }`,\nand the info glyph is a span, so a glyph left to inherit renders at 14px no matter what the button\nsays. Editing the disc's type size means editing the `[&>span]:` half too, or the glyph silently\nstops tracking the disc - `tooltip.test.ts` pins it against `Counter size=\"sm\"` to catch that.\n\n`variant=\"inlineLink\"` is the other trigger treatment - an underlined span flowing inside prose,\nfor a term that needs a definition without a disc interrupting the line.\n\n`Tooltip.Content` takes **`arrowClasses`** for the arrow's own styling, but not for placement: the\narrow centres itself on the trigger on all four sides and protrudes half its box. A tip that looks\noff-centre is a bug in `tooltipArrowVariants` to fix here, not something to counter-shift at the\ncall site - a call-site nudge is invisible to every other consumer and silently double-corrects the\nday the primitive is fixed.\n\n## API conventions\n\n- **`bind:ref` for element handles.** Every primitive exposes `ref` as a `$bindable` prop. Use `` to capture the underlying DOM element.\n- **`data-*` attributes are public API.** Every variant slot carries `data-slot` plus variant attributes (`data-variant`, `data-size`, `data-state`, `data-typography`, etc.). Use them as descendant-selector hooks. Renaming requires a major version bump.\n- **Composite primitives compose by sub-part.** Card, Dialog, Item, Select, DropdownMenu, Tabs, Collapsible, Tooltip, InputGroup, and DropZone export their sub-parts (e.g. `Dialog.Trigger`, `Dialog.Content`). Pass `class` to each sub-part directly - there is no `headerClass`/`contentClass` shorthand on the root.\n- **`child` snippet on Item is the bits-ui `asChild` render-prop pattern**, not a typo for `children`.\n- **Counts are their own primitive, and absent is not zero.** `Counter` (and `Tabs.Count`, the tab-context wrapper around it) takes a `value`: a number renders the pill, `null` renders the not-yet-loaded pill at the same reserved width, and omitting the component entirely is how a tab says it has no count. Values past 999 abbreviate (`1.2K`, `123K`) so a growing count can never widen the strip; the exact number stays on `title` and in the accessible name. A caller that knows only \"at least this many\" (a keyset-paginated list, a capped query) passes `atLeast` alongside the value to render it as a floor (`103+`, accessible name \"at least 103\"); the abbreviation truncates rather than rounds in that mode, so the floor never claims more than was loaded. The pill is the default, not the whole component: `variant=\"bare\" size=\"inherit\"` drops the background, the radius and the mono face and takes the typography of whatever it sits in, so a headline figure, a table cell or a number mid-sentence can roll on the same odometer. Bare counters sit on the surrounding baseline and reserve no width of their own; `exact` turns off the abbreviation where the reader is meant to read the figure rather than glance at it, and `decimals` fixes the places for a figure that isn't a whole count (`decimals={2}` shows a score as `0.97`).\n- **A score's colour is the caller's, and absent is not zero.** `ScoreBento` paints a 0..1 `value` as a field of one hundred cells; `value={null}` is the unscored field and an em dash, which is how a failed run or one still in flight reads. `tone` picks the colour (`neutral`, the default, the brand `babyblue` and `yellow`, or the system `warning`), and the thresholds that decide which tone a score wears live with the consumer. The figure is a bare `Counter` with `decimals={2}`. Scored cells take the tone's token at full strength in both themes, like brand colours everywhere else; unscored cells show the background. A new colour is a new tone in `scoreBentoFieldVariants` and `scoreBentoInkVariants`. `status` takes the agent service's run statuses as they come; only `completed` (the fill) and `running` (a diagonal sweep that never claims a score) move. `StatBento` is its quiet sibling on the card surface. Both render a `Tooltip` for `help`, so the page needs a `Tooltip.Provider` above them, and neither sets its own width or grid placement.\n- **An unknown total is `null`, not zero.** `Progress value={null}` sweeps for work whose total isn't known, the same motion as `LoadingBar`, and drops `aria-valuenow`; `value={0}` is known work that hasn't started. `variant=\"running\"` paints it in `atai-neutral`.\n- **A sortable column header never holds the sort.** `Table.Head sortable` turns the header into a button and owns the affordance, the three-state indicator and `aria-sort`; the consumer passes `direction` (`'asc' | 'desc' | null`) and an `onSort` callback and keeps the state itself. `null` means another column holds the sort, which is what renders that header's unsorted arrow. Because the state lives with the consumer, a Sort menu and the column headers can drive the same state and stay in step. Heads without `sortable` are unchanged and are simply not clickable.\n\n- **Variant configs are exported.** Each `index.ts` re-exports its `tv()` configs (e.g. `buttonVariants`, `inputGroupButtonVariants`) so consumers can compose variants without forking source.\n\n## Modifying a primitive (registry workflow)\n\nThe npm package is the source of truth for primitives - consume every primitive from it, and don't keep local forks or hand-roll one-offs. What you will hit is a primitive that needs to **change**: an internal refactor, a variant's styling adjusted, or the API extended with a new variant or prop axis. For that, the same primitives are served as a shadcn-svelte registry at `https://design-system-console.archetypeai.workers.dev/`, so you can work on the real source inside your app and upstream the result:\n\n1. **Pull the editable source** into your app:\n\n ```sh\n npx shadcn-svelte@latest add https://design-system-console.archetypeai.workers.dev/r/button.json\n ```\n\n Components install **flat** under your `ui` alias - `$lib/components/ui/{button,codeblock,...}/`, plus `utils.ts` and `theme.svelte.ts` at the `ui` root. Cross-component dependencies are declared with the registry's `local:` prefix, so installing one component pulls everything it needs from the same registry - e.g. `codeblock` pulls `button`, `spinner`, `theme`, and `console-utils`.\n\n2. **Make the change against the local source** and validate it in-app.\n\n3. **Port the change back** into `ds-ui-svelte/console/primitives/` in the design-system repo and release. Then bump the package version in your app, delete the local copy, and import from `primitives/