@threadlabs/looma 0.32.1 → 0.33.1

package/styles/ui-tree-item.css

@@ -41,16 +41,16 @@
       --_tree-disclosure-size: 16px;
 
       position: relative;
-      display: block;
+      display: block !important;
       min-inline-size: 0;
-      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
+      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px)) !important;
     }
 
     .row {
       position: relative;
-      display: grid;
+      display: grid !important;
       grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
-      align-items: center;
+      align-items: center !important;
       min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
       font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
@@ -119,10 +119,10 @@
     }
 
     .disclosure {
-      display: grid;
+      display: grid !important;
       /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
       place-items: center start;
-      padding: 0;
+      padding: 0 !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -131,11 +131,11 @@
     }
 
     .disclosure[hidden] {
-      display: none;
+      display: none !important;
     }
 
     .selection-hit {
-      display: none;
+      display: none !important;
       grid-column: 2;
       grid-row: 1;
       place-items: center;
@@ -146,7 +146,7 @@
     .selection-checkbox {
       inline-size: 1rem;
       block-size: 1rem;
-      margin: 0;
+      margin: 0 !important;
       accent-color: var(--ui-accent-solid);
     }
 
@@ -154,7 +154,7 @@
       grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
     }
     :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit {
-      display: grid;
+      display: grid !important;
     }
     :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading {
       grid-column: 3;
@@ -169,7 +169,7 @@
     }
 
     .disclosure-icon {
-      display: grid;
+      display: grid !important;
       place-items: center;
       inline-size: 12px;
       block-size: 12px;
@@ -178,7 +178,7 @@
     }
 
     .disclosure-icon:where(:not([data-component], [data-slotted]))::before {
-      display: block;
+      display: block !important;
       inline-size: 0.375rem;
       block-size: 0.375rem;
       border-inline-end: 1.5px solid currentColor;
@@ -194,20 +194,20 @@
 
     /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
     .drag-handle svg {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       block-size: 100%;
     }
 
     /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
     .leading {
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       grid-column: 2;
       grid-row: 1;
       inline-size: 1em;
       block-size: 1em;
-      margin-inline-start: var(--ui-space-1);
+      margin-inline-start: var(--ui-space-1) !important;
       color: var(--ui-text-muted);
       /* Above the label, so a sliding name passes under the icon. */
       position: relative;
@@ -215,7 +215,7 @@
     }
 
     .leading:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
@@ -226,22 +226,22 @@
       grid-column: 3;
       grid-row: 1;
       align-self: stretch;
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
       overflow: hidden;
-      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
+      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)) !important;
       /* The length of the fade before the controls. The label's one flex child lays out no gap; this
          is where the controller reads the length in pixels to stop a sliding name before the fade. */
-      column-gap: var(--ui-space-1);
+      column-gap: var(--ui-space-1) !important;
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
        its own text and reading as overflow. */
     .label-text {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       /* Stretches, so slotted content can still be the row's full-height hit area. */
       align-self: stretch;
       block-size: 100%;
@@ -291,8 +291,8 @@
        where it was, and fades out across the gap before the icon, fully gone where the icon begins
        to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
-      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
-      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)));
+      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px)) !important;
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))) !important;
       mask-image: linear-gradient(
         to right,
         transparent var(--_marquee-icon-width, 0px),
@@ -334,8 +334,8 @@
       z-index: 1;
       inset-block: 0;
       inset-inline-end: 0;
-      display: inline-flex;
-      align-items: center;
+      display: inline-flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       opacity: 0;
       pointer-events: none;
@@ -360,7 +360,7 @@
         position: static;
         grid-column: 4;
         grid-row: 1;
-        padding-inline-start: 0;
+        padding-inline-start: 0 !important;
         background: none;
         opacity: 1;
         pointer-events: auto;
@@ -417,9 +417,9 @@
       inset-inline-start: 0;
       inline-size: var(--_tree-disclosure-size);
       block-size: 24px;
-      display: grid;
+      display: grid !important;
       place-items: center;
-      padding: 5px 2px;
+      padding: 5px 2px !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -457,7 +457,7 @@
       position: absolute;
       z-index: 3;
       inset-inline: 1px;
-      display: none;
+      display: none !important;
       block-size: var(--ui-accent-line-width);
       border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
@@ -485,17 +485,17 @@
     }
 
     :scope:where([data-component~="ui-tree-item"])[data-drop-position="before"] > .row > .row-drop-indicator {
-      display: block;
+      display: block !important;
       inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     :scope:where([data-component~="ui-tree-item"])[data-drop-position="after"] > .subtree-drop-indicator {
-      display: block;
+      display: block !important;
       inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     .children[hidden] {
-      display: none;
+      display: none !important;
     }
 
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) {
@@ -514,7 +514,7 @@
       inset: auto;
       inline-size: 44px;
       block-size: 44px;
-      padding: 14px;
+      padding: 14px !important;
       opacity: 1;
       transform: none;
       cursor: pointer;
@@ -584,7 +584,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-tree-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-tree-item"]) to ([data-component]) {
@@ -601,7 +601,7 @@
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
     :where([data-slotted], [data-slotted] *):is(svg),
     :where([data-slotted], [data-slotted] *):is(img) {
-      display: block;
+      display: block !important;
       inline-size: 1em;
       block-size: 1em;
       flex: none;
@@ -697,16 +697,16 @@
       --_tree-disclosure-size: 16px;
 
       position: relative;
-      display: block;
+      display: block !important;
       min-inline-size: 0;
-      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
+      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px)) !important;
     }
 
     .row:where(:scope, :scope *) {
       position: relative;
-      display: grid;
+      display: grid !important;
       grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
-      align-items: center;
+      align-items: center !important;
       min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
       font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
@@ -772,10 +772,10 @@
     }
 
     .disclosure:where(:scope, :scope *) {
-      display: grid;
+      display: grid !important;
       /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
       place-items: center start;
-      padding: 0;
+      padding: 0 !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -784,11 +784,11 @@
     }
 
     .disclosure[hidden]:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
 
     .selection-hit:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
       grid-column: 2;
       grid-row: 1;
       place-items: center;
@@ -799,7 +799,7 @@
     .selection-checkbox:where(:scope, :scope *) {
       inline-size: 1rem;
       block-size: 1rem;
-      margin: 0;
+      margin: 0 !important;
       accent-color: var(--ui-accent-solid);
     }
 
@@ -807,7 +807,7 @@
       grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
     }
     :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: grid;
+      display: grid !important;
     }
     :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
       grid-column: 3;
@@ -822,7 +822,7 @@
     }
 
     .disclosure-icon:where(:scope, :scope *) {
-      display: grid;
+      display: grid !important;
       place-items: center;
       inline-size: 12px;
       block-size: 12px;
@@ -831,7 +831,7 @@
     }
 
     .disclosure-icon:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope *)::before {
-      display: block;
+      display: block !important;
       inline-size: 0.375rem;
       block-size: 0.375rem;
       border-inline-end: 1.5px solid currentColor;
@@ -847,20 +847,20 @@
 
     /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
     .drag-handle:where(:scope, :scope *) svg {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       block-size: 100%;
     }
 
     /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
     .leading:where(:scope, :scope *) {
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       grid-column: 2;
       grid-row: 1;
       inline-size: 1em;
       block-size: 1em;
-      margin-inline-start: var(--ui-space-1);
+      margin-inline-start: var(--ui-space-1) !important;
       color: var(--ui-text-muted);
       /* Above the label, so a sliding name passes under the icon. */
       position: relative;
@@ -868,7 +868,7 @@
     }
 
     .leading:empty:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
 
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
@@ -879,22 +879,22 @@
       grid-column: 3;
       grid-row: 1;
       align-self: stretch;
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
       overflow: hidden;
-      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
+      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)) !important;
       /* The length of the fade before the controls. The label's one flex child lays out no gap; this
          is where the controller reads the length in pixels to stop a sliding name before the fade. */
-      column-gap: var(--ui-space-1);
+      column-gap: var(--ui-space-1) !important;
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
        its own text and reading as overflow. */
     .label-text:where(:scope, :scope *) {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       /* Stretches, so slotted content can still be the row's full-height hit area. */
       align-self: stretch;
       block-size: 100%;
@@ -938,8 +938,8 @@
        where it was, and fades out across the gap before the icon, fully gone where the icon begins
        to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee]:where(:scope, :scope *) > .label {
-      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
-      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)));
+      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px)) !important;
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))) !important;
       mask-image: linear-gradient(
         to right,
         transparent var(--_marquee-icon-width, 0px),
@@ -981,8 +981,8 @@
       z-index: 1;
       inset-block: 0;
       inset-inline-end: 0;
-      display: inline-flex;
-      align-items: center;
+      display: inline-flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       opacity: 0;
       pointer-events: none;
@@ -1004,7 +1004,7 @@
         position: static;
         grid-column: 4;
         grid-row: 1;
-        padding-inline-start: 0;
+        padding-inline-start: 0 !important;
         background: none;
         opacity: 1;
         pointer-events: auto;
@@ -1058,9 +1058,9 @@
       inset-inline-start: 0;
       inline-size: var(--_tree-disclosure-size);
       block-size: 24px;
-      display: grid;
+      display: grid !important;
       place-items: center;
-      padding: 5px 2px;
+      padding: 5px 2px !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -1094,7 +1094,7 @@
       position: absolute;
       z-index: 3;
       inset-inline: 1px;
-      display: none;
+      display: none !important;
       block-size: var(--ui-accent-line-width);
       border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
@@ -1121,17 +1121,17 @@
     }
 
     :where([data-component~="ui-tree-item"])[data-drop-position="before"] > .row > .row-drop-indicator:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: block;
+      display: block !important;
       inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     :where([data-component~="ui-tree-item"])[data-drop-position="after"] > .subtree-drop-indicator:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: block;
+      display: block !important;
       inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     .children[hidden]:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
 
     html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
@@ -1149,7 +1149,7 @@
       inset: auto;
       inline-size: 44px;
       block-size: 44px;
-      padding: 14px;
+      padding: 14px !important;
       opacity: 1;
       transform: none;
       cursor: pointer;
@@ -1217,6 +1217,6 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :where([data-component~="ui-tree-item"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-tree.css

@@ -43,22 +43,22 @@
       --_ui-default-tree-item-min-block-size: initial;
       --_ui-default-tree-item-font-size: initial;
       --_ui-default-tree-item-label-padding-block: initial;
-      display: block;
+      display: block !important;
       min-inline-size: 0;
-      padding-inline-start: var(--ui-tree-gutter, 0px);
+      padding-inline-start: var(--ui-tree-gutter, 0px) !important;
     }
 
     :scope:where([data-component~="ui-tree"])[data-move-mode]::after {
       content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
-      display: block;
-      padding: var(--ui-space-2);
+      display: block !important;
+      padding: var(--ui-space-2) !important;
       color: var(--ui-text-secondary);
       font-size: var(--ui-font-size-sm);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-tree"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-tree"]) to ([data-component]) {

package/theme-system.css

@@ -0,0 +1,80 @@
+/* Optional shared recipe. Load after tokens.css and the chosen palette.
+   Existing public roles remain the customization interface; no component selectors. */
+@layer theme {
+  :root {
+    --ui-density: 1;
+    --ui-scale-ratio: 1.2;
+    --ui-space-curve: 1;
+    --ui-outer-depth: 0.6;
+    --ui-inner-depth: 0.3;
+    --ui-edge-light: 0;
+    --ui-overlay-translucency: 0;
+  }
+
+  :where(:root, [data-theme], [data-contrast]) {
+    /* Controls use a ratio. Spacing uses an independent curve, so increasing the size
+       contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
+    --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
+    --_ui-theme-unit: calc(var(--ui-control-size) * 0.1 * max(0, var(--ui-density)));
+    --_ui-theme-curve: max(0, var(--ui-space-curve));
+    --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
+    --ui-control-size-md: var(--ui-control-size);
+    --ui-control-size-lg: calc(var(--ui-control-size) * var(--_ui-theme-ratio));
+    --ui-space-1: var(--_ui-theme-unit);
+    --ui-space-2: calc(var(--_ui-theme-unit) * pow(2, var(--_ui-theme-curve)));
+    --ui-space-3: calc(var(--_ui-theme-unit) * pow(3, var(--_ui-theme-curve)));
+    --ui-space-4: calc(var(--_ui-theme-unit) * pow(4, var(--_ui-theme-curve)));
+    --ui-space-0-5: calc(var(--ui-space-1) * 0.5);
+    --ui-space-5: calc(var(--_ui-theme-unit) * pow(6, var(--_ui-theme-curve)));
+    --ui-space-6: calc(var(--_ui-theme-unit) * pow(8, var(--_ui-theme-curve)));
+    /* Vertical editing/action insets fit the shared box instead of growing with the
+       page spacing curve. Multi-line content can still grow intrinsically. */
+    --ui-control-inset-block-sm: max(0px, calc((var(--ui-control-size-sm) - var(--ui-font-size-sm) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    --ui-control-inset-block-md: max(0px, calc((var(--ui-control-size-md) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    --ui-control-inset-block-lg: max(0px, calc((var(--ui-control-size-lg) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    --ui-action-inset-sm: calc(var(--ui-control-size-sm) * 0.625 * var(--ui-density));
+    --ui-action-inset-md: calc(var(--ui-control-size-md) * 0.625 * var(--ui-density));
+    --ui-action-inset-lg: calc(var(--ui-control-size-lg) * 0.625 * var(--ui-density));
+
+    --ui-radius-sm: calc(var(--ui-radius-md) * 0.5);
+    --ui-radius-lg: calc(var(--ui-radius-md) * 1.5);
+    --ui-action-radius: var(--ui-radius-md);
+    --ui-field-radius: var(--ui-radius-md);
+    --ui-overlay-radius: calc(var(--ui-radius-md) * 1.75);
+
+    /* Depth changes elevation and recession, not motion amplitude. Neutral shadows
+       work across palettes without an extra ornamental brand colour. */
+    --_ui-theme-outer: max(0, var(--ui-outer-depth));
+    --_ui-theme-inner: max(0, var(--ui-inner-depth));
+    --_ui-theme-edge: clamp(0, var(--ui-edge-light), 1);
+    --_ui-theme-edge-paint: inset 1px 1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.08)), inset -1px -1px 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.08));
+    --ui-action-edge: var(--_ui-theme-edge-paint);
+    --ui-shadow-xs: 0 calc(1px * var(--_ui-theme-outer)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
+    --ui-shadow-sm: 0 calc(1px * var(--_ui-theme-outer)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-md: var(--ui-shadow-sm);
+    --ui-shadow-lg: 0 calc(8px * var(--_ui-theme-outer)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-xl: var(--ui-shadow-lg);
+    --ui-action-shadow: var(--ui-shadow-sm);
+    --ui-raised: var(--ui-shadow-sm);
+    --ui-elevation-tooltip: var(--ui-shadow-sm);
+    --ui-elevation-overlay: var(--ui-shadow-lg);
+    --ui-elevation-dialog: var(--ui-shadow-lg);
+    --ui-control-inset: inset 0 calc(1px * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset 0 -1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.18));
+    --ui-pressed: inset 0 calc(2px * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
+    --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
+
+    /* Existing timing and easing names stay canonical. */
+    --ui-motion-press: calc(var(--ui-motion-fast) / 3);
+    --ui-motion-base: calc(var(--ui-motion-fast) * 1.2);
+    --ui-motion-ease-out: var(--ui-motion-ease);
+    --ui-press-scale: 0.98;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(:root, [data-theme], [data-contrast]) {
+      --ui-motion-press: 0ms;
+      --ui-motion-base: 0ms;
+      --ui-press-scale: 1;
+    }
+  }
+}

package/tokens.css

@@ -106,6 +106,12 @@
     --ui-font-family-sans: var(--ui-font-sans);
     --ui-font-family-mono: var(--ui-font-mono);
 
+    /* Text actions share the spacing scale; a theme may derive roomier action insets from its
+       control sizes without altering field padding or the common control height. */
+    --ui-action-inset-sm: var(--ui-space-2);
+    --ui-action-inset-md: var(--ui-space-3);
+    --ui-action-inset-lg: var(--ui-space-4);
+
     /* Space steps either side of the contract's four. */
     --ui-space-0-5: calc(var(--ui-space-1) * 0.5);
     --ui-space-5: calc(var(--ui-space-4) * 1.5);
@@ -243,6 +249,11 @@
     --ui-control-size-md: var(--ui-control-size);
     --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
+    /* Choice marks follow typography; row heights follow the shared control scale. */
+    --ui-choice-mark-size: calc(var(--ui-font-size) * 1.125);
+    --ui-choice-track-height: calc(var(--ui-font-size) * 1.5);
+    --ui-choice-track-width: calc(var(--ui-font-size) * 2.5);
+
     /* Icon sizes, used by icon buttons and field affordances. */
     --ui-icon-size-sm: var(--ui-font-size);
     --ui-icon-size-md: calc(var(--ui-font-size) * 1.25);
@@ -355,14 +366,14 @@
   [data-ui-choice-option][data-multiple]::before {
     content: "";
     flex: none;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--ui-choice-mark-size);
+    block-size: var(--ui-choice-mark-size);
     border: var(--ui-border-width) solid var(--ui-control-border-hover, var(--ui-border-strong));
     border-radius: var(--ui-radius-sm);
     background-color: var(--ui-control-surface);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 0.7rem;
+    background-size: calc(var(--ui-font-size) * 0.7);
   }
 
   [data-ui-choice-option][data-multiple][aria-selected="true"]::before {

package/vanilla/UiColorPicker.d.ts

@@ -0,0 +1,30 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiColorPickerEventMap {
+  input: CustomEvent<{ readonly value: string }>;
+  change: CustomEvent<{ readonly value: string }>;
+}
+export interface UiColorPickerElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiColorPickerEventMap>(type: K, listener: (this: UiColorPickerElement, event: UiColorPickerEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiColorPickerElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiColorPickerEventMap>(type: K, listener: (this: UiColorPickerElement, event: UiColorPickerEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiColorPickerElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiColorPickerProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  name?: string | null;
+  round?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
+  value?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiColorPicker(props?: UiColorPickerProps): UiColorPickerElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-color-picker": { element: UiColorPickerElement; props: Omit<UiColorPickerProps, "attributes" | "children" | "slots"> };
+  }
+}