@threadlabs/looma 0.41.1 → 0.42.0

package/components/ui-radio/ui-radio.html

@@ -94,10 +94,40 @@
       inline-size: var(--_ui-radio-size, 1.125rem);
       block-size: var(--_ui-radio-size, 1.125rem);
       margin: max(0px, calc((1lh - var(--_ui-radio-size, 1.125rem)) / 2)) 0 0 !important;
-      accent-color: var(--ui-accent-solid);
+      -webkit-appearance: none;
+      appearance: none;
+      position: relative;
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-radius-round);
+      background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-image: var(--ui-surface-highlight, none);
+      box-shadow: var(--ui-control-inset);
       cursor: pointer;
     }
 
+    /* The native radio retains grouping, validation and keyboard behavior.
+       Its empty well recedes; the filled selection and its dot stay crisp. */
+    input::after {
+      content: "";
+      position: absolute;
+      inset: 28%;
+      border-radius: var(--ui-radius-round);
+      background-color: var(--ui-text-on-accent);
+      opacity: 0;
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    input:checked {
+      background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
+      border-color: var(--ui-accent-solid);
+      box-shadow: none;
+    }
+
+    input:checked::after {
+      opacity: 1;
+    }
+
     input:focus-visible {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
       outline-offset: var(--ui-focus-width);
@@ -111,9 +141,31 @@
       color: var(--ui-disabled-text);
     }
     :host([disabled]) input {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      background-image: none;
+      box-shadow: none;
       cursor: not-allowed;
     }
 
+    :host([disabled]) input::after {
+      background-color: var(--ui-disabled-text);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      input::after { transition: none; }
+    }
+
+    @media (forced-colors: active) {
+      input {
+        -webkit-appearance: auto;
+        appearance: auto;
+        background: none;
+        box-shadow: none;
+      }
+      input::after { display: none !important; }
+    }
+
     /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */

package/components/ui-section/ui-section.html

@@ -87,7 +87,7 @@
     }
 
     :host([tone="danger"]) .heading {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     .description {

package/components/ui-site-header/ui-site-header.html

@@ -47,6 +47,7 @@
       align-items: center !important;
       align-content: center !important;
       gap: var(--ui-space-2) !important;
+      inline-size: 100%;
       min-inline-size: 0;
       min-block-size: var(--ui-site-header-compact-height, 3.75rem);
       padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
@@ -68,13 +69,16 @@
       max-inline-size: 100%;
     }
     .actions {
-      flex-wrap: wrap !important;
+      display: grid !important;
+      grid-auto-flow: column !important;
+      grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
+      justify-items: center !important;
       margin-inline-start: auto !important;
     }
     /* Text shares a baseline inside one group; the group is centred beside any control height. */
     .identity {
       display: flex !important;
-      flex: 1 1 auto;
+      flex: 1 1 0;
       flex-wrap: wrap !important;
       align-items: baseline !important;
       gap: var(--ui-space-2) var(--ui-space-6) !important;

package/components/ui-status-message/ui-status-message.html

@@ -31,7 +31,7 @@
     }
 
     :host([kind="error"]) {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     :host([layout="panel"]) {

package/components/ui-switch/ui-switch.html

@@ -129,7 +129,8 @@
       width: var(--_thumb);
       height: var(--_thumb);
       border-radius: var(--ui-radius-round);
-      background: var(--ui-text-secondary);
+      background-color: var(--ui-text-secondary);
+      background-image: var(--ui-knob-highlight, none);
       box-shadow: var(--ui-shadow-xs);
       transition: transform var(--ui-motion-base) var(--ui-motion-ease), background-color var(--ui-motion-base) var(--ui-motion-ease);
     }
@@ -142,7 +143,8 @@
 
     input:checked::after {
       transform: translateX(calc(var(--_ui-switch-track-width) - var(--_ui-switch-track-height)));
-      background: var(--ui-text-on-accent);
+      background-color: var(--ui-text-on-accent);
+      background-image: var(--ui-knob-on-accent-highlight, none);
     }
 
     input:focus-visible {
@@ -167,6 +169,7 @@
 
     :host([disabled]) input::after {
       background-color: var(--ui-disabled-text);
+      background-image: none;
       box-shadow: none;
     }
 

package/components/ui-tabs/ui-tabs.html

@@ -154,8 +154,8 @@
     }
     .list button[aria-selected="true"],
     .list > :slotted(button[slot="tab"][aria-selected="true"]) {
-      color: var(--ui-accent-solid);
-      border-block-end-color: var(--ui-accent-solid);
+      color: var(--ui-accent-subtle-text);
+      border-block-end-color: var(--ui-accent-subtle-text);
     }
     .list button:focus-visible,
     .list > :slotted(button[slot="tab"]:focus-visible) {
@@ -194,7 +194,7 @@
 
     :host([orientation="vertical"]) .list button[aria-selected="true"],
     :host([orientation="vertical"]) .list > :slotted(button[slot="tab"][aria-selected="true"]) {
-      border-inline-end-color: var(--ui-accent-solid);
+      border-inline-end-color: var(--ui-accent-subtle-text);
     }
 
     @media (prefers-reduced-motion: reduce) {

package/components/ui-text/ui-text.html

@@ -95,7 +95,7 @@
       color: var(--ui-text-muted);
     }
     :host([tone="accent"]) {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
     }
     /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
        in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
@@ -157,7 +157,7 @@
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */
     :host :slotted(a) {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
       text-decoration: underline;
       text-decoration-thickness: 0.06em;
       text-underline-offset: 0.18em;

package/components/ui-tooltip/ui-tooltip.html

@@ -135,12 +135,12 @@
     }
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
     .surface {
-      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
-      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.08) * 8px);
+      --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+      --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px);
       --_ui-material-content-color: var(--_ui-tooltip-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
@@ -163,10 +163,8 @@
           var(--ui-elevation-tooltip, var(--ui-shadow-md))
         )
       );
-      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
-      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px));
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px));
     }
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -178,8 +176,8 @@
     @media (prefers-reduced-transparency: reduce) {
       .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -188,8 +186,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }