@threadlabs/looma 0.37.5 → 0.38.0

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

@@ -24,7 +24,7 @@
       keep their normal layout.</prop>
     <prop name="shape" type="keyword" values="rounded, pill" default="rounded"
     >rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.</prop>
-    <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
+    <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="neutral"
     >Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:
       tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field
       variant always uses neutral field colors.</prop>
@@ -375,7 +375,6 @@
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
-    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
     :host[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
@@ -384,6 +383,12 @@
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
+    :host[data-appearance="card"][aria-pressed="true"] {
+      background-color: var(--ui-selection-surface);
+      border-color: var(--ui-selection-border);
+      color: var(--ui-selection-text);
+    }
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :host:active:not(:disabled, [aria-disabled="true"]) {
       scale: var(--ui-press-scale, 1);
@@ -431,6 +436,18 @@
       background-color: var(--ui-button-surface, var(--ui-neutral-surface));
       color: var(--ui-button-text, var(--ui-text));
     }
+    :host[data-tone="neutral"][data-appearance="outline"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, transparent);
+    }
+    :host[data-tone="neutral"][data-appearance="outline"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :host[data-tone="neutral"][data-appearance="outline"]:active:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
     :host[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
     }
@@ -518,10 +535,8 @@
       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[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%));
+      background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 18%));
       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%);
     }

package/components/ui-combobox/ui-combobox.html

@@ -5,6 +5,8 @@
     <prop name="label" type="string" default=""
     >The field's label, tied to its input and shown above it; required adds an asterisk. It also names the suggestion list. Pair it with
       labelVisibility="sr-only" when the context already labels the field visibly.</prop>
+    <prop name="muted" type="boolean" default="false"
+    >Shows the selected field value with supporting-text emphasis, for an inherited or default choice. Suggestions keep normal emphasis and the field stays interactive.</prop>
     <prop name="placeholder" type="string" default=""
     >Hint text shown in the empty input, as on a native input. It disappears as the user types, so it never replaces label.</prop>
     <prop name="name" type="string" default=""
@@ -79,7 +81,7 @@
       when the field is left empty. In multiple mode a chosen item satisfies it, whatever is left in the input.</prop>
     <prop name="invalid" type="boolean" default="false"
     >Exposes an externally validated error on the input and field. It remains until the consumer clears it, independently of native validation.</prop>
-    <prop name="openOnFocus" type="boolean" default="false">Opens suggestions when the input receives focus, before typing.</prop>
+    <prop name="openOnFocus" type="boolean" default="false">Opens suggestions when the input receives focus or is clicked. A committed selection shows all choices until typing filters them; an explicitly supplied query keeps its filtering.</prop>
     <prop name="loading" type="boolean" default="false"
     >Marks the suggestion list busy while the consumer loads options. It announces loading and suppresses the empty state and create offer until cleared.</prop>
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
@@ -423,7 +425,7 @@
     <div class="control">
       <div class="field" $ref="field">
         <div class="entry">
-          <slot name="start"></slot>
+          <span class="start"><slot name="start"></slot></span>
           <template $if="$multiple">
             <button
               $each="item, index of $internalItems"
@@ -698,6 +700,21 @@
       flex: 1 1 auto;
       min-inline-size: 0;
     }
+    .start {
+      display: flex !important;
+      align-items: center !important;
+      flex: none;
+      padding-inline-start: var(--ui-space-3) !important;
+    }
+    .start:empty {
+      display: none !important;
+    }
+    :host([size="sm"]) .start {
+      padding-inline-start: var(--ui-space-2) !important;
+    }
+    :host([size="lg"]) .start {
+      padding-inline-start: var(--ui-space-4) !important;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help {
       flex: none;
@@ -736,6 +753,10 @@
       block-size: var(--ui-icon-size-sm);
     }
 
+    :host([muted]) input:not(:disabled) {
+      color: var(--ui-text-secondary);
+    }
+
     input::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -820,7 +841,7 @@
       padding: var(--ui-space-1) !important;
       border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
-      background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-material-content, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }

package/components/ui-combobox/ui-combobox.js

@@ -35,6 +35,7 @@ export function connect(host) {
   let composing = false;
   let alive = true;
   let fullSet = false;
+  let suppressFocusOpening = false;
   let initialRaw = "";
   let awaitingLabel = null;
   let proposedChange;
@@ -461,14 +462,28 @@ export function connect(host) {
       else if (config().allowFreeText) { event.preventDefault(); commit(null, host.state.raw, null, "free-entry", "keyboard"); close(); }
     }
   };
+  const openFromField = () => {
+    const selected = config().options?.find(option => option.value === host.state.selected) ?? knownOptions.get(host.state.selected);
+    // A committed label is a selection, not a search draft. Typing still filters.
+    open(host.props.query.value == null && selected?.label === host.state.raw ? "disclosure" : "input");
+  };
   const onClick = (event) => {
     const option = event.target.closest?.('[role="option"][data-index]');
     if (option) { choose(Number(option.dataset.index), "pointer"); return; }
     const action = event.target.closest?.("[data-combobox-action]")?.dataset.comboboxAction;
     if (action && (host.props.disabled.value || host.props.readonly.value)) return;
     if (action === "clear") { lastSelection = null; commit(null, "", null, "clear", "pointer"); close(); input.focus(); }
-    else if (action === "disclosure") { host.state.expanded ? close() : open("disclosure"); input.focus(); }
-    else if (field.contains(event.target) && !event.target.closest?.("button")) input.focus();
+    else if (action === "disclosure") {
+      const expanded = host.state.expanded;
+      // Returning focus must not undo an explicit request to close the list.
+      suppressFocusOpening = true;
+      try { input.focus(); } finally { suppressFocusOpening = false; }
+      expanded ? close() : open("disclosure");
+    }
+    else if (field.contains(event.target) && !event.target.closest?.("button")) {
+      if (host.props.openOnFocus.value && !host.state.expanded) openFromField();
+      input.focus();
+    }
   };
   const onPointerdown = (event) => { if (event.target.closest?.('[role="option"]')) event.preventDefault(); };
   const onFocusout = (event) => {
@@ -481,7 +496,7 @@ export function connect(host) {
     void validateCurrent();
   };
   const onFocusin = (event) => {
-    if (event.target === input && host.props.openOnFocus.value && !host.state.expanded) open();
+    if (event.target === input && host.props.openOnFocus.value && !host.state.expanded && !suppressFocusOpening) openFromField();
   };
   const onCompositionstart = (event) => { if (event.target === input) composing = true; };
   const onCompositionend = (event) => { if (event.target === input) { composing = false; onInput(new InputEvent("input")); } };

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

@@ -4,7 +4,6 @@
     <prop name="preset" type="keyword" values="none, primary, standard, quiet, destructive" default="none"
     >The same shortcuts as Button: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid danger. A named preset
       wins over variant and tone; none preserves independent choices.</prop>
-    <!-- Computed maps read every member in HTML Next. auto keeps an omitted tone concrete so the preset map can resolve, while retaining the existing variant-dependent appearance. -->
     <computed name="appearance" from="{ none: $variant, primary: 'solid', standard: 'solid', quiet: 'ghost', destructive: 'solid' }[$preset]"></computed>
     <computed name="colorTone" from="{ none: $tone, primary: 'accent', standard: 'neutral', quiet: 'neutral', destructive: 'danger' }[$preset]"></computed>
     <prop name="disabled" type="boolean" default="false"
@@ -21,12 +20,12 @@
     >Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row's height, on mouse and
       touch alike. Leave it off for compact toolbar and inline icon buttons.</prop>
     <prop name="variant" type="keyword" values="ghost, outline, solid" default="ghost"
-    >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the
-      accent colour, for the one primary action in a group.</prop>
-    <prop name="tone" type="keyword" values="auto, accent, neutral, danger, success, warning, info" default="auto"
-    >Colour for every variant. auto preserves the existing variant-specific default. When omitted, ghost and outline keep their neutral appearance and solid
-      keeps its accent fill. Set accent for a coloured action or neutral for a quiet one. danger, success, warning and info share Button's intent colors. Native
-      aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.</prop>
+    >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with its
+      chosen tone.</prop>
+    <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="neutral"
+    >Colour for every variant. The default neutral shares the quiet control family with fields and text buttons. Choose accent explicitly for a coloured action,
+      or primary for solid accent. danger, success, warning and info share Button's intent colors. Native aria-pressed="true" keeps an outline toggle visibly
+      pressed; the consumer owns that state.</prop>
     <prop name="anticipatory" type="boolean" default="false"
     >Keeps the button out of sight until it is wanted: at rest a fine pointer sees only a small guide dot, and the button appears on hover, on focus, or when
       the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.</prop>
@@ -217,10 +216,14 @@
       color: var(--_icon-button-text);
     }
 
-    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    /* Neutral actions share the same quiet surface and border roles as fields. */
     :host[data-tone="neutral"] {
       --_tone-highlight: var(--ui-neutral-highlight, none);
       --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+      --_icon-button-outline-surface: transparent;
+      --_icon-button-border: var(--ui-control-border);
+      --_icon-button-hover-border: var(--ui-control-border-hover, var(--ui-control-border));
+      --_icon-button-text: var(--ui-text);
       --_icon-button-solid-surface: var(--ui-neutral-surface);
       --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
       --_icon-button-solid-text: var(--ui-text);
@@ -408,6 +411,12 @@
     :host[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
+    :host[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :host[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+    }
 
     :host[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));

package/components/ui-menu-item/ui-menu-item.html

@@ -181,7 +181,12 @@
     }
 
     :host:is(:hover, :focus-visible):not([aria-disabled="true"]) {
-      background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+      background: var(--ui-menu-item-hover-surface, var(--ui-accent-subtle));
+    }
+
+    :host[aria-checked="true"]:not([aria-disabled="true"]) {
+      background: var(--ui-selection-surface);
+      color: var(--ui-selection-text);
     }
 
     :host:focus-visible {

package/components/ui-select/ui-select.html

@@ -6,6 +6,9 @@
     <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="required" type="boolean" default="false">Requires a non-empty option for form validation.</prop>
+    <prop name="muted" type="boolean" default="false"
+    >Shows the selected value with supporting-text emphasis, for an inherited or default choice. The select remains interactive and its options retain normal
+      emphasis.</prop>
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Height, padding, chevron, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by
       default) with smaller text and a smaller chevron, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller
@@ -95,6 +98,15 @@
       background-size: 1.125rem 1.125rem, 100% 100%;
     }
 
+    :host([muted]) {
+      color: var(--ui-text-secondary);
+    }
+    :host([muted]) :slotted(option),
+    :host([muted]) :slotted(optgroup) {
+      color: var(--ui-text-primary);
+      background-color: var(--ui-control-surface);
+    }
+
     :host:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:user-invalid) {
       border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }

package/components/ui-skeleton/ui-skeleton.html

@@ -0,0 +1,91 @@
+<template component="ui-skeleton">
+  <defs>
+    <prop name="shape" type="keyword" values="text, circle, rectangle" default="text"
+    >The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media
+      area.</prop>
+    <prop name="width" type="string" default=""
+    >Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium
+      Avatar's outer size for circles.</prop>
+    <prop name="height" type="string" default=""
+    >Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.</prop>
+    <prop name="animated" type="boolean" default="false"
+    >Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.</prop>
+  </defs>
+  <span aria-hidden="true" style:--ui-skeleton-width="$width" style:--ui-skeleton-height="$height"></span>
+  <style>
+    /* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+    @property --ui-skeleton-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-skeleton-height {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :host {
+      display: block !important;
+      position: relative;
+      box-sizing: border-box !important;
+      flex: none;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      inline-size: var(--ui-skeleton-width, 100%);
+      block-size: var(--ui-skeleton-height, 1lh);
+      margin: 0 !important;
+      font: inherit;
+    }
+
+    :host::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--ui-radius-sm);
+      background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
+    }
+
+    :host([shape="text"])::before {
+      inset-block: 22%;
+    }
+
+    :host([shape="circle"]) {
+      inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
+      block-size: var(--ui-skeleton-height, auto);
+      aspect-ratio: 1;
+    }
+    :host([shape="circle"])::before {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :host([shape="rectangle"]) {
+      block-size: var(--ui-skeleton-height, 8rem);
+    }
+    :host([shape="rectangle"])::before {
+      border-radius: var(--ui-radius-md);
+    }
+
+    :host([animated])::before {
+      animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+    }
+    @keyframes ui-skeleton-pulse {
+      50% {
+        opacity: 0.45;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([animated])::before {
+        animation: none;
+      }
+    }
+    @media (forced-colors: active) {
+      :host::before {
+        background: CanvasText;
+        opacity: 0.2;
+        animation: none;
+      }
+    }
+    :host[hidden] {
+      display: none !important;
+    }
+  </style>
+</template>