@threadlabs/looma 0.37.6 → 0.38.0

package/vanilla/UiSelect.js

@@ -7,7 +7,7 @@ const T0 = ["",[],4];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-select", a: (host, I) => C(host, I), b: generatedInputs };
-const D = { g: "ui-select", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "value": { "required":false, c: checkString, t: "string", j: 0, m: "s" } } };
+const D = { g: "ui-select", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "muted": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "value": { "required":false, c: checkString, t: "string", j: 0, m: "s" } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiSelect(options = {}, html) {
@@ -19,7 +19,7 @@ export function createUiSelect(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-select");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null];
+  const v = [null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -35,8 +35,8 @@ export function createUiSelect(options = {}, html) {
       const s0 = toAttribute(x0, "disabled");
       if (s0 !== r.v0) writeAttribute(r.n, "disabled", r.v0 = s0);
     }
-    if (c & 4) {
-      const x1 = v[2];
+    if (c & 8) {
+      const x1 = v[3];
       const s1 = toAttribute(x1, "required");
       if (s1 !== r.v1) writeAttribute(r.n, "required", r.v1 = s1);
     }
@@ -45,8 +45,8 @@ export function createUiSelect(options = {}, html) {
       const s2 = toAttribute(x2, "aria-invalid");
       if (s2 !== r.v2) writeAttribute(r.n, "aria-invalid", r.v2 = s2);
     }
-    if (c & 8) {
-      const x3 = hostState(["size"], [v[3]]);
+    if (c & 20) {
+      const x3 = hostState(["muted","size"], [v[2], v[4]]);
       const s3 = x3;
       if (s3 !== r.v3) writeAttribute(r.n, "data-ui-select-state", (r.v3 = s3) === "" ? null : s3);
     }
@@ -62,4 +62,4 @@ export function createUiSelect(options = {}, html) {
   manageProps(I);
   return element;
 }
-defineComponent("ui-select", createUiSelect, ["disabled","invalid","required","size","value"]);
+defineComponent("ui-select", createUiSelect, ["disabled","invalid","muted","required","size","value"]);

package/vue/UiButton.vue

@@ -145,7 +145,7 @@ const propValidityContract = {
       description:
         '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:\n      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\n      variant always uses neutral field colors.',
       values: ['accent', 'neutral', 'danger', 'success', 'warning', 'info'],
-      default: 'accent',
+      default: 'neutral',
     },
     type: {
       type: { kind: 'terminal', name: 'keyword' },
@@ -212,7 +212,7 @@ const acceptedProps: Record<string, unknown> = {
   square: false,
   stretch: false,
   target: null,
-  tone: 'accent',
+  tone: 'neutral',
   type: 'button',
   variant: 'outline',
 }
@@ -227,7 +227,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   size: 'md',
   square: false,
   stretch: false,
-  tone: 'accent',
+  tone: 'neutral',
   type: 'button',
   variant: 'outline',
 }, (name, value, source, values) => {
@@ -1039,8 +1039,6 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
-/* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
@@ -1050,9 +1048,6 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
-/* 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. */
-
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
 /* A loading action stays visually active; only an explicitly disabled action takes the
@@ -1257,6 +1252,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     border-color: var(--ui-button-hover-border, var(--_tone-hover));
     background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
   }
+
   :global(:scope[data-appearance="card"][data-tone="neutral"]:where([data-hn-ui-button])) {
     border-color: var(--ui-button-border, var(--ui-border));
   }
@@ -1264,6 +1260,12 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   :global(:scope[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     border-color: var(--ui-button-hover-border, var(--ui-border-strong));
   }
+
+  :global(:scope[data-appearance="card"][aria-pressed="true"]:where([data-hn-ui-button])) {
+    background-color: var(--ui-selection-surface);
+    border-color: var(--ui-selection-border);
+    color: var(--ui-selection-text);
+  }
   :global(:scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     scale: var(--ui-press-scale, 1);
     background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
@@ -1308,6 +1310,24 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     background-color: var(--ui-button-surface, var(--ui-neutral-surface));
     color: var(--ui-button-text, var(--ui-text));
   }
+  :global(:scope[data-tone="neutral"][data-appearance="outline"]:where([data-hn-ui-button])) {
+    border-color: var(--ui-button-border, var(--ui-control-border));
+    background-color: var(--ui-button-surface, transparent);
+  }
+  :global(:scope[data-tone="neutral"][data-appearance="outline"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+    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));
+  }
+  :global(:scope[data-tone="neutral"][data-appearance="outline"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+    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));
+  }
   :global(:scope[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
   }
@@ -1400,11 +1420,9 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
     border-color: transparent;
   }
+
   :global(:scope[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
-    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%),

package/vue/UiCombobox.d.ts

@@ -95,6 +95,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     multiple: {
         type: PropType<boolean | null>;
     };
+    muted: {
+        type: PropType<boolean | null>;
+    };
     name: {
         type: PropType<string | null>;
     };
@@ -334,6 +337,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     multiple: {
         type: PropType<boolean | null>;
     };
+    muted: {
+        type: PropType<boolean | null>;
+    };
     name: {
         type: PropType<string | null>;
     };

package/vue/UiCombobox.vue

@@ -192,6 +192,14 @@ const propValidityContract = {
         '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\n      option removes it. items-change then reports the whole list of items, and selected-values-change the list of their values; use selectedValues or items,\n      not value, in this mode.',
       default: false,
     },
+    muted: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'muted' },
+      description:
+        'Shows the selected field value with supporting-text emphasis, for an inherited or default choice. Suggestions keep normal emphasis and the field stays interactive.',
+      default: false,
+    },
     name: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -204,7 +212,8 @@ const propValidityContract = {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
       target: { attribute: 'openonfocus' },
-      description: 'Opens suggestions when the input receives focus, before typing.',
+      description:
+        '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.',
       default: false,
     },
     placeholder: {
@@ -310,6 +319,7 @@ const props = defineProps({
   labelVisibility: { type: null as unknown as PropType<'visible' | 'sr-only' | null> },
   loading: { type: null as unknown as PropType<boolean | null> },
   multiple: { type: null as unknown as PropType<boolean | null> },
+  muted: { type: null as unknown as PropType<boolean | null> },
   name: { type: null as unknown as PropType<string | null> },
   openOnFocus: { type: null as unknown as PropType<boolean | null> },
   placeholder: { type: null as unknown as PropType<string | null> },
@@ -339,6 +349,7 @@ const acceptedProps: Record<string, unknown> = {
   labelVisibility: 'visible',
   loading: false,
   multiple: false,
+  muted: false,
   name: '',
   openOnFocus: false,
   placeholder: '',
@@ -366,6 +377,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   labelVisibility: 'visible',
   loading: false,
   multiple: false,
+  muted: false,
   name: '',
   openOnFocus: false,
   placeholder: '',
@@ -445,6 +457,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'multiple':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'muted':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'name':
       return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
     case 'openOnFocus':
@@ -572,6 +586,11 @@ const checkedProps = computed(() => {
       props['multiple'],
       props[BINDING_INPUTS_PROP],
     ) as boolean,
+    muted: propInputs.value<boolean | null>(
+      'muted',
+      props['muted'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
     name: propInputs.value<string | null>(
       'name',
       props['name'],
@@ -1085,6 +1104,7 @@ const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.muted && 'muted',
     validationStatus.value && 'validationStatus',
     `validationStatus=${encodeURIComponent(validationStatus.value)}`,
     checkedProps.value.invalid && 'invalid',
@@ -1711,6 +1731,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     'labelVisibility',
     'loading',
     'multiple',
+    'muted',
     'name',
     'openOnFocus',
     'placeholder',
@@ -1783,6 +1804,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     :data-ui-combobox-prop-label-visibility="reflectedProp('labelVisibility', 'label-visibility', checkedProps.labelVisibility, undefined, false)"
     :data-ui-combobox-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-combobox-prop-multiple="reflectedProp('multiple', 'multiple', checkedProps.multiple, undefined, false)"
+    :data-ui-combobox-prop-muted="reflectedProp('muted', 'muted', checkedProps.muted, undefined, false)"
     :data-ui-combobox-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
     :data-ui-combobox-prop-open-on-focus="reflectedProp('openOnFocus', 'open-on-focus', checkedProps.openOnFocus, undefined, false)"
     :data-ui-combobox-prop-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
@@ -1806,9 +1828,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     <div class="control" data-hn-ui-combobox>
       <div class="field" data-hn-ui-combobox ref="fieldElement">
         <div class="entry" data-hn-ui-combobox>
-          <slot name="start" />{{ ' ' }}<template v-if="checkedProps.multiple">{{
-              ' '
-            }}<KeyedBoundary><button
+          <span class="start" data-hn-ui-combobox><slot name="start" /></span>{{ ' ' }}<template
+            v-if="checkedProps.multiple"
+          >{{ ' ' }}<KeyedBoundary><button
                 v-for="(item, index) in uniqueKeys(internalItems, (item, index, loop) => item.id)"
                 :key="item.id"
                 class="item"
@@ -2190,6 +2212,21 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     flex: 1 1 auto;
     min-inline-size: 0;
   }
+  :global(.start:where([data-hn-ui-combobox])) {
+    display: flex !important;
+    align-items: center !important;
+    flex: none;
+    padding-inline-start: var(--ui-space-3) !important;
+  }
+  :global(.start:empty:where([data-hn-ui-combobox])) {
+    display: none !important;
+  }
+  :global(:scope[data-ui-combobox-state~="size=sm"] .start:where([data-hn-ui-combobox])) {
+    padding-inline-start: var(--ui-space-2) !important;
+  }
+  :global(:scope[data-ui-combobox-state~="size=lg"] .start:where([data-hn-ui-combobox])) {
+    padding-inline-start: var(--ui-space-4) !important;
+  }
   :global(.help:where([data-hn-ui-combobox])) {
     flex: none;
     display: inline-flex !important;
@@ -2229,6 +2266,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     block-size: var(--ui-icon-size-sm);
   }
 
+  :global(:scope[data-ui-combobox-state~="muted"]
+    input:not(:disabled):where([data-hn-ui-combobox])) {
+    color: var(--ui-text-secondary);
+  }
+
   :global(input:where([data-hn-ui-combobox])::selection) {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     color: inherit;
@@ -2322,7 +2364,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     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))
+      var(--ui-material-content, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
     box-shadow: var(
@@ -2522,6 +2564,23 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     flex: 1 1 auto;
     min-inline-size: 0;
   }
+  :global(.start:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: flex !important;
+    align-items: center !important;
+    flex: none;
+    padding-inline-start: var(--ui-space-3) !important;
+  }
+  :global(.start:empty:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: none !important;
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    .start:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    padding-inline-start: var(--ui-space-2) !important;
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    .start:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    padding-inline-start: var(--ui-space-4) !important;
+  }
   :global(.help:where(:scope, :scope *):where([data-hn-ui-combobox])) {
     flex: none;
     display: inline-flex !important;
@@ -2561,6 +2620,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     block-size: var(--ui-icon-size-sm);
   }
 
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="muted"]
+    input:not(:disabled):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    color: var(--ui-text-secondary);
+  }
+
   :global(input:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope
     *):where([data-hn-ui-combobox])::selection) {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
@@ -2658,7 +2722,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     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))
+      var(--ui-material-content, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
     box-shadow: var(

package/vue/UiIconButton.d.ts

@@ -39,7 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
     };
     tone: {
-        type: PropType<"auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
+        type: PropType<"accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
     };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;
@@ -82,7 +82,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
     };
     tone: {
-        type: PropType<"auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
+        type: PropType<"accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
     };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;

package/vue/UiIconButton.vue

@@ -125,16 +125,16 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'Colour for every variant. auto preserves the existing variant-specific default. When omitted, ghost and outline keep their neutral appearance and solid\n      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\n      aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.',
-      values: ['auto', 'accent', 'neutral', 'danger', 'success', 'warning', 'info'],
-      default: 'auto',
+        'Colour for every variant. The default neutral shares the quiet control family with fields and text buttons. Choose accent explicitly for a coloured action,\n      or primary for solid accent. danger, success, warning and info share Button\'s intent colors. Native aria-pressed="true" keeps an outline toggle visibly\n      pressed; the consumer owns that state.',
+      values: ['accent', 'neutral', 'danger', 'success', 'warning', 'info'],
+      default: 'neutral',
     },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'variant' },
       description:
-        '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\n      accent colour, for the one primary action in a group.',
+        '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\n      chosen tone.',
       values: ['ghost', 'outline', 'solid'],
       default: 'ghost',
     },
@@ -158,7 +158,7 @@ const props = defineProps({
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
   tone: {
     type: null as unknown as PropType<
-      'auto' | 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' | null
+      'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' | null
     >,
   },
   variant: { type: null as unknown as PropType<'ghost' | 'outline' | 'solid' | null> },
@@ -176,7 +176,7 @@ const acceptedProps: Record<string, unknown> = {
   revealed: false,
   round: false,
   size: 'md',
-  tone: 'auto',
+  tone: 'neutral',
   variant: 'ghost',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
@@ -190,7 +190,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   revealed: false,
   round: false,
   size: 'md',
-  tone: 'auto',
+  tone: 'neutral',
   variant: 'ghost',
 }, (name, value, source, values) => {
   switch (name) {
@@ -281,16 +281,11 @@ const checkedProps = computed(() => {
       props['size'],
       props[BINDING_INPUTS_PROP],
     ) as 'sm' | 'md' | 'lg',
-    tone: propInputs.value<
-      'auto' | 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' | null
-    >('tone', props['tone'], props[BINDING_INPUTS_PROP]) as
-      | 'auto'
-      | 'accent'
-      | 'neutral'
-      | 'danger'
-      | 'success'
-      | 'warning'
-      | 'info',
+    tone: propInputs.value<'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' | null>(
+      'tone',
+      props['tone'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info',
     variant: propInputs.value<'ghost' | 'outline' | 'solid' | null>(
       'variant',
       props['variant'],
@@ -557,7 +552,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   inherits: false;
 }
 
-/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+/* Neutral actions share the same quiet surface and border roles as fields. */
 
 /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
    proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
@@ -691,6 +686,10 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   :global(:scope[data-tone="neutral"]:where([data-hn-ui-icon-button])) {
     --_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);
@@ -891,6 +890,12 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
       var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
     );
   }
+  :global(:scope[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
+    background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+  }
+  :global(:scope[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
+    background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+  }
 
   :global(:scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     background-color: var(

package/vue/UiMenuItem.vue

@@ -517,7 +517,12 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
   }
 
   :global(:scope:is(:hover, :focus-visible):not([aria-disabled="true"]):where([data-hn-ui-menu-item])) {
-    background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
+    background: var(--ui-menu-item-hover-surface, var(--ui-accent-subtle));
+  }
+
+  :global(:scope[aria-checked="true"]:not([aria-disabled="true"]):where([data-hn-ui-menu-item])) {
+    background: var(--ui-selection-surface);
+    color: var(--ui-selection-text);
   }
 
   :global(:scope:focus-visible:where([data-hn-ui-menu-item])) {

package/vue/UiSelect.d.ts

@@ -11,6 +11,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     invalid: {
         type: PropType<boolean | null>;
     };
+    muted: {
+        type: PropType<boolean | null>;
+    };
     required: {
         type: PropType<boolean | null>;
     };
@@ -35,6 +38,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     invalid: {
         type: PropType<boolean | null>;
     };
+    muted: {
+        type: PropType<boolean | null>;
+    };
     required: {
         type: PropType<boolean | null>;
     };

package/vue/UiSelect.vue

@@ -41,6 +41,14 @@ const propValidityContract = {
       description: 'Exposes invalid state to assistive technology and styling.',
       default: false,
     },
+    muted: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'muted' },
+      description:
+        'Shows the selected value with supporting-text emphasis, for an inherited or default choice. The select remains interactive and its options retain normal\n      emphasis.',
+      default: false,
+    },
     required: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -69,6 +77,7 @@ const propValidityContract = {
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null> },
   invalid: { type: null as unknown as PropType<boolean | null> },
+  muted: { type: null as unknown as PropType<boolean | null> },
   required: { type: null as unknown as PropType<boolean | null> },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
   value: { type: null as unknown as PropType<string | null> },
@@ -78,6 +87,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   disabled: false,
   invalid: false,
+  muted: false,
   required: false,
   size: 'md',
   value: null,
@@ -85,6 +95,7 @@ const acceptedProps: Record<string, unknown> = {
 const inputTracking = vuePropInputs(acceptedProps, {
   disabled: false,
   invalid: false,
+  muted: false,
   required: false,
   size: 'md',
 }, (name, value, source, values) => {
@@ -93,6 +104,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'invalid':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'muted':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'required':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'size':
@@ -119,6 +132,11 @@ const checkedProps = computed(() => {
       props['invalid'],
       props[BINDING_INPUTS_PROP],
     ) as boolean,
+    muted: propInputs.value<boolean | null>(
+      'muted',
+      props['muted'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
     required: propInputs.value<boolean | null>(
       'required',
       props['required'],
@@ -164,6 +182,7 @@ checkHydratedRoot('select', 'ui-select')
 /** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.muted && 'muted',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
   ].filter(Boolean).join(' ')
@@ -189,7 +208,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['disabled', 'invalid', 'required', 'size', 'value'],
+  propNames: ['disabled', 'invalid', 'muted', 'required', 'size', 'value'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -207,6 +226,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-ui-select-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-ui-select-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-select-prop-muted="reflectedProp('muted', 'muted', checkedProps.muted, undefined, false)"
     :data-ui-select-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
     :data-ui-select-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-select-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
@@ -319,6 +339,15 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     background-size: 1.125rem 1.125rem, 100% 100%;
   }
 
+  :global(:scope[data-ui-select-state~="muted"]:where([data-hn-ui-select])) {
+    color: var(--ui-text-secondary);
+  }
+  :global(:scope[data-ui-select-state~="muted"] :where(:not([data-hn-ui-select])):is(option)),
+  :global(:scope[data-ui-select-state~="muted"] :where(:not([data-hn-ui-select])):is(optgroup)) {
+    color: var(--ui-text-primary);
+    background-color: var(--ui-control-surface);
+  }
+
   :global(:scope:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])):where([data-hn-ui-select])) {
     border-color: var(
       --ui-select-border-hover,

package/vue/chunks/UiButton.js

@@ -335,7 +335,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					"warning",
 					"info"
 				],
-				default: "accent"
+				default: "neutral"
 			},
 			type: {
 				type: {
@@ -387,7 +387,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			square: false,
 			stretch: false,
 			target: null,
-			tone: "accent",
+			tone: "neutral",
 			type: "button",
 			variant: "outline"
 		}, {
@@ -401,7 +401,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			size: "md",
 			square: false,
 			stretch: false,
-			tone: "accent",
+			tone: "neutral",
 			type: "button",
 			variant: "outline"
 		}, (name, value, source, values) => {
@@ -894,6 +894,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-f04ec716"]]);
+}), [["__scopeId", "data-v-1eb598b9"]]);
 //#endregion
 export { UiButton_default as t };