@momoi-labs/kiso 0.11.0 → 0.12.1

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.
 
@@ -80,7 +80,7 @@ it, so the mark points at the corner without touching it.
 | Token | Value | Meaning |
 | --- | --- | --- |
 | `--color-corner-mark` | `--color-border-strong` | Tick colour. |
-| `--corner-mark` | `1` | Opacity: marks on (`1`) or off (`0`). |
+| `--corner-mark` | `1` | Marks on (`1`) or off (`0`). Off marks also drop their inset, so they add no overflow to a scroll container around the panel. |
 | `--corner-mark-tick` | 4px | Length of one tick. |
 | `--corner-mark-gap` | 2px | Distance from tick end to the frame. |
 
@@ -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,16 +277,16 @@ 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.
 
 | Token | Value | Meaning |
 | --- | --- | --- |
-| `--corner-mark` | `1` | Opacity: marks on (`1`) or off (`0`). |
+| `--corner-mark` | `1` | Marks on (`1`) or off (`0`). Off marks also drop their inset, so they add no overflow to a scroll container around the panel. |
 | `--corner-mark-tick` | 4px | Length of one tick. |
 | `--corner-mark-gap` | 2px | Distance from tick end to the frame. |
 
@@ -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

@@ -106,9 +106,11 @@ a, .link {
 a:hover, .link:hover { text-decoration: underline; }
 
 /* --- layout helpers ------------------------------------------------------ */
-.stack   { display: grid; gap: var(--spacing-lg); }
-.stack-sm{ display: grid; gap: var(--spacing-sm); }
-.stack-xs{ display: grid; gap: var(--spacing-xs); }
+/* One explicit column of minmax(0, 1fr), so a wide table, chart, or log line
+   inside a stack cannot widen the page; it scrolls or wraps in place instead. */
+.stack   { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
+.stack-sm{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
+.stack-xs{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
 .row     { display: flex; align-items: center; gap: var(--spacing-sm); }
 .row-md  { display: flex; align-items: center; gap: var(--spacing-md); }
 .row-wrap{ display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
@@ -667,6 +669,9 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
 .table .col-tight { width: 1%; white-space: nowrap; }
 .th-sort { display: inline-flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; background: none; border: 0; font: inherit; color: inherit; padding: 0; }
 .table-toolbar { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
+/* In a toolbar a select is an accessory to the search, not a form field, so
+   it takes only what its longest option needs. */
+.table-toolbar > .select { width: auto; flex: none; }
 .table-footer  { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--color-border); font-size: var(--type-size-label); color: var(--color-muted-foreground); }
 
 /* ===========================================================================
@@ -682,12 +687,16 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
   font-size: var(--type-size-body);
   font-weight: var(--type-weight-medium);
   color: var(--color-muted-foreground);
+  white-space: nowrap; /* a strip that scrolls sideways must not wrap "Last run" */
   cursor: pointer;
 }
 .tabs button:hover { color: var(--color-foreground); }
 .tabs button[aria-selected="true"] { color: var(--color-foreground); }
+/* The underline stays inside the button, just above the strip's border, so a
+   strip that scrolls sideways has no extra pixel of block overflow to draw a
+   scrollbar for. */
 .tabs button[aria-selected="true"]::after {
-  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
+  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
   background: var(--color-primary);
   border-radius: var(--radius-full);
 }
@@ -798,6 +807,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);
@@ -988,7 +998,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
   font-weight: var(--type-weight-medium);
 }
 
-.page { padding: var(--spacing-xl); display: grid; gap: var(--spacing-xl); align-content: start; max-width: var(--size-content-max); }
+.page { padding: var(--spacing-xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); align-content: start; min-width: 0; max-width: var(--size-content-max); }
 .page-header { display: grid; gap: var(--spacing-2xs); }
 
 /* ===========================================================================
@@ -1066,65 +1076,188 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
   .chip-action { min-width: var(--size-touch-min); height: var(--size-touch-min); }
 }
 
+/* Narrow viewports: the sidebar stacks above main as compact navigation
+   instead of disappearing, since it may be the only way to reach a
+   destination. It keeps its own scroller so a long list does not push the
+   page down. */
 @media (max-width: 1023px) {
   .app-shell { grid-template-columns: 1fr; }
-  .sidebar { display: none; }
+  .sidebar {
+    position: static; height: auto; max-height: 40vh;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--color-sidebar-border);
+  }
 }
 
 
-/* ===========================================================================
-   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;
-}
+  /* Marks that are off (`--corner-mark: 0`) also collapse the inset to 0, so
+     the pseudo-element stops reaching outside the frame and a scroll container
+     around the panel does not scroll for marks nobody sees. */
+  inset: calc(var(--corner-mark, 1) * 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 +1438,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.1",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {