@threadlabs/looma 0.16.5 → 0.17.1

package/styles/ui-editor-slash-menu-item.css

@@ -14,9 +14,14 @@
       background: var(--ui-accent-subtle);
     }
     :scope[aria-disabled="true"] {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
       cursor: not-allowed;
     }
+    :scope[aria-disabled="true"] .title,
+    :scope[aria-disabled="true"] .description,
+    :scope[aria-disabled="true"] .icon {
+      color: var(--ui-disabled-text);
+    }
 
     .icon {
       display: flex;

package/styles/ui-editor-slash-menu.css

@@ -6,7 +6,7 @@
 
     :scope {
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
       box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
       overflow: hidden;
@@ -26,7 +26,7 @@
       align-items: center;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-bottom: 1px solid var(--ui-border);
+      border-bottom: 1px solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
       font-weight: var(--ui-font-semibold);
@@ -34,7 +34,7 @@
       letter-spacing: 0.05em;
     }
 
-    .header:not(:has(> *)), .footer:not(:has(> *)), .empty:not(:has(> *)) {
+    :scope > .header:empty, :scope > .footer:empty, :scope > .empty:empty {
       display: none;
     }
 
@@ -151,7 +151,7 @@
 
     .footer {
       padding: var(--ui-space-2) var(--ui-space-3);
-      border-top: 1px solid var(--ui-border);
+      border-top: 1px solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
     }

package/styles/ui-editor-table-context-menu.css

@@ -8,7 +8,7 @@
       max-height: min(28rem, calc(100vh - 24px));
       padding: var(--ui-space-2);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -110,7 +110,7 @@
 
     .sep {
       height: 1px;
-      background: var(--ui-border);
+      background: var(--ui-border-divider);
       margin: var(--ui-space-1) 0;
     }
 

package/styles/ui-editor-table-toolbar.css

@@ -35,7 +35,7 @@
       gap: var(--ui-space-1);
       padding: var(--ui-space-1);
       background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: calc(var(--ui-radius-md) + 2px);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       backdrop-filter: blur(10px);
@@ -51,7 +51,7 @@
     .sep {
       width: 1px;
       align-self: stretch;
-      background: var(--ui-border);
+      background: var(--ui-border-divider);
     }
 
     .overflow {
@@ -124,7 +124,7 @@
       min-width: 12rem;
       padding: var(--ui-space-1);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -136,7 +136,7 @@
     .menu-section + .menu-section {
       margin-top: var(--ui-space-1);
       padding-top: var(--ui-space-1);
-      border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
+      border-top: 1px solid var(--ui-border-divider);
     }
 
     .menu-heading {

package/styles/ui-editor-toolbar.css

@@ -9,7 +9,7 @@
       padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
     }
 
     /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
@@ -64,7 +64,7 @@
       min-height: auto;
       padding: var(--ui-editor-toolbar-floating-padding, 4px);
       background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
-      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
       box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       backdrop-filter: blur(10px);
@@ -78,7 +78,7 @@
         left: 0;
         right: 0;
         min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
         border-bottom: none;
         box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
       }
@@ -87,7 +87,7 @@
         position: relative;
         inset: auto;
         min-height: auto;
-        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
         border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
         box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       }
@@ -138,7 +138,7 @@
     :where([data-slotted], [data-slotted] *):is(.divider) {
       width: 1px;
       height: 20px;
-      background: var(--ui-editor-toolbar-divider, var(--ui-border));
+      background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
       flex-shrink: 0;
       margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
     }

package/styles/ui-floating-action-button.css

@@ -61,7 +61,9 @@
     }
 
     :scope:disabled {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
+      box-shadow: none;
       cursor: not-allowed;
     }
 

package/styles/ui-icon-button.css

@@ -102,15 +102,30 @@
       pointer-events: none;
     }
 
-    /* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
-     * surface and icon. The root is the native button, so hiding it outright would hide the dot
-     * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
+    :scope[data-ui-icon-button-state~="anticipatory"]:disabled::before {
+      opacity: 0;
+    }
+
+    /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+       proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+    :scope[data-ui-icon-button-state~="anticipatory"] .content {
+      opacity: 1;
+      transform: scale(1);
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease), transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
+    }
+
     @media (hover: hover) and (pointer: fine) {
-      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
+      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background: transparent;
         box-shadow: none;
-        color: transparent;
+      }
+
+      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+        .content {
+        opacity: 0;
+        transform: scale(0.65);
+        transition-duration: var(--ui-motion-fast);
       }
     }
 
@@ -140,7 +155,7 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease),
         transform var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
@@ -201,13 +216,16 @@
     }
 
     :scope[data-ui-icon-button-state~="variant=outline"] {
-      border-color: var(--ui-icon-button-border, var(--ui-border-default));
+      border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
       background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+      background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
+      box-shadow: var(--ui-raised);
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"] {
       background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+      background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
       box-shadow: var(
         --ui-icon-button-solid-shadow,
@@ -222,7 +240,7 @@
     }
 
     :scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
-      border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+      border-color: var(--ui-icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
@@ -233,30 +251,45 @@
       transform: scale(var(--ui-icon-button-active-scale, 0.96));
     }
 
-    :scope[data-ui-icon-button-state~="pending"] {
+    :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) {
       cursor: progress;
     }
 
     .content {
-      display: contents;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    :scope[data-ui-icon-button-state~="pending"] .content {
+    :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) .content {
       display: none;
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      :scope[data-ui-icon-button-state~="anticipatory"] .content {
+        transition: none;
+      }
+    }
+
     :scope:focus-visible {
       outline: none;
       box-shadow: var(--ui-focus-halo);
     }
 
-    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
-    /* Disabled washes the button out the way Button does: the same shape, one filter. */
+    /* Disabled is a flat neutral control, independent of the active variant's tone. */
     :scope:disabled {
+      border-color: var(--ui-disabled-border);
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-icon-button-disabled-opacity, 1);
       cursor: not-allowed;
       box-shadow: none;
+      background-image: none;
+    }
+
+    :scope[data-ui-icon-button-state~="variant=ghost"]:disabled {
+      border-color: transparent;
     }
 
     :scope {
@@ -283,9 +316,9 @@
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
-     * surface and icon. The root is the native button, so hiding it outright would hide the dot
-     * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
+    /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+       proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+
     @media (hover: hover) and (pointer: fine) {
     }
 
@@ -297,8 +330,10 @@
     @media (pointer: coarse) {
     }
 
-    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
-    /* Disabled washes the button out the way Button does: the same shape, one filter. */
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* Disabled is a flat neutral control, independent of the active variant's tone. */
 
     :where([data-slotted], [data-slotted] *):is(svg) {
       inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));

package/styles/ui-list-item.css

@@ -48,7 +48,7 @@
     :scope[data-ui-list-item-state~="variant=card"] {
       padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
       padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
-      border: 1px solid var(--ui-border-default);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
     }

package/styles/ui-list.css

@@ -10,32 +10,50 @@
 @scope ([data-component~="ui-list"]) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+    /* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
        explicit list role keeps the list announced as one: some browsers drop it from a list with no
        markers. */
     :scope {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-1));
+      --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
       display: flex;
       flex-direction: column;
-      gap: var(--ui-list-gap, var(--ui-space-1));
+      inline-size: 100%;
+      gap: var(--_list-gap);
       min-inline-size: 0;
       margin: 0;
       padding: 0;
       list-style: none;
     }
 
+    :scope[data-ui-list-state~="as=ol"],
+    :scope[data-ui-list-state~="markers=disc"] {
+      padding-inline-start: var(--ui-space-5);
+    }
+
+    :scope[data-ui-list-state~="as=ol"] {
+      list-style: decimal;
+    }
+
+    :scope[data-ui-list-state~="markers=disc"] {
+      list-style: disc;
+    }
+
     /* Compact passes its size to the items through private properties, which cross into each item. */
     :scope[data-ui-list-state~="density=compact"] {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-2));
       --_ui-list-item-min-size: 0;
       --_ui-list-item-padding-block: 0;
       --_ui-list-item-padding-inline: 0;
       --_ui-list-item-title-weight: var(--ui-font-normal);
-      gap: var(--ui-list-gap, var(--ui-space-2));
+      --_ui-list-native-padding-block: 0;
+      --_ui-list-native-padding-inline: 0;
     }
 
     :scope[data-ui-list-state~="layout=grid"] {
+      --_list-gap: var(--ui-list-gap, var(--ui-space-3));
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
-      gap: var(--ui-list-gap, var(--ui-space-3));
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -46,10 +64,27 @@
 @scope ([data-component~="ui-list"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+    /* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
        explicit list role keeps the list announced as one: some browsers drop it from a list with no
        markers. */
 
+    :scope > :where([data-slotted], [data-slotted] *):is(li) {
+      box-sizing: border-box;
+      min-inline-size: 0;
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      list-style: inherit;
+    }
+
+    :scope > :where([data-slotted], [data-slotted] *):is(li.card) {
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4));
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+      list-style: none;
+    }
+
     /* Compact passes its size to the items through private properties, which cross into each item. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-menu-item.css

@@ -29,7 +29,7 @@
     :scope {
       display: flex;
       align-items: center;
-      gap: var(--ui-space-5);
+      gap: var(--ui-space-2);
       box-sizing: border-box;
       width: 100%;
       padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
@@ -52,16 +52,43 @@
 
     .indicator {
       display: inline-flex;
-      place-items: center;
+      align-items: center;
+      justify-content: center;
       flex: none;
-      inline-size: var(--ui-icon-size-md);
-      color: var(--ui-accent-solid);
+      box-sizing: border-box;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+      border: 1.5px solid var(--ui-control-border);
+      border-radius: var(--ui-radius-sm);
+      color: var(--ui-surface);
+      --_ui-default-icon-size: 0.75rem;
     }
 
     :scope[data-ui-menu-item-state~="type=action"] .indicator {
       display: none;
     }
 
+    :scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
+      border-color: var(--ui-accent);
+      background: var(--ui-accent);
+    }
+
+    :scope[data-ui-menu-item-state~="type=radio"] .indicator {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :scope[data-ui-menu-item-state~="type=radio"][aria-checked="true"] .indicator {
+      border-color: var(--ui-accent);
+    }
+
+    :scope[data-ui-menu-item-state~="type=radio"][aria-checked="true"] .indicator::after {
+      content: "";
+      inline-size: 0.375rem;
+      block-size: 0.375rem;
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-accent);
+    }
+
     .shortcut {
       margin-inline-start: auto;
       color: var(--ui-text-secondary);
@@ -92,10 +119,21 @@
     }
 
     :scope[aria-disabled="true"] {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 
+    :scope[aria-disabled="true"] .indicator {
+      border-color: var(--ui-disabled-border);
+      background: transparent;
+      color: var(--ui-disabled-text);
+    }
+
+    :scope[aria-disabled="true"] .indicator::after {
+      background: var(--ui-disabled-text);
+    }
+
     @media (forced-colors: active) {
       :scope:focus-visible {
         outline-color: Highlight;

package/styles/ui-menu.css

@@ -65,7 +65,7 @@
       max-inline-size: inherit;
       padding: var(--ui-space-1);
       background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       max-block-size: inherit;
@@ -77,10 +77,10 @@
       block-size: 0;
       margin: var(--ui-space-1) 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-border-default);
+      border-block-start: 1px solid var(--ui-border-divider);
     }
 
-    :scope:not(:scope[data-ui-menu-state~="internalOpen"]) {
+    :scope:not(:scope[data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"]) {
       display: none;
     }
 

package/styles/ui-meter.css

@@ -20,6 +20,7 @@
       overflow: hidden;
       border-radius: var(--ui-radius-round);
       background: var(--ui-border);
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1), inset 0 -1px rgb(255 255 255 / 0.22);
       /* Unseen until forced colours draw it, where the track's own colour is gone. */
       outline: 1px solid transparent;
     }
@@ -32,7 +33,9 @@
     .fill {
       display: block;
       block-size: 100%;
-      background: var(--_meter-fill);
+      background-color: var(--_meter-fill);
+      background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
+      box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
     }
 
     :scope[data-ui-meter-state~="tone=accent"] {

package/styles/ui-nav-item.css

@@ -76,7 +76,6 @@
       inset-inline-start: 0;
       display: none;
       border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
-      border-radius: var(--ui-radius-round);
     }
 
     :scope[aria-current] .indicator {

package/styles/ui-page-header.css

@@ -6,6 +6,7 @@
     :scope {
       display: flex;
       flex-wrap: wrap;
+      inline-size: 100%;
       align-items: center;
       gap: var(--ui-space-3) var(--ui-space-4);
       min-inline-size: 0;

package/styles/ui-popover.css

@@ -53,7 +53,7 @@
       overflow: auto;
       padding: var(--ui-space-3);
       background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }

package/styles/ui-radio.css

@@ -49,7 +49,7 @@
       flex: 0 0 auto;
       inline-size: var(--_ui-radio-size, 1.125rem);
       block-size: var(--_ui-radio-size, 1.125rem);
-      margin: 0.125em 0 0;
+      margin: calc(0.125em + 1px) 0 0;
       accent-color: var(--ui-accent-solid);
       cursor: pointer;
     }
@@ -63,6 +63,9 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    :scope[data-ui-radio-state~="disabled"] .description {
+      color: var(--ui-disabled-text);
+    }
     :scope[data-ui-radio-state~="disabled"] input {
       cursor: not-allowed;
     }
@@ -89,7 +92,7 @@
 
     :scope[data-ui-radio-state~="size=sm"] input,
     :scope[data-ui-radio-state~="size=lg"] input {
-      margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2);
+      margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2 + 1px);
     }
 
     @media (pointer: coarse) {

package/styles/ui-scroll-area.css

@@ -1,9 +1,8 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
 @scope ([data-component~="ui-scroll-area"]) to ([data-component], [data-slotted]) {
-/* A region that scrolls when its content outgrows it. Each edge that hides content fades, growing
-       in as the content leaves that edge (the scroll fade in tokens.css), so the reader can tell there
-       is more; an edge with nothing past it stays crisp, and content that fits shows no fade. The
-       fade is a mask, so it blends into whatever is behind the area without knowing its colour. */
+/* The controller sets each fade length from overflow and scroll position. The mask blends
+       into whatever is behind the area without needing to know its colour. Before upgrade, its
+       zero-length defaults leave the authored scroll area fully visible. */
     :scope {
       display: block;
       box-sizing: border-box;
@@ -22,20 +21,16 @@
         #000 calc(100% - var(--_ui-scroll-fade-end)),
         transparent
       );
-      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
-      animation-timeline: scroll(self block);
-      animation-range:
-        0 var(--_ui-scroll-fade-size),
-        var(--_ui-scroll-fade-size) calc(100% + 1px),
-        -1px calc(100% - var(--_ui-scroll-fade-size)),
-        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    .content {
+      display: flow-root;
     }
 
     :scope[data-ui-scroll-area-state~="orientation=horizontal"] {
       overflow-x: auto;
       overflow-y: hidden;
       --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
-      animation-timeline: scroll(self inline);
     }
 
     :scope:dir(rtl) {
@@ -48,10 +43,9 @@
     }
 }
 @scope ([data-component~="ui-scroll-area"]) to ([data-component]) {
-/* A region that scrolls when its content outgrows it. Each edge that hides content fades, growing
-       in as the content leaves that edge (the scroll fade in tokens.css), so the reader can tell there
-       is more; an edge with nothing past it stays crisp, and content that fits shows no fade. The
-       fade is a mask, so it blends into whatever is behind the area without knowing its colour. */
+/* The controller sets each fade length from overflow and scroll position. The mask blends
+       into whatever is behind the area without needing to know its colour. Before upgrade, its
+       zero-length defaults leave the authored scroll area fully visible. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-search-result-row.css

@@ -46,7 +46,7 @@
       gap: var(--ui-search-result-row-gap, var(--ui-space-3));
       background: var(--ui-search-result-row-surface, transparent);
       border: none;
-      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border));
+      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border-divider));
       color: inherit;
       cursor: pointer;
       text-align: left;
@@ -74,7 +74,8 @@
     }
 
     :scope:disabled {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }