@threadlabs/looma 0.17.0 → 0.17.2

package/styles/ui-search-shell.css

@@ -89,14 +89,14 @@
       margin-inline: auto;
       overflow: hidden;
       background: var(--_ui-search-shell-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
       box-shadow: var(--_ui-search-shell-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
     }
 
     .search {
       padding: var(--ui-space-3);
-      border-block-end: 1px solid var(--ui-border-default);
+      border-block-end: 1px solid var(--ui-border-divider);
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
@@ -107,7 +107,7 @@
     }
 
     .status,
-    .footer {
+    .actions {
       flex-shrink: 0;
       padding: var(--ui-space-2) var(--ui-space-4);
       color: var(--ui-text-secondary);
@@ -115,22 +115,22 @@
     }
 
     .status {
-      border-block-end: 1px solid var(--ui-border-default);
+      border-block-end: 1px solid var(--ui-border-divider);
     }
 
     /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
-    .footer {
+    .actions {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: flex-end;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-block-start: 1px solid var(--ui-border-default);
+      border-block-start: 1px solid var(--ui-border-divider);
     }
 
     .status:empty,
-    .footer:empty {
+    .actions:empty {
       display: none;
     }
 

package/styles/ui-section.css

@@ -11,18 +11,20 @@
 
     :scope[data-ui-section-state~="variant=card"] {
       padding: var(--ui-space-5);
-      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);
     }
 
     :scope[data-ui-section-state~="variant=divided"] {
       padding-block-start: var(--ui-space-6);
-      border-block-start: 1px solid var(--ui-border-default);
+      border-block-start: 1px solid var(--ui-border-divider);
     }
 
     :scope[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
-      border-color: var(--ui-danger);
+      border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
+      border-inline-start: 4px solid var(--ui-danger);
+      background: var(--ui-danger-soft);
     }
 
     .head {

package/styles/ui-separator.css

@@ -12,13 +12,13 @@
       align-self: stretch;
       margin: 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
     }
 
     :scope[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
-      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
     }
 }
 @scope ([data-component~="ui-separator"]) to ([data-component]) {

package/styles/ui-sidebar.css

@@ -31,12 +31,12 @@
       max-inline-size: 100%;
       min-block-size: 0;
       background: var(--ui-sidebar-surface, var(--ui-surface-default));
-      border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+      border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
 
     :scope[data-ui-sidebar-state~="side=end"] {
       border-inline-end: 0;
-      border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+      border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
 
     /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every

package/styles/ui-spinner.css

@@ -1,19 +1,40 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
-@keyframes ui-spinner-turn {
-      to {
+@keyframes ui-spinner-chase {
+      0% {
+        transform: rotate(0);
+      }
+      70% {
+        transform: rotate(160deg);
+      }
+      100% {
         transform: rotate(1turn);
       }
     }
 @scope ([data-component~="ui-spinner"]) to ([data-component], [data-slotted]) {
-/* Something is on its way. It turns in the current text colour; with reduced motion it holds still,
+/* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
        and the label (or the text beside it) still says what is happening. */
     :scope {
       display: inline-flex;
       flex: none;
+      align-items: center;
+      justify-content: center;
+      inline-size: 1em;
+      block-size: 1em;
       color: currentColor;
       font-size: var(--ui-font-size-lg);
       line-height: 1;
-      animation: ui-spinner-turn 0.8s linear infinite;
+    }
+
+    .ring {
+      display: block;
+      box-sizing: border-box;
+      inline-size: 100%;
+      block-size: 100%;
+      border: 2px solid transparent;
+      border-block-start-color: currentColor;
+      border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
+      border-radius: 50%;
+      animation: ui-spinner-chase 1s linear infinite;
     }
 
     :scope[data-ui-spinner-state~="size=sm"] {
@@ -21,7 +42,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope {
+      .ring {
         animation: none;
       }
     }
@@ -32,7 +53,7 @@
     }
 }
 @scope ([data-component~="ui-spinner"]) to ([data-component]) {
-/* Something is on its way. It turns in the current text colour; with reduced motion it holds still,
+/* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
        and the label (or the text beside it) still says what is happening. */
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-status-message.css

@@ -19,7 +19,7 @@
 
     :scope[data-ui-status-message-state~="layout=panel"] {
       padding: var(--ui-space-6);
-      border: 1px dashed var(--ui-border-default);
+      border: 1px dashed var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
     }
 

package/styles/ui-switch.css

@@ -58,12 +58,12 @@
       width: var(--_ui-switch-track-width, 2.5rem);
       height: var(--_ui-switch-track-height, 1.5rem);
       padding: 0;
-      border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
-      background: var(--ui-control-surface, var(--ui-surface-default));
-      box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
+      background-color: var(--ui-control-surface, var(--ui-surface-default));
+      box-shadow: var(--ui-control-inset);
       cursor: pointer;
-      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+      transition: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
       margin: 0;
     }
 
@@ -77,11 +77,11 @@
       border-radius: var(--ui-radius-round);
       background: var(--ui-text-secondary);
       box-shadow: var(--ui-shadow-xs);
-      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+      transition: transform var(--ui-motion-base) var(--ui-motion-ease), background-color var(--ui-motion-base) var(--ui-motion-ease);
     }
 
     input:checked {
-      background: var(--ui-accent-solid);
+      background-color: var(--ui-accent-solid);
       border-color: var(--ui-accent-solid);
     }
 
@@ -99,12 +99,21 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    :scope[data-ui-switch-state~="disabled"] .description {
+      color: var(--ui-disabled-text);
+    }
     :scope[data-ui-switch-state~="disabled"] input {
-      border-color: var(--ui-border-default);
-      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      box-shadow: none;
       cursor: not-allowed;
     }
 
+    :scope[data-ui-switch-state~="disabled"] input::after {
+      background-color: var(--ui-disabled-text);
+      box-shadow: none;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       input, input::after {
         transition: none;

package/styles/ui-table.css

@@ -100,7 +100,7 @@
     :where([data-slotted], [data-slotted] *):is(thead th) {
       block-size: auto;
       padding-block: var(--ui-space-2);
-      border-block-end-color: var(--ui-border-default);
+      border-block-end-color: var(--ui-border-divider);
       background: var(--ui-surface);
       color: var(--ui-text-muted);
       font-weight: var(--ui-font-medium);

package/styles/ui-tabs.css

@@ -52,10 +52,50 @@
       overflow-y: hidden;
       overscroll-behavior: contain;
       scrollbar-width: thin;
-      border-block-end: 1px solid var(--ui-border-default);
+      border-block-end: 1px solid var(--ui-border-divider);
     }
 
-    .list button {
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+    }
+
+    :scope[data-ui-tabs-state~="stretch"] .list {
+      grid-auto-columns: minmax(max-content, 1fr);
+    }
+
+    .panels {
+      min-inline-size: 0;
+    }
+
+    :scope[data-ui-tabs-state~="orientation=vertical"] {
+      grid-template-columns: max-content minmax(0, 1fr);
+      align-items: start;
+    }
+
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list {
+      grid-auto-flow: row;
+      grid-auto-columns: auto;
+      border-block-end: 0;
+      border-inline-end: 1px solid var(--ui-border-divider);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-tabs"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Density resolves into the tab row's own values; the public tokens still override them. */
+
+    .list button,
+    .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
       min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
       margin: 0 0 -1px;
       padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
@@ -77,7 +117,8 @@
     /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
      * Trimming applies to block containers, so the box is a block with centred content. */
     @supports (text-box-trim: trim-both) {
-      .list button {
+      .list button,
+      .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
         display: block;
         text-align: center;
         align-content: center;
@@ -86,83 +127,51 @@
       }
     }
 
-    :scope[data-ui-tabs-state~="stretch"] .list {
-      grid-auto-columns: minmax(max-content, 1fr);
-    }
-
-    .list button {
+    .list button,
+    .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
       white-space: nowrap;
     }
 
-    .list button:hover {
+    .list button:hover,
+    .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]:hover) {
       color: var(--ui-text-primary);
       background: var(--ui-surface-muted);
     }
-    .list button[aria-selected="true"] {
+    .list button[aria-selected="true"],
+    .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"][aria-selected="true"]) {
       color: var(--ui-accent-solid);
       border-block-end-color: var(--ui-accent-solid);
     }
-    .list button:focus-visible {
+    .list button:focus-visible,
+    .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]:focus-visible) {
       position: relative;
       outline: none;
       box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
       border-radius: var(--ui-radius-sm);
     }
-
-    .panels {
-      min-inline-size: 0;
-    }
-
-    :scope[data-ui-tabs-state~="orientation=vertical"] {
-      grid-template-columns: max-content minmax(0, 1fr);
-      align-items: start;
-    }
-
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list {
-      grid-auto-flow: row;
-      grid-auto-columns: auto;
-      border-block-end: 0;
-      border-inline-end: 1px solid var(--ui-border-default);
+    .panels > :where([data-slotted], [data-slotted] *):is(*) {
+      padding: var(--ui-space-4);
     }
 
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list button {
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list button,
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
       margin: 0 -1px 0 0;
       border-block-end: 0;
       border-inline-end: 2px solid transparent;
       text-align: start;
     }
 
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"] {
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"],
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"][aria-selected="true"]) {
       border-inline-end-color: var(--ui-accent-solid);
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .list button {
+      .list button,
+      .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
         transition: none;
       }
     }
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
-      display: none;
-    }
-}
-@scope ([data-component~="ui-tabs"]) to ([data-component]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
-
-    /* Density resolves into the tab row's own values; the public tokens still override them. */
-
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers, so the box is a block with centred content. */
-    @supports (text-box-trim: trim-both) {
-    }
-    :where([data-slotted], [data-slotted] *):is(*) {
-      padding: var(--ui-space-4);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-toast-region.css

@@ -129,7 +129,7 @@
       grid-template-columns: 1fr auto;
       gap: var(--ui-space-2);
       align-items: start;
-      border: 1px solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
       background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));

package/styles/ui-toast.css

@@ -32,7 +32,7 @@
       inline-size: 100%;
       margin: 0;
       padding: var(--ui-space-3) var(--ui-space-4);
-      border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-inline-start: 3px solid var(--ui-toast-accent, var(--_ui-toast-accent));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));

package/styles/ui-tooltip.css

@@ -76,15 +76,15 @@
     }
 
     .surface {
-      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-default)));
+      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
       position: relative;
       box-sizing: border-box;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
       border: 1px solid var(--_tooltip-line);
-      border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-sm)));
+      border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-space-2) var(--ui-space-3);
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-tight);
@@ -104,20 +104,20 @@
       position: absolute;
       z-index: 1;
       inset-inline-start: var(--ui-space-3);
-      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
-      inline-size: var(--_ui-tooltip-arrow-size, 0.5rem);
-      block-size: var(--_ui-tooltip-arrow-size, 0.5rem);
+      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
+      block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       box-sizing: border-box;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
       border-inline-end-width: 1px;
       border-block-end-width: 1px;
       border-end-end-radius: 1px;
-      transform: rotate(45deg);
+      transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
     }
 
     :scope[data-ui-actual-placement="bottom"] .surface::after {
-      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       inset-block-end: auto;
       border-inline-end-width: 0;
       border-block-end-width: 0;
@@ -128,7 +128,7 @@
     }
 
     :scope[data-ui-actual-align="center"] .surface::after {
-      inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+      inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
     }
 
     :scope[data-ui-actual-align="end"] .surface::after {
@@ -138,20 +138,20 @@
 
     :scope[data-ui-actual-placement="left"] .surface::after,
     :scope[data-ui-actual-placement="right"] .surface::after {
-      inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+      inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
       inset-block-end: auto;
       border: 0 solid var(--_tooltip-line);
     }
 
     :scope[data-ui-actual-placement="left"] .surface::after {
       inset-inline-start: auto;
-      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       border-inline-end-width: 1px;
       border-block-end-width: 1px;
     }
 
     :scope[data-ui-actual-placement="right"] .surface::after {
-      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       inset-inline-end: auto;
       border-inline-start-width: 1px;
       border-block-start-width: 1px;

package/styles/ui-top-bar.css

@@ -45,7 +45,7 @@
       padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
       padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
       background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
-      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
+      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-divider));
     }
 
     .leading,

package/styles/ui-tree-item.css

@@ -74,7 +74,8 @@
     }
 
     :scope[data-ui-tree-item-state~="disabled"] .row {
-      opacity: 0.55;
+      color: var(--ui-disabled-text);
+      background: var(--ui-disabled-surface);
     }
 
     :scope[data-dragging] .row {

package/theme-dark.css

@@ -13,7 +13,7 @@
       --ui-on-danger: #1a1a1a;
 
       --ui-accent: #a99bf5;
-      --ui-danger: #ef6f86;
+      --ui-danger: #ff6b6b;
       --ui-success: #33cc66;
       --ui-warning: #ffaa22;
       --ui-info: #4d9fff;
@@ -23,7 +23,7 @@
       --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
       --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
       --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
-      --ui-disabled-filter: saturate(0.2) contrast(0.75) brightness(0.8);
+      --ui-disabled-filter: none;
       --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
       --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     }
@@ -42,7 +42,7 @@
     --ui-on-danger: #1a1a1a;
 
     --ui-accent: #a99bf5;
-    --ui-danger: #ef6f86;
+    --ui-danger: #ff6b6b;
     --ui-success: #33cc66;
     --ui-warning: #ffaa22;
     --ui-info: #4d9fff;
@@ -52,7 +52,7 @@
     --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
     --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
     --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
-    --ui-disabled-filter: saturate(0.2) contrast(0.75) brightness(0.8);
+    --ui-disabled-filter: none;
     --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
     --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   }

package/theme-light.css

@@ -12,10 +12,10 @@
     --ui-on-danger: #ffffff;
 
     --ui-accent: #5b55d6;
-    --ui-danger: #b4233f;
+    --ui-danger: #c92d1e;
     --ui-success: #007a33;
-    /* Deep amber, so a solid warning surface carries white text like the other tones (5:1). */
-    --ui-warning: #b45309;
+    /* Rich amber, with enough depth for white text on solid warning surfaces. */
+    --ui-warning: #ba5b0b;
     --ui-info: #0066cc;
   }
 }

package/tokens.css

@@ -11,9 +11,9 @@
        the two surfaces either side of it, and the ink. Everything else — hovers, tints, borders,
        muted text, disabled — is mixed from them further down, so a theme sets these and stops. */
     --ui-accent: #5b55d6;
-    --ui-danger: #b4233f;
+    --ui-danger: #c92d1e;
     --ui-success: #007a33;
-    --ui-warning: #b45309;
+    --ui-warning: #ba5b0b;
     --ui-info: #0066cc;
     --ui-on-accent: #ffffff;
     --ui-on-danger: #ffffff;
@@ -115,7 +115,7 @@
     --ui-elevation-dialog: var(--ui-shadow-lg);
     --ui-overlay-backdrop: rgba(0, 0, 0, 0.4);
     --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.07), inset 0 1px 0 rgb(0 0 0 / 0.02);
-    --ui-raised: 0 1px 2px rgb(0 0 0 / 0.07), 0 1px 1px rgb(0 0 0 / 0.04);
+    --ui-raised: 0 2px 4px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.06);
     --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0));
     /* The counterpart to --ui-raised: a pressed control takes its shadow inside. */
     --ui-pressed: inset 0 1px 2px rgb(0 0 0 / 0.12);
@@ -131,6 +131,8 @@
     --ui-text-secondary: color-mix(in oklab, var(--ui-text) 80%, var(--ui-surface));
     --ui-text-muted: color-mix(in oklab, var(--ui-text) 62%, var(--ui-surface));
     --ui-border: color-mix(in oklab, var(--ui-text) 12%, var(--ui-surface));
+    /* Lines divide content; stronger edges enclose surfaces; control edges identify inputs. */
+    --ui-border-divider: color-mix(in oklab, var(--ui-border) 50%, var(--ui-border-strong));
     --ui-border-strong: color-mix(in oklab, var(--ui-text) 25%, var(--ui-surface));
     --ui-control-border: color-mix(in oklab, var(--ui-text) 48%, var(--ui-surface));
 
@@ -146,9 +148,10 @@
        Lighter than muted text, which must stay readable; disabled text is exempt from contrast. */
     --ui-disabled-surface: var(--ui-surface-sunken);
     --ui-disabled-text: color-mix(in oklab, var(--ui-text) 45%, var(--ui-surface));
-    /* A disabled button keeps its own look, washed out: less colour, less contrast, toward the page.
-       A filter rather than a second palette, so every variant and tone fades the same way. */
-    --ui-disabled-filter: saturate(0.2) contrast(0.75) brightness(1.25);
+    --ui-disabled-border: color-mix(in oklab, var(--ui-text) 20%, var(--ui-surface));
+    /* Component filter hooks remain available, but the default disabled state uses the explicit
+       neutral surface, text, and border above so a colored outline cannot still look active. */
+    --ui-disabled-filter: none;
 
     --ui-focus-ring: var(--ui-accent);
 

package/vanilla/UiButton.d.ts

@@ -10,6 +10,7 @@ export interface UiButtonProps {
   as?: "button" | "a" | null;
   disabled?: boolean | null;
   href?: string | null;
+  loading?: boolean | null;
   pending?: boolean | null;
   rel?: string | null;
   size?: "sm" | "md" | "lg" | null;