@threadlabs/looma 0.33.1 → 0.34.0

package/styles/ui-popover.css

@@ -38,6 +38,7 @@
     }
 
     :scope:where([data-component~="ui-popover"]) {
+      --_ui-material-scale: 0.55;
       --_ui-popover-surface: var(--ui-popover-surface);
       --_ui-popover-border: var(--ui-popover-border);
       --_ui-popover-radius: var(--ui-popover-radius);
@@ -70,6 +71,65 @@
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
+    /* 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. */
+    .surface {
+      --_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.55) * 8px);
+      --_ui-material-content-color: var(--_ui-popover-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:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-popover-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-popover-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          var(--ui-elevation-overlay, var(--ui-shadow-lg))
+        )
+      );
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
     :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="bare"] .surface {
       overflow: visible;
@@ -77,6 +137,8 @@
       border: 0;
       background: transparent;
       box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
     }
 
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
@@ -134,6 +196,18 @@
 @scope ([data-component~="ui-popover"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* 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. */
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
 
     @starting-style {

package/styles/ui-slider.css

@@ -0,0 +1,53 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-slider"] { --html-next-scope-owner: "ui-slider" !important; }
+}
+@scope ([data-component~="ui-slider"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-slider"]) {
+      display: grid !important;
+      grid-template-columns: minmax(4rem, 1fr) minmax(8rem, 1fr) !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      min-inline-size: 0;
+    }
+    input {
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md);
+      margin: 0 !important;
+      accent-color: var(--ui-accent-solid);
+      cursor: pointer;
+    }
+    :scope:where([data-component~="ui-slider"])[data-ui-slider-state~="size=sm"] input {
+      min-block-size: var(--ui-control-size-sm);
+    }
+    :scope:where([data-component~="ui-slider"])[data-ui-slider-state~="size=lg"] input {
+      min-block-size: var(--ui-control-size-lg);
+    }
+    input:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+      outline-offset: var(--ui-space-1);
+      border-radius: var(--ui-radius-sm);
+    }
+    input:disabled {
+      cursor: not-allowed;
+    }
+    @media (pointer: coarse) {
+      input {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+    }
+    :scope:where([data-component~="ui-slider"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-component~="ui-slider"]) to ([data-component]) {
+@media (pointer: coarse) {
+    }
+}

package/styles/ui-tabs.css

@@ -20,6 +20,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-tabs-panel-padding {
+      syntax: "*";
+      inherits: false;
+    }
 
     /* Density resolves into the tab row's own values; the public tokens still override them. */
     :scope:where([data-component~="ui-tabs"]) {
@@ -27,6 +31,7 @@
       --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
       --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
       --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+      --_ui-tabs-panel-padding: var(--ui-tabs-panel-padding);
 
       --_tab-min-block-size: var(--ui-control-size);
       --_tab-padding-block: var(--ui-space-2);
@@ -157,7 +162,7 @@
       border-radius: var(--ui-radius-sm);
     }
     .panels > :where([data-slotted], [data-slotted] *):is(*) {
-      padding: var(--ui-space-4) !important;
+      padding: var(--_ui-tabs-panel-padding, var(--ui-space-4)) !important;
     }
 
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list button,

package/styles/ui-text.css

@@ -23,7 +23,7 @@
 
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
-    :scope:where([data-component~="ui-text"]):is(h2, h3, h4, h5, h6) {
+    :scope:where([data-component~="ui-text"]):is(h1, h2, h3, h4, h5, h6) {
       font-family: var(--ui-font-display, inherit);
       font-size: inherit;
       font-weight: inherit;
@@ -86,10 +86,32 @@
       font-weight: var(--ui-font-semibold);
     }
 
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=display"], :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=heading"] {
+      font-family: var(--ui-font-display, var(--ui-font-family-sans));
+      font-weight: var(--ui-font-semibold);
+      line-height: var(--ui-line-height-tight);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=display"] {
+      font-size: var(--ui-font-size-2xl);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=heading"] {
+      font-size: var(--ui-font-size-xl);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=label"] {
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=caption"] {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=eyebrow"] {
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
       letter-spacing: 0.06em;
+      line-height: var(--ui-line-height);
       text-transform: uppercase;
     }
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=code"] {

package/styles/ui-tooltip.css

@@ -50,6 +50,7 @@
     }
 
     :scope:where([data-component~="ui-tooltip"]) {
+      --_ui-material-scale: 0.08;
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-tooltip-border: var(--ui-tooltip-border);
       --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -102,6 +103,65 @@
       box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
     }
 
+    /* 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. */
+    .surface {
+      --_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-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:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-tooltip-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-tooltip-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          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));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
     .shortcut {
@@ -226,6 +286,18 @@
 
     /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
 
+    /* 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. */
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
 

package/theme-system.css

@@ -1,5 +1,12 @@
 /* Optional shared recipe. Load after tokens.css and the chosen palette.
    Existing public roles remain the customization interface; no component selectors. */
+/* Resolve shared geometry once where it is declared, rather than once per consuming
+   control's font. Palette roles remain unregistered so light-dark resolves locally. */
+@property --ui-font-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --ui-control-size { syntax: "<length>"; inherits: true; initial-value: 40px; }
+@property --ui-radius-md { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --ui-border-width { syntax: "<length>"; inherits: true; initial-value: 1px; }
+
 @layer theme {
   :root {
     --ui-density: 1;
@@ -9,6 +16,8 @@
     --ui-inner-depth: 0.3;
     --ui-edge-light: 0;
     --ui-overlay-translucency: 0;
+    --ui-glassiness: 0;
+    --ui-surface-separation: 0;
   }
 
   :where(:root, [data-theme], [data-contrast]) {
@@ -20,21 +29,23 @@
     --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));
+    /* Bend the interior of the family while keeping its endpoints stable. */
     --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-2: calc(var(--_ui-theme-unit) * (1 + 7 * pow(1 / 7, var(--_ui-theme-curve))));
+    --ui-space-3: calc(var(--_ui-theme-unit) * (1 + 7 * pow(2 / 7, var(--_ui-theme-curve))));
+    --ui-space-4: calc(var(--_ui-theme-unit) * (1 + 7 * pow(3 / 7, 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)));
+    --ui-space-5: calc(var(--_ui-theme-unit) * (1 + 7 * pow(5 / 7, var(--_ui-theme-curve))));
+    --ui-space-6: calc(var(--_ui-theme-unit) * (1 + 7 * pow(7 / 7, 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-font-size-xs: max(12px, calc(var(--ui-font-size) * 0.75));
+    --ui-action-inset-sm: var(--ui-space-2);
+    --ui-action-inset-md: var(--ui-space-3);
+    --ui-action-inset-lg: var(--ui-space-4);
 
     --ui-radius-sm: calc(var(--ui-radius-md) * 0.5);
     --ui-radius-lg: calc(var(--ui-radius-md) * 1.5);
@@ -62,10 +73,15 @@
     --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);
+    /* Decorative outer material is allowed to transmit the scene. Content keeps
+       its own opaque plane; changing the scene cannot undermine text contrast. */
+    --ui-material-content: var(--ui-surface-raised);
+    --ui-material-glass: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 35%), transparent);
+    --ui-material-edge: color-mix(in srgb, var(--ui-surface-raised) 80%, var(--ui-text));
 
     /* 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-press: var(--ui-motion-fast);
+    --ui-motion-base: calc(var(--ui-motion-fast) * 1.5);
     --ui-motion-ease-out: var(--ui-motion-ease);
     --ui-press-scale: 0.98;
   }

package/tokens.css

@@ -161,6 +161,12 @@
     --ui-accent-active: color-mix(in oklab, var(--ui-accent) 74%, var(--ui-text));
     --ui-accent-subtle: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-surface));
     --ui-danger-hover: color-mix(in oklab, var(--ui-danger) 86%, var(--ui-text));
+    --ui-danger-active: color-mix(in oklab, var(--ui-danger) 74%, var(--ui-text));
+    --ui-success-active: color-mix(in oklab, var(--ui-success) 74%, var(--ui-text));
+    --ui-warning-active: color-mix(in oklab, var(--ui-warning) 74%, var(--ui-text));
+    --ui-info-active: color-mix(in oklab, var(--ui-info) 74%, var(--ui-text));
+    --ui-warning-hover: color-mix(in oklab, var(--ui-warning) 86%, var(--ui-text));
+    --ui-info-hover: color-mix(in oklab, var(--ui-info) 86%, var(--ui-text));
 
     /* Disabled is one decision, not a per-component one: the sunken surface and a pale ink, at
        full opacity, so a disabled control reads as unavailable rather than as a faded variant.
@@ -340,7 +346,7 @@
 
   [data-ui-choice-option]:is(:hover, .active) {
     background: var(--ui-surface-muted);
-    outline: var(--ui-border-width) solid var(--ui-focus-ring);
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: calc(-1 * var(--ui-border-width));
   }
 
@@ -390,7 +396,7 @@
 
   @media (forced-colors: active) {
     [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]):not(.active) {
-      outline: var(--ui-border-width) solid Highlight;
+      outline: var(--ui-focus-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-border-width));
     }
   }

package/vanilla/UiButton.d.ts

@@ -16,6 +16,7 @@ export interface UiButtonProps {
   href?: string | null;
   loading?: boolean | null;
   pending?: boolean | null;
+  preset?: "none" | "primary" | "standard" | "quiet" | "destructive" | null;
   rel?: string | null;
   shape?: "rounded" | "pill" | null;
   size?: "xs" | "sm" | "md" | "lg" | null;