@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.5.1",
+  "version": "0.6.0-rc.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -77,7 +77,7 @@
     "./*.css"
   ],
   "dependencies": {
-    "@nextwebwg/declarative-components": "^1.0.0-alpha.1",
+    "@nextwebwg/html-next": "^1.0.0-alpha.2",
     "lowlight": "^3.3.0",
     "markdown-it": "14.3.1",
     "lucide": "~0.554.0"

package/styles/ui-affordance-scope.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;

package/styles/ui-avatar-group.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
 :scope {
       display: flex;

package/styles/ui-avatar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-grid;

package/styles/ui-badge.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-badge"]) to ([data-component], [data-slotted]) {
 :scope {
       --_badge-surface: var(--ui-surface-subtle);

package/styles/ui-button.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;
@@ -12,18 +12,28 @@
       color: var(--ui-action-primary-text, var(--ui-text-on-accent));
     }
 
+    :scope[data-ui-button-state~="align=start"] {
+      justify-content: flex-start;
+      text-align: start;
+    }
+
+    :scope[data-ui-button-state~="stretch"] {
+      display: flex;
+      inline-size: 100%;
+    }
+
     :scope {
       appearance: none;
-      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
+      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border: 1px solid var(--ui-button-border, var(--ui-border-strong));
-      border-radius: var(--ui-button-radius, var(--ui-radius-2));
+      border-radius: var(--ui-button-radius, var(--ui-radius-md));
       background: var(--ui-button-surface, var(--ui-surface-elevated));
       color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
       font: inherit;
-      font-weight: var(--ui-font-medium, 500);
+      font-weight: var(--ui-font-medium);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
-      background-image: var(--ui-raised-highlight, none);
+      background-image: var(--ui-raised-highlight);
       box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
       cursor: pointer;
       transition:
@@ -43,13 +53,13 @@
     }
 
     :scope[data-ui-button-state~="size=sm"] {
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: 0.875rem;
     }
 
     :scope[data-ui-button-state~="size=lg"] {
-      min-block-size: var(--ui-control-size-lg, 3rem);
+      min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: 1rem;
     }
@@ -112,12 +122,12 @@
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
     :scope[data-ui-button-state~="variant=ghost"]:hover:enabled {
-      background: var(--ui-button-ghost-hover, color-mix(in srgb, currentColor 8%, transparent));
+      background: var(--ui-button-ghost-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       border-color: transparent;
     }
 
     :scope[data-ui-button-state~="variant=ghost"]:active:enabled {
-      background: var(--ui-button-ghost-active, color-mix(in srgb, currentColor 14%, transparent));
+      background: var(--ui-button-ghost-active-surface, color-mix(in srgb, currentColor 14%, transparent));
       border-color: transparent;
     }
 
@@ -164,7 +174,7 @@
 
     @media (pointer: coarse) {
       :scope {
-        min-block-size: var(--ui-control-min-block-size, 2.75rem);
+        min-block-size: var(--ui-control-min-block-size);
       }
     }
 
@@ -175,11 +185,11 @@
       min-block-size: 0;
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-sm, 4px);
+      border-radius: var(--ui-radius-sm);
       background: none;
       box-shadow: none;
       font: inherit;
-      color: var(--ui-button-link-color, var(--ui-text-secondary));
+      color: var(--ui-button-link-text, var(--ui-text-secondary));
       text-decoration-line: underline;
       text-decoration-thickness: 1px;
       text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
@@ -188,7 +198,7 @@
     }
 
     :scope[data-ui-button-state~="variant=link"]:hover:enabled {
-      color: var(--ui-button-link-hover-color, var(--ui-text-primary));
+      color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
@@ -201,13 +211,13 @@
 
     :scope[data-ui-button-state~="variant=link"]:disabled {
       background: none;
-      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+      color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
     }
 
     :scope[data-ui-button-state~="variant=link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 

package/styles/ui-callout.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-callout"]) to ([data-component], [data-slotted]) {
 :scope {
       --_callout-surface: var(--ui-info-soft);
@@ -13,7 +13,7 @@
       padding: var(--ui-callout-padding-block, var(--ui-space-2)) var(--ui-callout-padding-inline, var(--ui-space-3));
       border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
       border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-callout-surface, var(--_callout-surface));
       color: var(--ui-callout-text, var(--ui-text-primary));
       font-family: var(--ui-font-family-sans);

package/styles/ui-checkbox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;
@@ -23,7 +23,7 @@
       block-size: var(--ui-checkbox-size, 1.125rem);
       margin: 0.125em 0 0;
       border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
       cursor: pointer;

package/styles/ui-cluster.css

@@ -1,7 +1,7 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -12,19 +12,19 @@
     }
 
     :scope[data-ui-cluster-state~="gap=xs"] {
-      --_layout-gap: var(--ui-space-2, 0.5rem);
+      --_layout-gap: var(--ui-space-2);
     }
     :scope[data-ui-cluster-state~="gap=s"] {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
     }
     :scope[data-ui-cluster-state~="gap=m"] {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
     }
     :scope[data-ui-cluster-state~="gap=l"] {
-      --_layout-gap: var(--ui-space-5, 1.5rem);
+      --_layout-gap: var(--ui-space-5);
     }
     :scope[data-ui-cluster-state~="gap=xl"] {
-      --_layout-gap: var(--ui-space-6, 2rem);
+      --_layout-gap: var(--ui-space-6);
     }
     :scope[data-ui-cluster-state~="align=start"] {
       align-items: flex-start;

package/styles/ui-combobox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-combobox"]) to ([data-component], [data-slotted]) {
 :scope {
       display: grid;
@@ -8,15 +8,15 @@
       font: inherit;
     }
     label {
-      color: var(--ui-field-label-color, var(--ui-text-primary));
-      font-size: var(--ui-field-label-size, 0.875rem);
-      font-weight: var(--ui-field-label-weight, 500);
+      color: var(--ui-combobox-label-text, var(--ui-text-primary));
+      font-size: var(--ui-combobox-label-font-size, 0.875rem);
+      font-weight: 500;
     }
     .field {
       display: flex;
       min-inline-size: 0;
       border: 1px solid var(--ui-control-border, var(--ui-border-default));
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
@@ -35,7 +35,7 @@
       appearance: none;
       width: 100%;
       min-inline-size: 0;
-      min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
+      min-block-size: calc(var(--ui-control-size-md) - 2px);
       box-sizing: border-box;
       border: 0;
       border-radius: inherit;
@@ -48,7 +48,7 @@
       outline: none;
     }
     :scope[data-ui-combobox-state~="size=sm"] input {
-      min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
+      min-block-size: calc(var(--ui-control-size-sm) - 2px);
       padding: var(--ui-space-1) var(--ui-space-2);
     }
     button {
@@ -57,19 +57,19 @@
       place-items: center;
       align-self: stretch;
       border: 0;
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: transparent;
-      color: var(--ui-field-affordance-color, var(--ui-text-secondary));
+      color: var(--ui-combobox-affordance-text, var(--ui-text-secondary));
       font: inherit;
-      font-weight: var(--ui-field-affordance-weight, 400);
+      font-weight: 400;
       min-inline-size: 2rem;
       padding: 0 var(--ui-space-1);
       cursor: pointer;
     }
     .affordance-icon {
       display: block;
-      inline-size: var(--ui-icon-size-sm, 1rem);
-      block-size: var(--ui-icon-size-sm, 1rem);
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
     }
     button:hover:enabled {
       background: var(--ui-surface-muted);
@@ -99,7 +99,7 @@
       margin: 0;
       padding: var(--ui-space-1);
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
@@ -109,13 +109,13 @@
     }
     .option {
       padding: var(--ui-space-2) var(--ui-space-3);
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       cursor: pointer;
       overflow-wrap: anywhere;
     }
     .option:hover, .option.active {
       background: var(--ui-surface-muted);
-      outline: 1px solid var(--ui-focus-ring, currentColor);
+      outline: 1px solid var(--ui-focus-ring);
       outline-offset: -1px;
     }
     .option[aria-disabled="true"] {
@@ -124,12 +124,12 @@
     }
     .primary {
       display: block;
-      color: var(--ui-option-primary-color, var(--ui-text-primary));
-      font-weight: var(--ui-option-primary-weight, 500);
+      color: var(--ui-combobox-option-text, var(--ui-text-primary));
+      font-weight: 500;
     }
     .message, .group {
-      color: var(--ui-field-message-color, var(--ui-text-secondary));
-      font-weight: var(--ui-field-message-weight, 400);
+      color: var(--ui-combobox-message-text, var(--ui-text-secondary));
+      font-weight: 400;
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-md);
       overflow-wrap: anywhere;
@@ -165,11 +165,11 @@
       flex-wrap: wrap;
       align-items: center;
       gap: var(--ui-space-1);
-      min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+      min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
       padding: var(--ui-space-1);
     }
     :scope[data-ui-combobox-state~="multiple"] input {
-      flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+      flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
       padding: var(--ui-space-0-5) var(--ui-space-1);
@@ -178,18 +178,18 @@
       appearance: none;
       display: inline-flex;
       min-inline-size: 0;
-      max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+      max-inline-size: min(100%, var(--ui-combobox-item-item-max-inline-size, 12rem));
       overflow: hidden;
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       background: transparent;
       color: inherit;
       font: inherit;
       cursor: default;
     }
     .item:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 1px;
     }
     .item:disabled {

package/styles/ui-container.css

@@ -1,8 +1,8 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
 :scope {
       --_container-measure: 65ch;
-      --_container-gutters: var(--ui-space-4, 1rem);
+      --_container-gutters: var(--ui-space-4);
       display: block;
       inline-size: 100%;
       max-inline-size: var(--ui-container-measure, var(--_container-measure));
@@ -17,13 +17,13 @@
       --_container-measure: 80ch;
     }
     :scope[data-ui-container-state~="gutters=s"] {
-      --_container-gutters: var(--ui-space-3, 0.75rem);
+      --_container-gutters: var(--ui-space-3);
     }
     :scope[data-ui-container-state~="gutters=m"] {
-      --_container-gutters: var(--ui-space-4, 1rem);
+      --_container-gutters: var(--ui-space-4);
     }
     :scope[data-ui-container-state~="gutters=l"] {
-      --_container-gutters: var(--ui-space-5, 1.5rem);
+      --_container-gutters: var(--ui-space-5);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-context-menu.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;
@@ -14,11 +14,11 @@
       padding: var(--ui-space-1);
       background: var(--ui-surface-elevated);
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-3);
+      border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       outline: 0;
       overflow: auto;
-      z-index: var(--ui-z-overlay, 1000);
+      z-index: var(--ui-context-menu-z-index, 1000);
       min-width: 12rem;
       opacity: 0;
       transform: translateY(-4px) scale(0.99);

package/styles/ui-dialog.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @keyframes ui-dialog-enter {
       from {
         opacity: 0;
@@ -16,11 +16,11 @@
       inset: 0;
       box-sizing: border-box;
       inline-size: min(
-        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2),
+        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
         var(--ui-dialog-max-width, 440px)
       );
       max-inline-size: none;
-      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2);
+      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
       margin: auto;
       padding: 0;
       overflow: hidden;
@@ -69,8 +69,8 @@
       border: 0;
       color: var(--ui-text-primary);
       letter-spacing: normal;
-      font-size: var(--ui-font-size-lg, 1.125rem);
-      font-weight: var(--ui-font-semibold, 600);
+      font-size: var(--ui-font-size-lg);
+      font-weight: var(--ui-font-semibold);
       line-height: var(--ui-line-height-tight);
     }
 
@@ -79,11 +79,11 @@
       place-items: center;
       flex: none;
       margin-inline-start: auto;
-      inline-size: var(--ui-control-size-sm, 2rem);
-      block-size: var(--ui-control-size-sm, 2rem);
+      inline-size: var(--ui-control-size-sm);
+      block-size: var(--ui-control-size-sm);
       padding: 0;
       border: 0;
-      border-radius: var(--ui-radius-round, 999px);
+      border-radius: var(--ui-radius-round);
       background: transparent;
       color: var(--ui-text-secondary);
       cursor: pointer;
@@ -112,10 +112,23 @@
     }
 
     .close:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 
+    /* A touch target, like Button on coarse pointers. */
+    @media (pointer: coarse) {
+      .close {
+        inline-size: var(--ui-control-min-block-size);
+        block-size: var(--ui-control-min-block-size);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :scope .close {
+      inline-size: var(--ui-control-min-block-size);
+      block-size: var(--ui-control-min-block-size);
+    }
+
     .body {
       flex: 1 1 auto;
       min-block-size: 0;
@@ -157,4 +170,8 @@
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
     /* A CSS-drawn X. */
+
+    /* A touch target, like Button on coarse pointers. */
+    @media (pointer: coarse) {
+    }
 }

package/styles/ui-disclosure.css

@@ -1,6 +1,19 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
-/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+/* Density resolves into the summary row's own values; the public tokens still override them. */
+    :scope {
+      --_trigger-min-block-size: var(--ui-control-size);
+      --_trigger-padding-block: var(--ui-space-2);
+      --_trigger-padding-inline: var(--ui-space-3);
+    }
+
+    :scope[data-ui-disclosure-state~="density=compact"] {
+      --_trigger-min-block-size: var(--ui-control-size-sm);
+      --_trigger-padding-block: var(--ui-space-1);
+      --_trigger-padding-inline: var(--ui-space-2);
+    }
+
+    /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
     :scope {
       display: block;
@@ -16,16 +29,17 @@
       gap: var(--ui-space-3);
       align-items: center;
       inline-size: 100%;
-      min-block-size: 2.5rem;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+      padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+        var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
       border: 0;
       background: transparent;
       color: inherit;
       font: inherit;
-      font-weight: var(--ui-font-semibold, 600);
+      font-weight: var(--ui-font-semibold);
       text-align: start;
       cursor: pointer;
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
@@ -85,7 +99,9 @@
     }
 }
 @scope ([data-component~="ui-disclosure"]) to ([data-component]) {
-/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+/* Density resolves into the summary row's own values; the public tokens still override them. */
+
+    /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-editable.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-editable"]) to ([data-component], [data-slotted]) {
 :scope {
       display: flex;
@@ -21,11 +21,11 @@
     .input {
       grid-area: 1 / 1;
       box-sizing: border-box;
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       margin: 0;
       padding: var(--ui-space-1) var(--ui-space-2);
       border: 1px solid transparent;
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       font: inherit;
       line-height: var(--ui-line-height-md);
       color: inherit;
@@ -95,13 +95,13 @@
     }
 
     .actions button {
-      min-block-size: var(--ui-control-size-sm, 2rem);
+      min-block-size: var(--ui-control-size-sm);
       padding: 0 var(--ui-space-3);
       border: 1px solid var(--ui-border-strong);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
-      background-image: var(--ui-raised-highlight, none);
-      box-shadow: var(--ui-raised, none);
+      background-image: var(--ui-raised-highlight);
+      box-shadow: var(--ui-raised);
       color: inherit;
       font: inherit;
       font-size: var(--ui-font-size-sm);