@misoto22/design 0.8.0 → 0.9.0

package/dist/agent/Text.md

@@ -4,7 +4,7 @@ The system’s paragraph, on the second rung of the ink ladder.
 
 - Group: Display
 - Import: `import { Text } from '@misoto22/design'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/text/
 - Related: heading, article, markdown
 

package/dist/agent/Textarea.md

@@ -4,7 +4,7 @@ Multi-line text entry, resizable vertically only.
 
 - Group: Forms
 - Import: `import { Textarea } from '@misoto22/design'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/textarea/
 - Related: input, field
 

package/dist/agent/Timestamp.md

@@ -4,7 +4,7 @@ A date or a time, rendered the one way the system renders them.
 
 - Group: Display
 - Import: `import { Timestamp } from '@misoto22/design'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/timestamp/
 - Related: text, badge, description-list
 

package/dist/agent/Toast.md

@@ -4,7 +4,7 @@ A transient confirmation, mounted once near the app root.
 
 - Group: Feedback
 - Import: `import { Toast } from '@misoto22/design'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/toast/
 - Related: alert
 

package/dist/agent/ToggleGroup.md

@@ -4,7 +4,7 @@ A segmented control: several options, one strip.
 
 - Group: Forms
 - Import: `import { ToggleGroup } from '@misoto22/design'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/toggle-group/
 - Related: tabs, radio-group
 

package/dist/agent/Toolbar.md

@@ -4,7 +4,7 @@ The bar of actions at the edge of a working surface.
 
 - Group: Surfaces
 - Import: `import { Toolbar } from '@misoto22/design'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/toolbar/
 - Related: button, app-shell, card
 

package/dist/agent/Tooltip.md

@@ -4,7 +4,7 @@ A short label on hover and on focus.
 
 - Group: Overlays
 - Import: `import { Tooltip } from '@misoto22/design'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/tooltip/
 - Related: dialog
 

package/dist/agent/TreemapChart.md

@@ -4,7 +4,7 @@ Part of a whole, when the whole has too many parts for a pie — and the parts n
 
 - Group: Charts
 - Import: `import { TreemapChart } from '@misoto22/design/charts'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/treemap-chart/
 - Related: pie-chart, bar-chart
 

package/dist/agent/WaterfallChart.md

@@ -4,7 +4,7 @@ How a total got from one figure to another.
 
 - Group: Charts
 - Import: `import { WaterfallChart } from '@misoto22/design/charts'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/waterfall-chart/
 - Related: bar-chart, funnel-chart
 

package/dist/agent/WorkflowFigure.md

@@ -4,7 +4,7 @@ A process in lanes and phases, with the main path drawn heavier than its branche
 
 - Group: Diagrams
 - Import: `import { WorkflowFigure } from '@misoto22/design/diagrams'`
-- Version: 0.8.0
+- Version: 0.9.0
 - Docs: https://ui.misoto22.com/components/workflow-figure/
 - Related: lifecycle-figure, sequence-figure, steps
 

package/dist/agent/catalog.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0",
+  "version": "0.9.0",
   "groups": [
     "Actions",
     "Forms",
@@ -310,6 +310,87 @@
         "textarea"
       ]
     },
+    {
+      "slug": "number-field",
+      "entry": "@misoto22/design",
+      "name": "NumberField",
+      "group": "Forms",
+      "summary": "A number, typed or swept to.",
+      "when": "The number has a range and a sensible increment. A bare quantity is an Input with type=\"number\"; a value judged by WHERE it sits on a track is a Slider.",
+      "anatomy": [
+        {
+          "element": "Field",
+          "required": true,
+          "description": "A native number input wearing CONTROL_BASE, so it is the same box as Input, Textarea and Select — same padding, same focus, same disabled opacity. The native spinner buttons are hidden: they are three different controls in three browsers and none of them is this system’s."
+        },
+        {
+          "element": "Scrub grip",
+          "description": "A horizontal-arrows glyph at the inline start, on unless scrub is false. Dragging it changes the value by one step every 4px, ten steps with Shift held, and it follows the reading direction — in an RTL page, more is to the left. Pointer only and aria-hidden, because the keyboard already has the arrow keys."
+        },
+        {
+          "element": "Unit",
+          "description": "unit, drawn inside the end of the box and announced through aria-describedby. The slot is a fixed 3rem, so a unit longer than about four characters runs under a long number."
+        }
+      ],
+      "practices": [
+        {
+          "kind": "do",
+          "text": "Reach for it when a value is TUNED rather than entered — a duration, a line height, an offset. The grip is the whole argument for this over an Input: a reader finds those by sweeping past the neighbouring values, not by typing candidates one at a time."
+        },
+        {
+          "kind": "do",
+          "text": "Wrap it in a Field. The root is a div and the id lands on the input inside it, so the label binds and clicks through exactly as it does for an Input — but only if there is a Field to do it."
+        },
+        {
+          "kind": "do",
+          "text": "Pass min, max and step. They are what the arrows step by, what one notch of a scrub is worth, and what the value is reconciled with when the field is left; without them the control is an Input with a grip on it."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not expect the range to hold mid-keystroke. Clamping happens on blur, not on every character, because a minimum of 10 otherwise makes 50 unreachable — the 5 is clamped up before the 0 arrives. onValueChange can report a number outside the range; the value that SETTLES is always inside it."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not turn the grip off and expect a pointer to have another way through. There are no spinner buttons behind it — hiding those is the point — so scrub={false} leaves a mouse with typing and nothing else. Turn it off for a quantity that is chosen rather than swept to, and accept that trade knowingly."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not put the unit in the box and nowhere else past about four characters. The slot is fixed, so “requests” runs under the number; a long unit belongs in the Field’s label, where it is read rather than clipped."
+        }
+      ],
+      "accessibility": [
+        "It is a real <input type=\"number\">, so the platform supplies the spinbutton role, the value, and the range it is announced against.",
+        "unit reaches assistive tech through aria-describedby, so “300” is not announced as a number with no dimension.",
+        "The grip is aria-hidden and not focusable: it commits nothing a keyboard cannot already reach, and announcing it would offer a reader a control that does nothing when they press it.",
+        "invalid and aria-invalid are read together, so a form library setting either one paints the same border."
+      ],
+      "keyboard": [
+        {
+          "keys": [
+            "↑",
+            "↓"
+          ],
+          "does": "Steps by one step, honouring min and max."
+        },
+        {
+          "keys": [
+            "Enter"
+          ],
+          "does": "Reconciles what has been typed with the range and the step."
+        },
+        {
+          "keys": [
+            "Escape"
+          ],
+          "does": "Abandons the edit and restores the last settled value."
+        }
+      ],
+      "related": [
+        "input",
+        "slider",
+        "field"
+      ]
+    },
     {
       "slug": "textarea",
       "entry": "@misoto22/design",
@@ -925,6 +1006,112 @@
         "field"
       ]
     },
+    {
+      "slug": "color-picker",
+      "entry": "@misoto22/design",
+      "name": "ColorPicker",
+      "group": "Forms",
+      "summary": "A colour, chosen or typed.",
+      "when": "A person is choosing the colour. A colour that is merely being SHOWN is a swatch, and a set of fixed brand colours is a RadioGroup — a picker offers sixteen million answers to a question with six.",
+      "anatomy": [
+        {
+          "element": "Trigger",
+          "required": true,
+          "description": "The closed control: a swatch, then the value as text, in the same box as Input and Select. Named by its label AND by its own value, so a reader hears “Brand colour, #a78bfa” rather than either half."
+        },
+        {
+          "element": "Swatch",
+          "description": "The colour over a checkerboard, so a half-transparent value reads as transparent rather than as a paler colour."
+        },
+        {
+          "element": "Notation strip",
+          "description": "Hex, OKLCH and Display P3, as a single-value ToggleGroup. It changes what onValueChange emits, not what the colour is — and hex and P3 are bounded, so switching to one of them fits the colour to that gamut on the way out."
+        },
+        {
+          "element": "Field",
+          "required": true,
+          "description": "The plane: chroma across, lightness up. Each ROW is normalised to the most chroma that exists at that lightness and hue, so the whole surface is reachable instead of a lens of colour inside bands of clipped duplicates. Underneath it are two real sliders rather than key handlers on a canvas, which is what gives it arrows, Home, End and an announced position."
+        },
+        {
+          "element": "Hue track",
+          "description": "A ramp taken at the lightness and chroma already chosen, not a generic rainbow — so the strip shows the hues of THIS colour rather than of some other one."
+        },
+        {
+          "element": "Opacity track",
+          "description": "Transparent to the current colour, over the same checkerboard as the swatch."
+        },
+        {
+          "element": "CSS box",
+          "description": "The value as text. Accepts hex, rgb(), hsl(), oklch() and color(display-p3 …) in both syntaxes, and paints itself invalid on anything else."
+        }
+      ],
+      "practices": [
+        {
+          "kind": "do",
+          "text": "Wrap it in a Field. The trigger is a button, which a label binds to and clicks through — one of the few composites where that works without help."
+        },
+        {
+          "kind": "do",
+          "text": "Pass the notation you want back. The panel emits in whatever notation the value arrived in until somebody changes it in the strip, so a defaultValue of \"#a78bfa\" keeps a consumer in hex."
+        },
+        {
+          "kind": "do",
+          "text": "Reach for this over <input type=\"color\"> when the colours are being TUNED. The native picker works in HSV, where a row of constant lightness visibly darkens as it saturates — so a reader building a palette is fighting the instrument. OKLCH is the space where two colours at the same height genuinely match."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not pass a named colour. Hex, rgb(), hsl(), oklch() and color(display-p3 …) parse; \"rebeccapurple\" does not, and the box will show it as invalid. Resolving names needs a table of every CSS keyword or a live DOM, and a picker that takes some names and not others is worse than one that takes none."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not read the emitted string as a fixed notation. It is whatever the strip is set to, so a consumer that slices a \"#\" off the front breaks the first time a reader picks OKLCH."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not use it to pick text or background colour and call the result accessible. Nothing here measures contrast; a picker that lets a reader choose #eeeeee for body copy is doing exactly what it was asked."
+        }
+      ],
+      "accessibility": [
+        "label is required. The trigger shows a value, and a value is not a name.",
+        "The plane is a group of two real sliders — Chroma and Lightness — each announced with a percentage, so the 2D surface is operable and reported rather than merely clickable.",
+        "The focus ring is drawn on the plane, because the sliders that take the focus are visually hidden and the browser’s own ring is clipped away with them.",
+        "Alpha is doubled by a checkerboard everywhere it is shown, so transparency is not carried by lightness alone."
+      ],
+      "keyboard": [
+        {
+          "keys": [
+            "Enter",
+            "Space"
+          ],
+          "does": "Opens the panel."
+        },
+        {
+          "keys": [
+            "←",
+            "→"
+          ],
+          "does": "Moves the focused axis or track by one step."
+        },
+        {
+          "keys": [
+            "Home",
+            "End"
+          ],
+          "does": "Jumps that axis or track to its ends."
+        },
+        {
+          "keys": [
+            "Escape"
+          ],
+          "does": "Closes the panel; focus returns to the trigger."
+        }
+      ],
+      "related": [
+        "field",
+        "input",
+        "popover"
+      ]
+    },
     {
       "slug": "slider",
       "entry": "@misoto22/design",
@@ -948,6 +1135,10 @@
         {
           "element": "Value readout",
           "description": "Only with showValue: a mono row above the track, the names on the start edge and the formatted values on the end, each joined by an en dash and in the thumbs’ own order — so a two-ended range reads “Minimum – Maximum” over “10 – 90”."
+        },
+        {
+          "element": "Editable readout",
+          "description": "What editable turns those figures into: one box per thumb, showing format’s output at rest and the bare number while it has focus, so a reader still sees “$1,200” and a typist is never asked to type a currency symbol back. Each is named separately from its thumb — two controls announcing “Quality” is one control announced twice."
         }
       ],
       "practices": [
@@ -961,12 +1152,16 @@
         },
         {
           "kind": "do",
-          "text": "Put an Input beside it when the exact number matters. A slider cannot be typed into, and someone who needs 37 rather than roughly 40 is dragging a 16px thumb across a hundred steps to get it."
+          "text": "Turn on editable when the exact number matters. A slider on its own cannot be typed into, and someone who needs 37 rather than roughly 40 is dragging a 16px thumb across a hundred steps to get it — the box in the readout is the way out, and it replaces the second Input this used to ask for."
         },
         {
           "kind": "dont",
           "text": "format becomes each thumb’s aria-valuetext, which REPLACES the number rather than decorating it — so a formatter that rounds hard or drops the unit is what a screen reader gets instead of the value."
         },
+        {
+          "kind": "dont",
+          "text": "editable typing is bounded by the NEIGHBOURING thumb as well as by min and max, and it has to be: 90 typed into the lower end of a range sitting at 70 would otherwise cross the two thumbs over. So a number can be accepted and then land somewhere else, and the box shows where it landed."
+        },
         {
           "kind": "dont",
           "text": "Do not disable a slider to make it read-only: the whole control dims and stops taking the pointer, and Radix drops the thumb out of the tab order, so the value becomes unreachable rather than uneditable."
@@ -1412,6 +1607,148 @@
         "breadcrumb"
       ]
     },
+    {
+      "slug": "sidebar",
+      "entry": "@misoto22/design",
+      "name": "Sidebar",
+      "group": "Navigation",
+      "summary": "A navigation rail down the side of an application.",
+      "when": "A whole application’s navigation, in a column that stays. A list of links inside a page is NavItem on its own; a strip of panels is Tabs.",
+      "anatomy": [
+        {
+          "element": "Provider",
+          "required": true,
+          "description": "SidebarProvider. It holds whether the rail is open and binds the shortcut that changes it, and it sits ABOVE both the rail and the content beside it — the page has to reserve the rail’s width, and a state that lived inside the rail could only ever be read downwards. It also supplies the tooltip provider a collapsed rail needs, so the icon state works without the app being told to wrap itself in one."
+        },
+        {
+          "element": "Rail",
+          "required": true,
+          "description": "Sidebar. A <nav>, not an <aside>: the element decides the landmark, and a rail of links announced as “complementary” is not the one a reader jumps to when they go looking for the navigation. Its width animates between --sidebar-w and --sidebar-w-icon while the column inside stays full width, so the rows do not reflow under the wipe."
+        },
+        {
+          "element": "Header",
+          "description": "SidebarHeader. The brand, the workspace, the switcher — and where SidebarTrigger belongs. A control that hides a thing lives on the thing; out in an application’s masthead it is one more anonymous icon with nothing connecting it to the column it operates."
+        },
+        {
+          "element": "Content",
+          "description": "SidebarContent. The scrolling middle, and the only part that scrolls."
+        },
+        {
+          "element": "Group",
+          "description": "SidebarGroup: a heading, an optional count, an optional action, and rows behind a hairline. The heading is the same size as its rows and outranks them by weight and one step of ink — smaller than what it contains, it reads as a footnote over a list rather than as a title over its own contents."
+        },
+        {
+          "element": "Row",
+          "description": "SidebarItem, which is NavItem plus the two things a rail adds: a trailing slot, and an answer for the state with no room for words. Collapsed, the label leaves the layout and becomes the row’s tooltip."
+        },
+        {
+          "element": "Branch",
+          "description": "SidebarBranch: a row that opens onto more rows, behind the same hairline a group draws and one indent further in. It is the line between a place and a heading — a workspace that contains projects is a place containing places, and it carries an icon and a state the way its children do, which a Group has neither of. Two levels is what the indent has room for; a third in a 16rem column is a horizontal scrollbar with an outline in it."
+        },
+        {
+          "element": "Footer",
+          "description": "SidebarFooter. The utilities a rail ends on, kept out of the index above it."
+        },
+        {
+          "element": "Page",
+          "description": "SidebarInset, the column beside the rail. It is `min-w-0` — the half every hand-written version forgets, and the reason one wide table inside pushes the page past the viewport and takes the rail’s width with it. Under variant=\"inset\" it is also the panel: the rail becomes the ground, and this draws the bordered --paper surface sitting on it."
+        },
+        {
+          "element": "Drawer",
+          "description": "What the rail becomes under the provider’s breakpoint (768px by default): fixed against its own edge, over a scrim, and inert while closed. Nothing to render — the same <Sidebar> is both — but it is a different component to a reader, and the collapsible setting does not apply there."
+        }
+      ],
+      "practices": [
+        {
+          "kind": "do",
+          "text": "Give every row an icon if the rail collapses to icons. The icon is the whole of what a collapsed row shows, and SidebarItem keeps the label drawn on a row without one rather than leaving a blank line — which is a rail that is half collapsed."
+        },
+        {
+          "kind": "do",
+          "text": "Choose collapsible by what the rows ARE. icon suits a fixed set a reader learns the shape of; offcanvas suits a long index nobody memorises, where a column of unrecognisable glyphs is worse than no column."
+        },
+        {
+          "kind": "do",
+          "text": "Reach for SidebarBranch when the thing is a PLACE that contains places, and for SidebarGroup when it is a heading over a set. A group has no icon and no state because it is not somewhere you can be; a branch has both because it is."
+        },
+        {
+          "kind": "do",
+          "text": "Put SidebarTrigger in the header. It is where the component expects it and where a reader looks for it, and it is the difference between a control that belongs to the rail and one that has wandered into the masthead."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not reach for it for navigation inside a page. This is an application landmark that owns a whole edge of the window; a set of links in a column is NavItem, and putting those in a rail gives a page two navigation landmarks competing for the same reader."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not pass shortcut and then bind Cmd+B yourself. Two handlers on one chord toggle twice and land back where they started, which reads as a rail that ignores its own shortcut. Pass shortcut={null} where the app owns it."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not nest a branch inside a branch. The indent is sized for two levels at this width, and a third takes the words with it — what a reader gets is an outline with a horizontal scrollbar under it."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not control open without onOpenChange. The trigger and the shortcut then both do nothing, and the state that looks broken is the one the caller froze."
+        },
+        {
+          "kind": "do",
+          "text": "Wrap the page in SidebarInset rather than a hand-written flex column. It carries min-w-0, which is what stops one wide table inside the page from pushing the whole layout past the viewport, and it is the other half of variant=\"inset\"."
+        },
+        {
+          "kind": "do",
+          "text": "Pass persist with a key when the rail is an application’s own. A reader who put the rail away did not mean “until the next page”. Only the docked state is kept: restoring an open drawer is a page that loads with its navigation over the top of itself."
+        },
+        {
+          "kind": "do",
+          "text": "Give the provider a ground for variant=\"floating\" and variant=\"inset\" — bg-(--stone) on the element holding it. Both draw a --paper panel, and a panel on the same colour as the thing behind it is a border with nothing on either side of it."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not put a transform, filter or perspective on an element wrapping the provider. The drawer is fixed, and any of those makes that ancestor its containing block — so it opens inside the wrapper instead of against the edge of the window."
+        },
+        {
+          "kind": "dont",
+          "text": "Do not build the phone drawer yourself around this. It already is one under breakpoint, with the scrim, the inert closed state and the close-on-navigate; a second one outside gives the page two drawers and one of them has no scrim."
+        }
+      ],
+      "accessibility": [
+        "label is required, and names the landmark. A page with two navigations in it announces two things called “navigation” unless each says which it is.",
+        "The trigger’s name says what it will DO and aria-expanded reports what is true now, so it is never the permanently ambiguous “Toggle sidebar”.",
+        "A collapsed row keeps its label as its accessible name, through a tooltip — an icon alone is a guess for a sighted reader and nothing at all for a screen reader.",
+        "A collapsed group keeps its heading as the group’s name even though the words are not drawn.",
+        "The current row carries aria-current=\"page\", not only a darker ground.",
+        "The closed drawer is inert, not merely translated off-screen. Off-screen it still holds focus and is still read aloud, so a shut drawer puts its whole index between the reader and the page they were on.",
+        "The scrim is a button with a name, because tapping beside a drawer is how a drawer is closed — and a gesture that exists only for a pointer is one a keyboard cannot make."
+      ],
+      "keyboard": [
+        {
+          "keys": [
+            "⌘B",
+            "Ctrl B"
+          ],
+          "does": "Opens and closes the rail."
+        },
+        {
+          "keys": [
+            "Enter",
+            "Space"
+          ],
+          "does": "On a group heading, folds or unfolds it."
+        },
+        {
+          "keys": [
+            "Tab"
+          ],
+          "does": "Moves through the rows in the order they are drawn."
+        }
+      ],
+      "related": [
+        "nav-item",
+        "collapsible",
+        "app-shell"
+      ]
+    },
     {
       "slug": "nav-item",
       "entry": "@misoto22/design",
@@ -6666,6 +7003,7 @@
     "CollapsibleTrigger": "Collapsible",
     "CollapsibleContent": "Collapsible",
     "CollapsibleSection": "Collapsible",
+    "ColorPicker": "ColorPicker",
     "Combobox": "Combobox",
     "Command": "Command",
     "CommandInput": "Command",
@@ -6719,6 +7057,7 @@
     "Markdown": "Markdown",
     "NativeSelect": "NativeSelect",
     "NavItem": "NavItem",
+    "NumberField": "NumberField",
     "paginationRange": "Pagination",
     "Pagination": "Pagination",
     "Popover": "Popover",
@@ -6743,6 +7082,22 @@
     "SheetClose": "Sheet",
     "SheetContent": "Sheet",
     "SheetSide": "Sheet",
+    "useSidebar": "Sidebar",
+    "SidebarProvider": "Sidebar",
+    "Sidebar": "Sidebar",
+    "SidebarInset": "Sidebar",
+    "SidebarHeader": "Sidebar",
+    "SidebarContent": "Sidebar",
+    "SidebarFooter": "Sidebar",
+    "SidebarSeparator": "Sidebar",
+    "SidebarTrigger": "Sidebar",
+    "SidebarGroup": "Sidebar",
+    "SidebarBranch": "Sidebar",
+    "SidebarItem": "Sidebar",
+    "SidebarCollapsible": "Sidebar",
+    "SidebarSide": "Sidebar",
+    "SidebarVariant": "Sidebar",
+    "SidebarBreakpoint": "Sidebar",
     "Skeleton": "Skeleton",
     "SkeletonLine": "Skeleton",
     "SkeletonBlock": "Skeleton",
@@ -6857,6 +7212,7 @@
     {
       "axis": "data-density",
       "values": [
+        "comfortable",
         "compact"
       ],
       "unset": "comfortable"
@@ -6889,6 +7245,7 @@
       "axis": "data-rules",
       "values": [
         "firm",
+        "hairline",
         "quiet"
       ],
       "unset": "hairline"
@@ -6898,6 +7255,7 @@
       "values": [
         "cool",
         "glass",
+        "paper",
         "warm"
       ],
       "unset": "paper"
@@ -6913,6 +7271,7 @@
       "axis": "data-type",
       "values": [
         "bookish",
+        "editorial",
         "grotesk"
       ],
       "unset": "editorial"

package/dist/agent/index.md

@@ -1,4 +1,4 @@
-# @misoto22/design 0.8.0
+# @misoto22/design 0.9.0
 
 > Monochrome design system: portable CSS tokens and accessible React 19
 > primitives. Components ship compiled — import them, do not copy them.
@@ -17,14 +17,14 @@ Attributes, independent, and they work on any element — not just the root.
 An unset axis is the default.
 
 - `data-chart-palette`: `chroma` (unset = the neutral series ramp)
-- `data-density`: `compact` (unset = comfortable)
+- `data-density`: `comfortable` `compact` (unset = comfortable)
 - `data-mode`: `dark` `light` (unset = follows the app)
 - `data-motion`: `snappy` `still` (unset = calm)
 - `data-radius`: `round` `sharp` (unset = the default radius ladder)
-- `data-rules`: `firm` `quiet` (unset = hairline)
-- `data-surface`: `cool` `glass` `warm` (unset = paper)
+- `data-rules`: `firm` `hairline` `quiet` (unset = hairline)
+- `data-surface`: `cool` `glass` `paper` `warm` (unset = paper)
 - `data-table-density`: `compact` (unset = comfortable — whatever `data-density` is doing around it)
-- `data-type`: `bookish` `grotesk` (unset = editorial)
+- `data-type`: `bookish` `editorial` `grotesk` (unset = editorial)
 
 There is no `data-accent` attribute: `--accent` is a CSS custom property,
 re-pointed in a stylesheet.
@@ -40,6 +40,7 @@ re-pointed in a stylesheet.
 
 - **Field** — A labelled form row: label, control, and the one message below it — and, in row layout, the settings row.
 - **Input** — A single line of text entry.
+- **NumberField** — A number, typed or swept to.
 - **Textarea** — Multi-line text entry, resizable vertically only.
 - **Select** — A choice from a list, styled the whole way down.
 - **NativeSelect** — The platform’s own picker, restyled where it can be.
@@ -48,6 +49,7 @@ re-pointed in a stylesheet.
 - **Switch** — A setting that takes effect immediately.
 - **Combobox** — A select you can type into.
 - **DatePicker** — A date — or a span of them — chosen from a calendar.
+- **ColorPicker** — A colour, chosen or typed.
 - **Slider** — A value chosen along a range.
 - **ToggleGroup** — A segmented control: several options, one strip.
 
@@ -57,6 +59,7 @@ re-pointed in a stylesheet.
 - **Accordion** — Disclosure rows that open in place.
 - **Breadcrumb** — Where you are, as a path.
 - **Pagination** — Numbered pages, with the middle elided.
+- **Sidebar** — A navigation rail down the side of an application.
 - **NavItem** — A row in a sidebar.
 - **Collapsible** — One thing that opens, on its own.
 

package/dist/charts/BulletChart/BulletChart.js

@@ -143,12 +143,26 @@ function BulletRow({
           targetShare !== null && // A rule ACROSS the bar rather than a second bar beside it: the two
           // are different kinds of number, and the reader has to be able to
           // tell at a glance which one was achieved and which was asked for.
+          //
+          // The paper halo is what makes that true where the rule lands ON the
+          // bar. Both are drawn in --ink, so a target inside the achieved range
+          // — which is every measure that is doing well — was an ink rule on an
+          // ink bar and simply not there.
           /* @__PURE__ */ jsx(
             "span",
             {
               "data-slot": "bullet-target",
-              className: "absolute inset-y-1 block w-0.5 bg-(--ink)",
-              style: { insetInlineStart: pct(targetShare), marginInlineStart: "-1px" }
+              className: "absolute inset-y-1 block w-0.5 bg-(--ink) shadow-[0_0_0_1px_var(--paper)]",
+              style: {
+                insetInlineStart: pct(targetShare),
+                // Pulled back by its own width in PROPORTION to where it sits:
+                // flush at the start at 0, centred in the middle, flush at the end
+                // at 1. A fixed half-width pull put a target of zero half outside
+                // the track, where `overflow-hidden` took it — so "Open incidents,
+                // target 0" drew no target at all, on the one measure whose whole
+                // point is the distance from it.
+                marginInlineStart: `${-2 * targetShare}px`
+              }
             }
           ),
           runsOver && // Clamped and silent, a number past the end of the scale fills the