@threadlabs/looma 0.33.1 → 0.35.0

package/components/shared/overlay.js

@@ -1,3 +1,5 @@
+import { updateSurfaceMaterial } from "./surface-material.js";
+
 const dialogInvokers = new WeakMap();
 
 function stateFor(document) {
@@ -345,7 +347,10 @@ export function createViewportSurface(surface, options = {}) {
   let frame = null;
   const position = () => {
     frame = null;
-    if (stop) options.position?.();
+    if (stop) {
+      if (options.materialRole) updateSurfaceMaterial(surface, options.materialRole);
+      options.position?.();
+    }
   };
   const refresh = () => {
     if (stop && frame === null) frame = owner.requestAnimationFrame(position);
@@ -378,6 +383,7 @@ export function createViewportSurface(surface, options = {}) {
     show() {
       if (destroyed) return;
       show(surface);
+      if (options.materialRole) updateSurfaceMaterial(surface, options.materialRole);
       stop ??= observeOverlayViewport(surface.ownerDocument, position);
       options.position?.();
       if (!sizeObserver && owner.ResizeObserver) {
@@ -435,7 +441,7 @@ export function createAnchoredSurface(surface, options = {}) {
   surface.style.position = "fixed";
   surface.style.setProperty("margin", "0", "important");
   // `bare` resets the browser's popover chrome on a surface that has none of its own.
-  const presentation = createViewportSurface(surface, { position, bare: options.bare });
+  const presentation = createViewportSurface(surface, { position, bare: options.bare, materialRole: options.materialRole });
   // Resize and scroll events do not report an ancestor's transition or layout shift.
   // While visible, sample the live anchor and only re-position when its bounds change.
   const trackAnchor = () => {

package/components/shared/surface-material.js

@@ -0,0 +1,21 @@
+// Purpose has greater influence than size: even a large menu stays lighter than a dialog.
+const roleWeight = Object.freeze({ tooltip: 0.08, menu: 0.28, popover: 0.55, dialog: 1, panel: 0.65 });
+
+/** Derive a bounded material scale from a surface's purpose and rendered border box. */
+export function surfaceMaterialScale(role, width, height) {
+  if (!Object.hasOwn(roleWeight, role)) throw new Error(`Unknown surface material role: ${role}`);
+  const measured = [width, height].every(value => Number.isFinite(value) && value > 0);
+  const size = measured ? Math.max(0.8, Math.min(1.35, Math.sqrt(width * height / (320 * 240)))) : 1;
+  return Math.round(roleWeight[role] * size * 1000) / 1000;
+}
+
+/** Update component-owned material geometry; a tolerance prevents its rim feeding tiny resize changes back into itself. */
+export function updateSurfaceMaterial(element, role) {
+  const width = element.offsetWidth;
+  const height = element.offsetHeight;
+  const next = surfaceMaterialScale(role, width, height);
+  const previous = Number.parseFloat(element.style.getPropertyValue("--_ui-material-scale"));
+  if (!Number.isFinite(previous) || Math.abs(next - previous) >= Math.max(0.002, Math.abs(previous) * 0.04)) {
+    element.style.setProperty("--_ui-material-scale", String(next));
+  }
+}

package/components/ui-badge/ui-badge.html

@@ -325,10 +325,18 @@
       box-shadow: none;
     }
 
-    /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
-       surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
     :host([variant="inverse"][tone="neutral"]) {
-      color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, color-mix(in srgb, var(--ui-surface-raised) 88%, transparent)));
+      color: var(--ui-badge-text, var(--_badge-color-text, var(--ui-text-primary)));
+    }
+    :host([variant="inverse"][tone="neutral"]:not([shape="circle"])) {
+      border-color: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-outline-surface)));
+    }
+    :host([variant="inverse"][tone="neutral"][shape="circle"]) {
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, light-dark(
+        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%), transparent),
+        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%), transparent)
+      )));
     }
 
     :host([variant="outline"]) {

package/components/ui-button/ui-button.html

@@ -2,6 +2,14 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-button" module="./ui-button.js">
   <defs>
+    <prop name="preset" type="keyword" values="none, primary, standard, quiet, destructive" default="none"
+    >A shortcut that sets appearance and tone together: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid
+      danger. A named preset takes precedence over variant and tone. Leave it at none to choose variant and tone independently.</prop>
+    <computed name="appearance" from="{ none: $variant, primary: 'solid', standard: 'solid', quiet: 'ghost', destructive: 'solid' }[$preset]"></computed>
+    <computed
+      name="colorTone"
+      from="{ none: { true: 'danger', false: $tone }[concat($variant = 'danger')], primary: 'accent', standard: 'neutral', quiet: 'neutral', destructive: 'danger' }[$preset]"
+    ></computed>
     <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card, field" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
       hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the
@@ -42,7 +50,9 @@
   </defs>
   <template $match>
     <a
-      $when="$variant = 'card' and $as = 'a'"
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
+      $when="$appearance = 'card' and $as = 'a'"
       from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
       from:target="$target"
       from:rel="$rel"
@@ -57,7 +67,9 @@
       <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
     </a>
     <button
-      $when="$variant = 'card'"
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
+      $when="$appearance = 'card'"
       from:type="$type"
       from:disabled="$disabled"
       from:aria-disabled="{ true: 'true', false: null }[concat($loading or $pending)]"
@@ -70,6 +82,8 @@
       <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
     </button>
     <a
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
       $when="$as = 'a'"
       from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
       from:target="$target"
@@ -83,6 +97,8 @@
       <span class="badge"><slot name="badge"></slot></span>
     </a>
     <button
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
       $else
       from:type="$type"
       from:disabled="$disabled"
@@ -172,7 +188,7 @@
     :host {
       /* Optional inherited action-group values keep text and icon actions under the same light.
          One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
-         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+         The shared theme supplies reflections and glow independently of the resting lift. */
       --_ui-action-start: 1px;
       --_ui-action-edge: var(
         --ui-action-edge,
@@ -180,6 +196,8 @@
         inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
       );
       --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      --_tone-highlight: var(--ui-accent-highlight, none);
+      --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
@@ -230,8 +248,8 @@
       white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-action-inset-md, var(--ui-space-3)) !important;
-      background-image: none;
-      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+      background-image: var(--ui-surface-highlight, none);
+      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
       cursor: pointer;
       transition:
         scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -255,7 +273,7 @@
 
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
-    :host:not([variant="link"]):has(.badge:not(:empty)) {
+    :host:not([data-appearance="link"]):has(.badge:not(:empty)) {
       padding-block: var(--ui-space-0-5) !important;
     }
 
@@ -300,7 +318,7 @@
 
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
-    :host([variant="card"]) {
+    :host[data-appearance="card"] {
       display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-content: center !important;
@@ -313,10 +331,10 @@
       box-shadow: none;
       background-image: none;
     }
-    :host([variant="card"][size="lg"]) {
+    :host[data-appearance="card"][size="lg"] {
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
     }
-    :host([variant="card"]):has(.card-icon:empty) {
+    :host[data-appearance="card"]:has(.card-icon:empty) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
@@ -343,11 +361,11 @@
     }
 
     /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-    :host([variant="card"][tone="neutral"]) {
+    :host[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
 
-    :host([variant="card"][tone="neutral"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
@@ -359,19 +377,20 @@
       box-shadow: var(--ui-pressed);
     }
 
-    :host([variant="solid"]), :host([variant="danger"]) {
+    :host[data-appearance="solid"], :host[data-appearance="danger"] {
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
-      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+      background-image: var(--_tone-highlight);
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
     }
 
-    :is(:host([variant="solid"]), :host([variant="danger"])):hover:not(:disabled, [aria-disabled="true"]) {
+    :is(:host[data-appearance="solid"], :host[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:host([variant="solid"]), :host([variant="danger"])):active:not(:disabled, [aria-disabled="true"]) {
+    :is(:host[data-appearance="solid"], :host[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -380,7 +399,9 @@
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
-    :host([tone="neutral"]) {
+    :host[data-tone="neutral"] {
+      --_tone-highlight: var(--ui-neutral-highlight, none);
+      --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -388,40 +409,60 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :host([tone="danger"]), :host([variant="danger"]) {
+    :host[data-tone="neutral"][data-appearance="solid"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, var(--ui-neutral-surface));
+      color: var(--ui-button-text, var(--ui-text));
+    }
+    :host[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :host[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
+
+    :host[data-tone="danger"], :host[data-appearance="danger"] {
+      --_tone-highlight: var(--ui-danger-highlight, none);
+      --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
-      --_hue-active: var(--ui-danger-hover);
-      --_hue-text: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
+      --_hue-text: var(--ui-danger-subtle-text);
       --_on-hue: var(--ui-on-danger);
     }
 
-    :host([tone="success"]) {
+    :host[data-tone="success"] {
+      --_tone-highlight: var(--ui-success-highlight, none);
+      --_tone-glow: var(--ui-success-glow, 0 0 transparent);
       --_hue: var(--ui-success);
-      --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-success-hover);
+      --_hue-active: var(--ui-success-active);
+      --_hue-text: var(--ui-success-subtle-text);
+      --_on-hue: var(--ui-success-on-strong);
     }
 
-    :host([tone="warning"]) {
+    :host[data-tone="warning"] {
+      --_tone-highlight: var(--ui-warning-highlight, none);
+      --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
       --_hue: var(--ui-warning);
-      --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-warning-hover);
+      --_hue-active: var(--ui-warning-active);
+      --_hue-text: var(--ui-warning-subtle-text);
+      --_on-hue: var(--ui-warning-on-strong);
     }
 
-    :host([tone="info"]) {
+    :host[data-tone="info"] {
+      --_tone-highlight: var(--ui-info-highlight, none);
+      --_tone-glow: var(--ui-info-glow, 0 0 transparent);
       --_hue: var(--ui-info);
-      --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-info-hover);
+      --_hue-active: var(--ui-info-active);
+      --_hue-text: var(--ui-info-subtle-text);
+      --_on-hue: var(--ui-info-on-strong);
     }
 
     /* A value picker is a field, with Select's quiet edge and resting lift. */
-    :host([variant="field"]) {
+    :host[data-appearance="field"] {
       --_ui-field-shadow: var(--ui-shadow-sm);
       border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -431,23 +472,23 @@
       box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
     }
 
-    :host([variant="field"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="field"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
       background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
     }
 
-    :host([variant="field"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       --_ui-field-shadow: var(--ui-pressed);
     }
 
-    :host([variant="field"]):focus-visible {
+    :host[data-appearance="field"]:focus-visible {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-button-shadow, var(--_ui-field-shadow)),
         var(--ui-control-focus-halo-shadow);
     }
 
-    :host([variant="ghost"]) {
+    :host[data-appearance="ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
@@ -455,14 +496,14 @@
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :host([variant="ghost"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
        edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-    :host([variant="ghost"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
@@ -476,13 +517,13 @@
         var(--ui-focus-halo);
     }
 
-    :host([variant="solid"]):focus-visible {
+    :host[data-appearance="solid"]:focus-visible {
       box-shadow:
         var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :is(:host([variant="ghost"]), :host([variant="link"]), :host([variant="card"])):focus-visible {
+    :is(:host[data-appearance="ghost"], :host[data-appearance="link"], :host[data-appearance="card"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
@@ -504,7 +545,7 @@
     }
 
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-    :host([variant="ghost"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :host[data-appearance="ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
@@ -521,12 +562,12 @@
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :host([variant="link"]),
+    html[data-ui-input-modality="touch"] :host[data-appearance="link"],
     html[data-ui-input-modality="touch"] :host([size="xs"]) {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :host([variant="link"])::after,
+    html[data-ui-input-modality="touch"] :host[data-appearance="link"]::after,
     html[data-ui-input-modality="touch"] :host([size="xs"])::after {
       position: absolute;
       inset: 50% auto auto 50%;
@@ -538,7 +579,7 @@
 
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-    :host([variant="link"]) {
+    :host[data-appearance="link"] {
       display: inline !important;
       min-block-size: 0;
       padding: 0 !important;
@@ -555,24 +596,24 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host([variant="link"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
     }
 
-    :host([variant="link"]):active:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="link"]:active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :host([variant="link"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :host[data-appearance="link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
 
-    :host([variant="link"]):focus-visible {
+    :host[data-appearance="link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);

package/components/ui-card/ui-card.html

@@ -4,11 +4,14 @@
     >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>
     <prop name="variant" type="keyword" values="outlined, subtle, elevated" default="outlined"
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
-      elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
+      elevated adds a subtle lift above the page, for a view's one card, such as sign-in. Treatment independently controls decorative material.</prop>
+    <prop name="treatment" type="keyword" values="standard, expressive" default="standard"
+    >How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment.
+      This does not add elevation or require glass.</prop>
     <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
     >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
-    >accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the
+    >accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the
       surface hue; action controls retain their own intent.</prop>
     <prop name="as" type="keyword" values="div, section, article, aside" default="div"
     >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
@@ -24,6 +27,7 @@
        needs no layout of its own. */
     :host {
       --_ui-card-surface: var(--ui-surface-raised);
+      --_ui-card-elevation: 0 0 0 transparent;
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
       --_ui-selection-context-text: initial;
@@ -58,10 +62,54 @@
     }
 
     :host([variant="elevated"]) {
+      --_ui-card-elevation: var(--ui-shadow-lg);
       border-color: var(--ui-border-subtle);
       box-shadow: var(--ui-shadow-lg);
     }
 
+    :host([treatment="expressive"]) {
+      --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-panel-rim: calc((var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px);
+      border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
+      border-color: transparent;
+      background:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+        linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
+        linear-gradient(var(--ui-material-glass, var(--ui-surface-raised)), var(--ui-material-glass, var(--ui-surface-raised))) border-box,
+        var(--_ui-card-surface) padding-box;
+      box-shadow:
+        var(--_ui-card-elevation),
+        var(--ui-material-glow, 0 0 transparent),
+        inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
+      backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px)) saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px)) saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+    }
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      :host([treatment="expressive"]) {
+        background: var(--_ui-card-surface);
+      }
+    }
+    @media (prefers-reduced-transparency: reduce) {
+      :host([treatment="expressive"]) {
+        background: var(--_ui-card-surface);
+        border-width: var(--ui-border-width);
+        border-color: var(--ui-border-strong);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+    @media (forced-colors: active) {
+      :host([treatment="expressive"]) {
+        background: Canvas;
+        color: CanvasText;
+        border: var(--ui-border-width) solid CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     :host([tone="accent"]) {
       border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
       --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
@@ -88,10 +136,6 @@
 
     :host([tone="danger"]) {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-      /* An accent edge keeps the corners on its side straight. */
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
       --_ui-card-surface: var(--ui-danger-soft);
     }
 

package/components/ui-checkbox/ui-checkbox.html

@@ -130,7 +130,8 @@
       margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
-      background: var(--ui-control-surface, var(--ui-surface-default));
+      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;
       transition:
@@ -149,7 +150,8 @@
     input:checked,
     input:indeterminate {
       border-color: var(--ui-accent-solid);
-      background: var(--ui-accent-solid);
+      background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       box-shadow: var(--ui-control-inset);
     }
 

package/components/ui-curve-editor/curve.js

@@ -0,0 +1,10 @@
+export function curvePoints(value) {
+  const presets = { linear: [0, 0, 1, 1], ease: [.25, .1, .25, 1], "ease-in": [.42, 0, 1, 1], "ease-out": [0, 0, .58, 1], "ease-in-out": [.42, 0, .58, 1] };
+  if (presets[value]) return [...presets[value]];
+  const match = /^cubic-bezier\(\s*([^)]*)\s*\)$/.exec(String(value));
+  const parts = match?.[1].split(",");
+  const points = parts?.map(part => part.trim() === "" ? NaN : Number(part));
+  if (!points || points.length !== 4 || points.some(number => !Number.isFinite(number))) throw new Error("Use a cubic-bezier curve.");
+  return points.map((number, index) => Math.min(index % 2 ? 2 : 1, Math.max(index % 2 ? -1 : 0, number)));
+}
+export function curveText(points) { return `cubic-bezier(${points.map(number => Number(number.toFixed(3))).join(", ")})`; }