@threadlabs/looma 0.37.6 → 0.38.0

package/styles/ui-button.css

@@ -268,7 +268,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. */
     :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
@@ -277,6 +276,12 @@
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
+    :scope:where([data-component~="ui-button"])[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. */
     :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
       scale: var(--ui-press-scale, 1);
@@ -324,6 +329,18 @@
       background-color: var(--ui-button-surface, var(--ui-neutral-surface));
       color: var(--ui-button-text, var(--ui-text));
     }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="outline"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, transparent);
+    }
+    :scope:where([data-component~="ui-button"])[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));
+    }
+    :scope:where([data-component~="ui-button"])[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));
+    }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
     }
@@ -411,10 +428,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. */
     :scope:where([data-component~="ui-button"])[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%);
     }
@@ -548,8 +563,6 @@
     /* 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
@@ -559,9 +572,6 @@
 
     /* 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

package/styles/ui-combobox.css

@@ -136,6 +136,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;
+    }
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .start {
+      padding-inline-start: var(--ui-space-2) !important;
+    }
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="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;
@@ -174,6 +189,10 @@
       block-size: var(--ui-icon-size-sm);
     }
 
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="muted"] input:not(:disabled) {
+      color: var(--ui-text-secondary);
+    }
+
     input:where(:not([data-component], [data-slotted]))::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -258,7 +277,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))));
     }
@@ -537,6 +556,21 @@
       flex: 1 1 auto;
       min-inline-size: 0;
     }
+    .start:where(:scope, :scope *) {
+      display: flex !important;
+      align-items: center !important;
+      flex: none;
+      padding-inline-start: var(--ui-space-3) !important;
+    }
+    .start:empty:where(:scope, :scope *) {
+      display: none !important;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .start:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding-inline-start: var(--ui-space-2) !important;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .start:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding-inline-start: var(--ui-space-4) !important;
+    }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help:where(:scope, :scope *) {
       flex: none;
@@ -574,6 +608,10 @@
       block-size: var(--ui-icon-size-sm);
     }
 
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="muted"] input:not(:disabled):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      color: var(--ui-text-secondary);
+    }
+
     input:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope *)::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -657,7 +695,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/styles/ui-icon-button.css

@@ -172,10 +172,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. */
     :scope:where([data-component~="ui-icon-button"])[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);
@@ -363,6 +367,12 @@
     :scope:where([data-component~="ui-icon-button"])[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))));
     }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"][data-appearance="outline"]:active:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
+    }
 
     :scope:where([data-component~="ui-icon-button"])[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)));
@@ -487,7 +497,7 @@
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* 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. */

package/styles/ui-menu-item.css

@@ -131,7 +131,12 @@
     }
 
     :scope:where([data-component~="ui-menu-item"]):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));
+    }
+
+    :scope:where([data-component~="ui-menu-item"])[aria-checked="true"]:not([aria-disabled="true"]) {
+      background: var(--ui-selection-surface);
+      color: var(--ui-selection-text);
     }
 
     :scope:where([data-component~="ui-menu-item"]):focus-visible {

package/styles/ui-select.css

@@ -88,6 +88,10 @@
       background-size: 1.125rem 1.125rem, 100% 100%;
     }
 
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] {
+      color: var(--ui-text-secondary);
+    }
+
     :scope:where([data-component~="ui-select"]):hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
       border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
@@ -160,6 +164,11 @@
 
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] :where([data-slotted], [data-slotted] *):is(option),
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="muted"] :where([data-slotted], [data-slotted] *):is(optgroup) {
+      color: var(--ui-text-primary);
+      background-color: var(--ui-control-surface);
+    }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 

package/theme-system.css

@@ -14,6 +14,7 @@
 @layer theme {
   :root {
     --ui-spacing: 1;
+    --ui-rhythm: 1;
     --ui-control-roominess: 2.5;
     --ui-scale-ratio: 1.2;
     --ui-space-curve: 1;
@@ -36,7 +37,11 @@
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
     --ui-control-size: calc(1rem * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
-    --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)));
+    --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)) * clamp(0.75, var(--ui-rhythm), 1.5));
+    --ui-line-height-tight: clamp(1.1, calc(1.2 + (var(--ui-rhythm) - 1) * 0.2), 1.3);
+    --ui-line-height: clamp(1.35, calc(1.4 + (var(--ui-rhythm) - 1) * 0.4), 1.6);
+    --ui-line-height-md: var(--ui-line-height);
+    --ui-line-height-relaxed: calc(var(--ui-line-height) * 1.15);
     --_ui-theme-curve: max(0, var(--ui-space-curve));
     --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
     --ui-control-size-md: var(--ui-control-size);
@@ -89,7 +94,7 @@
     --ui-elevation-dialog: var(--ui-shadow-lg);
     --ui-control-inset: inset calc(var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(var(--_ui-light-block) * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.18)), var(--ui-material-glow);
     --ui-pressed: inset calc(2 * var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(2 * var(--_ui-light-block) * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
-    --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
+    --ui-overlay-surface: var(--ui-surface-raised);
     /* Decorative outer material is allowed to transmit the scene. Content keeps
        its own opaque plane; changing the scene cannot undermine text contrast. */
     --ui-material-content: var(--ui-surface-raised);

package/vanilla/UiButton.js

@@ -27,7 +27,7 @@ let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P
 const S = { n: ["appearance","colorTone"], t: ["?","?"], f: import.meta.url, g: "ui-button", k: 0, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs };
 const A = [["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-square","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]]];
 const Q = [[],[],[],[]];
-const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"accent", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "square": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiButton(options = {}, html) {

package/vanilla/UiCombobox.d.ts

@@ -36,6 +36,7 @@ export interface UiComboboxProps {
   labelVisibility?: "visible" | "sr-only" | null;
   loading?: boolean | null;
   multiple?: boolean | null;
+  muted?: boolean | null;
   name?: string | null;
   openOnFocus?: boolean | null;
   placeholder?: string | null;

package/vanilla/UiCombobox.js

@@ -3,7 +3,7 @@ import { attachGeneratedController, buildTemplate, checkReference, clearRegion,
 import * as controller from "../components/ui-combobox/ui-combobox.js";
 import "../styles/ui-combobox.css";
 
-const T0 = ["",[],"\n    ",["label",[],0,1],"\n    ",["div",["class","control"],"\n      ",["div",["class","field"],"\n        ",["div",["class","entry"],"\n          ",4,"\n          ",1,"\n          ",["input",["role","combobox","aria-autocomplete","list","autocomplete","off"]],"\n        "],"\n        ",1,"\n        ",1,"\n        ",1,"\n        ",1,"\n      "],"\n      ",1,"\n    "],"\n    ",1,"\n    ",["div",["class","popup"],"\n      ",["div",["role","listbox"],"\n        ",2,"\n        ",1,"\n        ",1,"\n        ",1,"\n      "],"\n      ",4,"\n    "],"\n    ",["div",["class","message"],"\n      ",2,"\n    "],"\n    ",["div",["class","sr-only","role","status","aria-live","polite","aria-atomic","true"],0],"\n    ",["div",["class","authored-options","hidden","","aria-hidden","true"],4],"\n  "];
+const T0 = ["",[],"\n    ",["label",[],0,1],"\n    ",["div",["class","control"],"\n      ",["div",["class","field"],"\n        ",["div",["class","entry"],"\n          ",["span",["class","start"],4],"\n          ",1,"\n          ",["input",["role","combobox","aria-autocomplete","list","autocomplete","off"]],"\n        "],"\n        ",1,"\n        ",1,"\n        ",1,"\n        ",1,"\n      "],"\n      ",1,"\n    "],"\n    ",1,"\n    ",["div",["class","popup"],"\n      ",["div",["role","listbox"],"\n        ",2,"\n        ",1,"\n        ",1,"\n        ",1,"\n      "],"\n      ",4,"\n    "],"\n    ",["div",["class","message"],"\n      ",2,"\n    "],"\n    ",["div",["class","sr-only","role","status","aria-live","polite","aria-atomic","true"],0],"\n    ",["div",["class","authored-options","hidden","","aria-hidden","true"],4],"\n  "];
 const T1 = ["",[],"\n        *"];
 const T2 = ["",[]];
 const T3 = ["",[],"\n            ",2,"\n          "];
@@ -36,7 +36,7 @@ const K1 = (v0) => (plainObject(v0) && "id" in v0 && typeof v0["id"] == "string"
 let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17, P18, P19, P20, P21, P22, P23, P24, P25, P26, P27;
 const E = new Map();
 const S = { n: ["internalItems","raw","display","selected","expanded","rows","active","helpOpen","lookupError","validation","uid","submitted","groups","creatable","createIndex","message","statusText","validationStatus"], t: [["l",["o",["id","s","value","s","label","s","group","s","disabled","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]]]]],"s","s","s","b",["l",["o",["id","s","value","s","label","s","group","s","disabled","b","selected","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]]]]],"i","b","s",["o",["status",["p",formatOf(keywordFormat)],"touched","b","dirty","b","issues",["l",["o",["message","s"]]]],1],"s","s",["l",["o",["name","s","role",["p",formatOf(keywordFormat)],"label","s","rows",["l",["o",["id","s","value","s","label","s","group","s","disabled","b","selected","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]],"index","i","labelledBy","s","detail","s","option",["o",["id","s","value","s","label","s","group","s","disabled","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]],"selected","b"]]]]]]]],"b","i","s","s","s"], f: import.meta.url, g: "ui-combobox", d: { "query-change": [detailCheck(checkObject([["query", checkString, false], ["display", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "value-change": [detailCheck(checkObject([["value", checkString, true], ["query", checkString, false], ["option", checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false), true], ["kind", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["selection","clear","free-entry","create"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "items-change": [detailCheck(checkList(checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false))), true, true, false], "free-entry": [detailCheck(checkObject([["value", checkString, true], ["query", checkString, false], ["option", checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false), true], ["kind", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["selection","clear","free-entry","create"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "create-entry": [detailCheck(checkObject([["value", checkString, true], ["query", checkString, false], ["option", checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false), true], ["kind", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["selection","clear","free-entry","create"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "validation-change": [detailCheck(checkObject([["status", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["pristine","pending","valid","warning","error"]}), false], ["touched", checkBoolean, false], ["dirty", checkBoolean, false], ["issues", checkList(checkObject([["message", checkString, false], ["path", checkList(checkUnknown), true], ["severity", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["error","warning"]}), true]], false)), false], ["output", checkUnknown, true]], false)), true, true, false], "options-change": [detailCheck(checkList(checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false))), true, true, false], "add-item": [detailCheck(checkObject([["item", checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false), false], ["index", checkInteger, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "remove-item": [detailCheck(checkObject([["item", checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false), false], ["index", checkInteger, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "create-item": [detailCheck(checkObject([["query", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "selected-values-change": [detailCheck(checkObject([["selectedValues", checkList(checkString), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: [[], "", "", null, false, [], null, false, "", { "status": "pristine", "touched": false, "dirty": false, "issues": [] }, "", "", [], false, 0, "", "", "pristine"] };
-const D = { g: "ui-combobox", props: { "allowCreate": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "allowFreeText": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "autoHighlight": { "required":false,"values":["none","single"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "clearQueryOnBlur": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "clearable": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disclosure": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "filter": { "required":false,"values":["label","none"],"default":"label", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "help": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "items": { "required":false, c: checkList(checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false)), j: 1, m: ["l",["o",["id","s","value","s","label","s","group","s","disabled","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]]]]] }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "labelVisibility": { "required":false,"values":["visible","sr-only"],"default":"visible", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "multiple": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "openOnFocus": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placeholder": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "query": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "readonly": { "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" }, "selectOnTab": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "selectedValues": { "required":false, c: checkList(checkString), j: 1, m: ["l","s"] }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tokenSeparators": { "required":false, c: checkList(checkString), j: 1, m: ["l","s"] }, "value": { "required":false, c: checkString, t: "string", j: 0, m: "s" } } };
+const D = { g: "ui-combobox", props: { "allowCreate": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "allowFreeText": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "autoHighlight": { "required":false,"values":["none","single"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "clearQueryOnBlur": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "clearable": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disclosure": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "filter": { "required":false,"values":["label","none"],"default":"label", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "help": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "items": { "required":false, c: checkList(checkObject([["id", checkString, false], ["value", checkString, false], ["label", checkString, false], ["group", checkString, true], ["disabled", checkBoolean, true], ["description", checkString, true], ["tag", checkObject([["label", checkString, false], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","accent","info","success","warning","danger"]}), true], ["color", checkString, true]], false), true]], false)), j: 1, m: ["l",["o",["id","s","value","s","label","s","group","s","disabled","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]]]]] }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "labelVisibility": { "required":false,"values":["visible","sr-only"],"default":"visible", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "multiple": { "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" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "openOnFocus": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placeholder": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "query": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "readonly": { "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" }, "selectOnTab": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "selectedValues": { "required":false, c: checkList(checkString), j: 1, m: ["l","s"] }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tokenSeparators": { "required":false, c: checkList(checkString), j: 1, m: ["l","s"] }, "value": { "required":false, c: checkString, t: "string", j: 0, m: "s" } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiCombobox(options = {}, html) {
@@ -48,7 +48,7 @@ export function createUiCombobox(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-combobox");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [[], "", "", null, false, [], null, false, "", { "status": "pristine", "touched": false, "dirty": false, "issues": [] }, "", "", [], false, 0, "", "", "pristine", null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
+  const v = [[], "", "", null, false, [], null, false, "", { "status": "pristine", "touched": false, "dirty": false, "issues": [] }, "", "", [], false, 0, "", "", "pristine", null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   v[6] = negate(1, undefined);
   const m1 = (d) => {
@@ -95,7 +95,7 @@ export function createUiCombobox(options = {}, html) {
       if (s0 !== r.v0) writeAttribute(r.n, "data-index", r.v0 = s0);
     }
     if (c & 1619001344) {
-      const x1 = ((truthy(v[23]) || truthy(v[37])) || truthy(trackContainer(r, readMember(o, "disabled"))));
+      const x1 = ((truthy(v[23]) || truthy(v[38])) || truthy(trackContainer(r, readMember(o, "disabled"))));
       const s1 = toAttribute(x1, "disabled");
       if (s1 !== r.v1) writeAttribute(r.n, "disabled", r.v1 = s1);
     }
@@ -144,7 +144,7 @@ export function createUiCombobox(options = {}, html) {
   };
   const p6 = (r, c, d) => {
     if (c & 536870912) {
-      const x0 = v[33];
+      const x0 = v[34];
       const s0 = toAttribute(x0, "name");
       if (s0 !== r.v0) writeAttribute(r.n, "name", r.v0 = s0);
     }
@@ -180,7 +180,7 @@ export function createUiCombobox(options = {}, html) {
     const o = r.i;
     if (c & 1073741824) r.w = 0;
     if (c & 536870912) {
-      const x0 = v[33];
+      const x0 = v[34];
       const s0 = toAttribute(x0, "name");
       if (s0 !== r.v0) writeAttribute(r.n, "name", r.v0 = s0);
     }
@@ -203,7 +203,7 @@ export function createUiCombobox(options = {}, html) {
   };
   const p9 = (r, c, d) => {
     if (c & 545259530) {
-      const x0 = ((truthy(v[23]) || truthy(v[37])) || (!truthy(v[1]) && (truthy(v[32]) || (v[3] === null))));
+      const x0 = ((truthy(v[23]) || truthy(v[38])) || (!truthy(v[1]) && (truthy(v[32]) || (v[3] === null))));
       const s0 = toAttribute(x0, "disabled");
       if (s0 !== r.v0) writeAttribute(r.n, "disabled", r.v0 = s0);
     }
@@ -223,7 +223,7 @@ export function createUiCombobox(options = {}, html) {
       }
     }
     if (c & 545259520) {
-      const x1 = (truthy(v[23]) || truthy(v[37]));
+      const x1 = (truthy(v[23]) || truthy(v[38]));
       const s1 = toAttribute(x1, "disabled");
       if (s1 !== r.v1) writeAttribute(r.n, "disabled", r.v1 = s1);
     }
@@ -661,7 +661,7 @@ export function createUiCombobox(options = {}, html) {
       }
     }
     if (c & 536870912) {
-      const x10 = v[35];
+      const x10 = v[36];
       const s9 = toAttribute(x10, "placeholder");
       if (s9 !== r.v9) writeAttribute(r.a6, "placeholder", r.v9 = s9);
     }
@@ -671,7 +671,7 @@ export function createUiCombobox(options = {}, html) {
       if (s10 !== r.v10) writeAttribute(r.a6, "disabled", r.v10 = s10);
     }
     if (c & 536870912) {
-      const x12 = v[37];
+      const x12 = v[38];
       const s11 = toAttribute(x12, "readonly");
       if (s11 !== r.v11) writeAttribute(r.a6, "readonly", r.v11 = s11);
       const x13 = textCall("concat", [v[29], " suggestions"]);
@@ -684,7 +684,7 @@ export function createUiCombobox(options = {}, html) {
       if (s16 !== r.v16) writeAttribute(r.a14, "aria-busy", r.v16 = s16);
     }
     if (c & 1610612737) {
-      const x15 = (checkReference(S, readDeclared(v[0], ["0"]), ["o",["id","s","value","s","label","s","group","s","disabled","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]]]], "expression:$required and not ($multiple and $internalItems.0):internalItems.0", "Reference `internalItems.0` must satisfy object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: keyword with values neutral, accent, info, success, warning, danger, color?: string }) }).") ? (truthy(v[38]) && !(truthy(v[32]) && truthy(readIndex(v[0], 0)))) : NONCONFORMING);
+      const x15 = (checkReference(S, readDeclared(v[0], ["0"]), ["o",["id","s","value","s","label","s","group","s","disabled","b","description","s","tag",["o",["label","s","tone",["p",formatOf(keywordFormat)],"color","s"]]]], "expression:$required and not ($multiple and $internalItems.0):internalItems.0", "Reference `internalItems.0` must satisfy object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: keyword with values neutral, accent, info, success, warning, danger, color?: string }) }).") ? (truthy(v[39]) && !(truthy(v[32]) && truthy(readIndex(v[0], 0)))) : NONCONFORMING);
       if (x15 !== NONCONFORMING) {
         const s12 = toAttribute(x15, "required");
         if (s12 !== r.v12) writeAttribute(r.a6, "required", r.v12 = s12);
@@ -701,11 +701,11 @@ export function createUiCombobox(options = {}, html) {
       if (s19 !== r.v19) r.a22.data = r.v19 = s19;
     }
     if (c & 671219712) {
-      const x18 = hostState(["size","validationStatus","invalid","multiple"], [v[41], v[17], v[27], v[32]]);
+      const x18 = hostState(["size","muted","validationStatus","invalid","multiple"], [v[42], v[33], v[17], v[27], v[32]]);
       const s20 = x18;
       if (s20 !== r.v20) writeAttribute(r.n, "data-ui-combobox-state", (r.v20 = s20) === "" ? null : s20);
     }
-    if (c & 536870912 && !(truthy(v[38])) !== !r.b0) {
+    if (c & 536870912 && !(truthy(v[39])) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a2, r.e0); }
       else { r.b0 = m1(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
@@ -713,11 +713,11 @@ export function createUiCombobox(options = {}, html) {
       if (r.b2) { dispose(r.b2); r.b2 = undefined; clearRegion(r.a5, r.e2); }
       else { r.b2 = m3(d); r.e2.before(r.b2.n); }
     } else if (r.b2 !== undefined) p3(r.b2, c, d);
-    if (c & 536870912 && !((truthy(v[33]) && !truthy(v[32]))) !== !r.b3) {
+    if (c & 536870912 && !((truthy(v[34]) && !truthy(v[32]))) !== !r.b3) {
       if (r.b3) { r.b3 = undefined; clearRegion(r.a7, r.e3); }
       else { r.b3 = m6(d); r.e3.before(r.b3.n); }
     } else if (r.b3 !== undefined) p6(r.b3, c, d);
-    if (c & 536870912 && !((truthy(v[33]) && truthy(v[32]))) !== !r.b4) {
+    if (c & 536870912 && !((truthy(v[34]) && truthy(v[32]))) !== !r.b4) {
       if (r.b4) { r.b4 = undefined; clearRegion(r.a8, r.e4); }
       else { r.b4 = m7(d); r.e4.before(r.b4.n); }
     } else if (r.b4 !== undefined) p7(r.b4, c, d);
@@ -772,38 +772,39 @@ export function createUiCombobox(options = {}, html) {
   const t4 = t3.firstChild.nextSibling;
   const t5 = t4.firstChild.nextSibling;
   const t6 = t5.firstChild.nextSibling;
-  const t7 = t6.nextSibling.nextSibling.nextSibling;
-  const t8 = t7.nextSibling.nextSibling.nextSibling;
-  const t9 = t5.nextSibling.nextSibling;
-  const t10 = t9.nextSibling.nextSibling.nextSibling;
+  const t7 = t6.firstChild;
+  const t8 = t6.nextSibling.nextSibling;
+  const t9 = t8.nextSibling.nextSibling.nextSibling;
+  const t10 = t5.nextSibling.nextSibling;
   const t11 = t10.nextSibling.nextSibling.nextSibling;
   const t12 = t11.nextSibling.nextSibling.nextSibling;
-  const t13 = t4.nextSibling.nextSibling;
-  const t14 = t3.nextSibling.nextSibling;
-  const t15 = t14.nextSibling.nextSibling.nextSibling;
-  const t16 = t15.firstChild.nextSibling;
+  const t13 = t12.nextSibling.nextSibling.nextSibling;
+  const t14 = t4.nextSibling.nextSibling;
+  const t15 = t3.nextSibling.nextSibling;
+  const t16 = t15.nextSibling.nextSibling.nextSibling;
   const t17 = t16.firstChild.nextSibling;
-  const t18 = t17.nextSibling.nextSibling.nextSibling;
+  const t18 = t17.firstChild.nextSibling;
   const t19 = t18.nextSibling.nextSibling.nextSibling;
   const t20 = t19.nextSibling.nextSibling.nextSibling;
-  const t21 = t16.nextSibling.nextSibling;
-  const t22 = t15.nextSibling.nextSibling;
-  const t23 = t22.firstChild.nextSibling;
-  const t24 = t22.nextSibling.nextSibling;
-  const t25 = t24.firstChild;
-  const t26 = t24.nextSibling.nextSibling;
-  const t27 = t26.firstChild;
-  const R = { n: element, a0: t0, a1: t1, a6: t8, a13: t15, a14: t16, a20: t22, a22: t25, v0: null, v1: false, v2: "", v3: null, v4: null, v5: null, v6: null, v7: null, v8: undefined, v9: null, v10: null, v11: null, v12: null, v13: null, v14: null, v15: null, v16: null, v17: null, v18: null, v19: "", v20: undefined, a2: t2, e0: t2.nextSibling, b0: undefined, a4: t6, e1: t6.nextSibling, b1: undefined, f1: undefined, a5: t7, e2: t7.nextSibling, b2: undefined, a7: t9, e3: t9.nextSibling, b3: undefined, a8: t10, e4: t10.nextSibling, b4: undefined, a9: t11, e5: t11.nextSibling, b5: undefined, a10: t12, e6: t12.nextSibling, b6: undefined, a11: t13, e7: t13.nextSibling, b7: undefined, a12: t14, e8: t14.nextSibling, b8: undefined, L9: new KeyedList(t17, t17.nextSibling, m13, p13, (o) => readMember(o, "name"), "group"), a16: t18, e10: t18.nextSibling, b10: undefined, a17: t19, e11: t19.nextSibling, b11: undefined, a18: t20, e12: t20.nextSibling, b12: undefined, a19: t21, e13: t21.nextSibling, b13: undefined, f13: undefined, L14: new IndexedList(t23, t23.nextSibling, m26, p26, undefined, "issue"), a24: t27, e15: t27.nextSibling, b15: undefined, f15: undefined };
+  const t21 = t20.nextSibling.nextSibling.nextSibling;
+  const t22 = t17.nextSibling.nextSibling;
+  const t23 = t16.nextSibling.nextSibling;
+  const t24 = t23.firstChild.nextSibling;
+  const t25 = t23.nextSibling.nextSibling;
+  const t26 = t25.firstChild;
+  const t27 = t25.nextSibling.nextSibling;
+  const t28 = t27.firstChild;
+  const R = { n: element, a0: t0, a1: t1, a6: t9, a13: t16, a14: t17, a20: t23, a22: t26, v0: null, v1: false, v2: "", v3: null, v4: null, v5: null, v6: null, v7: null, v8: undefined, v9: null, v10: null, v11: null, v12: null, v13: null, v14: null, v15: null, v16: null, v17: null, v18: null, v19: "", v20: undefined, a2: t2, e0: t2.nextSibling, b0: undefined, a4: t7, e1: t7.nextSibling, b1: undefined, f1: undefined, a5: t8, e2: t8.nextSibling, b2: undefined, a7: t10, e3: t10.nextSibling, b3: undefined, a8: t11, e4: t11.nextSibling, b4: undefined, a9: t12, e5: t12.nextSibling, b5: undefined, a10: t13, e6: t13.nextSibling, b6: undefined, a11: t14, e7: t14.nextSibling, b7: undefined, a12: t15, e8: t15.nextSibling, b8: undefined, L9: new KeyedList(t18, t18.nextSibling, m13, p13, (o) => readMember(o, "name"), "group"), a16: t19, e10: t19.nextSibling, b10: undefined, a17: t20, e11: t20.nextSibling, b11: undefined, a18: t21, e12: t21.nextSibling, b12: undefined, a19: t22, e13: t22.nextSibling, b13: undefined, f13: undefined, L14: new IndexedList(t24, t24.nextSibling, m26, p26, undefined, "issue"), a24: t28, e15: t28.nextSibling, b15: undefined, f15: undefined };
   const I = { B };
   const J = project(I, children, slots);
   I.R = new Set();
   attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, undefined, undefined, I);
   manageProps(I);
   I.r["field"] = t4;
-  I.r["input"] = t8;
-  I.r["popup"] = t15;
-  I.r["listbox"] = t16;
-  I.r["options"] = t26;
+  I.r["input"] = t9;
+  I.r["popup"] = t16;
+  I.r["listbox"] = t17;
+  I.r["options"] = t27;
   return element;
 }
-defineComponent("ui-combobox", createUiCombobox, ["allowCreate","allowFreeText","autoHighlight","clearQueryOnBlur","clearable","disabled","disclosure","filter","help","invalid","items","label","labelVisibility","loading","multiple","name","openOnFocus","placeholder","query","readonly","required","selectOnTab","selectedValues","size","tokenSeparators","value"]);
+defineComponent("ui-combobox", createUiCombobox, ["allowCreate","allowFreeText","autoHighlight","clearQueryOnBlur","clearable","disabled","disclosure","filter","help","invalid","items","label","labelVisibility","loading","multiple","muted","name","openOnFocus","placeholder","query","readonly","required","selectOnTab","selectedValues","size","tokenSeparators","value"]);

package/vanilla/UiIconButton.d.ts

@@ -21,7 +21,7 @@ export interface UiIconButtonProps {
   revealed?: boolean | null;
   round?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
-  tone?: "auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
+  tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
   variant?: "ghost" | "outline" | "solid" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiIconButton.js

@@ -8,7 +8,7 @@ const T1 = ["ui-spinner",["size","sm"]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: ["appearance","colorTone"], t: ["?","?"], f: import.meta.url, g: "ui-icon-button", k: 0, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs };
-const D = { g: "ui-icon-button", props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "revealed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "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)] }, "tone": { "required":false,"values":["auto","accent","neutral","danger","success","warning","info"],"default":"auto", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-icon-button", props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "revealed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "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)] }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiIconButton(options = {}, html) {

package/vanilla/UiSelect.d.ts

@@ -12,6 +12,7 @@ export interface UiSelectElement extends HTMLSelectElement {
 export interface UiSelectProps {
   disabled?: boolean | null;
   invalid?: boolean | null;
+  muted?: boolean | null;
   required?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
   value?: string | null;