@duro-app/cli 5.5.0 → 5.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/cli",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "type": "module",
   "license": "MIT",
   "description": "Machine-queryable docs for the Duro design system: components, props, recipes, tokens and rules as CLI output, JSON, or an MCP server.",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": ">=1.0.0",
-    "@duro-app/ui": "^5.5.0"
+    "@duro-app/ui": "^5.7.0"
   },
   "peerDependenciesMeta": {
     "@duro-app/ui": {
@@ -60,9 +60,9 @@
     "@types/node": "^24.0.0",
     "ts-morph": "^26.0.0",
     "typescript": "^5.7.0",
-    "@duro-app/eslint-plugin": "^5.5.0",
-    "@duro-app/tokens": "^5.5.0",
-    "@duro-app/ui": "^5.5.0"
+    "@duro-app/tokens": "^5.7.0",
+    "@duro-app/eslint-plugin": "^5.7.0",
+    "@duro-app/ui": "^5.7.0"
   },
   "scripts": {
     "registry": "node scripts/build-registry.mjs",

package/registry.json

@@ -1947,14 +1947,17 @@
       "kind": "compound",
       "meta": {
         "anatomy": {
+          "optional": [
+            "Handle"
+          ],
           "required": [
             "Root",
             "Zone",
             "Item"
           ]
         },
-        "description": "Move items between zones with one pointer — mouse, pen and touch through the same pointer-event path (touch holds briefly, then drags; a moving touch stays a scroll). A ghost follows the pointer, the zone under it lights up, and the Root announces picks and drops to screen readers. Dragging is pointer-only by design: keep a button or remove affordance that does the same thing.",
-        "example": "<DragDrop.Root onDrop={({item, target}) => move(item.id, target.zone, target.index)}>\n  <DragDrop.Zone id=\"roster\" label=\"Roster\">\n    <Cluster gap=\"sm\">\n      {people.map((p) => (\n        <DragDrop.Item key={p.id} id={p.id} zone=\"roster\" label={p.name} data={p}>\n          <Button variant=\"secondary\" size=\"small\" onClick={() => slot(p)}>{p.name}</Button>\n        </DragDrop.Item>\n      ))}\n    </Cluster>\n  </DragDrop.Zone>\n  <DragDrop.Zone id=\"gates\" label=\"Gates\" orientation=\"horizontal\">\n    <Inline gap=\"sm\">\n      {gates.map((g) => (\n        <DragDrop.Item key={g.id} id={g.id} zone=\"gates\" label={g.name} data={g}>\n          <Tag removable onRemove={() => unslot(g)}>{g.name}</Tag>\n        </DragDrop.Item>\n      ))}\n    </Inline>\n  </DragDrop.Zone>\n</DragDrop.Root>",
+        "description": "Move items between zones by pointer (mouse, pen and touch through one pointer-event path; touch holds briefly, then drags) or by keyboard (a Handle per item: Space picks up, arrows move, Space drops, Escape cancels). The innermost accepting zone wins, so a zone nested in an Item (a card in a column) takes its own drops; a zone can refuse with a reason that is shown and announced. Placeholders, edge auto-scroll and list-style announcements (through `announce`, for catalog strings) come with it.",
+        "example": "<DragDrop.Root\n  onDrop={({item, target}) => move(item.id, target.zone, target.index)}\n  renderPlaceholder={({label}) => <Text variant=\"caption\">→ {label}</Text>}\n  announce={(e) => t(`board.drag.${e.kind}`, e)}\n>\n  {columns.map((col) => (\n    <DragDrop.Zone key={col.id} id={col.id} label={col.name} orientation=\"vertical\" list\n      accepts={(item) => item.data.kind === 'task' || {ok: false, reason: t('board.attachOnCard')}}>\n      {col.cards.map((card) => (\n        <DragDrop.Item key={card.id} id={card.id} zone={col.id} label={card.title} data={card}>\n          <DragDrop.Handle>\n            <DragDrop.Zone id={`attach:${card.id}`} label={card.title}\n              accepts={(item) => item.data.kind === 'activity'}>\n              <Card>{card.title}</Card>\n            </DragDrop.Zone>\n          </DragDrop.Handle>\n        </DragDrop.Item>\n      ))}\n    </DragDrop.Zone>\n  ))}\n</DragDrop.Root>",
         "relatedTo": [
           {
             "component": "Tag",
@@ -1968,18 +1971,36 @@
           }
         ],
         "whenNotToUse": [
-          "As the ONLY way to do something — every drag needs a tap/click equivalent (WCAG 2.5.7); this component does not provide one",
-          "Long lists that scroll while dragging — the ghost follows the pointer but zones do not auto-scroll",
+          "As the ONLY way to do something — WCAG 2.5.7 asks for a single-pointer alternative to dragging (a button or menu that moves the item); a Handle adds the keyboard path, not a click one",
           "Sorting tabular data — sort the Table instead",
           "React Native — Item renders its children without drag behaviour there"
         ],
         "whenToUse": [
           "Slotting things into places — people into approval gates, cards into columns, files into folders",
-          "Reordering a short row or list when the order is visible and meaningful"
+          "Reordering a short row or list when the order is visible and meaningful",
+          "A board: columns as labelled lists (`list`), cards with a Handle, an attach zone nested in each card"
         ]
       },
       "name": "DragDrop",
       "parts": {
+        "Handle": {
+          "name": "Handle",
+          "props": [
+            {
+              "description": "Defaults to the Item's label.",
+              "name": "aria-label",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "What the handle shows: a grip, or the item's whole face. Keep other controls out of it — a handle is one widget.",
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
+        },
         "Item": {
           "name": "Item",
           "props": [
@@ -1995,7 +2016,7 @@
               "type": "string"
             },
             {
-              "description": "Read to screen readers when picked up or dropped.",
+              "description": "Read to screen readers when picked up or dropped; a Handle's default accessible name.",
               "name": "label",
               "required": true,
               "type": "string"
@@ -2030,16 +2051,35 @@
           "name": "Root",
           "props": [
             {
-              "description": "Called when an item is released over a zone that accepts it. Reordering inside the item's own zone arrives here too, with the new index.",
+              "description": "Called when an item is released over a zone that accepts it (or dropped with Space/Enter). Reordering inside the item's own zone arrives here too, with the new index.",
               "name": "onDrop",
               "required": true,
               "type": "(event: DragDropEvent<T>) => void"
             },
             {
-              "description": "Overrides the default screen-reader announcements.",
+              "description": "Called whenever the target under the drag changes — a new zone or index, nothing, or a refusal.",
+              "name": "onDragOver",
+              "required": false,
+              "type": "(event: DragDropOverEvent<T>) => void"
+            },
+            {
+              "description": "Supplies every live-region string (pick, move, drop, cancel, refuse), e.g. from the app's message catalog. Defaults to English.",
               "name": "announce",
               "required": false,
-              "type": "(event: {kind: 'pick' | 'drop' | 'cancel'; item: string; zone?: string}) => string"
+              "type": "(event: DragDropAnnouncement) => string"
+            },
+            {
+              "description": "What marks the insertion point in a zone while dragging; a Zone's own renderPlaceholder wins. Without one, only the zone lights up.",
+              "name": "renderPlaceholder",
+              "required": false,
+              "type": "DragDropRenderPlaceholder"
+            },
+            {
+              "default": "DEFAULT_INSTRUCTIONS",
+              "description": "Read by screen readers on a focused Handle.",
+              "name": "instructions",
+              "required": false,
+              "type": "string"
             },
             {
               "name": "children",
@@ -2058,7 +2098,7 @@
               "type": "string"
             },
             {
-              "description": "Read to screen readers when an item is dropped here.",
+              "description": "Read to screen readers when an item moves or drops here; the list's accessible name with `list`.",
               "name": "label",
               "required": true,
               "type": "string"
@@ -2071,10 +2111,53 @@
               "type": "'horizontal' | 'vertical'"
             },
             {
-              "description": "Refuse an item; the zone then never lights up for it.",
+              "description": "Take the item (`true`), let it pass to an outer zone (`false`), or refuse it with a reason that is shown and announced (`{ok: false, reason}`). Omitted: every item is taken.",
               "name": "accepts",
               "required": false,
-              "type": "(item: DragDropItemData<T>) => boolean"
+              "type": "(item: DragDropItemData<T>) => DragDropVerdict"
+            },
+            {
+              "description": "Keyboard order across zones (Left/Right); zones without one follow, in DOM order.",
+              "name": "order",
+              "required": false,
+              "type": "number"
+            },
+            {
+              "description": "Marks the insertion point in this zone; overrides the Root's.",
+              "name": "renderPlaceholder",
+              "required": false,
+              "type": "DragDropRenderPlaceholder"
+            },
+            {
+              "default": "false",
+              "description": "Render the zone as a labelled list (`role=\"list\"`) laid out along `orientation`, its Items as list items. Put the Items directly in it.",
+              "name": "list",
+              "required": false,
+              "type": "boolean"
+            },
+            {
+              "default": "'sm'",
+              "description": "Gap between the Items of a `list` zone.",
+              "name": "gap",
+              "required": false,
+              "type": "SpacingToken",
+              "union": [
+                "xs",
+                "sm",
+                "ms",
+                "md",
+                "lg",
+                "xl",
+                "xxl",
+                "xxxl"
+              ]
+            },
+            {
+              "default": "false",
+              "description": "Stretch to fill the parent (a Timeline bar, a card) instead of sizing to the content.",
+              "name": "fill",
+              "required": false,
+              "type": "boolean"
             },
             {
               "name": "children",
@@ -2572,7 +2655,15 @@
               "description": "Gap between child elements",
               "name": "gap",
               "required": false,
-              "type": "FieldsetGap"
+              "type": "FieldsetGap",
+              "union": [
+                "xs",
+                "sm",
+                "ms",
+                "md",
+                "lg",
+                "xl"
+              ]
             },
             {
               "name": "children",
@@ -3736,7 +3827,7 @@
             "Item"
           ]
         },
-        "description": "Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant=\"ghost\" suits toolbars. The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog.",
+        "description": "Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button; an icon-only trigger takes aria-label, and variant=\"ghost\" suits toolbars; size=\"small\" matches small Toggles and Buttons (a small ghost trigger is iconButtonSm). The popup is portalled and placed against the trigger (never clipped by a sticky or overflow ancestor), capped at sizes.listMaxH with scrolling, and takes focus on open (WAI-ARIA menu button); Escape closes only the menu, not an enclosing Popover or Dialog.",
         "example": "<Menu.Root>\n  <Menu.Trigger>Actions</Menu.Trigger>\n  <Menu.Popup>\n    <Menu.Item onClick={() => console.log('edit')}>Edit</Menu.Item>\n    <Menu.Item onClick={() => console.log('duplicate')}>Duplicate</Menu.Item>\n    <Menu.Separator />\n    <Menu.LinkItem href=\"/settings\">Settings</Menu.LinkItem>\n  </Menu.Popup>\n</Menu.Root>",
         "relatedTo": [
           {
@@ -3868,6 +3959,17 @@
               "required": false,
               "type": "MenuTriggerVariant"
             },
+            {
+              "default": "'default'",
+              "description": "`small` matches a small Toggle or Button beside it; a small ghost trigger is `iconButtonSm`. Default: `default`.",
+              "name": "size",
+              "required": false,
+              "type": "ControlSize",
+              "union": [
+                "default",
+                "small"
+              ]
+            },
             {
               "name": "ref",
               "required": false,
@@ -3880,6 +3982,78 @@
       "props": null,
       "sourcePath": "packages/ui/src/components/Menu/Menu.tsx"
     },
+    "Meter": {
+      "importPath": "@duro-app/ui",
+      "kind": "component",
+      "meta": {
+        "description": "A scalar inside a known range — WIP 2 of 3, a milestone 40% done — as role=\"meter\" with a value text, drawn as a thin bar (the meterH token). The label is the accessible name; valueText says the value in words.",
+        "example": "<Meter label=\"In progress WIP\" value={2} max={3} valueText=\"2 of 3\" />\n<Meter label=\"Milestone done\" value={0.4} tone=\"success\" />",
+        "relatedTo": [
+          {
+            "component": "Badge",
+            "kind": "contrast",
+            "relationship": "Badge states a status or a count; Meter shows a level within a range"
+          }
+        ],
+        "whenNotToUse": [
+          "Progress of a task that is still running — use Spinner (or a determinate progress pattern)",
+          "Picking a value — use an input; a meter has no thumb",
+          "A status with no range (ok/failing) — use Badge or StatusIcon"
+        ],
+        "whenToUse": [
+          "A level against a limit or a total: WIP against its limit, tasks done in a milestone, quota used",
+          "Beside a count, when the proportion matters more than the number"
+        ]
+      },
+      "name": "Meter",
+      "props": [
+        {
+          "name": "value",
+          "required": true,
+          "type": "number"
+        },
+        {
+          "default": "0",
+          "description": "Defaults to 0.",
+          "name": "min",
+          "required": false,
+          "type": "number"
+        },
+        {
+          "default": "1",
+          "description": "Defaults to 1, so a fraction needs nothing else.",
+          "name": "max",
+          "required": false,
+          "type": "number"
+        },
+        {
+          "description": "The accessible name, e.g. \"In progress WIP\".",
+          "name": "label",
+          "required": true,
+          "type": "string"
+        },
+        {
+          "description": "What screen readers read for the value, e.g. \"4 of 3, over the limit\". Defaults to the percentage.",
+          "name": "valueText",
+          "required": false,
+          "type": "string"
+        },
+        {
+          "default": "'accent'",
+          "description": "The fill's colour; defaults to accent.",
+          "name": "tone",
+          "required": false,
+          "type": "MeterTone",
+          "union": [
+            "accent",
+            "success",
+            "warning",
+            "error"
+          ]
+        }
+      ],
+      "sourcePath": "packages/ui/src/components/Meter/Meter.tsx"
+    },
     "Node": {
       "importPath": "@duro-app/diagrams",
       "kind": "component",
@@ -4265,7 +4439,7 @@
             "Popup"
           ]
         },
-        "description": "Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves.",
+        "description": "Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves. Popover.Trigger takes size=\"small\" beside small Toggles. Popover.Popup raised draws it over another floating surface (floatingRaised, popoverRaised in a modal), never over a modal.",
         "example": "const ref = useRef<PopoverHandle>(null)\nconst anchor = () => new DOMRect(point.x, point.y, 0, 0)\n\n<Popover.Root ref={ref} open={open} onOpenChange={setOpen} anchor={anchor} side=\"bottom\" align=\"start\">\n  <Popover.Popup label=\"Edit label\">\n    <Field.Root>\n      <Field.Label>Label</Field.Label>\n      <Input value={label} onChange={(e) => setLabel(e.target.value)} />\n    </Field.Root>\n    <Popover.Close>Done</Popover.Close>\n  </Popover.Popup>\n</Popover.Root>\n// after the anchor moves: ref.current?.reposition()",
         "relatedTo": [
           {
@@ -4314,6 +4488,7 @@
         "whenToUse": [
           "A small form or controls tied to one element that stay open while you work in them",
           "Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor",
+          "One floating surface over another (a link editor over a selection format bar) — Popover.Popup raised",
           "Holding a Select or Combobox: their portalled list counts as inside the popover, so choosing an item keeps it open; Escape closes an open Select, Combobox or Menu before the popover"
         ]
       },
@@ -4343,6 +4518,12 @@
               "name": "label",
               "required": true,
               "type": "string"
+            },
+            {
+              "description": "Draw over another floating surface: `layers.floatingRaised` outside a modal, `layers.popoverRaised` inside a Dialog or Drawer, instead of `floating` / `popover`. For one floating thing that must cover a sibling one (a link editor over a format bar), never for covering a modal: a Dialog opened later still covers it. A Popover nested inside a raised one is raised too. Default: inherited, else `false`.",
+              "name": "raised",
+              "required": false,
+              "type": "boolean"
             }
           ],
           "sourcePath": "packages/ui/src/components/Popover/Popover.tsx"
@@ -4417,6 +4598,17 @@
               "required": false,
               "type": "string"
             },
+            {
+              "default": "'default'",
+              "description": "`small` matches a small Toggle or Button beside it. Default: `default`.",
+              "name": "size",
+              "required": false,
+              "type": "ControlSize",
+              "union": [
+                "default",
+                "small"
+              ]
+            },
             {
               "description": "The trigger <button>, e.g. to measure it or return focus to it.",
               "name": "ref",
@@ -4669,7 +4861,7 @@
             "Item"
           ]
         },
-        "description": "Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it).",
+        "description": "Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size=\"small\" to match small Toggles and Buttons in a toolbar.",
         "example": "<Select.Root name=\"role\" defaultValue=\"viewer\">\n  <Select.Trigger>\n    <Select.Value placeholder=\"Select role\" />\n    <Select.Icon />\n  </Select.Trigger>\n  <Select.Popup>\n    <Select.Item value=\"admin\">Admin</Select.Item>\n    <Select.Item value=\"editor\">Editor</Select.Item>\n    <Select.Item value=\"viewer\">Viewer</Select.Item>\n  </Select.Popup>\n</Select.Root>",
         "relatedTo": [
           {
@@ -4797,6 +4989,17 @@
               "name": "aria-label",
               "required": false,
               "type": "string"
+            },
+            {
+              "default": "'default'",
+              "description": "`small` matches a small Toggle or Button beside it. Default: `default`.",
+              "name": "size",
+              "required": false,
+              "type": "ControlSize",
+              "union": [
+                "default",
+                "small"
+              ]
             }
           ],
           "sourcePath": "packages/ui/src/components/Select/Select.tsx"
@@ -5088,7 +5291,14 @@
         {
           "name": "name",
           "required": true,
-          "type": "StatusIconName"
+          "type": "StatusIconName",
+          "union": [
+            "x-circle",
+            "check-circle",
+            "check-done",
+            "clock",
+            "forbidden"
+          ]
         },
         {
           "default": "'xxl'",
@@ -6562,11 +6772,216 @@
       ],
       "sourcePath": "packages/ui/src/components/ThemeProvider/ThemeProvider.tsx"
     },
+    "Timeline": {
+      "importPath": "@duro-app/ui",
+      "kind": "compound",
+      "meta": {
+        "anatomy": {
+          "required": [
+            "Root",
+            "Row",
+            "Bar"
+          ]
+        },
+        "description": "Rows of date bars against a date axis (milestones, releases, sprints), with a progress fill per bar and a today marker. Dates are calendar days (YYYY-MM-DD, UTC). A bar is a toggle button (selected/onSelect), can be a DragDrop.Zone target (dropZone), and its edges are keyboard sliders whose value text is a date (onStartChange/onEndChange).",
+        "example": "<Timeline.Root aria-label=\"Milestones\" start=\"2026-09-21\" end=\"2026-11-08\" today=\"2026-10-08\">\n  {milestones.map((m) => (\n    <Timeline.Row key={m.id} label={m.title} description={`${m.done} of ${m.total} done`}>\n      <Timeline.Bar\n        label={m.title}\n        start={m.start}\n        end={m.end}\n        progress={m.done / m.total}\n        selected={selected === m.id}\n        onSelect={() => select(m.id)}\n        onEndChange={(end) => reschedule(m.id, {end})}\n        dropZone={{id: `ms:${m.id}`, label: m.title}}\n      >\n        {m.done}/{m.total}\n      </Timeline.Bar>\n    </Timeline.Row>\n  ))}\n</Timeline.Root>",
+        "relatedTo": [
+          {
+            "component": "DragDrop",
+            "kind": "composition",
+            "relationship": "Pass dropZone to make a bar a DragDrop.Zone inside a DragDrop.Root"
+          },
+          {
+            "component": "Meter",
+            "kind": "contrast",
+            "relationship": "Meter shows one level; Timeline places spans of time"
+          }
+        ],
+        "whenNotToUse": [
+          "A schedule by hour — a calendar grid fits (timeGutterW, dayHeaderH)",
+          "A dependency graph or a full Gantt chart with links — this draws bars, not edges",
+          "Moving dates with the pointer — edges are keyboard sliders; give a date field for the rest"
+        ],
+        "whenToUse": [
+          "Milestones or releases over weeks, where the overlap and today matter",
+          "Dropping work onto a milestone (bars as DragDrop zones)"
+        ]
+      },
+      "name": "Timeline",
+      "parts": {
+        "Bar": {
+          "name": "Bar",
+          "props": [
+            {
+              "name": "start",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "name": "end",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "The bar's accessible name.",
+              "name": "label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "Done fraction, 0–1, drawn as a fill from the start edge.",
+              "name": "progress",
+              "required": false,
+              "type": "number"
+            },
+            {
+              "default": "'default'",
+              "description": "`planned` draws a dashed outline; `done` the success tone.",
+              "name": "tone",
+              "required": false,
+              "type": "'default' | 'planned' | 'done'"
+            },
+            {
+              "description": "Makes the bar a toggle button (aria-pressed).",
+              "name": "selected",
+              "required": false,
+              "type": "boolean"
+            },
+            {
+              "name": "onSelect",
+              "required": false,
+              "type": "() => void"
+            },
+            {
+              "description": "Adds the start-edge slider.",
+              "name": "onStartChange",
+              "required": false,
+              "type": "(date: TimelineDate) => void"
+            },
+            {
+              "description": "Adds the end-edge slider.",
+              "name": "onEndChange",
+              "required": false,
+              "type": "(date: TimelineDate) => void"
+            },
+            {
+              "description": "Names of the edge sliders; default \"<label>, start\" / \"<label>, end\".",
+              "name": "startLabel",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "name": "endLabel",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "Makes the bar a DragDrop.Zone (needs a DragDrop.Root above).",
+              "name": "dropZone",
+              "required": false,
+              "type": "TimelineBarDropZone<T>"
+            },
+            {
+              "description": "Text inside the bar, e.g. \"4/7\".",
+              "name": "children",
+              "required": false,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+        },
+        "Root": {
+          "name": "Root",
+          "props": [
+            {
+              "description": "First day on the axis.",
+              "name": "start",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "Last day on the axis (included).",
+              "name": "end",
+              "required": true,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "Draws the today marker when inside the range.",
+              "name": "today",
+              "required": false,
+              "type": "TimelineDate"
+            },
+            {
+              "description": "The timeline's accessible name.",
+              "name": "aria-label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "Text above the row labels, e.g. \"Milestones\".",
+              "name": "heading",
+              "required": false,
+              "type": "ReactNode"
+            },
+            {
+              "default": "'Today'",
+              "description": "The today marker's text.",
+              "name": "todayLabel",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "BCP 47 locale for the default date format.",
+              "name": "locale",
+              "required": false,
+              "type": "string"
+            },
+            {
+              "description": "Formats a day for the axis and the edge sliders' value text.",
+              "name": "formatDate",
+              "required": false,
+              "type": "(date: TimelineDate) => string"
+            },
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+        },
+        "Row": {
+          "name": "Row",
+          "props": [
+            {
+              "description": "The row's name, shown in the label column.",
+              "name": "label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "A second line under the label, e.g. \"4 of 7 done\".",
+              "name": "description",
+              "required": false,
+              "type": "ReactNode"
+            },
+            {
+              "name": "children",
+              "required": false,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+        }
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/Timeline/Timeline.tsx"
+    },
     "ToastProvider": {
       "importPath": "@duro-app/ui",
       "kind": "provider",
       "meta": {
-        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs.",
+        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it).",
         "example": "function Example() {\n  const {toast} = useToast()\n  return (\n    <Button onClick={() => toast({variant: 'success', message: 'Grant revoked', action: {label: 'Undo', onClick: restore}})}>\n      Revoke\n    </Button>\n  )\n}",
         "relatedTo": [
           {
@@ -6588,11 +7003,19 @@
         "whenToUse": [
           "Confirming an action succeeded (e.g. \"Grant revoked\")",
           "Reporting an action failed, with the reason",
-          "Reversible actions that benefit from an inline Undo"
+          "Reversible actions that benefit from an inline Undo",
+          "A soft limit crossed but allowed (variant warning), e.g. a column over its WIP limit"
         ]
       },
       "name": "ToastProvider",
       "props": [
+        {
+          "default": "'Dismiss'",
+          "description": "Accessible name of each toast's close button, e.g. from the app's message catalog.",
+          "name": "dismissLabel",
+          "required": false,
+          "type": "string"
+        },
         {
           "name": "children",
           "required": true,
@@ -7364,14 +7787,17 @@
       "kind": "hook",
       "meta": {
         "anatomy": {
+          "optional": [
+            "Handle"
+          ],
           "required": [
             "Root",
             "Zone",
             "Item"
           ]
         },
-        "description": "Move items between zones with one pointer — mouse, pen and touch through the same pointer-event path (touch holds briefly, then drags; a moving touch stays a scroll). A ghost follows the pointer, the zone under it lights up, and the Root announces picks and drops to screen readers. Dragging is pointer-only by design: keep a button or remove affordance that does the same thing.",
-        "example": "<DragDrop.Root onDrop={({item, target}) => move(item.id, target.zone, target.index)}>\n  <DragDrop.Zone id=\"roster\" label=\"Roster\">\n    <Cluster gap=\"sm\">\n      {people.map((p) => (\n        <DragDrop.Item key={p.id} id={p.id} zone=\"roster\" label={p.name} data={p}>\n          <Button variant=\"secondary\" size=\"small\" onClick={() => slot(p)}>{p.name}</Button>\n        </DragDrop.Item>\n      ))}\n    </Cluster>\n  </DragDrop.Zone>\n  <DragDrop.Zone id=\"gates\" label=\"Gates\" orientation=\"horizontal\">\n    <Inline gap=\"sm\">\n      {gates.map((g) => (\n        <DragDrop.Item key={g.id} id={g.id} zone=\"gates\" label={g.name} data={g}>\n          <Tag removable onRemove={() => unslot(g)}>{g.name}</Tag>\n        </DragDrop.Item>\n      ))}\n    </Inline>\n  </DragDrop.Zone>\n</DragDrop.Root>",
+        "description": "Move items between zones by pointer (mouse, pen and touch through one pointer-event path; touch holds briefly, then drags) or by keyboard (a Handle per item: Space picks up, arrows move, Space drops, Escape cancels). The innermost accepting zone wins, so a zone nested in an Item (a card in a column) takes its own drops; a zone can refuse with a reason that is shown and announced. Placeholders, edge auto-scroll and list-style announcements (through `announce`, for catalog strings) come with it.",
+        "example": "<DragDrop.Root\n  onDrop={({item, target}) => move(item.id, target.zone, target.index)}\n  renderPlaceholder={({label}) => <Text variant=\"caption\">→ {label}</Text>}\n  announce={(e) => t(`board.drag.${e.kind}`, e)}\n>\n  {columns.map((col) => (\n    <DragDrop.Zone key={col.id} id={col.id} label={col.name} orientation=\"vertical\" list\n      accepts={(item) => item.data.kind === 'task' || {ok: false, reason: t('board.attachOnCard')}}>\n      {col.cards.map((card) => (\n        <DragDrop.Item key={card.id} id={card.id} zone={col.id} label={card.title} data={card}>\n          <DragDrop.Handle>\n            <DragDrop.Zone id={`attach:${card.id}`} label={card.title}\n              accepts={(item) => item.data.kind === 'activity'}>\n              <Card>{card.title}</Card>\n            </DragDrop.Zone>\n          </DragDrop.Handle>\n        </DragDrop.Item>\n      ))}\n    </DragDrop.Zone>\n  ))}\n</DragDrop.Root>",
         "relatedTo": [
           {
             "component": "Tag",
@@ -7385,20 +7811,28 @@
           }
         ],
         "whenNotToUse": [
-          "As the ONLY way to do something — every drag needs a tap/click equivalent (WCAG 2.5.7); this component does not provide one",
-          "Long lists that scroll while dragging — the ghost follows the pointer but zones do not auto-scroll",
+          "As the ONLY way to do something — WCAG 2.5.7 asks for a single-pointer alternative to dragging (a button or menu that moves the item); a Handle adds the keyboard path, not a click one",
           "Sorting tabular data — sort the Table instead",
           "React Native — Item renders its children without drag behaviour there"
         ],
         "whenToUse": [
           "Slotting things into places — people into approval gates, cards into columns, files into folders",
-          "Reordering a short row or list when the order is visible and meaningful"
+          "Reordering a short row or list when the order is visible and meaningful",
+          "A board: columns as labelled lists (`list`), cards with a Handle, an attach zone nested in each card"
         ]
       },
       "name": "useDragDrop",
       "props": [],
       "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
     },
+    "useInModal": {
+      "importPath": "@duro-app/ui",
+      "kind": "hook",
+      "meta": null,
+      "name": "useInModal",
+      "props": [],
+      "sourcePath": "packages/ui/src/shared/ModalContext.ts"
+    },
     "usePortalMount": {
       "importPath": "@duro-app/ui",
       "kind": "hook",
@@ -7421,7 +7855,7 @@
       "importPath": "@duro-app/ui",
       "kind": "hook",
       "meta": {
-        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs.",
+        "description": "Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it).",
         "example": "function Example() {\n  const {toast} = useToast()\n  return (\n    <Button onClick={() => toast({variant: 'success', message: 'Grant revoked', action: {label: 'Undo', onClick: restore}})}>\n      Revoke\n    </Button>\n  )\n}",
         "relatedTo": [
           {
@@ -7443,7 +7877,8 @@
         "whenToUse": [
           "Confirming an action succeeded (e.g. \"Grant revoked\")",
           "Reporting an action failed, with the reason",
-          "Reversible actions that benefit from an inline Undo"
+          "Reversible actions that benefit from an inline Undo",
+          "A soft limit crossed but allowed (variant warning), e.g. a column over its WIP limit"
         ]
       },
       "name": "useToast",
@@ -8385,6 +8820,10 @@
             "key": "floating",
             "value": "50"
           },
+          {
+            "key": "floatingRaised",
+            "value": "60"
+          },
           {
             "key": "overlay",
             "value": "1000"
@@ -8401,6 +8840,10 @@
             "key": "popover",
             "value": "1040"
           },
+          {
+            "key": "popoverRaised",
+            "value": "1041"
+          },
           {
             "key": "popupBackdrop",
             "value": "1049"
@@ -8932,6 +9375,10 @@
           {
             "key": "dayHeaderH",
             "value": "46px"
+          },
+          {
+            "key": "timelineLabelW",
+            "value": "180px"
           }
         ],
         "exportName": "sizes",
@@ -9082,7 +9529,7 @@
         "importPath": "@duro-app/tokens/tokens/typography.css"
       }
     },
-    "mockupCss": "/*\n * GENERATED by scripts/generate-mockup-css.mjs — do not edit.\n *\n * The design tokens as resolved values, for HTML that loads no stylesheet\n * (mockup artboards, static previews). Same names as vars.css; where vars.css\n * follows the live theme, this file carries every theme and switches on\n * <html data-theme=\"light|high-contrast\">.\n *\n * Inside the component library and the apps, never use this: go through\n * css.create() and the token imports, or vars.css from plain CSS.\n */\n:root {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #6aaffc;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #0f0f0f;\n  --duro-color-bg-card: #1a1a1a;\n  --duro-color-bg-card-hover: #242424;\n  --duro-color-border: #333333;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #f5f5f5;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.1);\n  --duro-color-error-border: rgba(248, 113, 113, 0.3);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #c084fc;\n  --duro-color-highlight-bg: rgba(192, 132, 252, 0.1);\n  --duro-color-highlight-border: rgba(192, 132, 252, 0.3);\n  --duro-color-highlight-text: #d8b4fe;\n  --duro-color-info: #6aaffc;\n  --duro-color-info-bg: rgba(106, 175, 252, 0.1);\n  --duro-color-info-border: rgba(106, 175, 252, 0.3);\n  --duro-color-info-text: #93c5fd;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #1a1a1a;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #22c55e;\n  --duro-color-success-bg: rgba(34, 197, 94, 0.1);\n  --duro-color-success-border: rgba(34, 197, 94, 0.3);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #e5e5e5;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fbbf24;\n  --duro-color-warning-bg: rgba(251, 191, 36, 0.1);\n  --duro-color-warning-border: rgba(251, 191, 36, 0.3);\n  --duro-color-warning-text: #fde68a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #6aaffc;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #333333;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);\n  /* spacing */\n  --duro-spacing-lg: 24px;\n  --duro-spacing-md: 16px;\n  --duro-spacing-ms: 12px;\n  --duro-spacing-sm: 8px;\n  --duro-spacing-xl: 32px;\n  --duro-spacing-xs: 4px;\n  --duro-spacing-xxl: 48px;\n  --duro-spacing-xxxl: 64px;\n  /* microSpacing */\n  --duro-micro-spacing-px1: 1px;\n  --duro-micro-spacing-px2: 2px;\n  --duro-micro-spacing-px3: 3px;\n  --duro-micro-spacing-px5: 5px;\n  --duro-micro-spacing-px6: 6px;\n  /* radii */\n  --duro-radius-full: 9999px;\n  --duro-radius-lg: 16px;\n  --duro-radius-md: 12px;\n  --duro-radius-px6: 6px;\n  --duro-radius-sm: 8px;\n  --duro-radius-xs: 4px;\n  /* sizes */\n  --duro-size-aside-w: 320px;\n  --duro-size-bar-h: 4px;\n  --duro-size-canvas-min-h: 480px;\n  --duro-size-check-mark-h: 9px;\n  --duro-size-check-mark-w: 5px;\n  --duro-size-chip: 24px;\n  --duro-size-color-area-h: 150px;\n  --duro-size-color-picker-w: 196px;\n  --duro-size-color-preview-h: 22px;\n  --duro-size-color-swatch: 20px;\n  --duro-size-color-track-h: 12px;\n  --duro-size-control-lg: 40px;\n  --duro-size-control-md: 39px;\n  --duro-size-control-sm: 28px;\n  --duro-size-day-header-h: 46px;\n  --duro-size-device-bar-w: 96px;\n  --duro-size-dialog-lg: 680px;\n  --duro-size-dialog-md: 520px;\n  --duro-size-dialog-sm: 400px;\n  --duro-size-divider: 1px;\n  --duro-size-drop-zone-min-h: 128px;\n  --duro-size-edge-fade: 32px;\n  --duro-size-editor-min-h: 160px;\n  --duro-size-embed-w: 550px;\n  --duro-size-field-min-w: 160px;\n  --duro-size-field-min-w-sm: 80px;\n  --duro-size-glyph-md: 16px;\n  --duro-size-glyph-sm: 12px;\n  --duro-size-glyph-xs: 10px;\n  --duro-size-grid-col-md: 280px;\n  --duro-size-grid-col-sm: 240px;\n  --duro-size-grid-col-xs: 200px;\n  --duro-size-handle: 16px;\n  --duro-size-icon-button: 32px;\n  --duro-size-icon-button-sm: 28px;\n  --duro-size-icon-lg: 24px;\n  --duro-size-icon-md: 18px;\n  --duro-size-icon-sm: 16px;\n  --duro-size-icon-xl: 36px;\n  --duro-size-icon-xxl: 48px;\n  --duro-size-indicator: 18px;\n  --duro-size-indicator-dot: 8px;\n  --duro-size-label-min-w: 120px;\n  --duro-size-list-max-h: 280px;\n  --duro-size-list-max-h-sm: 200px;\n  --duro-size-meter-h: 6px;\n  --duro-size-nav-marker-h: 18px;\n  --duro-size-nav-marker-w: 3px;\n  --duro-size-page-lg: 1200px;\n  --duro-size-page-md: 800px;\n  --duro-size-page-sm: 600px;\n  --duro-size-page-xl: 1440px;\n  --duro-size-page-xs: 480px;\n  --duro-size-palette-min-w: 96px;\n  --duro-size-panel-lg: 640px;\n  --duro-size-panel-md: 480px;\n  --duro-size-panel-sm: 360px;\n  --duro-size-placeholder-min-h: 80px;\n  --duro-size-popover-w: 320px;\n  --duro-size-popover-w-sm: 240px;\n  --duro-size-popup-max-w: 280px;\n  --duro-size-popup-min-w: 160px;\n  --duro-size-preview-max-h: 320px;\n  --duro-size-readout-w: 40px;\n  --duro-size-scrollbar: 8px;\n  --duro-size-sidebar-w: 240px;\n  --duro-size-skeleton-chip-w: 96px;\n  --duro-size-slider-w: 96px;\n  --duro-size-spinner-lg: 40px;\n  --duro-size-spinner-md: 24px;\n  --duro-size-spinner-sm: 16px;\n  --duro-size-swatch-h: 34px;\n  --duro-size-swatch-w: 44px;\n  --duro-size-switch-thumb: 16px;\n  --duro-size-switch-track-h: 20px;\n  --duro-size-switch-track-w: 36px;\n  --duro-size-tab-indicator: 2px;\n  --duro-size-time-gutter-w: 64px;\n  --duro-size-toast-max-w: 440px;\n  --duro-size-toolbar-h: 36px;\n  --duro-size-touch-target: 44px;\n  /* borders */\n  --duro-border-accent: 3px;\n  --duro-border-focus-offset: 2px;\n  --duro-border-focus-offset-sm: 1px;\n  --duro-border-focus-ring: 2px;\n  --duro-border-hairline: 1px;\n  --duro-border-strong: 2px;\n  /* layers */\n  --duro-layer-floating: 50;\n  --duro-layer-modal: 1001;\n  --duro-layer-modal-raised: 1002;\n  --duro-layer-overlay: 1000;\n  --duro-layer-popover: 1040;\n  --duro-layer-popup: 1050;\n  --duro-layer-popup-backdrop: 1049;\n  --duro-layer-portal: 1100;\n  --duro-layer-raised: 1;\n  --duro-layer-toast: 1060;\n  /* effects */\n  --duro-effect-overlay-blur: blur(2px);\n  --duro-effect-surface-blur: blur(6px);\n  /* layoutSpacing */\n  --duro-layout-spacing-container-lg: 32px;\n  --duro-layout-spacing-container-md: 24px;\n  --duro-layout-spacing-container-sm: 16px;\n  --duro-layout-spacing-inline-lg: 24px;\n  --duro-layout-spacing-inline-md: 16px;\n  --duro-layout-spacing-inline-sm: 8px;\n  --duro-layout-spacing-inline-xs: 4px;\n  --duro-layout-spacing-stack-lg: 24px;\n  --duro-layout-spacing-stack-md: 16px;\n  --duro-layout-spacing-stack-sm: 8px;\n  --duro-layout-spacing-stack-xl: 48px;\n  --duro-layout-spacing-stack-xs: 4px;\n  /* typography */\n  --duro-typography-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  --duro-typography-font-family-mono: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace;\n  --duro-typography-font-size-heading: 1.5rem;\n  --duro-typography-font-size-lg: 1.125rem;\n  --duro-typography-font-size-md: 1rem;\n  --duro-typography-font-size-sm: 0.875rem;\n  --duro-typography-font-size-xl: 1.25rem;\n  --duro-typography-font-size-xs: 0.75rem;\n  --duro-typography-font-weight-bold: 700;\n  --duro-typography-font-weight-medium: 500;\n  --duro-typography-font-weight-normal: 400;\n  --duro-typography-font-weight-semibold: 600;\n  --duro-typography-line-height: 1.5;\n  /* typeScale */\n  --duro-type-scale-display-lg: clamp(3.5rem, 2rem + 3.5vw, 4.5rem);\n  --duro-type-scale-display-md: clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem);\n  --duro-type-scale-display-sm: clamp(2.25rem, 1.5rem + 2vw, 3rem);\n  --duro-type-scale-font-size1: 0.75rem;\n  --duro-type-scale-font-size2: 0.8125rem;\n  --duro-type-scale-font-size3: 0.875rem;\n  --duro-type-scale-font-size4: 1rem;\n  --duro-type-scale-font-size5: 1.125rem;\n  --duro-type-scale-font-size6: 1.25rem;\n  --duro-type-scale-font-size7: 1.5rem;\n  --duro-type-scale-font-size8: 1.875rem;\n  --duro-type-scale-font-size9: 2.25rem;\n  --duro-type-scale-letter-spacing-normal: 0;\n  --duro-type-scale-letter-spacing-tight: -0.02em;\n  --duro-type-scale-letter-spacing-wide: 0.04em;\n  --duro-type-scale-line-height1: 1rem;\n  --duro-type-scale-line-height2: 1.25rem;\n  --duro-type-scale-line-height3: 1.25rem;\n  --duro-type-scale-line-height4: 1.5rem;\n  --duro-type-scale-line-height5: 1.5rem;\n  --duro-type-scale-line-height6: 1.75rem;\n  --duro-type-scale-line-height7: 2rem;\n  --duro-type-scale-line-height8: 2.25rem;\n  --duro-type-scale-line-height9: 2.75rem;\n  /* duration */\n  --duro-duration-base: 200ms;\n  --duro-duration-brisk: 160ms;\n  --duro-duration-fast: 150ms;\n  --duro-duration-instant: 0ms;\n  --duro-duration-minimal: 1ms;\n  --duro-duration-quick: 120ms;\n  --duro-duration-slow: 280ms;\n  /* easing */\n  --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);\n  --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n  --duro-easing-linear: linear;\n  --duro-easing-standard: ease;\n  /* breakpoints */\n  --duro-breakpoint-lg: 1024px;\n  --duro-breakpoint-md: 768px;\n  --duro-breakpoint-sm: 640px;\n  --duro-breakpoint-xl: 1280px;\n  --duro-breakpoint-xs: 480px;\n}\n\n:root[data-theme=\"light\"] {\n  color-scheme: light;\n  /* colors */\n  --duro-color-accent: #1e40af;\n  --duro-color-accent-contrast: #ffffff;\n  --duro-color-accent-hover: #1a3799;\n  --duro-color-bg: #ffffff;\n  --duro-color-bg-card: #f5f5f5;\n  --duro-color-bg-card-hover: #ebebeb;\n  --duro-color-border: #d4d4d4;\n  --duro-color-contrast-border: rgba(255, 255, 255, 0.33);\n  --duro-color-contrast-surface: #1a1a1a;\n  --duro-color-error: #991b1b;\n  --duro-color-error-bg: rgba(153, 27, 27, 0.08);\n  --duro-color-error-border: rgba(153, 27, 27, 0.3);\n  --duro-color-error-contrast: #ffffff;\n  --duro-color-error-hover: #7f1d1d;\n  --duro-color-error-text: #7f1d1d;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #6b21a8;\n  --duro-color-highlight-bg: rgba(107, 33, 168, 0.08);\n  --duro-color-highlight-border: rgba(107, 33, 168, 0.3);\n  --duro-color-highlight-text: #581c87;\n  --duro-color-info: #1e40af;\n  --duro-color-info-bg: rgba(30, 64, 175, 0.08);\n  --duro-color-info-border: rgba(30, 64, 175, 0.3);\n  --duro-color-info-text: #1e40af;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #e5e5e5;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #166534;\n  --duro-color-success-bg: rgba(22, 101, 52, 0.08);\n  --duro-color-success-border: rgba(22, 101, 52, 0.3);\n  --duro-color-success-text: #14532d;\n  --duro-color-text: #1a1a1a;\n  --duro-color-text-muted: #4a4a4a;\n  --duro-color-warning: #92400e;\n  --duro-color-warning-bg: rgba(146, 64, 14, 0.08);\n  --duro-color-warning-border: rgba(146, 64, 14, 0.3);\n  --duro-color-warning-text: #78350f;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #1e40af;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #d4d4d4;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n:root[data-theme=\"high-contrast\"] {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #60a5fa;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #000000;\n  --duro-color-bg-card: #111111;\n  --duro-color-bg-card-hover: #1a1a1a;\n  --duro-color-border: #555555;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #ffffff;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.15);\n  --duro-color-error-border: rgba(248, 113, 113, 0.5);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #d8b4fe;\n  --duro-color-highlight-bg: rgba(216, 180, 254, 0.15);\n  --duro-color-highlight-border: rgba(216, 180, 254, 0.5);\n  --duro-color-highlight-text: #e9d5ff;\n  --duro-color-info: #60a5fa;\n  --duro-color-info-bg: rgba(96, 165, 250, 0.15);\n  --duro-color-info-border: rgba(96, 165, 250, 0.5);\n  --duro-color-info-text: #bfdbfe;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #000000;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #4ade80;\n  --duro-color-success-bg: rgba(74, 222, 128, 0.15);\n  --duro-color-success-border: rgba(74, 222, 128, 0.5);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #ffffff;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fcd34d;\n  --duro-color-warning-bg: rgba(252, 211, 77, 0.15);\n  --duro-color-warning-border: rgba(252, 211, 77, 0.5);\n  --duro-color-warning-text: #fef08a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #60a5fa;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #555555;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n"
+    "mockupCss": "/*\n * GENERATED by scripts/generate-mockup-css.mjs — do not edit.\n *\n * The design tokens as resolved values, for HTML that loads no stylesheet\n * (mockup artboards, static previews). Same names as vars.css; where vars.css\n * follows the live theme, this file carries every theme and switches on\n * <html data-theme=\"light|high-contrast\">.\n *\n * Inside the component library and the apps, never use this: go through\n * css.create() and the token imports, or vars.css from plain CSS.\n */\n:root {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #6aaffc;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #0f0f0f;\n  --duro-color-bg-card: #1a1a1a;\n  --duro-color-bg-card-hover: #242424;\n  --duro-color-border: #333333;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #f5f5f5;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.1);\n  --duro-color-error-border: rgba(248, 113, 113, 0.3);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #c084fc;\n  --duro-color-highlight-bg: rgba(192, 132, 252, 0.1);\n  --duro-color-highlight-border: rgba(192, 132, 252, 0.3);\n  --duro-color-highlight-text: #d8b4fe;\n  --duro-color-info: #6aaffc;\n  --duro-color-info-bg: rgba(106, 175, 252, 0.1);\n  --duro-color-info-border: rgba(106, 175, 252, 0.3);\n  --duro-color-info-text: #93c5fd;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #1a1a1a;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #22c55e;\n  --duro-color-success-bg: rgba(34, 197, 94, 0.1);\n  --duro-color-success-border: rgba(34, 197, 94, 0.3);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #e5e5e5;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fbbf24;\n  --duro-color-warning-bg: rgba(251, 191, 36, 0.1);\n  --duro-color-warning-border: rgba(251, 191, 36, 0.3);\n  --duro-color-warning-text: #fde68a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #6aaffc;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #333333;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);\n  /* spacing */\n  --duro-spacing-lg: 24px;\n  --duro-spacing-md: 16px;\n  --duro-spacing-ms: 12px;\n  --duro-spacing-sm: 8px;\n  --duro-spacing-xl: 32px;\n  --duro-spacing-xs: 4px;\n  --duro-spacing-xxl: 48px;\n  --duro-spacing-xxxl: 64px;\n  /* microSpacing */\n  --duro-micro-spacing-px1: 1px;\n  --duro-micro-spacing-px2: 2px;\n  --duro-micro-spacing-px3: 3px;\n  --duro-micro-spacing-px5: 5px;\n  --duro-micro-spacing-px6: 6px;\n  /* radii */\n  --duro-radius-full: 9999px;\n  --duro-radius-lg: 16px;\n  --duro-radius-md: 12px;\n  --duro-radius-px6: 6px;\n  --duro-radius-sm: 8px;\n  --duro-radius-xs: 4px;\n  /* sizes */\n  --duro-size-aside-w: 320px;\n  --duro-size-bar-h: 4px;\n  --duro-size-canvas-min-h: 480px;\n  --duro-size-check-mark-h: 9px;\n  --duro-size-check-mark-w: 5px;\n  --duro-size-chip: 24px;\n  --duro-size-color-area-h: 150px;\n  --duro-size-color-picker-w: 196px;\n  --duro-size-color-preview-h: 22px;\n  --duro-size-color-swatch: 20px;\n  --duro-size-color-track-h: 12px;\n  --duro-size-control-lg: 40px;\n  --duro-size-control-md: 39px;\n  --duro-size-control-sm: 28px;\n  --duro-size-day-header-h: 46px;\n  --duro-size-device-bar-w: 96px;\n  --duro-size-dialog-lg: 680px;\n  --duro-size-dialog-md: 520px;\n  --duro-size-dialog-sm: 400px;\n  --duro-size-divider: 1px;\n  --duro-size-drop-zone-min-h: 128px;\n  --duro-size-edge-fade: 32px;\n  --duro-size-editor-min-h: 160px;\n  --duro-size-embed-w: 550px;\n  --duro-size-field-min-w: 160px;\n  --duro-size-field-min-w-sm: 80px;\n  --duro-size-glyph-md: 16px;\n  --duro-size-glyph-sm: 12px;\n  --duro-size-glyph-xs: 10px;\n  --duro-size-grid-col-md: 280px;\n  --duro-size-grid-col-sm: 240px;\n  --duro-size-grid-col-xs: 200px;\n  --duro-size-handle: 16px;\n  --duro-size-icon-button: 32px;\n  --duro-size-icon-button-sm: 28px;\n  --duro-size-icon-lg: 24px;\n  --duro-size-icon-md: 18px;\n  --duro-size-icon-sm: 16px;\n  --duro-size-icon-xl: 36px;\n  --duro-size-icon-xxl: 48px;\n  --duro-size-indicator: 18px;\n  --duro-size-indicator-dot: 8px;\n  --duro-size-label-min-w: 120px;\n  --duro-size-list-max-h: 280px;\n  --duro-size-list-max-h-sm: 200px;\n  --duro-size-meter-h: 6px;\n  --duro-size-nav-marker-h: 18px;\n  --duro-size-nav-marker-w: 3px;\n  --duro-size-page-lg: 1200px;\n  --duro-size-page-md: 800px;\n  --duro-size-page-sm: 600px;\n  --duro-size-page-xl: 1440px;\n  --duro-size-page-xs: 480px;\n  --duro-size-palette-min-w: 96px;\n  --duro-size-panel-lg: 640px;\n  --duro-size-panel-md: 480px;\n  --duro-size-panel-sm: 360px;\n  --duro-size-placeholder-min-h: 80px;\n  --duro-size-popover-w: 320px;\n  --duro-size-popover-w-sm: 240px;\n  --duro-size-popup-max-w: 280px;\n  --duro-size-popup-min-w: 160px;\n  --duro-size-preview-max-h: 320px;\n  --duro-size-readout-w: 40px;\n  --duro-size-scrollbar: 8px;\n  --duro-size-sidebar-w: 240px;\n  --duro-size-skeleton-chip-w: 96px;\n  --duro-size-slider-w: 96px;\n  --duro-size-spinner-lg: 40px;\n  --duro-size-spinner-md: 24px;\n  --duro-size-spinner-sm: 16px;\n  --duro-size-swatch-h: 34px;\n  --duro-size-swatch-w: 44px;\n  --duro-size-switch-thumb: 16px;\n  --duro-size-switch-track-h: 20px;\n  --duro-size-switch-track-w: 36px;\n  --duro-size-tab-indicator: 2px;\n  --duro-size-time-gutter-w: 64px;\n  --duro-size-timeline-label-w: 180px;\n  --duro-size-toast-max-w: 440px;\n  --duro-size-toolbar-h: 36px;\n  --duro-size-touch-target: 44px;\n  /* borders */\n  --duro-border-accent: 3px;\n  --duro-border-focus-offset: 2px;\n  --duro-border-focus-offset-sm: 1px;\n  --duro-border-focus-ring: 2px;\n  --duro-border-hairline: 1px;\n  --duro-border-strong: 2px;\n  /* layers */\n  --duro-layer-floating: 50;\n  --duro-layer-floating-raised: 60;\n  --duro-layer-modal: 1001;\n  --duro-layer-modal-raised: 1002;\n  --duro-layer-overlay: 1000;\n  --duro-layer-popover: 1040;\n  --duro-layer-popover-raised: 1041;\n  --duro-layer-popup: 1050;\n  --duro-layer-popup-backdrop: 1049;\n  --duro-layer-portal: 1100;\n  --duro-layer-raised: 1;\n  --duro-layer-toast: 1060;\n  /* effects */\n  --duro-effect-overlay-blur: blur(2px);\n  --duro-effect-surface-blur: blur(6px);\n  /* layoutSpacing */\n  --duro-layout-spacing-container-lg: 32px;\n  --duro-layout-spacing-container-md: 24px;\n  --duro-layout-spacing-container-sm: 16px;\n  --duro-layout-spacing-inline-lg: 24px;\n  --duro-layout-spacing-inline-md: 16px;\n  --duro-layout-spacing-inline-sm: 8px;\n  --duro-layout-spacing-inline-xs: 4px;\n  --duro-layout-spacing-stack-lg: 24px;\n  --duro-layout-spacing-stack-md: 16px;\n  --duro-layout-spacing-stack-sm: 8px;\n  --duro-layout-spacing-stack-xl: 48px;\n  --duro-layout-spacing-stack-xs: 4px;\n  /* typography */\n  --duro-typography-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  --duro-typography-font-family-mono: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace;\n  --duro-typography-font-size-heading: 1.5rem;\n  --duro-typography-font-size-lg: 1.125rem;\n  --duro-typography-font-size-md: 1rem;\n  --duro-typography-font-size-sm: 0.875rem;\n  --duro-typography-font-size-xl: 1.25rem;\n  --duro-typography-font-size-xs: 0.75rem;\n  --duro-typography-font-weight-bold: 700;\n  --duro-typography-font-weight-medium: 500;\n  --duro-typography-font-weight-normal: 400;\n  --duro-typography-font-weight-semibold: 600;\n  --duro-typography-line-height: 1.5;\n  /* typeScale */\n  --duro-type-scale-display-lg: clamp(3.5rem, 2rem + 3.5vw, 4.5rem);\n  --duro-type-scale-display-md: clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem);\n  --duro-type-scale-display-sm: clamp(2.25rem, 1.5rem + 2vw, 3rem);\n  --duro-type-scale-font-size1: 0.75rem;\n  --duro-type-scale-font-size2: 0.8125rem;\n  --duro-type-scale-font-size3: 0.875rem;\n  --duro-type-scale-font-size4: 1rem;\n  --duro-type-scale-font-size5: 1.125rem;\n  --duro-type-scale-font-size6: 1.25rem;\n  --duro-type-scale-font-size7: 1.5rem;\n  --duro-type-scale-font-size8: 1.875rem;\n  --duro-type-scale-font-size9: 2.25rem;\n  --duro-type-scale-letter-spacing-normal: 0;\n  --duro-type-scale-letter-spacing-tight: -0.02em;\n  --duro-type-scale-letter-spacing-wide: 0.04em;\n  --duro-type-scale-line-height1: 1rem;\n  --duro-type-scale-line-height2: 1.25rem;\n  --duro-type-scale-line-height3: 1.25rem;\n  --duro-type-scale-line-height4: 1.5rem;\n  --duro-type-scale-line-height5: 1.5rem;\n  --duro-type-scale-line-height6: 1.75rem;\n  --duro-type-scale-line-height7: 2rem;\n  --duro-type-scale-line-height8: 2.25rem;\n  --duro-type-scale-line-height9: 2.75rem;\n  /* duration */\n  --duro-duration-base: 200ms;\n  --duro-duration-brisk: 160ms;\n  --duro-duration-fast: 150ms;\n  --duro-duration-instant: 0ms;\n  --duro-duration-minimal: 1ms;\n  --duro-duration-quick: 120ms;\n  --duro-duration-slow: 280ms;\n  /* easing */\n  --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);\n  --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n  --duro-easing-linear: linear;\n  --duro-easing-standard: ease;\n  /* breakpoints */\n  --duro-breakpoint-lg: 1024px;\n  --duro-breakpoint-md: 768px;\n  --duro-breakpoint-sm: 640px;\n  --duro-breakpoint-xl: 1280px;\n  --duro-breakpoint-xs: 480px;\n}\n\n:root[data-theme=\"light\"] {\n  color-scheme: light;\n  /* colors */\n  --duro-color-accent: #1e40af;\n  --duro-color-accent-contrast: #ffffff;\n  --duro-color-accent-hover: #1a3799;\n  --duro-color-bg: #ffffff;\n  --duro-color-bg-card: #f5f5f5;\n  --duro-color-bg-card-hover: #ebebeb;\n  --duro-color-border: #d4d4d4;\n  --duro-color-contrast-border: rgba(255, 255, 255, 0.33);\n  --duro-color-contrast-surface: #1a1a1a;\n  --duro-color-error: #991b1b;\n  --duro-color-error-bg: rgba(153, 27, 27, 0.08);\n  --duro-color-error-border: rgba(153, 27, 27, 0.3);\n  --duro-color-error-contrast: #ffffff;\n  --duro-color-error-hover: #7f1d1d;\n  --duro-color-error-text: #7f1d1d;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #6b21a8;\n  --duro-color-highlight-bg: rgba(107, 33, 168, 0.08);\n  --duro-color-highlight-border: rgba(107, 33, 168, 0.3);\n  --duro-color-highlight-text: #581c87;\n  --duro-color-info: #1e40af;\n  --duro-color-info-bg: rgba(30, 64, 175, 0.08);\n  --duro-color-info-border: rgba(30, 64, 175, 0.3);\n  --duro-color-info-text: #1e40af;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #e5e5e5;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #166534;\n  --duro-color-success-bg: rgba(22, 101, 52, 0.08);\n  --duro-color-success-border: rgba(22, 101, 52, 0.3);\n  --duro-color-success-text: #14532d;\n  --duro-color-text: #1a1a1a;\n  --duro-color-text-muted: #4a4a4a;\n  --duro-color-warning: #92400e;\n  --duro-color-warning-bg: rgba(146, 64, 14, 0.08);\n  --duro-color-warning-border: rgba(146, 64, 14, 0.3);\n  --duro-color-warning-text: #78350f;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #1e40af;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #d4d4d4;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n:root[data-theme=\"high-contrast\"] {\n  color-scheme: dark;\n  /* colors */\n  --duro-color-accent: #60a5fa;\n  --duro-color-accent-contrast: #000000;\n  --duro-color-accent-hover: #93c5fd;\n  --duro-color-bg: #000000;\n  --duro-color-bg-card: #111111;\n  --duro-color-bg-card-hover: #1a1a1a;\n  --duro-color-border: #555555;\n  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n  --duro-color-contrast-surface: #ffffff;\n  --duro-color-error: #f87171;\n  --duro-color-error-bg: rgba(248, 113, 113, 0.15);\n  --duro-color-error-border: rgba(248, 113, 113, 0.5);\n  --duro-color-error-contrast: #000000;\n  --duro-color-error-hover: #fca5a5;\n  --duro-color-error-text: #fca5a5;\n  --duro-color-fixed-light: #ffffff;\n  --duro-color-highlight: #d8b4fe;\n  --duro-color-highlight-bg: rgba(216, 180, 254, 0.15);\n  --duro-color-highlight-border: rgba(216, 180, 254, 0.5);\n  --duro-color-highlight-text: #e9d5ff;\n  --duro-color-info: #60a5fa;\n  --duro-color-info-bg: rgba(96, 165, 250, 0.15);\n  --duro-color-info-border: rgba(96, 165, 250, 0.5);\n  --duro-color-info-text: #bfdbfe;\n  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n  --duro-color-on-contrast-surface: #000000;\n  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n  --duro-color-scrim: rgba(0, 0, 0, 0.4);\n  --duro-color-success: #4ade80;\n  --duro-color-success-bg: rgba(74, 222, 128, 0.15);\n  --duro-color-success-border: rgba(74, 222, 128, 0.5);\n  --duro-color-success-text: #86efac;\n  --duro-color-text: #ffffff;\n  --duro-color-text-muted: #b0b0b0;\n  --duro-color-warning: #fcd34d;\n  --duro-color-warning-bg: rgba(252, 211, 77, 0.15);\n  --duro-color-warning-border: rgba(252, 211, 77, 0.5);\n  --duro-color-warning-text: #fef08a;\n  /* shadows */\n  --duro-shadow-drop-over: inset 0 0 0 2px #60a5fa;\n  --duro-shadow-drop-ready: inset 0 0 0 1px #555555;\n  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);\n  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);\n  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n"
   },
   "unions": {
     "AlertVariant": [
@@ -9143,6 +9590,10 @@
       "default",
       "spacious"
     ],
+    "ControlSize": [
+      "default",
+      "small"
+    ],
     "DetailPanelSize": [
       "sm",
       "md"
@@ -9171,6 +9622,14 @@
       "base",
       "slow"
     ],
+    "FieldsetGap": [
+      "xs",
+      "sm",
+      "ms",
+      "md",
+      "lg",
+      "xl"
+    ],
     "HeadingVariant": [
       "displayLg",
       "displayMd",
@@ -9257,6 +9716,12 @@
       "listMaxH",
       "listMaxHSm"
     ],
+    "MeterTone": [
+      "accent",
+      "success",
+      "warning",
+      "error"
+    ],
     "PageShellMaxWidth": [
       "sm",
       "md",
@@ -9319,6 +9784,13 @@
       "md",
       "lg"
     ],
+    "StatusIconName": [
+      "x-circle",
+      "check-circle",
+      "check-done",
+      "clock",
+      "forbidden"
+    ],
     "StatusIconVariant": [
       "error",
       "success",
@@ -9384,7 +9856,8 @@
     "ToastVariant": [
       "success",
       "error",
-      "info"
+      "info",
+      "warning"
     ],
     "ToggleSize": [
       "default",