@misoto22/design 0.8.0 → 0.9.0

package/dist/tokens.json

@@ -468,6 +468,17 @@
     "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"
+  },
   "panel-bg": {
     "layer": "tokens",
     "category": "other",
@@ -484,6 +495,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",

package/package.json

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

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

@@ -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