@threadlabs/looma 0.33.1 → 0.34.0

package/components/ui-popover/ui-popover.html

@@ -3,7 +3,8 @@
     <prop name="bare" type="boolean" default="false"
     >Delegates the surface to its content, with no padding, border, background, shadow, or overflow clipping.</prop>
     <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
-    >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>
+    >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content. Shared
+      surface separation adapts to popover purpose and rendered size.</prop>
     <prop name="open" type="boolean" default="false">Whether the popover is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the popover.</prop>
     <prop
@@ -63,6 +64,7 @@
     }
 
     :host {
+      --_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);
@@ -95,6 +97,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. */
     :host([bare]) .surface {
       overflow: visible;
@@ -102,6 +163,8 @@
       border: 0;
       background: transparent;
       box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
     }
 
     :host(:not(:state(internalOpen))) {

package/components/ui-popover/ui-popover.js

@@ -59,7 +59,7 @@ export function connect(host) {
     anchor = ids.get(nextFor);
     if (anchor) anchorExpanded = anchor.getAttribute("aria-expanded");
     anchor?.addEventListener("click", onAnchorClick);
-    surface = createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset });
+    surface = createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset, materialRole: "popover" });
   };
   const apply = () => {
     const externalOpen = Boolean(host.props.open.value);

package/components/ui-slider/ui-slider.html

@@ -0,0 +1,84 @@
+<link rel="component" href="../ui-number-input/ui-number-input.html">
+<template component="ui-slider" module="./ui-slider.js">
+  <defs>
+    <state name="current" type="number" from="$value"></state>
+    <prop name="value" type="number" default="0">Current numeric value. Native range and exact entry share bounds.</prop>
+    <prop name="min" type="number" default="0">Inclusive lower bound for dragging, keyboard steps and exact entry.</prop>
+    <prop name="max" type="number" default="100">Inclusive upper bound for dragging, keyboard steps and exact entry.</prop>
+    <prop name="step" type="number" default="1">Positive native range and exact entry increment.</prop>
+    <prop name="unit" type="string" default="">Unit shown by the exact editor.</prop>
+    <prop name="name" type="string" default="">Optional numeric form field name.</prop>
+    <prop name="label" type="string" default="Value">Accessible name for the editing control.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg" default="md">Shared field and button height.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.</prop>
+    <event name="input" type="object"><prop name="value" type="number" required></prop></event>
+    <event name="change" type="object"><prop name="value" type="number" required></prop></event>
+  </defs>
+  <span>
+    <input
+      $ref="range"
+      type="range"
+      data-ui-field-control
+      from:aria-label="$label"
+      from:aria-valuetext="concat($current, $unit)"
+      from:value="$value"
+      from:min="$min"
+      from:max="$max"
+      from:step="$step"
+      from:disabled="$disabled"
+      from:name="$name"
+    >
+    <ui-number-input
+      data-slider-exact
+      from:value="concat($current, $unit)"
+      from:unit="$unit"
+      from:min="$min"
+      from:max="$max"
+      from:step="$step"
+      from:size="$size"
+      from:disabled="$disabled"
+      from:label="$label"
+    ></ui-number-input>
+  </span>
+  <style>
+    :host {
+      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;
+    }
+    :host([size="sm"]) input {
+      min-block-size: var(--ui-control-size-sm);
+    }
+    :host([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));
+      }
+    }
+    :host[hidden] {
+      display: none !important;
+    }
+  </style>
+</template>

package/components/ui-slider/ui-slider.js

@@ -0,0 +1,29 @@
+import { boundedNumber, calculateValue } from "../ui-number-input/arithmetic.js";
+import { afterFormReset } from "../shared/form-reset.js";
+
+export function connect(host) {
+  const { range } = host.refs;
+  const exact = host.element.querySelector("[data-slider-exact]");
+  let external;
+  const paint = value => {
+    range.value = String(boundedNumber(value, host.props.min.value, host.props.max.value));
+    host.state.current = Number(range.value);
+  };
+  const edit = event => {
+    event.stopPropagation();
+    if (host.props.disabled.value) return;
+    const raw = event.currentTarget === range ? Number(range.value) : calculateValue(event.detail.value, host.props.unit.value || "");
+    paint(raw); host.dispatch(event.type, { value: Number(range.value) });
+  };
+  for (const field of [range, exact]) for (const type of ["input", "change"]) field.addEventListener(type, edit);
+  const stop = host.effect(() => {
+    const signature = JSON.stringify([host.props.value.value, host.props.min.value, host.props.max.value, host.props.step.value]);
+    if (external === signature) return; external = signature;
+    range.min = String(Math.min(Number(host.props.min.value), Number(host.props.max.value)));
+    range.max = String(Math.max(Number(host.props.min.value), Number(host.props.max.value)));
+    range.step = String(Math.abs(Number(host.props.step.value)) || 1);
+    range.defaultValue = String(host.props.value.value); paint(Number(host.props.value.value));
+  });
+  const reset = afterFormReset(range, () => paint(Number(range.defaultValue)));
+  return () => { stop(); reset(); for (const field of [range, exact]) for (const type of ["input", "change"]) field.removeEventListener(type, edit); };
+}

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

@@ -59,6 +59,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. */
     :host {
@@ -66,6 +70,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);
@@ -165,7 +170,7 @@
       min-inline-size: 0;
     }
     .panels > :slotted(*) {
-      padding: var(--ui-space-4) !important;
+      padding: var(--_ui-tabs-panel-padding, var(--ui-space-4)) !important;
     }
 
     :host([orientation="vertical"]) {

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

@@ -17,14 +17,16 @@
       does not carry the meaning, so the words must say it too.</prop>
     <prop name="weight" type="keyword" values="inherit, normal, medium, semibold" default="inherit"
     >The weight. inherit keeps the surrounding weight; medium and semibold emphasise a name or a figure.</prop>
-    <prop name="variant" type="keyword" values="body, eyebrow, code" default="body"
-    >body is running text. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read
-      exactly, such as an address, in the monospace face.</prop>
+    <prop name="variant" type="keyword" values="body, display, heading, label, caption, eyebrow, code" default="body"
+    >body is running text. display is a page title, heading names a section, label identifies a control, and caption is supporting text. These roles set their
+      shared type scale, weight and leading; pair heading or display with an appropriate as heading element. eyebrow is a short, uppercase, tracked label that
+      names what follows, such as a group of links; code sets a value to copy or read exactly, such as an address, in the monospace face.</prop>
     <prop name="truncate" type="boolean" default="false">Keeps the text on one line, ending in an ellipsis when it does not fit.</prop>
     <prop name="align" type="keyword" values="start, center" default="start">Aligns the text within its line.</prop>
-    <prop name="as" type="keyword" values="p, span, div, small, strong, label, h2, h3, h4, h5, h6" default="p"
+    <prop name="as" type="keyword" values="p, span, div, small, strong, label, h1, h2, h3, h4, h5, h6" default="p"
     >The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a
-      heading, h2 to h6, below a Page Header's h1 and a Section's h2. A heading takes its size and weight from size and weight, like any other text.</prop>
+      heading, h1 to h6. Choose its document level independently from its visual variant. The default body variant keeps the existing size and weight
+      behavior.</prop>
   </defs>
   <template $match>
     <span $when="$as = 'span'"><slot></slot></span>
@@ -32,6 +34,7 @@
     <small $when="$as = 'small'"><slot></slot></small>
     <strong $when="$as = 'strong'"><slot></slot></strong>
     <label $when="$as = 'label'"><slot></slot></label>
+    <h1 $when="$as = 'h1'"><slot></slot></h1>
     <h2 $when="$as = 'h2'"><slot></slot></h2>
     <h3 $when="$as = 'h3'"><slot></slot></h3>
     <h4 $when="$as = 'h4'"><slot></slot></h4>
@@ -56,7 +59,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. */
-    :host:is(h2, h3, h4, h5, h6) {
+    :host:is(h1, h2, h3, h4, h5, h6) {
       font-family: var(--ui-font-display, inherit);
       font-size: inherit;
       font-weight: inherit;
@@ -119,10 +122,32 @@
       font-weight: var(--ui-font-semibold);
     }
 
+    :host([variant="display"]), :host([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);
+    }
+    :host([variant="display"]) {
+      font-size: var(--ui-font-size-2xl);
+    }
+    :host([variant="heading"]) {
+      font-size: var(--ui-font-size-xl);
+    }
+    :host([variant="label"]) {
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height);
+    }
+    :host([variant="caption"]) {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
     :host([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;
     }
     :host([variant="code"]) {

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

@@ -81,6 +81,7 @@
     }
 
     :host {
+      --_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);
@@ -133,6 +134,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 {

package/components/ui-tooltip/ui-tooltip.js

@@ -160,7 +160,7 @@ export function connect(host) {
       attach();
     }
     surface?.destroy();
-    surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement, gap: offset });
+    surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement, gap: offset, materialRole: "tooltip" });
   };
   const close = (reason, input) => {
     if (reason !== "escape" && reason !== "light-dismiss" && reason !== "programmatic") return;