@misoto22/design 0.7.0 → 0.8.0

package/dist/diagrams/spec.d.ts

@@ -12,10 +12,11 @@
  * WHAT IS DELIBERATELY NOT HERE: archify's routing micro-controls. `via`,
  * `channelX`, `channelY`, `labelAt`, `labelSegment` and `bias` exist there to
  * let an author nudge a line after a validator complains about a collision.
- * They are accepted below and honoured where they are cheap, because dropping a
- * field silently turns a valid specification into a different diagram — but
- * they are hints, not a contract, and a figure that needs many of them is a
- * figure that wants fewer edges.
+ * They are accepted below so a specification carrying them still typechecks,
+ * and each one says on its own field whether it is applied: `via` and the two
+ * channels are, but only between two nodes placed with `pos`; the three label
+ * nudges never are. They are hints, not a contract, and a figure that needs
+ * many of them is a figure that wants fewer edges.
  *
  * Every position in every type is EXPLICIT — a row and a column, a lane and a
  * step, a participant and a y. Nothing below is solved for. That is what makes
@@ -95,6 +96,22 @@ interface DiagramMeta {
             visible?: boolean;
         }>;
     };
+    /**
+     * A guided reading, and no renderer here reads it.
+     *
+     * Accepted for the same reason `viewBox` is — an archify document carrying
+     * chapters still typechecks — and not applied for a different one: chapters
+     * are a CONTROL, not a layout. Lighting one means changing what is lit while
+     * a reader walks through them, and a figure that owned that state would be a
+     * figure with a hidden step counter, a second source of truth about what is
+     * selected, and no way for the page's own next/previous buttons to agree
+     * with it.
+     *
+     * So the chapters stay the caller's: hold the index, hand the chapter's
+     * `focus` ids to `activeIds`, and the figure dims everything else and
+     * announces how many are lit. That is the whole of what a renderer could
+     * have done, in a place a page can also put a heading and a caption.
+     */
     views?: DiagramView[];
 }
 /** Where a node's facts came from, when the figure was built against real code. */
@@ -126,9 +143,25 @@ interface EdgeBase {
     fromSide?: Side;
     toSide?: Side;
     route?: RouteMode | string;
-    /** Waypoints the line is dragged through, in order. */
+    /**
+     * Waypoints the line is dragged through, in order.
+     *
+     * Honoured only when BOTH endpoints were placed with `pos` — see
+     * `Wire.keepWaypoints`. A waypoint is a coordinate in the space the author's
+     * nodes were placed in, and on a lane-and-column grid that space is one this
+     * renderer chose, not one the author saw.
+     */
     via?: Point[];
-    /** Pins the label rather than letting the router place it. */
+    /**
+     * Where the label goes, and where it is nudged to — accepted, never applied.
+     *
+     * These three are collision repairs authored against archify's router and
+     * measured in the positions THAT router produced. This one does not produce
+     * the same collisions, so honouring them moves labels off clear ground and
+     * onto the nodes they were nudged away from. Dropping the nudge and keeping
+     * the wording is the reading that preserves the meaning; the fields stay so
+     * a specification carrying them still typechecks.
+     */
     labelAt?: Point;
     labelDx?: number;
     labelDy?: number;
@@ -140,7 +173,13 @@ interface EdgeBase {
 }
 interface ArchitectureComponent extends NodeBase {
     type: NodeKind;
-    /** Grid placement. Ignored when `pos` is given. */
+    /**
+     * Grid placement. Ignored when `pos` is given.
+     *
+     * Declaring NEITHER is also a placement: the component takes the next free
+     * cell in declaration order, wrapping at `layout.cols`. A missing one of the
+     * two still reads as 0, so `{ col: 2 }` is row 0, column 2.
+     */
     row?: number;
     col?: number;
     /** Absolute placement, in user units, overriding the grid. */
@@ -177,9 +216,11 @@ interface ArchitectureSpec {
     meta: DiagramMeta;
     layout?: {
         origin?: Point;
+        /** How many columns the flow wraps at, for components with no row or col. */
         cols?: number;
         gapX?: number;
         gapY?: number;
+        /** A cell's width, which is also the width of the plates drawn in it. */
         cellW?: number;
         cellH?: number;
     };
@@ -199,8 +240,10 @@ interface WorkflowLane {
 interface WorkflowPhase {
     id: string;
     label: string;
+    /** The columns this phase claims. The header rule is drawn across them. */
     fromCol: number;
     toCol: number;
+    /** `security` and `dashed` dash the phase's rule; `emphasis` thickens it. */
     variant?: Variant;
 }
 /** A frame around a run of columns inside ONE lane. */
@@ -221,6 +264,11 @@ interface WorkflowNode extends NodeBase {
  * `main` is the path the reader should be able to follow without thinking;
  * `branch` leaves it and comes back; `async` does not block; `return` goes
  * backwards; `error` leaves for the exception lane.
+ *
+ * Three of them reach the drawing on their own: `async` and `error` take the
+ * quiet dashed line, and `return` takes an open arrowhead. `main` and `branch`
+ * do not, because `mainPath` already draws that distinction as weight. An
+ * explicit `variant` overrides any of it.
  */
 type WorkflowEdgeRole = 'main' | 'branch' | 'async' | 'return' | 'error';
 interface WorkflowEdge extends EdgeBase {
@@ -270,12 +318,14 @@ interface SequenceSpec {
     diagram_type?: 'sequence';
     meta: DiagramMeta & {
         /**
-         * `fixed` gives every participant the same column width; `spread` divides
-         * the figure evenly instead.
+         * `fixed` gives every participant a 148-unit column; `spread` gives every
+         * participant the width the WIDEST label needs.
          *
-         * Reach for `spread` when a fixed layout would leave a wide empty margin,
-         * or when a meaningful participant label does not fit. Shortening the label
-         * to make it fit is the wrong repair — the label is the data.
+         * Both are uniform — a sequence diagram with columns of different widths
+         * reads as a diagram where the wide participant matters more — so `spread`
+         * widens the whole figure rather than dividing it. Reach for it when a
+         * meaningful participant label does not fit a fixed column. Shortening the
+         * label to make it fit is the wrong repair: the label is the data.
          */
         column_fit?: 'fixed' | 'spread';
     };
@@ -331,8 +381,10 @@ interface LifecycleState extends NodeBase {
     type: LifecycleStateKind;
     /** A step number printed in the corner — `01`, `02a`. */
     step?: string;
+    /** Which lane holds it. Defaults to the first, which is the main rail. */
     lane?: string;
     col: number;
+    /** Nudges this state off its lane's centre line, for a state that needs room. */
     yOffset?: number;
 }
 interface LifecycleTransition extends EdgeBase {

package/dist/index.d.ts

@@ -5,6 +5,11 @@ export { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control.js';
 export { IndicatorStyle, useSelectionIndicator } from './lib/useSelectionIndicator.js';
 export { Button, ButtonProps, ButtonSize, ButtonVariant } from './components/Button/Button.js';
 export { FloatingIconButton, FloatingIconButtonProps } from './components/FloatingIconButton/FloatingIconButton.js';
+export { Text, TextElement, TextProps, TextSize, TextTone } from './components/Text/Text.js';
+export { Heading, HeadingLevel, HeadingProps, HeadingSize } from './components/Heading/Heading.js';
+export { Code, CodeProps } from './components/Code/Code.js';
+export { CodeBlock, CodeBlockProps } from './components/CodeBlock/CodeBlock.js';
+export { Markdown, MarkdownProps } from './components/Markdown/Markdown.js';
 export { Badge, BadgeProps, BadgeTone } from './components/Badge/Badge.js';
 export { Tag, TagProps } from './components/Tag/Tag.js';
 export { Kbd, KbdProps } from './components/Kbd/Kbd.js';
@@ -13,6 +18,7 @@ export { StatusDot, StatusDotProps, StatusTone } from './components/StatusDot/St
 export { StatusPill, StatusPillProps } from './components/StatusPill/StatusPill.js';
 export { EXTERNAL_LINK_ARROW, LinkArrow, LinkArrowProps } from './components/LinkArrow/LinkArrow.js';
 export { Separator, SeparatorProps } from './components/Separator/Separator.js';
+export { Timestamp, TimestampFormat, TimestampProps } from './components/Timestamp/Timestamp.js';
 export { Figure, FigureBand, FigureBandProps } from './components/FigureBand/FigureBand.js';
 export { Spinner, SpinnerProps } from './components/Spinner/Spinner.js';
 export { Skeleton, SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage, SkeletonPageProps, SkeletonProps, SkeletonText, SkeletonTextProps } from './components/Skeleton/Skeleton.js';
@@ -21,7 +27,7 @@ export { Alert, AlertProps, AlertTone } from './components/Alert/Alert.js';
 export { EmptyState, EmptyStateProps } from './components/EmptyState/EmptyState.js';
 export { ERROR_ACTION_CLASS, ErrorState, ErrorStateProps } from './components/ErrorState/ErrorState.js';
 export { Toaster } from './components/Toast/Toast.js';
-export { Field, FieldProps } from './components/Field/Field.js';
+export { Field, FieldLayout, FieldProps } from './components/Field/Field.js';
 export { Combobox, ComboboxOption, ComboboxProps } from './components/Combobox/Combobox.js';
 export { DATE_PRESETS, DatePicker, DatePickerProps, DatePreset, DateRangePicker, DateRangePickerProps, RANGE_PRESETS } from './components/DatePicker/DatePicker.js';
 export { Slider, SliderProps } from './components/Slider/Slider.js';
@@ -34,11 +40,11 @@ export { Checkbox, CheckboxProps } from './components/Checkbox/Checkbox.js';
 export { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from './components/RadioGroup/RadioGroup.js';
 export { Switch, SwitchProps } from './components/Switch/Switch.js';
 export { Dialog, DialogClose, DialogContent, DialogContentProps, DialogTrigger } from './components/Dialog/Dialog.js';
-export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';
 export { Tooltip, TooltipProps, TooltipProvider } from './components/Tooltip/Tooltip.js';
 export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverContentProps, PopoverTrigger } from './components/Popover/Popover.js';
 export { Sheet, SheetClose, SheetContent, SheetContentProps, SheetSide, SheetTrigger } from './components/Sheet/Sheet.js';
-export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger } from './components/ContextMenu/ContextMenu.js';
+export { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger } from './components/ContextMenu/ContextMenu.js';
 export { Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandFooter, CommandGroup, CommandHint, CommandHintProps, CommandInput, CommandItem, CommandItemProps, CommandList, CommandSeparator } from './components/Command/Command.js';
 export { MenuAction, SearchableMenu, SearchableMenuProps } from './components/SearchableMenu/SearchableMenu.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/Tabs/Tabs.js';
@@ -49,13 +55,19 @@ export { Pagination, PaginationProps, paginationRange } from './components/Pagin
 export { NavItem, NavItemProps } from './components/NavItem/NavItem.js';
 export { Card, CardBody, CardFooter, CardHeader, CardProps, CardTitle } from './components/Card/Card.js';
 export { SortDirection, TBody, TD, TDProps, TH, THProps, THead, TR, Table, TableAlign, TableBorders, TableProps } from './components/Table/Table.js';
-export { Calendar, CalendarProps } from './components/Calendar/Calendar.js';
+export { DescriptionList, DescriptionListItem, DescriptionListLayout, DescriptionListProps } from './components/DescriptionList/DescriptionList.js';
+export { Toolbar, ToolbarAlign, ToolbarPosition, ToolbarProps } from './components/Toolbar/Toolbar.js';
+export { AspectRatio, AspectRatioProps } from './components/AspectRatio/AspectRatio.js';
+export { Calendar, CalendarLabels, CalendarProps } from './components/Calendar/Calendar.js';
 export { ScrollArea, ScrollAreaProps } from './components/ScrollArea/ScrollArea.js';
 export { AppShell, AppShellProps } from './components/AppShell/AppShell.js';
 export { Article, ArticleProps } from './components/Article/Article.js';
 export { Diagram, DiagramEdge, DiagramNode, DiagramProps, DiagramSpec } from './components/Diagram/Diagram.js';
 export { Step, Steps, StepsProps } from './components/Steps/Steps.js';
 export { DateRange } from 'react-day-picker';
+export { MarkdownHeadingLevel, MarkdownInline, MarkdownNode } from './components/Markdown/nodes.js';
+export { parseMarkdown } from './components/Markdown/parse.js';
+export { slugify } from './components/Markdown/slug.js';
 export { toast } from 'sonner';
 import 'react';
 import 'clsx';

package/dist/index.js

@@ -5,6 +5,11 @@ import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "./lib/control.js";
 import { useSelectionIndicator } from "./lib/useSelectionIndicator.js";
 export * from "./components/Button/Button.js";
 export * from "./components/FloatingIconButton/FloatingIconButton.js";
+export * from "./components/Text/Text.js";
+export * from "./components/Heading/Heading.js";
+export * from "./components/Code/Code.js";
+export * from "./components/CodeBlock/CodeBlock.js";
+export * from "./components/Markdown/Markdown.js";
 export * from "./components/Badge/Badge.js";
 export * from "./components/Tag/Tag.js";
 export * from "./components/Kbd/Kbd.js";
@@ -13,6 +18,7 @@ export * from "./components/StatusDot/StatusDot.js";
 export * from "./components/StatusPill/StatusPill.js";
 export * from "./components/LinkArrow/LinkArrow.js";
 export * from "./components/Separator/Separator.js";
+export * from "./components/Timestamp/Timestamp.js";
 export * from "./components/FigureBand/FigureBand.js";
 export * from "./components/Spinner/Spinner.js";
 export * from "./components/Skeleton/Skeleton.js";
@@ -49,6 +55,9 @@ export * from "./components/Pagination/Pagination.js";
 export * from "./components/NavItem/NavItem.js";
 export * from "./components/Card/Card.js";
 export * from "./components/Table/Table.js";
+export * from "./components/DescriptionList/DescriptionList.js";
+export * from "./components/Toolbar/Toolbar.js";
+export * from "./components/AspectRatio/AspectRatio.js";
 export * from "./components/Calendar/Calendar.js";
 export * from "./components/ScrollArea/ScrollArea.js";
 export * from "./components/AppShell/AppShell.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @misoto22/design — public entry.\n *\n * Components export from here; the look ships separately as CSS:\n *\n *   import '@misoto22/design/styles.css'    // compiled Tailwind + tokens + fonts\n *\n * or, for an app that already compiles Tailwind itself, the portable layers on\n * their own:\n *\n *   import '@misoto22/design/tokens.css'    // primitives\n *   import '@misoto22/design/semantic.css'  // roles\n *   import '@misoto22/design/keyframes.css' // motion\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Utilities ───\nexport * from './lib/overlay-container'\n\n// ─── Tokens ───\nexport { BRAND } from './tokens/brand'\nexport type { BrandColor } from './tokens/brand'\n\n// ─── Utilities ───\nexport { cn } from './lib/cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control'\nexport { useSelectionIndicator } from './lib/useSelectionIndicator'\nexport type { IndicatorStyle } from './lib/useSelectionIndicator'\n\n// ─── Actions ───\nexport * from './components/Button/Button'\nexport * from './components/FloatingIconButton/FloatingIconButton'\n\n// ─── Display ───\nexport * from './components/Badge/Badge'\nexport * from './components/Tag/Tag'\nexport * from './components/Kbd/Kbd'\nexport * from './components/Avatar/Avatar'\nexport * from './components/StatusDot/StatusDot'\nexport * from './components/StatusPill/StatusPill'\nexport * from './components/LinkArrow/LinkArrow'\nexport * from './components/Separator/Separator'\nexport * from './components/FigureBand/FigureBand'\n\n// ─── Feedback ───\nexport * from './components/Spinner/Spinner'\nexport * from './components/Skeleton/Skeleton'\nexport * from './components/Progress/Progress'\nexport * from './components/Alert/Alert'\nexport * from './components/EmptyState/EmptyState'\nexport * from './components/ErrorState/ErrorState'\nexport * from './components/Toast/Toast'\n\n// ─── Forms ───\nexport * from './components/Field/Field'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/Slider/Slider'\nexport * from './components/ToggleGroup/ToggleGroup'\nexport * from './components/Input/Input'\nexport * from './components/Textarea/Textarea'\nexport * from './components/Select/Select'\nexport * from './components/NativeSelect/NativeSelect'\nexport * from './components/Checkbox/Checkbox'\nexport * from './components/RadioGroup/RadioGroup'\nexport * from './components/Switch/Switch'\n\n// ─── Overlays ───\nexport * from './components/Dialog/Dialog'\nexport * from './components/DropdownMenu/DropdownMenu'\nexport * from './components/Tooltip/Tooltip'\nexport * from './components/Popover/Popover'\nexport * from './components/Sheet/Sheet'\nexport * from './components/ContextMenu/ContextMenu'\nexport * from './components/Command/Command'\nexport * from './components/SearchableMenu/SearchableMenu'\n\n// ─── Navigation ───\nexport * from './components/Tabs/Tabs'\nexport * from './components/Accordion/Accordion'\nexport * from './components/Collapsible/Collapsible'\nexport * from './components/Breadcrumb/Breadcrumb'\nexport * from './components/Pagination/Pagination'\nexport * from './components/NavItem/NavItem'\n\n// ─── Surfaces / layout ───\nexport * from './components/Card/Card'\nexport * from './components/Table/Table'\nexport * from './components/Calendar/Calendar'\nexport * from './components/ScrollArea/ScrollArea'\nexport * from './components/AppShell/AppShell'\nexport * from './components/Article/Article'\nexport * from './components/Diagram/Diagram'\nexport * from './components/Steps/Steps'\n"],"mappings":"AAmBA,cAAc;AAGd,SAAS,aAAa;AAItB,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;AAItC,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @misoto22/design — public entry.\n *\n * Components export from here; the look ships separately as CSS:\n *\n *   import '@misoto22/design/styles.css'    // compiled Tailwind + tokens + fonts\n *\n * or, for an app that already compiles Tailwind itself, the portable layers on\n * their own:\n *\n *   import '@misoto22/design/tokens.css'    // primitives, plus data-mode and data-density\n *   import '@misoto22/design/semantic.css'  // roles\n *   import '@misoto22/design/themes.css'    // the other six theming axes\n *   import '@misoto22/design/keyframes.css' // motion\n *\n * All four, or the theming attributes are attributes that do nothing: every\n * axis but `data-mode` and `data-density` is declared only in `themes.css`, and\n * an app that skips it writes `data-radius=\"sharp\"` and gets no error, no\n * warning and no corner.\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Utilities ───\nexport * from './lib/overlay-container'\n\n// ─── Tokens ───\nexport { BRAND } from './tokens/brand'\nexport type { BrandColor } from './tokens/brand'\n\n// ─── Utilities ───\nexport { cn } from './lib/cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control'\nexport { useSelectionIndicator } from './lib/useSelectionIndicator'\nexport type { IndicatorStyle } from './lib/useSelectionIndicator'\n\n// ─── Actions ───\nexport * from './components/Button/Button'\nexport * from './components/FloatingIconButton/FloatingIconButton'\n\n// ─── Display ───\nexport * from './components/Text/Text'\nexport * from './components/Heading/Heading'\nexport * from './components/Code/Code'\nexport * from './components/CodeBlock/CodeBlock'\nexport * from './components/Markdown/Markdown'\nexport * from './components/Badge/Badge'\nexport * from './components/Tag/Tag'\nexport * from './components/Kbd/Kbd'\nexport * from './components/Avatar/Avatar'\nexport * from './components/StatusDot/StatusDot'\nexport * from './components/StatusPill/StatusPill'\nexport * from './components/LinkArrow/LinkArrow'\nexport * from './components/Separator/Separator'\nexport * from './components/Timestamp/Timestamp'\nexport * from './components/FigureBand/FigureBand'\n\n// ─── Feedback ───\nexport * from './components/Spinner/Spinner'\nexport * from './components/Skeleton/Skeleton'\nexport * from './components/Progress/Progress'\nexport * from './components/Alert/Alert'\nexport * from './components/EmptyState/EmptyState'\nexport * from './components/ErrorState/ErrorState'\nexport * from './components/Toast/Toast'\n\n// ─── Forms ───\nexport * from './components/Field/Field'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/Slider/Slider'\nexport * from './components/ToggleGroup/ToggleGroup'\nexport * from './components/Input/Input'\nexport * from './components/Textarea/Textarea'\nexport * from './components/Select/Select'\nexport * from './components/NativeSelect/NativeSelect'\nexport * from './components/Checkbox/Checkbox'\nexport * from './components/RadioGroup/RadioGroup'\nexport * from './components/Switch/Switch'\n\n// ─── Overlays ───\nexport * from './components/Dialog/Dialog'\nexport * from './components/DropdownMenu/DropdownMenu'\nexport * from './components/Tooltip/Tooltip'\nexport * from './components/Popover/Popover'\nexport * from './components/Sheet/Sheet'\nexport * from './components/ContextMenu/ContextMenu'\nexport * from './components/Command/Command'\nexport * from './components/SearchableMenu/SearchableMenu'\n\n// ─── Navigation ───\nexport * from './components/Tabs/Tabs'\nexport * from './components/Accordion/Accordion'\nexport * from './components/Collapsible/Collapsible'\nexport * from './components/Breadcrumb/Breadcrumb'\nexport * from './components/Pagination/Pagination'\nexport * from './components/NavItem/NavItem'\n\n// ─── Surfaces / layout ───\nexport * from './components/Card/Card'\nexport * from './components/Table/Table'\nexport * from './components/DescriptionList/DescriptionList'\nexport * from './components/Toolbar/Toolbar'\nexport * from './components/AspectRatio/AspectRatio'\nexport * from './components/Calendar/Calendar'\nexport * from './components/ScrollArea/ScrollArea'\nexport * from './components/AppShell/AppShell'\nexport * from './components/Article/Article'\nexport * from './components/Diagram/Diagram'\nexport * from './components/Steps/Steps'\n"],"mappings":"AAyBA,cAAc;AAGd,SAAS,aAAa;AAItB,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;AAItC,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/keyframes.css

@@ -202,10 +202,64 @@
   }
 }
 
-/* One place, not per-component. A user who has asked for less motion gets the
-   end state immediately rather than a faster version of the same move. */
+/* ─── Reduced motion ───
+   Two rules, and the argument behind them matters more than the CSS does.
+
+   This began as one opt-in rule: a surface that animated carried
+   `data-m22-animated`, and that attribute was what got cancelled. It was
+   forgotten four times — Accordion's panel, CollapsibleSection's panel,
+   SheetContent's slide, AppShell's drawer — by four authors across four
+   components. A mechanism four people independently fail to remember is not
+   being failed by its authors; it is failing them. The other half of the old
+   selector, `[class*='m22-anim']`, matched nothing whatsoever: Tailwind emits
+   `animate-[m22-collapsible-down_…]`, which contains no `m22-anim`, so half
+   the kill switch had never once fired and nothing anywhere said so.
+
+   So the GUARANTEE is now the universal rule below, deliberately the well-worn
+   one. It cannot be forgotten because there is nothing to remember: a new
+   component is covered before its author has heard of this file. It also
+   reaches `transition-duration`, which the old rule never did — and a panel
+   that slides is usually written as a transition, not a keyframe, which is how
+   two of the four escaped.
+
+   The cost, stated plainly: this is a `*` rule in a stylesheet consumers
+   import, so it reaches their components too. That is intended. It fires only
+   when the reader has asked their operating system for less motion, and this
+   package already asserts base styles on `*` (see index.css). A caller with
+   motion they consider essential can still keep it — `!important` on `*` is
+   the weakest `!important` there is, so any class-level
+   `animation-duration: … !important` outranks it. What changes is the default:
+   keeping motion under this preference becomes something you write down and
+   defend, instead of something you get by forgetting. That inversion is the
+   whole point of the change.
+
+   0.01ms rather than `none`, because JavaScript listens. Radix unmounts a
+   closing panel on `animationend`; consumer code may await `transitionend`. A
+   near-zero duration still fires both, where `none` fires neither. It is the
+   reset's least obvious detail and the reason it is written this way wherever
+   it appears.
+
+   `[data-m22-animated]` stays, and is no longer load-bearing. It is a
+   component asserting that its motion is decorative, and it goes further than
+   the floor above by removing the animation outright rather than running an
+   instant frame of it. Read it as documentation with teeth. Do NOT read it as
+   the thing that makes reduced motion work — believing that was the mistake
+   this replaced. `src/__tests__/reduced-motion.test.tsx` holds both ends: it
+   fails if this block stops being universal, if it stops naming transitions,
+   if it grows another selector that matches nothing, or if a component reaches
+   for a keyframe here without making the assertion. */
 @media (prefers-reduced-motion: reduce) {
-  [class*='m22-anim'],
+  *,
+  ::before,
+  ::after {
+    animation-delay: 0ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
   [data-m22-animated] {
     animation: none !important;
   }

package/dist/lib/overlay-container.d.ts

@@ -7,8 +7,8 @@ interface OverlayContainerProps {
     children: ReactNode;
 }
 /**
- * Redirects every overlay in the subtree — popover, select, menu, tooltip — into
- * a given element instead of `document.body`.
+ * Redirects every overlay in the subtree — popover, select, menu, tooltip,
+ * dialog, sheet — into a given element instead of `document.body`.
  *
  * Two problems, one cause. An overlay portalled to the body is positioned
  * against the VIEWPORT, so inside a bounded frame (a documentation example, a
@@ -20,7 +20,11 @@ interface OverlayContainerProps {
  * inherits what the frame declares, and collides with the frame's edges.
  *
  * The container must be positioned (`relative` is enough) for the panel to be
- * placed against it rather than against the nearest positioned ancestor.
+ * placed against it rather than against the nearest positioned ancestor. The
+ * modal surfaces need it for a second reason: they place themselves with
+ * `position: fixed`, which resolves against the VIEWPORT whatever element they
+ * are portalled into, so a named container switches them to `absolute` — and
+ * an unpositioned container would then hand them the wrong box.
  *
  * @example
  * const [frame, setFrame] = useState<HTMLElement | null>(null)
@@ -31,7 +35,13 @@ interface OverlayContainerProps {
 declare function OverlayContainer({ container, children }: OverlayContainerProps): react.JSX.Element;
 /**
  * The element overlays in this subtree should render into, or `null` for the
- * document body. Every portal in the library reads this.
+ * document body.
+ *
+ * Every portal in the library reads this. That sentence was false for a
+ * release: `Dialog` and `Sheet` rendered the Radix portal with no container and
+ * never called this hook, and their props derive from `Content`, which has no
+ * `container` — so a caller could not pass one either, and every modal example
+ * on the documentation site escaped the preview card it was drawn in.
  */
 declare function useOverlayContainer(): HTMLElement | null;
 

package/dist/lib/overlay-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/overlay-container.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nconst OverlayContainerContext = createContext<HTMLElement | null>(null)\n\nexport interface OverlayContainerProps {\n  /** The element overlays should render into. `null` restores the default. */\n  container: HTMLElement | null\n  children: ReactNode\n}\n\n/**\n * Redirects every overlay in the subtree — popover, select, menu, tooltip — into\n * a given element instead of `document.body`.\n *\n * Two problems, one cause. An overlay portalled to the body is positioned\n * against the VIEWPORT, so inside a bounded frame (a documentation example, a\n * device preview, a canvas) it flips and shifts against edges the reader cannot\n * see, and lands outside the box it belongs to. It also leaves the subtree, so\n * `dir=\"rtl\"` and `data-density` set on that frame stop reaching it.\n *\n * Naming the container fixes both: the panel renders inside the frame,\n * inherits what the frame declares, and collides with the frame's edges.\n *\n * The container must be positioned (`relative` is enough) for the panel to be\n * placed against it rather than against the nearest positioned ancestor.\n *\n * @example\n * const [frame, setFrame] = useState<HTMLElement | null>(null)\n * <div ref={setFrame} className=\"relative\" data-density=\"compact\">\n *   <OverlayContainer container={frame}>{children}</OverlayContainer>\n * </div>\n */\nexport function OverlayContainer({ container, children }: OverlayContainerProps) {\n  return <OverlayContainerContext value={container}>{children}</OverlayContainerContext>\n}\n\n/**\n * The element overlays in this subtree should render into, or `null` for the\n * document body. Every portal in the library reads this.\n */\nexport function useOverlayContainer(): HTMLElement | null {\n  return useContext(OverlayContainerContext)\n}\n"],"mappings":";AAoCS;AAlCT,SAAS,eAAe,kBAAkB;AAG1C,MAAM,0BAA0B,cAAkC,IAAI;AA8B/D,SAAS,iBAAiB,EAAE,WAAW,SAAS,GAA0B;AAC/E,SAAO,oBAAC,2BAAwB,OAAO,WAAY,UAAS;AAC9D;AAMO,SAAS,sBAA0C;AACxD,SAAO,WAAW,uBAAuB;AAC3C;","names":[]}
+{"version":3,"sources":["../../src/lib/overlay-container.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nconst OverlayContainerContext = createContext<HTMLElement | null>(null)\n\nexport interface OverlayContainerProps {\n  /** The element overlays should render into. `null` restores the default. */\n  container: HTMLElement | null\n  children: ReactNode\n}\n\n/**\n * Redirects every overlay in the subtree — popover, select, menu, tooltip,\n * dialog, sheet — into a given element instead of `document.body`.\n *\n * Two problems, one cause. An overlay portalled to the body is positioned\n * against the VIEWPORT, so inside a bounded frame (a documentation example, a\n * device preview, a canvas) it flips and shifts against edges the reader cannot\n * see, and lands outside the box it belongs to. It also leaves the subtree, so\n * `dir=\"rtl\"` and `data-density` set on that frame stop reaching it.\n *\n * Naming the container fixes both: the panel renders inside the frame,\n * inherits what the frame declares, and collides with the frame's edges.\n *\n * The container must be positioned (`relative` is enough) for the panel to be\n * placed against it rather than against the nearest positioned ancestor. The\n * modal surfaces need it for a second reason: they place themselves with\n * `position: fixed`, which resolves against the VIEWPORT whatever element they\n * are portalled into, so a named container switches them to `absolute` — and\n * an unpositioned container would then hand them the wrong box.\n *\n * @example\n * const [frame, setFrame] = useState<HTMLElement | null>(null)\n * <div ref={setFrame} className=\"relative\" data-density=\"compact\">\n *   <OverlayContainer container={frame}>{children}</OverlayContainer>\n * </div>\n */\nexport function OverlayContainer({ container, children }: OverlayContainerProps) {\n  return <OverlayContainerContext value={container}>{children}</OverlayContainerContext>\n}\n\n/**\n * The element overlays in this subtree should render into, or `null` for the\n * document body.\n *\n * Every portal in the library reads this. That sentence was false for a\n * release: `Dialog` and `Sheet` rendered the Radix portal with no container and\n * never called this hook, and their props derive from `Content`, which has no\n * `container` — so a caller could not pass one either, and every modal example\n * on the documentation site escaped the preview card it was drawn in.\n */\nexport function useOverlayContainer(): HTMLElement | null {\n  return useContext(OverlayContainerContext)\n}\n"],"mappings":";AAwCS;AAtCT,SAAS,eAAe,kBAAkB;AAG1C,MAAM,0BAA0B,cAAkC,IAAI;AAkC/D,SAAS,iBAAiB,EAAE,WAAW,SAAS,GAA0B;AAC/E,SAAO,oBAAC,2BAAwB,OAAO,WAAY,UAAS;AAC9D;AAYO,SAAS,sBAA0C;AACxD,SAAO,WAAW,uBAAuB;AAC3C;","names":[]}

package/dist/lib/warn.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Development warnings, written for the reader most likely to hit them.
+ *
+ * The skill in this package documents a handful of ways to misuse a component
+ * that fail SILENTLY — a `Field` whose child is a wrapper wires no label, an
+ * icon-only `Button` with no accessible name renders perfectly and is invisible
+ * to a screen reader. Documentation is the wrong place for those on its own: it
+ * only helps a reader who went looking, and the whole problem is that nothing
+ * told them to look.
+ *
+ * So the component says it, at the moment it happens. The shape follows what an
+ * agent needs to repair its own call without asking anyone: a stable `code` it
+ * can branch on, the `field` that caused it, an imperative one-line `fix`, and
+ * where to get the rest. A message that only says "invalid props" makes an
+ * agent guess, and it guesses by trying things.
+ *
+ * Three constraints this has to keep:
+ *
+ * - **Dev only.** Every call site is behind `process.env.NODE_ENV`, which the
+ *   consumer's bundler replaces and then drops. Nothing here reaches a
+ *   production bundle.
+ * - **Once per problem.** React renders twice in StrictMode and again on every
+ *   state change; a warning printed each time is noise that trains people to
+ *   ignore it.
+ * - **Never throws.** A warning that breaks the render is worse than the bug it
+ *   describes, and this runs during render.
+ */
+/**
+ * True outside a production build, and false when nothing said either way.
+ *
+ * Every bundler replaces `process.env.NODE_ENV` with a literal, which folds
+ * this to `false` and lets the guarded calls below be dropped entirely. Off is
+ * the right default for the case where nothing replaced it: a warning that
+ * reaches a user's console is worse than one an author never sees.
+ */
+declare const DEV: boolean;
+interface Warning {
+    /** Stable identifier. Never reused for a different cause. */
+    code: string;
+    /** What went wrong, in one declarative sentence. */
+    problem: string;
+    /** The prop or child that caused it. */
+    field: string;
+    /** Imperative, and self-sufficient — assume nobody opens the docs. */
+    fix: string;
+    /** The component to ask about. */
+    component: string;
+}
+/**
+ * Print one warning, once.
+ *
+ * Guarded at the call site too, so a production bundle drops the whole
+ * expression rather than the branch inside it.
+ */
+declare function warn({ code, problem, field, fix, component }: Warning): void;
+/** Test seam: the dedupe is global state, and a suite needs it reset. */
+declare function resetWarnings(): void;
+/**
+ * Warn when a prop that is required for accessibility holds nothing usable.
+ *
+ * `Table.caption`, `Progress.label` and their siblings are required in the type
+ * precisely because forgetting them ships a control nobody can use without
+ * sight — and an empty string satisfies the type while satisfying nothing else.
+ * That is exactly the shape a model produces when it knows a prop is mandatory
+ * and has nothing to put in it.
+ *
+ * Not applied to `Avatar.alt`. An empty `alt` is the correct, deliberate markup
+ * for a decorative image, so warning on it would be a false positive on a
+ * pattern the platform endorses.
+ */
+declare function warnBlankName(component: string, field: string, value: unknown, announces: string): void;
+
+export { DEV, resetWarnings, warn, warnBlankName };

package/dist/lib/warn.js

@@ -0,0 +1,38 @@
+const DEV = typeof process !== "undefined" && process?.env?.NODE_ENV !== "production";
+const seen = /* @__PURE__ */ new Set();
+function warn({ code, problem, field, fix, component }) {
+  if (!DEV) return;
+  const key = `${code}:${field}`;
+  if (seen.has(key)) return;
+  seen.add(key);
+  console.warn(
+    [
+      `[@misoto22/design] ${code}`,
+      `  ${problem}`,
+      `  field: ${field}`,
+      `  fix:   ${fix}`,
+      `  docs:  npx misoto22-design docs ${component}`
+    ].join("\n")
+  );
+}
+function resetWarnings() {
+  seen.clear();
+}
+function warnBlankName(component, field, value, announces) {
+  if (!DEV) return;
+  if (typeof value !== "string" || value.trim() !== "") return;
+  warn({
+    code: "REQUIRED_NAME_BLANK",
+    problem: `${component}.${field} is an empty string, so ${announces}. The type is satisfied; nothing else is.`,
+    field: `${component}.${field}`,
+    fix: `Give ${field} the words a person would need to understand this without seeing it.`,
+    component
+  });
+}
+export {
+  DEV,
+  resetWarnings,
+  warn,
+  warnBlankName
+};
+//# sourceMappingURL=warn.js.map

package/dist/lib/warn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/warn.ts"],"sourcesContent":["/**\n * Development warnings, written for the reader most likely to hit them.\n *\n * The skill in this package documents a handful of ways to misuse a component\n * that fail SILENTLY — a `Field` whose child is a wrapper wires no label, an\n * icon-only `Button` with no accessible name renders perfectly and is invisible\n * to a screen reader. Documentation is the wrong place for those on its own: it\n * only helps a reader who went looking, and the whole problem is that nothing\n * told them to look.\n *\n * So the component says it, at the moment it happens. The shape follows what an\n * agent needs to repair its own call without asking anyone: a stable `code` it\n * can branch on, the `field` that caused it, an imperative one-line `fix`, and\n * where to get the rest. A message that only says \"invalid props\" makes an\n * agent guess, and it guesses by trying things.\n *\n * Three constraints this has to keep:\n *\n * - **Dev only.** Every call site is behind `process.env.NODE_ENV`, which the\n *   consumer's bundler replaces and then drops. Nothing here reaches a\n *   production bundle.\n * - **Once per problem.** React renders twice in StrictMode and again on every\n *   state change; a warning printed each time is noise that trains people to\n *   ignore it.\n * - **Never throws.** A warning that breaks the render is worse than the bug it\n *   describes, and this runs during render.\n */\n\n/**\n * `process.env.NODE_ENV`, without pulling Node's types into a browser library.\n *\n * Declared module-locally rather than in a `.d.ts`: an ambient `process` there\n * would travel into the emitted declarations and collide with a consumer's own\n * Node types. The `typeof` guard is what makes it safe in a bundle that never\n * defines it.\n */\ndeclare const process: { env?: { NODE_ENV?: string } } | undefined\n\n/**\n * True outside a production build, and false when nothing said either way.\n *\n * Every bundler replaces `process.env.NODE_ENV` with a literal, which folds\n * this to `false` and lets the guarded calls below be dropped entirely. Off is\n * the right default for the case where nothing replaced it: a warning that\n * reaches a user's console is worse than one an author never sees.\n */\nexport const DEV =\n  typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production'\n\n/** Warnings already printed, keyed by code + detail, so a re-render is quiet. */\nconst seen = new Set<string>()\n\ninterface Warning {\n  /** Stable identifier. Never reused for a different cause. */\n  code: string\n  /** What went wrong, in one declarative sentence. */\n  problem: string\n  /** The prop or child that caused it. */\n  field: string\n  /** Imperative, and self-sufficient — assume nobody opens the docs. */\n  fix: string\n  /** The component to ask about. */\n  component: string\n}\n\n/**\n * Print one warning, once.\n *\n * Guarded at the call site too, so a production bundle drops the whole\n * expression rather than the branch inside it.\n */\nexport function warn({ code, problem, field, fix, component }: Warning): void {\n  if (!DEV) return\n\n  const key = `${code}:${field}`\n  if (seen.has(key)) return\n  seen.add(key)\n\n  console.warn(\n    [\n      `[@misoto22/design] ${code}`,\n      `  ${problem}`,\n      `  field: ${field}`,\n      `  fix:   ${fix}`,\n      `  docs:  npx misoto22-design docs ${component}`,\n    ].join('\\n'),\n  )\n}\n\n/** Test seam: the dedupe is global state, and a suite needs it reset. */\nexport function resetWarnings(): void {\n  seen.clear()\n}\n\n/**\n * Warn when a prop that is required for accessibility holds nothing usable.\n *\n * `Table.caption`, `Progress.label` and their siblings are required in the type\n * precisely because forgetting them ships a control nobody can use without\n * sight — and an empty string satisfies the type while satisfying nothing else.\n * That is exactly the shape a model produces when it knows a prop is mandatory\n * and has nothing to put in it.\n *\n * Not applied to `Avatar.alt`. An empty `alt` is the correct, deliberate markup\n * for a decorative image, so warning on it would be a false positive on a\n * pattern the platform endorses.\n */\nexport function warnBlankName(\n  component: string,\n  field: string,\n  value: unknown,\n  announces: string,\n): void {\n  if (!DEV) return\n  if (typeof value !== 'string' || value.trim() !== '') return\n\n  warn({\n    code: 'REQUIRED_NAME_BLANK',\n    problem: `${component}.${field} is an empty string, so ${announces}. The type is satisfied; nothing else is.`,\n    field: `${component}.${field}`,\n    fix: `Give ${field} the words a person would need to understand this without seeing it.`,\n    component,\n  })\n}\n"],"mappings":"AA8CO,MAAM,MACX,OAAO,YAAY,eAAe,SAAS,KAAK,aAAa;AAG/D,MAAM,OAAO,oBAAI,IAAY;AAqBtB,SAAS,KAAK,EAAE,MAAM,SAAS,OAAO,KAAK,UAAU,GAAkB;AAC5E,MAAI,CAAC,IAAK;AAEV,QAAM,MAAM,GAAG,IAAI,IAAI,KAAK;AAC5B,MAAI,KAAK,IAAI,GAAG,EAAG;AACnB,OAAK,IAAI,GAAG;AAEZ,UAAQ;AAAA,IACN;AAAA,MACE,sBAAsB,IAAI;AAAA,MAC1B,KAAK,OAAO;AAAA,MACZ,YAAY,KAAK;AAAA,MACjB,YAAY,GAAG;AAAA,MACf,qCAAqC,SAAS;AAAA,IAChD,EAAE,KAAK,IAAI;AAAA,EACb;AACF;AAGO,SAAS,gBAAsB;AACpC,OAAK,MAAM;AACb;AAeO,SAAS,cACd,WACA,OACA,OACA,WACM;AACN,MAAI,CAAC,IAAK;AACV,MAAI,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM,GAAI;AAEtD,OAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS,GAAG,SAAS,IAAI,KAAK,2BAA2B,SAAS;AAAA,IAClE,OAAO,GAAG,SAAS,IAAI,KAAK;AAAA,IAC5B,KAAK,QAAQ,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/semantic.css

@@ -105,14 +105,21 @@
      Law 2 — a box-shadow is never blurred. The system has no elevation ramp;
      depth is a hard offset in ink, applied per component. These three resolve
      to nothing on purpose, so a component ported from a shadowed system stays
-     flat instead of drawing a blur the White Reset does not have. Reach for
-     --lift instead, which is the offset idiom expressed once. */
+     flat instead of drawing a blur the White Reset does not have. --lift below
+     is the sanctioned offset idiom for anything that must read as raised. */
   --shadow-color: transparent;
   --shadow-sm: none;
   --shadow: none;
   --shadow-lg: none;
-  /* The one depth cue the system does have: a hard 3px ink offset, no blur.
-     Used by a plate that must read as sitting above the page. */
+  /* The one depth cue the system does have: a hard 3px ink offset, no blur,
+     in the accent rather than a grey because --shadow-offset points at --clay.
+
+     PUBLISHED, NOT CONSUMED. No component in this package sets either one —
+     there is not a single shadow-(--lift) in src/. What the library actually
+     separates with is a hairline, a change of ground, and the reversal that
+     Card variant="plate" reaches for. These two exist so a consumer building a
+     raised plate of their own has the system's answer instead of inventing a
+     blur; do not read them as describing what the library does. */
   --lift: 3px 3px 0 0 var(--shadow-offset);
   --lift-sm: 2px 2px 0 0 var(--shadow-offset);
 
@@ -126,8 +133,12 @@
   --overlay: var(--scrim);
   --disabled-opacity: 0.5;
 
-  /* ─── Stacking ─── five component-facing names onto the seven ranks. ───── */
-  --z-dropdown: var(--z-drawer);
+  /* ─── Stacking ─── two component-facing names onto the seven ranks. ──────
+     The other five ranks are read by their own names; only these two had a
+     component-facing spelling that outlived the rank it pointed at.
+     --z-dropdown pointed at --z-drawer, 100, which put every anchored panel
+     under the modal at 210 that opened it. */
+  --z-dropdown: var(--z-anchored);
   --z-overlay: var(--z-scrim);
 
   /* ─── Diagrams ───────────────────────────────────────────────────────────