@threadlabs/looma 0.17.0 → 0.17.1

package/components/ui-avatar-group/ui-avatar-group.html

@@ -37,10 +37,9 @@
       --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
       --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
 
-      /* Each avatar is ringed in the surface colour, so where one overlaps the next it reads as a
-       * whole circle set on top, not a shape cut into the one beneath. */
-      --_overlap-shadow: 0 0 0 0 transparent;
-      --_edge-ring: 0 0 0 2px var(--ui-surface);
+      /* A one-pixel shadow on the leading edge separates overlapping circles without cutting
+       * a white gap out of the avatar underneath. */
+      --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
       display: flex;
       align-items: center;
@@ -59,6 +58,10 @@
       margin-inline-start: 0;
     }
 
+    :host:dir(rtl) {
+      --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
+    }
+
     .overflow {
       margin-inline-start: -0.5rem;
       display: inline-flex;
@@ -72,7 +75,7 @@
       color: var(--ui-text-primary);
       box-shadow:
         var(--_ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
-        var(--_ui-avatar-group-edge-ring, var(--_edge-ring));
+        var(--_ui-avatar-group-edge-ring, 0 0 0 0 transparent);
       font: inherit;
       font-size: var(--ui-font-size-xs);
       font-weight: 600;

package/components/ui-avatar-group/ui-avatar-group.js

@@ -11,10 +11,10 @@ export default function controller(host) {
     avatars.forEach((avatar, index) => {
       avatar.style.display = index >= visible ? "none" : "";
       avatar.style.marginInlineStart = index === 0 ? "0px" : overlap;
-      // Later avatars cast a crisp shadow back onto the one they overlap; the first overlaps nothing.
+      // Later avatars darken only their leading edge; the first overlaps nothing.
       avatar.style.boxShadow = index === 0
-        ? "var(--ui-avatar-group-edge-ring, var(--_edge-ring))"
-        : "var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)), var(--ui-avatar-group-edge-ring, var(--_edge-ring))";
+        ? "var(--ui-avatar-group-edge-ring, none)"
+        : "var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)), var(--ui-avatar-group-edge-ring, 0 0 0 0 transparent)";
     });
     const authoredVisible = Math.min(avatars.length, visible);
     const suppliedTotal = Number(host.state.total);

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

@@ -135,27 +135,32 @@
     }
 
     :host-state([variant="subtle"][tone="accent"]) {
-      --_badge-surface: var(--ui-accent-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
     :host-state([variant="subtle"][tone="danger"]) {
-      --_badge-surface: var(--ui-danger-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
     :host-state([variant="subtle"][tone="success"]) {
-      --_badge-surface: var(--ui-success-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-success-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
     :host-state([variant="subtle"][tone="warning"]) {
-      --_badge-surface: var(--ui-warning-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
     :host-state([variant="subtle"][tone="info"]) {
-      --_badge-surface: var(--ui-info-soft);
+      --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 22%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-info-solid) 28%, var(--ui-surface-default));
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 

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

@@ -15,12 +15,13 @@
       align-items: center;
       gap: var(--ui-space-2);
       min-inline-size: 0;
+      margin: 0;
     }
 
     .separator {
       display: inline-flex;
       color: var(--ui-text-muted);
-      font-size: var(--ui-font-size-xs);
+      font-size: var(--ui-font-size-sm);
     }
 
     :host:first-child .separator {

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

@@ -11,11 +11,12 @@
     >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.</prop>
     <prop name="disabled" type="boolean" default="false"
-    >Makes the button unavailable: it cannot be pressed, its tone fades, and it loses its raised look. A disabled link (as="a" with href) drops its href and
-      states aria-disabled="true" instead, because a link has no native disabled state.</prop>
-    <prop name="pending" type="boolean" default="false"
+    >Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as="a" with href) drops its
+      href and states aria-disabled="true" instead, because a link has no native disabled state.</prop>
+    <prop name="loading" type="boolean" default="false"
     >Keeps the action focusable and its label visible while work is in progress. It shows a decorative spinner, states aria-disabled and aria-busy, and prevents
       activation or form submission until cleared.</prop>
+    <prop name="pending" type="boolean" default="false">Deprecated alias for loading.</prop>
     <prop name="align" type="center | start" default="center"
     >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
     <prop name="stretch" type="boolean" default="false">Fills the inline size of its container.</prop>
@@ -34,18 +35,24 @@
   <template $match>
     <a
       $when="as = 'a'"
-      :href="{ true: null, false: href }[format('%s', disabled or pending)]"
+      :href="{ true: null, false: href }[format('%s', disabled or loading or pending)]"
       :target="target"
       :rel="rel"
-      :aria-disabled="{ true: 'true', false: null }[format('%s', disabled or pending)]"
-      :aria-busy="pending"
-      :tabindex="{ true: '0', false: null }[format('%s', pending and not disabled)]"
+      :aria-disabled="{ true: 'true', false: null }[format('%s', disabled or loading or pending)]"
+      :aria-busy="loading or pending"
+      :tabindex="{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]"
     >
-      <ui-spinner $if="pending" size="sm" class="pending-spinner"></ui-spinner>
+      <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
     </a>
-    <button $else :type="type" :disabled="disabled" :aria-disabled="{ true: 'true', false: null }[format('%s', pending)]" :aria-busy="pending">
-      <ui-spinner $if="pending" size="sm" class="pending-spinner"></ui-spinner>
+    <button
+      $else
+      :type="type"
+      :disabled="disabled"
+      :aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+      :aria-busy="loading or pending"
+    >
+      <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
     </button>
   </template>
@@ -177,12 +184,15 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+        box-shadow var(--ui-motion-base) var(--ui-motion-ease);
       margin: 0;
     }
 
-    .pending-spinner {
+    .spinner-wrap {
+      display: inline-flex;
+      flex: none;
       margin-inline-end: var(--ui-space-2);
+      vertical-align: middle;
     }
 
     @supports (text-box-trim: trim-both) {
@@ -312,12 +322,12 @@
         var(--ui-focus-halo);
     }
 
-    /* Disabled keeps the shape and washes out the rest: every variant keeps its own structure, so a
-       disabled outline is still an outline and a disabled ghost still has no edge. One filter fades
-       fill, border, and text together (--ui-disabled-filter), and the theme decides which way is
-       toward the page. The highlight and shadow go, because nothing that cannot be pressed should
-       look raised. */
-    :host:is(:disabled, [aria-disabled="true"]) {
+    /* A loading action stays visually active; only an explicitly disabled action takes the
+       neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
+    :host:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-button-disabled-opacity, 1);
       cursor: not-allowed;
@@ -325,16 +335,13 @@
       box-shadow: none;
     }
 
-    :host-state([pending]):focus-visible {
+    :is(:host-state([loading]), :host-state([pending])):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
-    /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-       it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
-       the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
-       hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-    :host-state([variant="ghost"]):is(:disabled, [aria-disabled="true"]) {
-      background-color: oklch(from var(--_tone) l c h / 14%);
+    /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
+    :host-state([variant="ghost"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+      background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
 
@@ -393,7 +400,7 @@
       transform: none;
     }
 
-    :host-state([variant="link"]):is(:disabled, [aria-disabled="true"]) {
+    :host-state([variant="link"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }

package/components/ui-button/ui-button.js

@@ -1,7 +1,7 @@
-// Pending actions retain focus but cannot activate, navigate, submit, or notify click consumers.
+// Loading actions retain focus but cannot activate, navigate, submit, or notify click consumers.
 export default function controller(host) {
   const onClick = (event) => {
-    if (!host.state.pending) return;
+    if (!host.state.loading && !host.state.pending) return;
     event.preventDefault();
     event.stopImmediatePropagation();
   };

package/components/ui-callout/ui-callout.html

@@ -103,7 +103,9 @@
       gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
       align-items: start;
       max-width: 100%;
-      padding: var(--ui-callout-padding-block, var(--ui-space-2)) var(--ui-callout-padding-inline, var(--ui-space-3));
+      padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
+      padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
+      padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
       border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
       border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
       border-radius: var(--ui-radius-md);

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

@@ -5,7 +5,7 @@
       elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
     <prop name="padding" type="sm | md | lg" default="md"
     >The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
-    <prop name="tone" type="neutral | danger" default="neutral">danger draws an outlined card's border in the danger colour.</prop>
+    <prop name="tone" type="neutral | danger" default="neutral">danger adds a soft danger surface and a strong leading edge for consequential content.</prop>
     <prop name="as" type="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>
   </defs>
@@ -25,7 +25,7 @@
       box-sizing: border-box;
       min-inline-size: 0;
       padding: var(--ui-space-5);
-      border: 1px solid var(--ui-border-default);
+      border: 1px solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
       color: var(--ui-text-primary);
@@ -51,7 +51,9 @@
     }
 
     :host-state([tone="danger"]) {
-      border-color: var(--ui-danger);
+      border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
+      border-inline-start: 4px solid var(--ui-danger);
+      background: var(--ui-danger-soft);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

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

@@ -98,10 +98,10 @@
       inline-size: var(--_ui-checkbox-size, 1.125rem);
       block-size: var(--_ui-checkbox-size, 1.125rem);
       margin: 0.125em 0 0;
-      border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-sm);
       background: var(--ui-control-surface, var(--ui-surface-default));
-      box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
+      box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -113,28 +113,30 @@
       content: "";
       position: absolute;
       opacity: 0;
+      transition: opacity 120ms var(--ui-motion-ease);
     }
 
     input:checked,
     input:indeterminate {
       border-color: var(--ui-accent-solid);
       background: var(--ui-accent-solid);
-      box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
+      box-shadow: var(--ui-control-inset);
     }
 
     /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
     input:checked::after {
       inset: 0;
       margin: auto;
-      inline-size: 0.32rem;
-      block-size: 0.58rem;
+      inline-size: 0.28rem;
+      block-size: 0.5rem;
       /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
          component, which left the tick with no style and no colour. */
       border-style: solid;
       border-color: var(--ui-text-on-accent);
       border-width: 0 0.125rem 0.125rem 0;
       opacity: 1;
-      transform: translateY(-0.11rem) rotate(45deg);
+      transform: translate(0.07rem, -0.09rem) rotate(45deg);
+      animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     input:indeterminate::after {
@@ -146,6 +148,28 @@
       transform: translateY(-50%);
     }
 
+    @keyframes ui-checkbox-check {
+      from {
+        opacity: 0;
+        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+      }
+      65% {
+        opacity: 1;
+        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+      }
+      to {
+        opacity: 1;
+        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      input::after {
+        transition: none;
+        animation: none;
+      }
+    }
+
     input:hover:enabled {
       border-color: var(--ui-accent-solid);
     }
@@ -163,9 +187,13 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    :host-state([disabled]) .description {
+      color: var(--ui-disabled-text);
+    }
     :host-state([disabled]) input {
-      border-color: var(--ui-border-default);
-      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      border-color: var(--ui-disabled-border);
+      background: var(--ui-disabled-surface);
+      box-shadow: none;
       cursor: not-allowed;
     }
 

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

@@ -13,16 +13,17 @@
       when none is chosen. A disabled combobox sends nothing.</prop>
     <prop name="value" type="string | null"
     >The selected value in single mode, which a named combobox submits with its form. The field shows the matching option's label, and a form reset returns to
-      this value.</prop>
+      this value. If omitted, the first authored option with selected sets the initial value.</prop>
     <prop
       name="items"
       type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
-    >The selected items in multiple mode, as JSON; a named combobox submits each one's value. A form reset returns to these items, or to none when unset.</prop>
+    >The selected items in multiple mode, as JSON; a named combobox submits each one's value. A form reset returns to these items, or to authored selected
+      options when unset.</prop>
     <prop name="selectedValues" type="list(string)"
-    >The selected option values in multiple mode, when the consumer controls the selection. Once set, the consumer owns it: each value shows as a badge with its
-      authored option's label, adding or removing one reports selected-values-change with the new list, and the badges follow selectedValues, not the user,
-      unless it is updated to match. Setting it reports nothing. It takes precedence over items; leave it unset to let the combobox keep its own
-      selection.</prop>
+    >The selected option values in multiple mode, when the consumer controls the selection. Without it or items, authored options with selected set the initial
+      selection. Once set, the consumer owns it: each value shows as a badge with its authored option's label, adding or removing one reports
+      selected-values-change with the new list, and the badges follow selectedValues, not the user, unless it is updated to match. Setting it reports nothing.
+      It takes precedence over items; leave it unset to let the combobox keep its own selection.</prop>
     <prop name="multiple" type="boolean" default="false"
     >Lets the user choose several options. Each choice becomes a removable badge before the input, the list stays open between picks, and choosing a checked
       option removes it. value-change then reports the whole list of items, and selected-values-change the list of their values; use selectedValues or items,
@@ -66,8 +67,8 @@
     >Adds a chevron button that opens and closes the full, unfiltered list of options, for users who would rather browse than type. ArrowDown opens the same
       list with or without it.</prop>
     <prop name="clearable" type="boolean" default="false"
-    >Adds a clear button to the field that empties the input and clears the selection, reported as value-change with kind "clear". In multiple mode it clears
-      only the typed text; chosen items stay.</prop>
+    >Adds a clear button to the field that empties the input and clears the selection, reported as value-change with kind "clear". It is disabled when there is
+      nothing to clear. In multiple mode it clears only the typed text; chosen items stay.</prop>
     <prop name="help" type="string" default=""
     >Help text for the field. When set, a help button appears beside the field and opens a tooltip with this text; while it is open, the input is described by
       it.</prop>
@@ -144,42 +145,50 @@
         *</template></label>
     <div class="control">
       <div class="field" $ref="field">
-        <slot name="start"></slot>
-        <template $if="multiple">
-          <button
-            $each="item, index of internalItems"
-            $key="item.id"
-            class="item"
-            type="button"
-            tabindex="-1"
-            :data-index="index"
-            :disabled="disabled or readonly or item.disabled"
-            :aria-label="format('%s, press Delete or Backspace to remove', item.label)"
+        <div class="entry">
+          <slot name="start"></slot>
+          <template $if="multiple">
+            <button
+              $each="item, index of internalItems"
+              $key="item.id"
+              class="item"
+              type="button"
+              tabindex="-1"
+              :data-index="index"
+              :disabled="disabled or readonly or item.disabled"
+              :aria-label="format('%s, press Delete or Backspace to remove', item.label)"
+            >
+              <slot :name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+            </button>
+          </template>
+          <input
+            $ref="input"
+            :id="format('%s-input', uid)"
+            role="combobox"
+            aria-autocomplete="list"
+            autocomplete="off"
+            :aria-controls="format('%s-listbox', uid)"
+            :aria-expanded="expanded"
+            :aria-invalid="invalid or validationStatus = 'error'"
+            :aria-busy="loading or validationStatus = 'pending'"
+            .value="display"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :readonly="readonly"
+            :required="required and not (multiple and internalItems[0])"
           >
-            <slot :name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
-          </button>
-        </template>
-        <input
-          $ref="input"
-          :id="format('%s-input', uid)"
-          role="combobox"
-          aria-autocomplete="list"
-          autocomplete="off"
-          :aria-controls="format('%s-listbox', uid)"
-          :aria-expanded="expanded"
-          :aria-invalid="invalid or validationStatus = 'error'"
-          :aria-busy="loading or validationStatus = 'pending'"
-          .value="display"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          :readonly="readonly"
-          :required="required and not (multiple and internalItems[0])"
-        >
+        </div>
         <input $if="name and not multiple" type="hidden" :name="name" :value="submitted" :disabled="disabled">
         <template $if="name and multiple">
           <input $each="item of internalItems" $key="item.id" type="hidden" :name="name" :value="item.value" :disabled="disabled">
         </template>
-        <button $if="clearable" type="button" data-combobox-action="clear" aria-label="Clear" :disabled="disabled or readonly">
+        <button
+          $if="clearable"
+          type="button"
+          data-combobox-action="clear"
+          aria-label="Clear"
+          :disabled="disabled or readonly or (not raw and (multiple or selected = null))"
+        >
           <svg class="affordance-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
             <path d="M7 7l10 10M17 7 7 17"></path>
           </svg>
@@ -401,6 +410,11 @@
         var(--ui-control-inset),
         var(--ui-control-focus-halo-shadow);
     }
+    .entry {
+      display: flex;
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help {
       flex: none;
@@ -520,7 +534,7 @@
       overflow: auto;
       margin: 0;
       padding: var(--ui-space-1);
-      border: 1px solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px 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)));
       color: var(--ui-text-primary);
@@ -544,6 +558,10 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    .option[aria-disabled="true"] .primary,
+    .option[aria-disabled="true"] .secondary {
+      color: var(--ui-disabled-text);
+    }
     .primary {
       display: block;
       color: var(--_ui-combobox-option-text, var(--ui-text-primary));
@@ -640,21 +658,29 @@
       );
     }
 
-    /* Multiple mode: chips wrap before the cursor on one flexible field line. */
+    /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
+       while the clear and disclosure controls remain fixed at the end of the field. */
     :host-state([multiple]) .field {
-      flex-wrap: wrap;
       align-items: center;
-      gap: var(--ui-space-1);
       min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
       padding: var(--ui-space-1);
     }
+    :host-state([multiple]) .entry {
+      align-items: center;
+      gap: var(--ui-space-1);
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    :host-state([multiple]) .entry::-webkit-scrollbar {
+      display: none;
+    }
     :host-state([multiple]) input {
       flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
       padding: var(--ui-space-0-5) var(--ui-space-1);
     }
-    /* A small multiple field starts at the small control height; chosen items still wrap it taller. */
+    /* Size variants keep their control height as selections are added. */
     :host-state([multiple]):host-state([size="sm"]) .field {
       min-block-size: 0;
       padding: var(--ui-space-0-5);
@@ -673,6 +699,7 @@
     .item {
       appearance: none;
       display: inline-flex;
+      flex: none;
       min-inline-size: 0;
       max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
       overflow: hidden;
@@ -689,7 +716,7 @@
       outline-offset: 1px;
     }
     .item:disabled {
-      opacity: 0.6;
+      color: var(--ui-disabled-text);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

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

@@ -58,6 +58,10 @@ export default function controller(host) {
     // "none": the consumer already narrowed the options (a server search), so every one is listed.
     filterByLabel: host.state.filter !== "none",
   });
+  const authoredDefaults = () => {
+    const values = new Set(Array.from(authored.querySelectorAll("option[selected]"), (option) => option.value));
+    return config().options.filter((option) => values.has(option.value));
+  };
   // Selected items work uncontrolled: the component keeps them and reports every change. A consumer
   // that owns `items` stays in charge, because the prop resyncs whatever it sets. A consumer that sets
   // `selectedValues` controls the selection: the chips follow it, and a user's change is only reported.
@@ -466,7 +470,7 @@ export default function controller(host) {
       host.state.selected = null;
       host.state.raw = host.state.query ?? "";
     } else {
-      host.state.selected = host.state.value ?? null;
+      host.state.selected = host.state.value !== undefined ? host.state.value : authoredDefaults()[0]?.value ?? null;
       host.state.raw = host.state.query ?? "";
       if (host.state.query === undefined && !host.state.raw && host.state.selected !== null) {
         host.state.raw = config().options?.find((row) => row.value === host.state.selected)?.label ?? host.state.selected;
@@ -499,7 +503,7 @@ export default function controller(host) {
   const stopReset = afterFormReset(input, () => {
     close();
     lastSelection = null;
-    host.state.internalItems = controlledValues() ? itemsForValues() : Array.isArray(host.state.items) ? host.state.items : [];
+    host.state.internalItems = controlledValues() ? itemsForValues() : Array.isArray(host.state.items) ? host.state.items : authoredDefaults();
     applyDefaults();
     input.value = host.state.display;
     resetValidation();
@@ -522,6 +526,7 @@ export default function controller(host) {
   let lastSelectedValues = host.state.selectedValues;
   if (controlledValues()) host.state.internalItems = itemsForValues();
   else if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
+  else host.state.internalItems = authoredDefaults();
   const stop = host.effect(() => {
     // A consumer that sets `items` owns them; otherwise the component keeps its own. selectedValues wins.
     if (host.state.items !== lastItems) {

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

@@ -57,7 +57,7 @@
       box-sizing: border-box;
       padding: var(--ui-space-1);
       background: var(--_ui-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-context-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       outline: 0;
@@ -78,7 +78,7 @@
       block-size: 0;
       margin: var(--ui-space-1) 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-border-default);
+      border-block-start: 1px solid var(--ui-border-divider);
     }
 
     .menu:popover-open {

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

@@ -19,7 +19,7 @@
       padding: var(--_ui-description-padding, 0);
       border-width: var(--_ui-description-border-width, 0);
       border-style: solid;
-      border-color: var(--ui-border-default);
+      border-color: var(--_ui-description-border-color, var(--ui-border-default));
       border-radius: var(--ui-radius-md);
       font-size: var(--ui-font-size-sm);
     }