@threadlabs/looma 0.37.5 → 0.38.0

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;

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/vanilla/UiSkeleton.d.ts

@@ -0,0 +1,26 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiSkeletonEventMap {
+}
+export interface UiSkeletonElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiSkeletonEventMap>(type: K, listener: (this: UiSkeletonElement, event: UiSkeletonEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSkeletonElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSkeletonEventMap>(type: K, listener: (this: UiSkeletonElement, event: UiSkeletonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSkeletonElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSkeletonProps {
+  animated?: boolean | null;
+  height?: string | null;
+  shape?: "text" | "circle" | "rectangle" | null;
+  width?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSkeleton(props?: UiSkeletonProps): UiSkeletonElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-skeleton": { element: UiSkeletonElement; props: Omit<UiSkeletonProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiSkeleton.js

@@ -0,0 +1,42 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, toText, writeAttribute, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkString, defineComponent } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-skeleton.css";
+
+const S = { n: [], t: [], f: import.meta.url, g: "ui-skeleton", b: generatedInputs };
+const D = { g: "ui-skeleton", props: { "animated": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "height": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["text","circle","rectangle"],"default":"text", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "width": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+
+export function createUiSkeleton(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("aria-hidden")) element.setAttribute("aria-hidden", "true");
+  element.setAttribute("data-component", "ui-skeleton");
+  const v = [null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 8) {
+      const x0 = v[3];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.n.style.setProperty("--ui-skeleton-width", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.n.style.setProperty("--ui-skeleton-height", r.v1 = s1);
+    }
+    if (c & 5) {
+      const x2 = hostState(["shape","animated"], [v[2], v[0]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-skeleton-state", (r.v2 = s2) === "" ? null : s2);
+    }
+  };
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  return element;
+}
+defineComponent("ui-skeleton", createUiSkeleton, ["animated","height","shape","width"]);

package/vanilla/index.js

@@ -71,6 +71,7 @@ export * from "./UiSection.js";
 export * from "./UiSelect.js";
 export * from "./UiSeparator.js";
 export * from "./UiSidebar.js";
+export * from "./UiSkeleton.js";
 export * from "./UiSlider.js";
 export * from "./UiSpinner.js";
 export * from "./UiStack.js";

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>;
     };