@momoi-labs/kiso 0.11.0 → 0.12.0

package/kiso/docs/components/card.md

@@ -69,7 +69,7 @@ it is a section with a heading, not a Card.
 This is the shared panel contract. Card, [Table](table.md) wrapper,
 [ModalDialog](modal-dialog.md), [Drawer](drawer.md),
 [CommandPalette](command-palette.md), and code or log blocks are **panels**:
-square (`--radius-surface`) with corner marks. Popover, DropdownMenu, Toast,
+square (`--radius-surface`) with corner marks by default. Popover, DropdownMenu, Toast,
 Alert, and Tooltip are transient chrome, not panels: they keep a small radius
 and carry no marks.
 
@@ -91,11 +91,11 @@ accidental.
 
 The gap is the mark. Close it and this is just a thicker border.
 
-Marks go on every panel, without exception. There is no rounded mode and no
-`data-corners` attribute; the corner language was decided once and is not a
-per-product setting.
+Applications can change panel borders, radii, mark shapes, and mark sizes
+with the [appearance attributes](../tokens.md#appearance-attributes).
+Without these attributes, panels keep the square frame and tick marks.
 
-Draw them on one pseudo-element inset by `calc(-1 * (var(--corner-mark-tick) +
+Draw default ticks on one pseudo-element inset by `calc(-1 * (var(--corner-mark-tick) +
 var(--corner-mark-gap)))`, so no markup and no images are needed. If the panel
 scrolls, move `overflow` to an inner element — the marks sit just outside the
 frame and a scrolling wrapper clips them away.

package/kiso/docs/components/drawer.md

@@ -27,7 +27,7 @@ Drawer Root
 
 Content uses `--color-elevated-surface`, `--color-foreground`,
 `--color-border`, `--spacing-lg` padding, `--radius-surface`, and
-`--shadow-lg`. The scrim uses `--color-overlay`. Panels are square (`--radius-surface`) and carry corner marks. See
+`--shadow-lg`. The scrim uses `--color-overlay`. Panels are square (`--radius-surface`) and carry corner marks by default. See
 [Card](card.md#corner-marks) for the shared panel contract.
 Entry/exit uses `--motion-duration-normal` and `--motion-easing-standard`, with
 no travel under reduced motion.

package/kiso/docs/components/modal-dialog.md

@@ -26,7 +26,7 @@ Dialog Root
 Content uses `--color-elevated-surface`, `--color-foreground`,
 `--color-border`, `--radius-surface`, `--spacing-lg` padding, and
 `--shadow-lg`. A Dialog is a panel: it carries corner marks. The scrim uses
-`--color-overlay`. Panels are square (`--radius-surface`) and carry corner marks. See
+`--color-overlay`. Panels are square (`--radius-surface`) and carry corner marks by default. See
 [Card](card.md#corner-marks) for the shared panel contract.
 Overlay transitions use `--motion-duration-normal` and
 `--motion-easing-standard`.

package/kiso/docs/tokens.md

@@ -277,9 +277,9 @@ Layout sizes: `--size-sidebar` (248px) is the shell navigation column;
 `--size-icon-sm` (14px), `--size-icon-md` (16px, the default), and
 `--size-icon-lg` (20px).
 
-## Corners: marks, not radius
+## Corners and appearance
 
-Panels are square. `--radius-surface` is `0px`, and a panel's corner treatment
+Panels are square by default. `--radius-surface` is `0px`, and a panel's corner treatment
 is a **corner mark** instead: two 1px ticks per corner, each lying along the
 frame line it extends and stopping `--corner-mark-gap` short of it, so the mark
 points at the corner without touching it.
@@ -296,8 +296,8 @@ the paint and makes the hollow centre explicit rather than accidental.
 
 The gap **is** the mark. Close it and this is just a thicker border.
 
-Marks appear on every panel, without exception. There is no rounded mode and no
-`data-corners` attribute — the choice was made once, here.
+Marks appear on panels by default. Applications can select another treatment
+with the appearance attributes below.
 
 The remaining radii only take the bite off controls:
 
@@ -308,7 +308,38 @@ The remaining radii only take the bite off controls:
 | `--radius-md` | 4px | **Buttons, inputs, menu items** — the control default. |
 | `--radius-lg` | 5px | Segmented tracks and other control groups. |
 | `--radius-full` | 9999px | Pills, dots, switches, avatars. |
-| `--radius-surface` | 0px | **Panels, cards, tables, dialogs** — always. |
+| `--radius-surface` | 0px | **Panels, cards, tables, dialogs** by default. |
+
+### Appearance attributes
+
+Set these attributes on `<html>` so they also reach portalled dialogs and menus.
+They ship in `@momoi-labs/kiso/ui.css`, which React's stylesheet imports.
+No gallery CSS or JavaScript is required.
+
+| Attribute | Values | Default when omitted |
+| --- | --- | --- |
+| `data-border-style` | `square`, `soft`, `round`, `asym`, `rail`, `dash`, `bevel`, `double`, `base`, `offset` | Square panels and existing control radii |
+| `data-corner-size` | `off`, `small`, `medium`, `large` | `medium` |
+| `data-corner-marks` | `none`, `ticks`, `brackets`, `arcs`, `dots` | `ticks` |
+| `data-mark-size` | `small`, `medium`, `large` | `medium` |
+
+`data-corner-size` scales the radii selected by `data-border-style`: `off`
+sets them to zero; `small`, `medium`, and `large` use 0.5, 1, and 1.5 times
+that style's radii. Square panels stay square and their control radii stay
+unchanged unless the size is `off`. Size does not hide marks; use
+`data-corner-marks="none"` for that.
+
+Mark sizes set `--corner-mark-tick` and `--corner-mark-gap` to 2px/1px,
+4px/2px, or 8px/4px. Border styles override the existing radius tokens.
+The generated token defaults remain unchanged.
+
+```html
+<html lang="en" data-accent="terracotta" data-border-style="soft"
+  data-corner-size="small" data-corner-marks="arcs" data-mark-size="medium">
+```
+
+Keep scrolling on `.log-scroll`, `.table-scroll`, dialog bodies, and
+`pre > code`. The outer frame owns the marks, which extend outside it.
 
 ## Hatch
 

package/kiso/ui.css

@@ -798,6 +798,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
 }
 
 .palette {
+  position: relative;
   width: 100%; max-width: 560px;
   background: var(--color-popover);
   border: 1px solid var(--color-border);
@@ -1072,59 +1073,171 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 }
 
 
-/* ===========================================================================
-   Corner marks — the "blueprint" corner treatment
-   ---------------------------------------------------------------------------
-   An open registration mark on each corner: two 1px ticks, each lying along
-   the frame line it extends and stopping `--corner-mark-gap` short of it, so
-   the mark points at the corner without touching it.
-
-   Deliberately two ticks and not four. A full cross puts its other two arms
-   directly on top of the panel border, where they are invisible — the mark
-   read as a bracket anyway. Dropping them halves the paint and makes the
-   hollow centre explicit instead of accidental.
+/* Appearance attributes. Set these on html to include portalled content. */
+:root {
+  --appearance-scale: 1;
+  --appearance-square-scale: 1;
+  --appearance-panel-shadow: 0 0 transparent;
+  --appearance-panel-border: solid;
+}
+[data-corner-size="off"] { --appearance-scale: 0; --appearance-square-scale: 0; }
+[data-corner-size="small"] { --appearance-scale: .5; }
+[data-corner-size="medium"] { --appearance-scale: 1; }
+[data-corner-size="large"] { --appearance-scale: 1.5; }
+[data-border-style] {
+  --appearance-base-radius: 8px;
+  --appearance-control-base: 4px;
+  --appearance-panel-border: solid;
+  --appearance-panel-shadow: 0 0 transparent;
+  --appearance-overlay-content: none;
+  --appearance-footer-start: var(--radius-surface);
+  --appearance-overlay-inset: 0;
+  --appearance-overlay-border: 0;
+  --appearance-overlay-radius: var(--appearance-corners);
+  --radius-surface: calc(var(--appearance-base-radius) * var(--appearance-scale));
+  --radius-md: calc(var(--appearance-control-base) * var(--appearance-scale));
+  --radius-xs: calc(var(--radius-md) / 2);
+  --radius-sm: calc(var(--radius-md) * .75);
+  --radius-lg: calc(var(--radius-md) * 1.25);
+  --appearance-corners: var(--radius-surface);
+  --appearance-control-corners: var(--radius-md);
+}
+[data-border-style="square"] {
+  --appearance-base-radius: 0px;
+  --radius-xs: calc(2px * var(--appearance-square-scale));
+  --radius-sm: calc(3px * var(--appearance-square-scale));
+  --radius-md: calc(4px * var(--appearance-square-scale));
+  --radius-lg: calc(5px * var(--appearance-square-scale));
+}
+[data-border-style="soft"] { --appearance-base-radius: 8px; }
+[data-border-style="round"] { --appearance-base-radius: 16px; --appearance-control-base: 8px; }
+[data-border-style="asym"] {
+  --appearance-footer-start: calc(3px * var(--appearance-scale));
+  --appearance-base-radius: 12px;
+  --appearance-control-base: 6px;
+  --appearance-corners: var(--radius-surface) calc(3px * var(--appearance-scale));
+  --appearance-control-corners: var(--radius-md) calc(2px * var(--appearance-scale));
+}
+[data-border-style="rail"] { --appearance-overlay-content: ""; --appearance-base-radius: 6px; --appearance-control-base: 3px; --appearance-panel-shadow: inset 3px 0 var(--color-border-strong); }
+[data-border-style="dash"] { --appearance-panel-border: dashed; }
+[data-border-style="bevel"] { --appearance-overlay-content: ""; --appearance-panel-shadow: inset 1px 1px 1px var(--color-shadow-contact), inset -1px -1px var(--color-border-strong); }
+[data-border-style="double"] { --appearance-overlay-content: ""; --appearance-overlay-inset: 3px; --appearance-overlay-border: 1px solid var(--color-border); --appearance-overlay-radius: max(0px, calc(var(--radius-surface) - 3px)); }
+[data-border-style="base"] { --appearance-overlay-content: "";
+  /* Match the outer frame so the thick base covers its bottom hairline. */
+  --appearance-overlay-inset: -1px;
+  --appearance-panel-shadow: inset 0 -3px var(--color-border-strong);
+}
+[data-border-style="offset"] { --appearance-overlay-content: "";
+  --appearance-overlay-inset: -1px;
+  /* An opaque, hard shadow keeps underlying content out of the offset. */
+  --appearance-panel-shadow: 3px 3px 0 0 var(--color-border-strong);
+}
+
+:where([data-border-style]) :is(.card, .dialog, .table-wrap, .logview, .marked, .palette, pre) {
+  border-radius: var(--appearance-corners);
+  border-style: var(--appearance-panel-border);
+}
+/* Paint decorative edges above table headers and panel footers. */
+:is(.card, .dialog, .table-wrap, .logview, .marked, .palette, pre)::before {
+  content: var(--appearance-overlay-content, none);
+  position: absolute;
+  inset: var(--appearance-overlay-inset);
+  border: var(--appearance-overlay-border);
+  border-radius: var(--appearance-overlay-radius);
+  box-shadow: var(--appearance-panel-shadow);
+  pointer-events: none;
+  z-index: 1;
+}
+:where([data-border-style]) .palette { overflow: visible; }
+:where([data-border-style]) .palette-list { border-end-start-radius: var(--radius-surface); border-end-end-radius: var(--radius-surface); }
+:where([data-border-style]) :is(.card-footer, .dialog-footer) {
+  border-end-start-radius: var(--appearance-footer-start);
+  border-end-end-radius: var(--radius-surface);
+}
+:where([data-border-style]) :is(.btn:not(.btn-xs), .input, .select, .textarea, .nav-item, .menu-item) {
+  border-radius: var(--appearance-control-corners);
+}
 
-   Eight 1px gradient bars on one pseudo-element. No markup, no images, and
-   `--corner-mark: 0` removes them entirely.
-   =========================================================================== */
-.card::after,
-.dialog::after,
-.table-wrap::after,
-.logview::after,
-.marked::after,
-pre::after {
+[data-mark-size="small"] { --corner-mark-tick: 2px; --corner-mark-gap: 1px; }
+[data-mark-size="medium"] { --corner-mark-tick: 4px; --corner-mark-gap: 2px; }
+[data-mark-size="large"] { --corner-mark-tick: 8px; --corner-mark-gap: 4px; }
+[data-corner-marks] {
+  --corner-mark: 1;
+  --appearance-palette-marks: "";
+  --appearance-mark-mask: none;
+  --appearance-mark-bg: transparent;
+  --appearance-mark-inset: initial;
+  --appearance-mark-images: initial;
+}
+[data-corner-marks="none"] { --corner-mark: 0; }
+:is(.card, .dialog, .table-wrap, .logview, .marked, .palette, pre)::after {
   content: "";
   position: absolute;
-  /* Reach far enough out that a tick clears the frame by the gap. */
-  inset: calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap)));
   pointer-events: none;
   opacity: var(--corner-mark);
   background-repeat: no-repeat;
-  background-image:
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
-    linear-gradient(var(--color-corner-mark), var(--color-corner-mark));
   background-size:
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick),
     var(--corner-mark-tick) 1px, 1px var(--corner-mark-tick);
-  /* The offset lands each tick exactly on the 1px frame line it extends. */
   background-position:
-    left 0 top    calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
-    left  calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
-    right 0 top    calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left 0 top calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
+    right 0 top calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
     right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) top 0,
-    left 0 bottom  calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
-    left  calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0,
+    left 0 bottom calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
+    left calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0,
     right 0 bottom calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
     right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0;
-}
+  inset: var(--appearance-mark-inset, calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap))));
+  background-image: var(--appearance-mark-images,
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
+    linear-gradient(var(--color-corner-mark), var(--color-corner-mark)));
+  background-color: var(--appearance-mark-bg, transparent);
+  mask-image: var(--appearance-mark-mask, none);
+  mask-size: calc(var(--corner-mark-tick) + 1px) calc(var(--corner-mark-tick) + 1px);
+  mask-position: left top, right top, left bottom, right bottom;
+  mask-repeat: no-repeat;
+}
+
+[data-corner-marks="brackets"] {
+  --appearance-mark-images: none;
+  --appearance-mark-bg: var(--color-corner-mark);
+  --appearance-mark-inset: calc(-1 * (var(--corner-mark-gap) + 1px));
+  --appearance-mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%200%29%20scale%28-1%201%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%280%2010%29%20scale%281%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%2010%29%20scale%28-1%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5V.5H9.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
+[data-corner-marks="arcs"] {
+  --appearance-mark-images: none;
+  --appearance-mark-bg: var(--color-corner-mark);
+  --appearance-mark-inset: calc(-1 * (var(--corner-mark-gap) + 1px));
+  --appearance-mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%200%29%20scale%28-1%201%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%280%2010%29%20scale%281%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%2010%29%20scale%28-1%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Cpath%20d%3D%22M.5%209.5Q.5%20.5%209.5%20.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
+[data-corner-marks="dots"] {
+  --appearance-mark-images: none;
+  --appearance-mark-bg: var(--color-corner-mark);
+  --appearance-mark-inset: calc(-1 * (var(--corner-mark-gap) + 1px));
+  --appearance-mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%200%29%20scale%28-1%201%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%280%2010%29%20scale%281%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
+    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cg%20transform%3D%22translate%2810%2010%29%20scale%28-1%20-1%29%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
+.palette::after { content: var(--appearance-palette-marks, none); }
 .marked { position: relative; }
 
 /* ===========================================================================
@@ -1305,3 +1418,13 @@ button.step-row:focus-visible { outline: 2px solid var(--color-focus); outline-o
 @media (pointer: coarse) {
   .chart-series-button { min-height: var(--size-touch-min); min-width: var(--size-touch-min); }
 }
+
+/* Respect reduced motion in every consumer, including React controls. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {