npm - @misoto22/design - Versions diffs - 0.8.0 → 0.10.0 - Mend

@misoto22/design 0.8.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/dist/agent/Accordion.md +1 -1
package/dist/agent/Alert.md +1 -1
package/dist/agent/AppShell.md +1 -1
package/dist/agent/ArchitectureFigure.md +1 -1
package/dist/agent/AreaChart.md +1 -1
package/dist/agent/Article.md +1 -1
package/dist/agent/AspectRatio.md +1 -1
package/dist/agent/Avatar.md +1 -1
package/dist/agent/Badge.md +1 -1
package/dist/agent/BarChart.md +1 -1
package/dist/agent/BarList.md +1 -1
package/dist/agent/BigNumber.md +1 -1
package/dist/agent/BoxPlot.md +1 -1
package/dist/agent/Breadcrumb.md +1 -1
package/dist/agent/BulletChart.md +1 -1
package/dist/agent/Button.md +1 -1
package/dist/agent/Calendar.md +1 -1
package/dist/agent/Card.md +1 -1
package/dist/agent/Checkbox.md +1 -1
package/dist/agent/Code.md +1 -1
package/dist/agent/CodeBlock.md +1 -1
package/dist/agent/Collapsible.md +1 -1
package/dist/agent/ColorPicker.md +75 -0
package/dist/agent/Combobox.md +1 -1
package/dist/agent/Command.md +1 -1
package/dist/agent/ComposedChart.md +1 -1
package/dist/agent/ContextMenu.md +1 -1
package/dist/agent/DataflowFigure.md +1 -1
package/dist/agent/DatePicker.md +1 -1
package/dist/agent/DescriptionList.md +1 -1
package/dist/agent/Diagram.md +1 -1
package/dist/agent/DiagramCanvas.md +1 -1
package/dist/agent/DiagramExportMenu.md +1 -1
package/dist/agent/DiagramInspector.md +1 -1
package/dist/agent/DiagramLegend.md +1 -1
package/dist/agent/DiagramMinimap.md +1 -1
package/dist/agent/DiagramToolbar.md +1 -1
package/dist/agent/Dialog.md +1 -1
package/dist/agent/DropdownMenu.md +1 -1
package/dist/agent/EmptyState.md +1 -1
package/dist/agent/ErrorState.md +1 -1
package/dist/agent/Facet.md +1 -1
package/dist/agent/Field.md +1 -1
package/dist/agent/FigureBand.md +1 -1
package/dist/agent/FloatingIconButton.md +1 -1
package/dist/agent/FunnelChart.md +1 -1
package/dist/agent/Heading.md +1 -1
package/dist/agent/Heatmap.md +1 -1
package/dist/agent/Histogram.md +1 -1
package/dist/agent/Input.md +1 -1
package/dist/agent/Kbd.md +2 -2
package/dist/agent/LifecycleFigure.md +1 -1
package/dist/agent/LineChart.md +1 -1
package/dist/agent/LinkArrow.md +1 -1
package/dist/agent/Markdown.md +1 -1
package/dist/agent/NativeSelect.md +1 -1
package/dist/agent/NavItem.md +1 -1
package/dist/agent/NumberField.md +72 -0
package/dist/agent/Pagination.md +1 -1
package/dist/agent/PieChart.md +1 -1
package/dist/agent/Popover.md +1 -1
package/dist/agent/Progress.md +1 -1
package/dist/agent/RadarChart.md +1 -1
package/dist/agent/RadialChart.md +1 -1
package/dist/agent/RadioGroup.md +1 -1
package/dist/agent/SankeyChart.md +1 -1
package/dist/agent/ScatterChart.md +1 -1
package/dist/agent/ScrollArea.md +1 -1
package/dist/agent/SearchableMenu.md +1 -1
package/dist/agent/Select.md +1 -1
package/dist/agent/Separator.md +1 -1
package/dist/agent/SequenceFigure.md +1 -1
package/dist/agent/Sheet.md +1 -1
package/dist/agent/Sidebar.md +193 -0
package/dist/agent/Skeleton.md +1 -1
package/dist/agent/Slider.md +7 -3
package/dist/agent/Sparkline.md +1 -1
package/dist/agent/Spinner.md +1 -1
package/dist/agent/StatusDot.md +1 -1
package/dist/agent/StatusPill.md +1 -1
package/dist/agent/Steps.md +1 -1
package/dist/agent/Switch.md +1 -1
package/dist/agent/Table.md +3 -1
package/dist/agent/Tabs.md +1 -1
package/dist/agent/Tag.md +1 -1
package/dist/agent/Text.md +1 -1
package/dist/agent/Textarea.md +1 -1
package/dist/agent/Timestamp.md +1 -1
package/dist/agent/Toast.md +1 -1
package/dist/agent/ToggleGroup.md +1 -1
package/dist/agent/Toolbar.md +1 -1
package/dist/agent/Tooltip.md +1 -1
package/dist/agent/TreemapChart.md +1 -1
package/dist/agent/WaterfallChart.md +1 -1
package/dist/agent/WorkflowFigure.md +1 -1
package/dist/agent/catalog.json +362 -2
package/dist/agent/index.md +9 -6
package/dist/charts/BulletChart/BulletChart.js +16 -2
package/dist/charts/BulletChart/BulletChart.js.map +1 -1
package/dist/charts/RadarChart/RadarChart.js +4 -2
package/dist/charts/RadarChart/RadarChart.js.map +1 -1
package/dist/charts/lib/chart.js +16 -1
package/dist/charts/lib/chart.js.map +1 -1
package/dist/components/AppShell/AppShell.js +2 -2
package/dist/components/AppShell/AppShell.js.map +1 -1
package/dist/components/Button/Button.js +3 -3
package/dist/components/Button/Button.js.map +1 -1
package/dist/components/ColorPicker/ColorPicker.d.ts +67 -0
package/dist/components/ColorPicker/ColorPicker.js +334 -0
package/dist/components/ColorPicker/ColorPicker.js.map +1 -0
package/dist/components/Command/Command.js +1 -1
package/dist/components/Command/Command.js.map +1 -1
package/dist/components/ContextMenu/ContextMenu.js +1 -1
package/dist/components/ContextMenu/ContextMenu.js.map +1 -1
package/dist/components/Dialog/Dialog.js +1 -1
package/dist/components/Dialog/Dialog.js.map +1 -1
package/dist/components/DropdownMenu/DropdownMenu.js +1 -1
package/dist/components/DropdownMenu/DropdownMenu.js.map +1 -1
package/dist/components/ErrorState/ErrorState.js +1 -1
package/dist/components/ErrorState/ErrorState.js.map +1 -1
package/dist/components/Kbd/Kbd.d.ts +7 -0
package/dist/components/Kbd/Kbd.js +1 -1
package/dist/components/Kbd/Kbd.js.map +1 -1
package/dist/components/NavItem/NavItem.js +1 -1
package/dist/components/NavItem/NavItem.js.map +1 -1
package/dist/components/NumberField/NumberField.d.ts +69 -0
package/dist/components/NumberField/NumberField.js +162 -0
package/dist/components/NumberField/NumberField.js.map +1 -0
package/dist/components/Popover/Popover.js +1 -1
package/dist/components/Popover/Popover.js.map +1 -1
package/dist/components/Select/Select.js +1 -1
package/dist/components/Select/Select.js.map +1 -1
package/dist/components/Sheet/Sheet.js +1 -1
package/dist/components/Sheet/Sheet.js.map +1 -1
package/dist/components/Sidebar/Sidebar.d.ts +357 -0
package/dist/components/Sidebar/Sidebar.js +455 -0
package/dist/components/Sidebar/Sidebar.js.map +1 -0
package/dist/components/Slider/Slider.d.ts +22 -1
package/dist/components/Slider/Slider.js +72 -8
package/dist/components/Slider/Slider.js.map +1 -1
package/dist/components/Table/Table.d.ts +14 -0
package/dist/components/Table/Table.js.map +1 -1
package/dist/components/Tabs/Tabs.js +7 -1
package/dist/components/Tabs/Tabs.js.map +1 -1
package/dist/diagrams/lib/route.d.ts +22 -1
package/dist/diagrams/lib/route.js +24 -1
package/dist/diagrams/lib/route.js.map +1 -1
package/dist/diagrams/lib/wires.js +9 -5
package/dist/diagrams/lib/wires.js.map +1 -1
package/dist/index.d.ts +3 -0
package/dist/index.js +3 -0
package/dist/index.js.map +1 -1
package/dist/lib/color.d.ts +80 -0
package/dist/lib/color.js +189 -0
package/dist/lib/color.js.map +1 -0
package/dist/lib/numeric.d.ts +35 -0
package/dist/lib/numeric.js +29 -0
package/dist/lib/numeric.js.map +1 -0
package/dist/semantic.css +4 -2
package/dist/styles.css +1 -1
package/dist/themes.css +99 -0
package/dist/tokens.css +133 -4
package/dist/tokens.d.ts +5 -0
package/dist/tokens.js +31 -3
package/dist/tokens.json +31 -3
package/package.json +1 -1
package/skills/misoto22-design/rules/forms.md +3 -1

package/dist/tokens.css CHANGED Viewed

@@ -19,8 +19,22 @@
    holds the two in sync.
    ========================================================================== */
+/* `[data-surface='paper']` is the surface axis's own default, WRITTEN. Every
+   other axis value has a name; this one was "leave the attribute off", which
+   works exactly once — at the root. A subtree cannot say "the White Reset"
+   inside a page whose root is warm, so five theme specimens on one page each
+   inherited whichever surface the reader had applied to the site and every one
+   of them showed the same colours. Naming the default is what lets a subtree
+   opt out of an ancestor's theme rather than only into a different one.
+   It sits on the ROOT's own rule rather than restating the values, so there is
+   nothing here to drift. Specificity ties with `[data-surface='warm']` in
+   themes.css and loses on source order, which is correct: a wrapper that says
+   `warm` does not match this selector at all. */
 :root,
-[data-mode='light'] {
+[data-mode='light'],
+[data-surface='paper'],
+[data-rules='hairline'] {
   --paper: #ffffff;
   --paper-2: #f7f7f5;
   --bar: var(--stone);
@@ -101,7 +115,9 @@
      A consumer who genuinely needs hue does not hand-pick hexes: it sets
      `data-chart-palette="chroma"` (see themes.css), which re-points these
-     eight names onto a categorical palette validated against both grounds. */
+     eight names onto a categorical palette validated against both grounds —
+     or `"accent"`, which ladders the same eight names out of `--clay` when
+     what the charts have to carry is a brand rather than eight categories. */
   --series-1: #101010;
   --series-2: #565656;
   --series-3: #202020;
@@ -132,7 +148,20 @@
   color-scheme: light;
 }
-[data-mode='dark'] {
+/* The dark half of the same reset. Without it, `paper` inside a dark page
+   would match the light rule above and light up one specimen in the middle of
+   a dark gallery. */
+[data-mode='dark'],
+/* BOTH forms, the way every dark rule in `themes.css` is written. The compound
+   is not the same selector as the descendant, and the compound is the one that
+   matters most: an app puts `data-mode` and its theme axes on the SAME element
+   — `<html data-mode="dark" data-surface="paper">` — where a descendant
+   selector matches nothing. Written descendant-only, every dark page took the
+   light rule above and painted light ink on a dark ground. */
+[data-mode='dark'][data-surface='paper'],
+[data-mode='dark'] [data-surface='paper'],
+[data-mode='dark'][data-rules='hairline'],
+[data-mode='dark'] [data-rules='hairline'] {
   --paper: #0d0d0d;
   --paper-2: #161616;
   --bar: var(--stone);
@@ -322,7 +351,15 @@
   --radius-frame: calc(var(--radius-lg) + 1rem * var(--radius-gate)); /* a frame 16px outside a panel */
 }
-:root {
+/* The density axis's own default, named — and on a rule that holds NOTHING
+   but density. It was on the block above, which also carries the status
+   colours, the floating surfaces and the motion steps: every element that
+   said `data-density="comfortable"` therefore re-declared the whole LIGHT
+   palette on itself, and in dark mode every example canvas on the site
+   painted a light --danger on a dark ground. A neutral value may only
+   restate the axis it belongs to. */
+:root,
+[data-density='comfortable'] {
   /* ─── Density ────────────────────────────────────────────────────────────
      The second theming axis, and the only other one. Light/dark swaps colour;
      density swaps the size of anything a finger or a pointer has to hit.
@@ -350,6 +387,21 @@
   --control-py-sm: 0.5rem;
   --control-py-md: 0.75rem;
   --control-py-lg: 0.75rem;
+  /* And so is the LEADING, which is the term that guard was missing.
+     `min-height` is a floor, and what has to stay under it is the whole box:
+     the line, the padding and the border. The padding was scaled and the line
+     was left inheriting the body's 1.6 — so `sm` measured 20.8 + 16 + 2 = 38.8
+     against a 36px token, `md` 46 against 44 and `lg` 50 against 48. Every
+     text button in the system was two to three pixels taller than the number
+     documenting it, and the floor never bound because the box had already
+     cleared it.
+     One value on both densities: the font sizes do not move with density, only
+     the padding and the heights do, so this does not have to. It is not a
+     reading leading — a control's label is one line, and 1.2 leaves every size
+     at every density inside its own height with room to spare. The test in
+     `tokens.test.ts` is what keeps that true. */
+  --control-lh: 1.2;
   --control-gap: 0.625rem;
   /* Text inputs are measured separately: they are read as much as they are
      hit, so their padding tracks the type rather than the target. */
@@ -364,6 +416,55 @@
      zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole
      declaration is dropped and every column loses its gutter in silence. */
   --table-pad-x: 0px;
+}
+:root {
+  /* ─── Sidebar ────────────────────────────────────────────────────────────
+     The two widths a navigation rail has, and the reason they are tokens
+     rather than numbers inside the component: an application shell has to
+     reserve exactly this much beside its content, and a shell that hard-codes
+     17rem while the rail believes something else is a gap or an overlap that
+     appears only at one window size. Both sides read the same name.
+     `--sidebar-w-icon` is what is left when the rail collapses to icons. It is
+     `--control-h-md` plus the rail's own padding, so a 44px pointer target
+     still fits inside it at comfortable density — a collapsed rail whose rows
+     are too small to hit is a rail nobody can use in the state it spends most
+     of its life in. */
+  --sidebar-w: 16rem;
+  --sidebar-w-icon: 3.5rem;
+  /* ─── Bar ────────────────────────────────────────────────────────────────
+     How tall the band across the top of an application is — the masthead, and
+     the head of the rail beside it, which has to line up with it or the two
+     rules meeting at the corner are two different rules.
+     Derived, not typed. A bar is a row of controls and the air around them, so
+     it is the control it seats plus six pixels above and below — the same
+     twelve `--sidebar-w-icon` adds to a rail's collapsed width, for the same
+     reason.
+     WHICH control depends on the pointer, and that is the whole of the second
+     block. A bar is chrome: its controls are `sm`, the density this system
+     documents as a deliberate below-the-floor size for a mouse. A finger is
+     not a mouse, so on a coarse pointer they grow to the 44px target WCAG
+     2.5.5 asks for, and the bar has to grow with them or it clips what it
+     seats. Sizing it from `--control-h-md` on both is what made it too tall:
+     56px of bar around 39px of search field, holding room for a target that is
+     not on screen when a mouse is.
+     48px comfortable / 42px compact with a pointer, 56px / 48px with a finger.
+     A bar cannot be set to a height its own controls do not fit in.
+     It was five literals before, in two packages, and they did not agree:
+     `AppShell` said `h-14` and the documentation site said `h-16`, so the same
+     role was 56px in the component this system ships and 64px on the site
+     documenting it. `--scroll-offset` in `semantic.css` is a sixth, and the
+     one that shows why this matters — it is "a masthead plus a line of air"
+     and was written as `88px`, a number derived by hand from whichever of the
+     two answers its author had on screen. It now derives from this. */
+  --bar-h: calc(var(--control-h-sm) + 0.75rem);
   /* ─── Floating surfaces ──────────────────────────────────────────────────
      What a panel that FLOATS fills with, and what it does to whatever is
@@ -385,6 +486,16 @@
   --panel-border: var(--rule-2);
   --panel-filter: none;
+  /* The offset under a floating panel, and it does not break Law 2: the law
+     says a box-shadow is never BLURRED, not that there is never one. This is
+     the same hard-offset idiom as `--lift`, in the rule colour rather than the
+     accent — every menu in the system wearing a clay drop shadow would be a
+     louder claim than "this sits above the page".
+     Two steps, because one reads as a second border: a firm edge just below the
+     panel and a softer one below that is a stack seen from the front, which is
+     the flattest way to say depth without drawing light. */
+  --panel-lift: 0 2px 0 0 var(--rule-2), 0 5px 0 -1px var(--rule);
   /* ─── Motion ─── */
   --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
   --fast: 0.13s;
@@ -449,6 +560,24 @@
   --scrim: color-mix(in srgb, #000 72%, transparent);
 }
+/* The bar, on a finger.
+ *
+ * A bar's controls are `sm` — the size this system documents as a deliberate
+ * below-the-floor density for a mouse — and a coarse pointer grows them to the
+ * 44px target WCAG 2.5.5 asks for. The bar grows with them, or it clips what it
+ * seats. Declared on the ROOT like the base value, so the substitution argument
+ * above still holds: one answer, resolved once, inherited by a rail that pins
+ * its own density.
+ */
+@media (pointer: coarse) {
+  :root,
+  [data-mode='light'],
+  [data-surface='paper'],
+  [data-rules='hairline'] {
+    --bar-h: calc(var(--control-h-md) + 0.75rem);
+  }
+}
 [data-density='compact'] {
   --control-h-sm: 1.875rem; /* 30px */
   --control-h-md: 2.25rem; /* 36px — clears WCAG 2.5.8, not 2.5.5 */

package/dist/tokens.d.ts CHANGED Viewed

@@ -23,6 +23,7 @@ export type TokenName =
   | 'background-elevated'
   | 'bar'
   | 'bar-2'
+  | 'bar-h'
   | 'border-color'
   | 'border-subtle'
   | 'brand-plate'
@@ -45,6 +46,7 @@ export type TokenName =
   | 'control-h-lg'
   | 'control-h-md'
   | 'control-h-sm'
+  | 'control-lh'
   | 'control-px-lg'
   | 'control-px-md'
   | 'control-px-sm'
@@ -125,6 +127,7 @@ export type TokenName =
   | 'panel-bg'
   | 'panel-border'
   | 'panel-filter'
+  | 'panel-lift'
   | 'paper'
   | 'paper-2'
   | 'photo-caption-surface'
@@ -169,6 +172,8 @@ export type TokenName =
   | 'shadow-lg'
   | 'shadow-offset'
   | 'shadow-sm'
+  | 'sidebar-w'
+  | 'sidebar-w-icon'
   | 'slow'
   | 'stone'
   | 'success'

package/dist/tokens.js CHANGED Viewed

@@ -172,7 +172,7 @@ export const TOKENS = {
     "layer": "tokens",
     "category": "data",
     "light": "#101010",
-    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds.",
+    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds — or `\"accent\"`, which ladders the same eight names out of `--clay` when what the charts have to carry is a brand rather than eight categories.",
     "dark": "CanvasText"
   },
   "series-2": {
@@ -441,6 +441,12 @@ export const TOKENS = {
     "category": "density",
     "light": "0.75rem"
   },
+  "control-lh": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1.2",
+    "comment": "And so is the LEADING, which is the term that guard was missing. `min-height` is a floor, and what has to stay under it is the whole box: the line, the padding and the border. The padding was scaled and the line was left inheriting the body's 1.6 — so `sm` measured 20.8 + 16 + 2 = 38.8 against a 36px token, `md` 46 against 44 and `lg` 50 against 48. Every text button in the system was two to three pixels taller than the number documenting it, and the floor never bound because the box had already cleared it. One value on both densities: the font sizes do not move with density, only the padding and the heights do, so this does not have to. It is not a reading leading — a control's label is one line, and 1.2 leaves every size at every density inside its own height with room to spare. The test in `tokens.test.ts` is what keeps that true."
+  },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
@@ -469,6 +475,22 @@ export const TOKENS = {
     "light": "0px",
     "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
   },
+  "sidebar-w": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "16rem",
+    "comment": "─── Sidebar ──────────────────────────────────────────────────────────── The two widths a navigation rail has, and the reason they are tokens rather than numbers inside the component: an application shell has to reserve exactly this much beside its content, and a shell that hard-codes 17rem while the rail believes something else is a gap or an overlap that appears only at one window size. Both sides read the same name. `--sidebar-w-icon` is what is left when the rail collapses to icons. It is `--control-h-md` plus the rail's own padding, so a 44px pointer target still fits inside it at comfortable density — a collapsed rail whose rows are too small to hit is a rail nobody can use in the state it spends most of its life in."
+  },
+  "sidebar-w-icon": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "3.5rem"
+  },
+  "bar-h": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "calc(var(--control-h-md) + 0.75rem)"
+  },
   "panel-bg": {
     "layer": "tokens",
     "category": "other",
@@ -485,6 +507,12 @@ export const TOKENS = {
     "category": "other",
     "light": "none"
   },
+  "panel-lift": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0 2px 0 0 var(--rule-2), 0 5px 0 -1px var(--rule)",
+    "comment": "The offset under a floating panel, and it does not break Law 2: the law says a box-shadow is never BLURRED, not that there is never one. This is the same hard-offset idiom as `--lift`, in the rule colour rather than the accent — every menu in the system wearing a clay drop shadow would be a louder claim than \"this sits above the page\". Two steps, because one reads as a second border: a firm edge just below the panel and a softer one below that is a stack seen from the front, which is the flattest way to say depth without drawing light."
+  },
   "ease": {
     "layer": "tokens",
     "category": "motion",
@@ -991,7 +1019,7 @@ export const TOKENS = {
   "scroll-offset": {
     "layer": "semantic",
     "category": "space",
-    "light": "88px",
-    "comment": "How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air."
+    "light": "calc(var(--bar-h) + 1.5rem)",
+    "comment": "How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air. Both halves are now named: the masthead is `--bar-h`, so a bar that moves takes its anchors with it, where `88px` was a number somebody derived once by hand and nothing kept in step."
   }
 }

package/dist/tokens.json CHANGED Viewed

@@ -171,7 +171,7 @@
     "layer": "tokens",
     "category": "data",
     "light": "#101010",
-    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds.",
+    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds — or `\"accent\"`, which ladders the same eight names out of `--clay` when what the charts have to carry is a brand rather than eight categories.",
     "dark": "CanvasText"
   },
   "series-2": {
@@ -440,6 +440,12 @@
     "category": "density",
     "light": "0.75rem"
   },
+  "control-lh": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1.2",
+    "comment": "And so is the LEADING, which is the term that guard was missing. `min-height` is a floor, and what has to stay under it is the whole box: the line, the padding and the border. The padding was scaled and the line was left inheriting the body's 1.6 — so `sm` measured 20.8 + 16 + 2 = 38.8 against a 36px token, `md` 46 against 44 and `lg` 50 against 48. Every text button in the system was two to three pixels taller than the number documenting it, and the floor never bound because the box had already cleared it. One value on both densities: the font sizes do not move with density, only the padding and the heights do, so this does not have to. It is not a reading leading — a control's label is one line, and 1.2 leaves every size at every density inside its own height with room to spare. The test in `tokens.test.ts` is what keeps that true."
+  },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
@@ -468,6 +474,22 @@
     "light": "0px",
     "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
   },
+  "sidebar-w": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "16rem",
+    "comment": "─── Sidebar ──────────────────────────────────────────────────────────── The two widths a navigation rail has, and the reason they are tokens rather than numbers inside the component: an application shell has to reserve exactly this much beside its content, and a shell that hard-codes 17rem while the rail believes something else is a gap or an overlap that appears only at one window size. Both sides read the same name. `--sidebar-w-icon` is what is left when the rail collapses to icons. It is `--control-h-md` plus the rail's own padding, so a 44px pointer target still fits inside it at comfortable density — a collapsed rail whose rows are too small to hit is a rail nobody can use in the state it spends most of its life in."
+  },
+  "sidebar-w-icon": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "3.5rem"
+  },
+  "bar-h": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "calc(var(--control-h-md) + 0.75rem)"
+  },
   "panel-bg": {
     "layer": "tokens",
     "category": "other",
@@ -484,6 +506,12 @@
     "category": "other",
     "light": "none"
   },
+  "panel-lift": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0 2px 0 0 var(--rule-2), 0 5px 0 -1px var(--rule)",
+    "comment": "The offset under a floating panel, and it does not break Law 2: the law says a box-shadow is never BLURRED, not that there is never one. This is the same hard-offset idiom as `--lift`, in the rule colour rather than the accent — every menu in the system wearing a clay drop shadow would be a louder claim than \"this sits above the page\". Two steps, because one reads as a second border: a firm edge just below the panel and a softer one below that is a stack seen from the front, which is the flattest way to say depth without drawing light."
+  },
   "ease": {
     "layer": "tokens",
     "category": "motion",
@@ -990,7 +1018,7 @@
   "scroll-offset": {
     "layer": "semantic",
     "category": "space",
-    "light": "88px",
-    "comment": "How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air."
+    "light": "calc(var(--bar-h) + 1.5rem)",
+    "comment": "How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air. Both halves are now named: the masthead is `--bar-h`, so a bar that moves takes its anchors with it, where `88px` was a number somebody derived once by hand and nothing kept in step."
   }
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@misoto22/design",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",

package/skills/misoto22-design/rules/forms.md CHANGED Viewed

@@ -89,7 +89,9 @@ and nothing is wired — the label points at an id that is on nothing.
 | Boolean, applied immediately | `Switch` | |
 | One of 2–7 visible options | `RadioGroup` + `RadioGroupItem` | |
 | One of 2–7, as a toolbar | `ToggleGroup` + `ToggleGroupItem` | |
-| A number in a range | `Slider` | |
+| A number in a range | `Slider` | `editable` adds a box to type the exact figure into |
+| A number that is tuned | `NumberField` | Drag the grip to sweep; `min`/`max`/`step` are honoured on the way out |
+| A colour | `ColorPicker` | OKLCH panel; `label` is **required** |
 | A date | `DatePicker` / `DateRangePicker` | |
 `Select` and `Combobox` take `label` even inside a `Field` — it is the