@mattilsynet/design 3.3.7 → 3.3.9

package/mtds/ai/avatar.stories.tsx

@@ -28,6 +28,9 @@ export const Default: Story = {
 			<div className={styles.avatar}>
 				<UserIcon aria-label="Navn Navnesen" />
 			</div>
+			<button type="button" className={styles.avatar}>
+				<UserIcon aria-label="Navn Navnesen" />
+			</button>
 		</>
 	),
 };

package/mtds/ai/field.stories.tsx

@@ -550,7 +550,7 @@ export const WithSuggestionAPI: Story = {
 
 		const getCountries = async (value: string) => {
 			if (!value) return setOptions("Name a country");
-			const api = `https://dummyjson.com/recipes/search?q=${value}`;
+			const api = `https://dummyjson.com/recipes/search?q=${value}`; // TODO FIX
 			const data = await (await fetch(api)).json();
 
 			setOptions(

package/mtds/ai/typography.stories.tsx

@@ -182,11 +182,9 @@ const proseDecorator: Story["decorators"] = (Story) => {
 				  body:has(input[role="switch"]:checked) { --checked: "" }
 					body:has(input[role="switch"]:checked) .${CSS_PROSE} > :hover { --background: #88bbff4d }
 					body:not(:has(.sbdocs-content)) {
-						.${CSS_PROSE} { overflow: clip }
 						.${CSS_PROSE} > * {
 							position: relative;
-							background: var(--background, transparent);
-							box-shadow: 100px 0 var(--background, transparent), -100px 0 var(--background, transparent);
+							background: linear-gradient(to right, var(--background, transparent), transparent);
 						}
 						.${CSS_PROSE} > [data-before]::before,
 						.${CSS_PROSE} > [data-after]::after {
@@ -683,6 +681,30 @@ export const Prose: Story = {
 				forpakningsenheter mindre enn 25 L, dersom de går til en «approved
 				arrangement class 4.1» for foredling i Australia.
 			</p>
+			<ul>
+				<li>
+					Matliste
+					<ul>
+						<li>
+							Pølse
+							<ul>
+								<li>Grill</li>
+								<li>Wiener</li>
+							</ul>
+						</li>
+						<li>
+							Brød
+							<ul>
+								<li>Rug</li>
+								<li>Knekk</li>
+								<li>Loff</li>
+								<li>Gull</li>
+								<li>Hue</li>
+							</ul>
+						</li>
+					</ul>
+				</li>
+			</ul>
 		</div>
 	),
 };

package/mtds/atlas/atlas-element.js

@@ -19,7 +19,7 @@ class r extends g {
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }).append(m("figure")), C(this, `@layer leaflet{${h}}
-@layer mt.v3-3-7design{${b}`);
+@layer mt.v3-3-9design{${b}`);
   }
   connectedCallback() {
     const t = this.shadowRoot?.lastElementChild, e = a(this, "data-cluster") ?? "false", o = new i.TileLayer(k, {

package/mtds/external/@u-elements/u-combobox/dist/u-combobox.js

@@ -1,46 +1,46 @@
-var Y = Object.defineProperty, R = Object.getOwnPropertySymbols, z = Object.prototype.hasOwnProperty, G = Object.prototype.propertyIsEnumerable, $ = (t, e, o) => e in t ? Y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, J = (t, e) => {
+var Z = Object.defineProperty, N = Object.getOwnPropertySymbols, tt = Object.prototype.hasOwnProperty, et = Object.prototype.propertyIsEnumerable, P = (t, e, o) => e in t ? Z(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, ot = (t, e) => {
   for (var o in e || (e = {}))
-    z.call(e, o) && $(t, o, e[o]);
-  if (R)
-    for (var o of R(e))
-      G.call(e, o) && $(t, o, e[o]);
+    tt.call(e, o) && P(t, o, e[o]);
+  if (N)
+    for (var o of N(e))
+      et.call(e, o) && P(t, o, e[o]);
   return t;
-}, T = () => typeof window < "u" && typeof window.document < "u" && typeof window.navigator < "u", g = T(), k = g ? navigator.userAgent : "", P = /android/i.test(k), Q = /firefox/i.test(k), B = /iPad|iPhone|iPod/.test(k), D, Z = g && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
-/^Mac/i.test(((D = navigator.userAgentData) == null ? void 0 : D.platform) || navigator.platform), tt = g && window.CSSStyleSheet && document.adoptedStyleSheets, H = { once: !0, capture: !0, passive: !0 }, et = ":host(:not([hidden])) { display: block }", ot = "outline: 1px dotted; outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color", nt = `${P ? "data" : "aria"}-multiselectable`, it = typeof HTMLElement > "u" ? class {
-} : HTMLElement, s = (t, e, o) => o === void 0 ? t.getAttribute(e) : (o === null ? t.removeAttribute(e) : t.getAttribute(e) !== o && t.setAttribute(e, o), null), L = (t, ...e) => {
+}, D = () => typeof window < "u" && typeof window.document < "u" && typeof window.navigator < "u", C = D(), $ = C ? navigator.userAgent : "", L = /android/i.test($), nt = /firefox/i.test($), O = /iPad|iPhone|iPod/.test($), H, it = C && // @ts-expect-error Typescript has not implemented userAgentData yet https://stackoverflow.com/a/71392474
+/^Mac/i.test(((H = navigator.userAgentData) == null ? void 0 : H.platform) || navigator.platform), rt = C && window.CSSStyleSheet && document.adoptedStyleSheets, U = { once: !0, capture: !0, passive: !0 }, at = ":host(:not([hidden])) { display: block }", lt = "outline: 1px dotted; outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color", st = `${L ? "data" : "aria"}-multiselectable`, ut = typeof HTMLElement > "u" ? class {
+} : HTMLElement, a = (t, e, o) => o === void 0 ? t.getAttribute(e) : (o === null ? t.removeAttribute(e) : t.getAttribute(e) !== o && t.setAttribute(e, o), null), R = (t, ...e) => {
   const [o, ...n] = e;
   for (const i of o.split(" ")) t.addEventListener(i, ...n);
-  return () => K(t, ...e);
-}, K = (t, ...e) => {
+  return () => j(t, ...e);
+}, j = (t, ...e) => {
   const [o, ...n] = e;
   for (const i of o.split(" ")) t.removeEventListener(i, ...n);
-}, rt = (t, e) => {
+}, dt = (t, e) => {
   const o = t.shadowRoot || t.attachShadow({ mode: "open" });
-  if (o.querySelector("slot") || o.append(y("slot")), !o.querySelector("style"))
-    if (!tt) o.append(y("style", null, e));
+  if (o.querySelector("slot") || o.append(g("slot")), !o.querySelector("style"))
+    if (!rt) o.append(g("style", null, e));
     else {
       const n = new CSSStyleSheet();
       n.replaceSync(e), o.adoptedStyleSheets = [n];
     }
   return o;
-}, at = (t, e, o) => {
+}, ct = (t, e, o) => {
   const n = new MutationObserver((r) => {
-    if (!T() || !t.isConnected) return i();
+    if (!D() || !t.isConnected) return i();
     e(t, r);
   }), i = Object.assign(() => n.disconnect(), {
     takeRecords: () => n.takeRecords()
     // Expose takeRecords - useful if mutating a attribute that is observed
   });
   return e(t), n.observe(t, o), i;
-}, lt = (t) => {
+}, vt = (t) => {
   var e;
   const o = ((e = t.getRootNode) == null ? void 0 : e.call(t)) || t.ownerDocument;
   return o instanceof Document || o instanceof ShadowRoot ? o : document;
-}, O = (t) => lt(t).activeElement, st = (t) => {
+}, B = (t) => vt(t).activeElement, pt = (t) => {
   var e;
-  const o = s(t, "aria-label") || "";
+  const o = a(t, "aria-label") || "";
   return [
-    ...(((e = s(t, "aria-labelledby")) == null ? void 0 : e.split(" ")) || []).map((i) => document.getElementById(i.trim() || "-")),
+    ...(((e = a(t, "aria-labelledby")) == null ? void 0 : e.split(" ")) || []).map((i) => document.getElementById(i.trim() || "-")),
     // Get all labelledby elements
     ...Array.from(t.labels || [])
     // Get all <label> elements
@@ -48,39 +48,45 @@ var Y = Object.defineProperty, R = Object.getOwnPropertySymbols, z = Object.prot
     var l;
     return i || ((l = r?.innerText) == null ? void 0 : l.trim()) || "";
   }, o).trim();
-}, ut = (t) => {
-  if (!t || !g) return null;
+}, mt = (t) => {
+  if (!t || !C) return null;
   if (window.uElementsId || (window.uElementsId = {}), !t.id) {
     const e = t.nodeName.toLowerCase();
     window.uElementsId[e] || (window.uElementsId[e] = 1), t.id = `:${e}${window.uElementsId[e]++}`;
   }
   return t.id;
-}, y = (t, e, o) => {
+}, g = (t, e, o) => {
   const n = document.createElement(t);
-  if (o && (n.textContent = o), e) for (const [i, r] of Object.entries(e)) s(n, i, r);
+  if (o && (n.textContent = o), e) for (const [i, r] of Object.entries(e)) a(n, i, r);
   return n;
-}, ct = {
-  define: (t, e) => !T() || window.customElements.get(t) || window.customElements.define(t, e)
-}, V = (t, e, o = "") => {
+}, ft = {
+  define: (t, e) => !D() || window.customElements.get(t) || window.customElements.define(t, e)
+}, F = (t, e, o = "") => {
   var n, i;
   const r = { bubbles: !0, composed: !0, data: e, inputType: o }, l = HTMLInputElement.prototype;
   t.dispatchEvent(new InputEvent("beforeinput", r)), (i = (n = Object.getOwnPropertyDescriptor(l, "value")) == null ? void 0 : n.set) == null || i.call(t, e), t.dispatchEvent(new InputEvent("input", r)), t.dispatchEvent(new Event("change", { bubbles: !0 }));
-}, I = /* @__PURE__ */ new WeakSet(), q = (t, e) => (e?.type === "pointerdown" && (I.add(t), L(document, "pointerup", () => I.delete(t), H)), I.has(t)), dt = (t, e = "<slot></slot>") => `<template shadowrootmode="open">${e}<style>${t}</style></template>`, vt = (t) => {
-  const e = s(t, "form");
-  s(t, "form", "#"), setTimeout(pt, 0, t, e);
-}, pt = (t, e) => s(t, "form", e), _ = (t) => {
+}, k = /* @__PURE__ */ new WeakSet(), W = (t, e) => (e?.type === "pointerdown" && (k.add(t), R(document, "pointerup", () => k.delete(t), U)), k.has(t)), ht = (t, e = "<slot></slot>") => `<template shadowrootmode="open">${e}<style>${t}</style></template>`, _t = (t) => {
+  const e = a(t, "form");
+  a(t, "form", "#"), setTimeout(bt, 0, t, e);
+}, bt = (t, e) => a(t, "form", e), b = (t) => {
   var e;
   return ((e = t?.textContent) == null ? void 0 : e.trim()) || "";
-}, m, mt = 0, M = 0, x = (t) => {
-  clearTimeout(M), m || (m = y("div", { "aria-live": "assertive" }), m.style.overflow = "hidden", m.style.position = "fixed", m.style.whiteSpace = "nowrap", m.style.width = "1px"), m.isConnected || document.body.append(m), t === "" && (m.textContent = ""), t && (m.textContent = `${t}${mt++ % 2 ? " " : ""}`, M = setTimeout(x, !Z && Q ? 2e3 : 300, ""));
-}, U = `${et}
+}, p, yt = 0, V = 0, I = (t) => {
+  clearTimeout(V), p || (p = g("div", { "aria-live": "assertive" }), p.style.overflow = "hidden", p.style.position = "fixed", p.style.whiteSpace = "nowrap", p.style.width = "1px"), p.isConnected || document.body.append(p), t === "" && (p.textContent = ""), t && (p.textContent = `${t}${yt++ % 2 ? " " : ""}`, V = setTimeout(I, !it && nt ? 2e3 : 300, ""));
+}, X = `${at}
 :is(:host(:not([data-multiple])), :host([data-multiple="false"])) [part="items"] { display: none }
-[role="listbox"] { display: contents }
-::slotted(button[type="reset"]),::slotted(del) { font: inherit; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; text-decoration: none }
+[role="listbox"] { display: inline-flex } /* Can not be "contents" as this confuses VoiceOver */
+::slotted(button[type="reset"]),
+::slotted(button[aria-expanded]),
+::slotted(del) { font: inherit; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; text-decoration: none }
 ::slotted(data) { cursor: pointer; pointer-events: none }
 ::slotted(data)::after { padding-inline: .5ch; pointer-events: auto }
-::slotted(data)::after,::slotted(button[type="reset"]:empty)::before,::slotted(del:empty)::before { content: '\\00D7'; content: '\\00D7' / '' }
-::slotted(data:focus),::slotted(del:focus),::slotted(button[type="reset"]:focus) { ${ot} }`, Lt = dt(U), f = "aria-label", ft = 'button[type="reset"],del', ht = 'datalist,[role="listbox"]', _t = 'option,[role="option"]', N = "blur focus click input keydown pointerdown", S = "false", w = {
+::slotted(data)::after,
+::slotted(del:empty)::before,
+::slotted(button[type="reset"]:empty)::before { content: '\\00D7'; content: '\\00D7' / '' }
+::slotted(button[aria-expanded="false"]:empty)::before { content: '\\25BC'; content: '\\25BC' / '' }
+::slotted(button[aria-expanded="true"]:empty)::before { content: '\\25B2'; content: '\\25B2' / '' }
+::slotted(data:focus),::slotted(del:focus),::slotted(button[type="reset"]:focus) { ${lt} }`, Mt = ht(X), A = !1, m = "aria-label", gt = 'button[type="reset"],del', St = "button[aria-expanded]", wt = 'datalist,u-datalist,[role="listbox"]', Et = 'option,u-option,[role="option"]', q = "blur focus click input keydown pointerdown", w = "false", E = {
   added: "Added",
   clear: "Clear input",
   empty: "No selected",
@@ -90,53 +96,54 @@ var Y = Object.defineProperty, R = Object.getOwnPropertySymbols, z = Object.prot
   // Note: Not announced by NVDA
   of: "of",
   remove: "Press to remove",
-  removed: "Removed"
-}, bt = class extends it {
+  removed: "Removed",
+  toggle: "Options"
+}, xt = class extends ut {
   constructor() {
-    super(), this._focusMoved = !1, this._itemSingleVale = "", this._speak = "", this._texts = J({}, w), this._value = "";
-    const t = rt(this, U);
-    this._listbox = t.querySelector('[role="listbox"]') || y("div"), this._listbox.innerHTML = '<slot name="items"></slot>', s(this._listbox, "aria-orientation", "horizontal"), s(this._listbox, "role", "listbox"), s(this._listbox, "part", "items"), s(this._listbox, "tabindex", "-1"), t.prepend(this._listbox);
+    super(), this._focusMoved = !1, this._itemSingleVale = "", this._speak = "", this._texts = ot({}, E), this._value = "";
+    const t = dt(this, X);
+    this._listbox = t.querySelector('[role="listbox"]') || g("div"), this._listbox.innerHTML = '<slot name="items"></slot>', a(this._listbox, "aria-orientation", "horizontal"), a(this._listbox, "role", "listbox"), a(this._listbox, "part", "items"), a(this._listbox, "tabindex", "-1"), t.prepend(this._listbox);
   }
   // Locally store value to store value before input-click
   static get observedAttributes() {
-    return Object.keys(w).map((t) => `data-sr-${t}`);
+    return Object.keys(E).map((t) => `data-sr-${t}`);
   }
   connectedCallback() {
-    L(this, N, this, !0), this._umutate = at(this, It, {
-      attributeFilter: ["id", "value", "role"],
+    R(this, q, this, !0), this._umutate = ct(this, Dt, {
+      attributeFilter: ["id", "value", "role", "aria-expanded"],
       // Respond to changes in <data> value or id or role of <datalist>
       attributes: !0,
       characterData: !0,
       // Respond to changes in <data> textContent
       childList: !0,
       subtree: !0
-    }), E(this), A(this);
+    }), x(this), M(this);
   }
   attributeChangedCallback(t, e, o) {
     const n = t.split("data-sr-")[1];
-    w[n] && (this._texts[n] = o || w[n]), n === "clear" && this.clear && s(this.clear, f, this._texts.clear);
+    E[n] && (this._texts[n] = o || E[n]), n === "clear" && this.clear && a(this.clear, m, this._texts.clear);
   }
   disconnectedCallback() {
     var t;
-    K(this, N, this, !0), (t = this._umutate) == null || t.call(this), this._umutate = this._list = this._options = this._match = void 0, this._items = this._clear = this._control = this._select = void 0;
+    j(this, q, this, !0), (t = this._umutate) == null || t.call(this), this._umutate = this._clear = this._toggle = void 0, this._control = this._match = this._select = void 0, this._options = this._items = this._list = void 0;
   }
   handleEvent(t) {
-    var e, o;
-    (e = this.control) != null && e.disabled || (o = this.control) != null && o.readOnly || (t.type === "blur" && yt(this), t.type === "click" && wt(this, t), t.type === "focus" && x(), t.type === "input" && Et(this, t), t.type === "keydown" && gt(this, t), t.type === "pointerdown" && q(this, t));
+    var e, o, n;
+    (e = this.control) != null && e.disabled || (o = this.control) != null && o.readOnly || (t.type === "blur" && Ct(this), t.type === "click" && Tt(this, t), t.type === "focus" && I(), t.type === "input" && kt(this, t), t.type === "keydown" && Lt(this, t), t.type === "pointerdown" && (A = !!((n = this.list) != null && n.hidden), W(this, t)));
   }
   get multiple() {
     var t;
-    return ((t = s(this, "data-multiple")) != null ? t : S) !== S;
+    return ((t = a(this, "data-multiple")) != null ? t : w) !== w;
   }
   set multiple(t) {
-    s(this, "data-multiple", t ? "" : null);
+    a(this, "data-multiple", t ? "" : null);
   }
   get creatable() {
     var t;
-    return ((t = s(this, "data-creatable")) != null ? t : S) !== S;
+    return ((t = a(this, "data-creatable")) != null ? t : w) !== w;
   }
   set creatable(t) {
-    s(this, "data-creatable", t ? "" : null);
+    a(this, "data-creatable", t ? "" : null);
   }
   get control() {
     var t;
@@ -144,117 +151,123 @@ var Y = Object.defineProperty, R = Object.getOwnPropertySymbols, z = Object.prot
   }
   get list() {
     var t;
-    return (t = this._list) != null && t.isConnected || (this._list = this.querySelector(ht), this._options = void 0), this._list;
+    return (t = this._list) != null && t.isConnected || (this._list = this.querySelector(wt), this._options = void 0), this._list;
   }
   get clear() {
     var t;
-    return (t = this._clear) != null && t.isConnected || (this._clear = this.querySelector(ft)), this._clear;
+    return (t = this._clear) != null && t.isConnected || (this._clear = this.querySelector(gt)), this._clear;
+  }
+  get toggle() {
+    var t;
+    return (t = this._toggle) != null && t.isConnected || (this._toggle = this.querySelector(St)), this._toggle;
   }
   get items() {
     return this._items || (this._items = this.getElementsByTagName("data")), this._items;
   }
   get options() {
     var t, e, o;
-    const n = !this._options && ((e = (t = this.list) == null ? void 0 : t.querySelector(_t)) == null ? void 0 : e.nodeName);
+    const n = !this._options && ((e = (t = this.list) == null ? void 0 : t.querySelector(Et)) == null ? void 0 : e.nodeName);
     return n && (this._options = (o = this.list) == null ? void 0 : o.getElementsByTagName(n)), this._options || this.getElementsByTagName("-");
   }
   get values() {
     return Array.from(this.items, ({ value: t }) => t);
   }
-}, j = (t) => {
+}, G = (t) => {
   var e;
   const { creatable: o, control: n, options: i, multiple: r } = t, l = ((e = n?.value) == null ? void 0 : e.trim()) || "", u = l.toLowerCase() || null;
-  let a = [...i].find((c) => c.label.trim().toLowerCase() === u);
-  const d = { bubbles: !0, cancelable: !0, detail: a };
-  if (t.dispatchEvent(new CustomEvent("comboboxbeforematch", d)) || (a = [...i].find((c) => c.selected)), r) W(t);
-  else for (const c of i) c.selected = c === a;
-  return !a && o && l ? { value: l, label: l } : a && { value: a.value, label: a.label };
-}, b = (t, e, o = !0) => {
+  let s = [...i].find(
+    (c) => K(c).trim().toLowerCase() === u
+  );
+  const d = { bubbles: !0, cancelable: !0, detail: s };
+  if (t.dispatchEvent(new CustomEvent("comboboxbeforematch", d)) || (s = [...i].find(Bt)), r) z(t);
+  else for (const c of i) J(c, c === s);
+  return !s && o && l ? { value: l, label: l } : s && { value: S(s), label: K(s) };
+}, y = (t, e, o = !0) => {
   const { _texts: n, control: i, items: r, multiple: l } = t;
   if (!e)
-    return l ? x(n.invalid) : !i?.value && r[0] ? b(t, r[0]) : E(t);
-  const u = [...r].findIndex((p) => p.value === e.value), a = r[u], d = a === O(t) && (l && (r[u - 1] || r[u + 1]) || i);
-  if (a && !o) return E(t);
+    return l ? I(n.invalid) : !i?.value && r[0] ? y(t, r[0]) : x(t);
+  const u = [...r].findIndex((f) => f.value === e.value), s = r[u], d = s === B(t) && (l && (r[u - 1] || r[u + 1]) || i);
+  if (s && !o) return x(t);
   d && d.focus(), t._focusMoved = !!d;
-  const c = y("data", { value: e.value }, e.label || e.value), v = { bubbles: !0, cancelable: !0, detail: a || c };
+  const c = g("data", { value: e.value }, e.label || e.value), v = { bubbles: !0, cancelable: !0, detail: s || c };
   if (t.dispatchEvent(new CustomEvent("comboboxbeforeselect", v))) {
-    if (!l) for (const p of [...r]) p.remove();
-    a ? a.remove() : i?.insertAdjacentElement("beforebegin", c), t.dispatchEvent(new CustomEvent("comboboxafterselect", v));
+    if (!l) for (const f of [...r]) f.remove();
+    s ? s.remove() : i?.insertAdjacentElement("beforebegin", c), t.dispatchEvent(new CustomEvent("comboboxafterselect", v));
   }
-}, yt = (t) => q(t) || setTimeout(St, 0, t), St = (t) => t.multiple || t.contains(O(t)) || b(t, t._match, !1), wt = (t, e) => {
-  const { clientX: o, clientY: n, target: i } = e, { clear: r, control: l, items: u } = t;
-  if (l && r?.contains(i))
-    return e.preventDefault(), V(l, "", "deleteContentBackward"), l.focus();
-  for (const a of u) {
-    if (a.contains(i)) return b(t, a);
-    const d = a.getBoundingClientRect(), { top: c, right: v, bottom: p, left: C, width: h, height: X } = d;
-    if (h && X && n >= c && n <= p && o >= C && o <= v) return a.focus();
+}, Ct = (t) => W(t) || setTimeout(It, 0, t), It = (t) => t.multiple || t.contains(B(t)) || y(t, t._match, !1), Tt = (t, e) => {
+  const { clientX: o, clientY: n, target: i } = e, { clear: r, control: l, items: u, toggle: s } = t;
+  if (s?.contains(i) && (l?.focus(), A && l?.click()), l && r?.contains(i))
+    return e.preventDefault(), F(l, "", "deleteContentBackward"), l.focus(), A || l.click();
+  for (const d of u) {
+    if (d.contains(i)) return y(t, d);
+    const c = d.getBoundingClientRect(), { top: v, right: f, bottom: h, left: T, width: _, height: Q } = c;
+    if (_ && Q && n >= v && n <= h && o >= T && o <= f) return d.focus();
   }
   i === t && l?.focus();
-}, Et = (t, e) => {
+}, kt = (t, e) => {
   var o;
   const { control: n, options: i, multiple: r } = t, l = n?.value || null, u = e instanceof InputEvent ? !e.inputType || e.inputType === "insertReplacementText" : !!n?.value;
   if (u || (t._value = n?.value || ""), u) {
     (o = e.stopImmediatePropagation) == null || o.call(e);
-    const a = [...i].find((d) => d.value === l);
-    if (n && (n.value = t._value), a) return b(t, a, r);
-  } else r || (t._match = j(t));
-  A(t);
-}, gt = (t, e) => {
-  e.ctrlKey || e.metaKey || e.shiftKey || e.key === "Alt" || (t.control === e.target ? xt(t, e) : Ct(t, e));
-}, xt = (t, e) => {
+    const s = [...i].find((d) => S(d) === l);
+    if (n && (n.value = t._value), s) return y(t, s, r);
+  } else r || (t._match = G(t));
+  M(t);
+}, Lt = (t, e) => {
+  e.ctrlKey || e.metaKey || e.shiftKey || e.key === "Alt" || (t.control === e.target ? Ot(t, e) : At(t, e));
+}, Ot = (t, e) => {
   var o;
   const { _match: n, clear: i, control: r, items: l, multiple: u } = t;
-  (e.key === "ArrowLeft" || e.key === "Backspace") && !r?.selectionEnd && ((o = l[l.length - 1]) == null || o.focus()), e.key === "Enter" && r && (vt(r), b(t, u ? j(t) : n, u)), e.key === "Tab" && !e.shiftKey && i && !i.hidden && (e.preventDefault(), s(i, "aria-hidden", "false"), s(i, "tabindex", "0"), i.focus(), L(i, "blur", () => A(t), H));
-}, Ct = (t, e) => {
+  (e.key === "ArrowLeft" || e.key === "Backspace") && !r?.selectionEnd && ((o = l[l.length - 1]) == null || o.focus(), e.preventDefault()), e.key === "Enter" && r && (_t(r), y(t, u ? G(t) : n, u)), e.key === "Tab" && !e.shiftKey && i && !i.hidden && (e.preventDefault(), a(i, "aria-hidden", "false"), a(i, "tabindex", "0"), i.focus(), R(i, "blur", () => M(t), U));
+}, At = (t, e) => {
   var o, n, i;
-  const { clear: r, control: l, items: u } = t, { key: a, repeat: d, target: c } = e, v = [...u].indexOf(c);
-  if ((a === " " || a === "Enter") && (u[v] || c === r))
+  const { clear: r, control: l, items: u } = t, { key: s, repeat: d, target: c } = e, v = [...u].indexOf(c);
+  if ((s === " " || s === "Enter") && (u[v] || c === r))
     return (o = u[v] || r) == null || o.click(), e.preventDefault();
   if (u[v]) {
-    if (a === "ArrowLeft") return (n = u[v - 1]) == null ? void 0 : n.focus();
-    if (a === "ArrowRight") return (i = u[v + 1] || l) == null ? void 0 : i.focus();
-    if (a === "Backspace")
-      return e.preventDefault(), d || b(t, u[v]);
+    if (s.startsWith("Arrow") && e.preventDefault(), s === "ArrowLeft") return (n = u[v - 1]) == null ? void 0 : n.focus();
+    if (s === "ArrowRight") return (i = u[v + 1] || l) == null ? void 0 : i.focus();
+    if (s === "Backspace")
+      return e.preventDefault(), d || y(t, u[v]);
     l?.focus();
   }
-}, It = (t, e) => {
+}, Dt = (t, e) => {
   var o;
   if (!t.control) return;
-  const { _texts: n, control: i, items: r, list: l, multiple: u } = t, a = [];
-  for (const { addedNodes: p, removedNodes: C } of e || []) {
-    for (const h of p) h instanceof HTMLDataElement && a.unshift(h);
-    for (const h of C) h instanceof HTMLDataElement && a.push(h);
+  const { _texts: n, control: i, items: r, list: l, multiple: u, toggle: s } = t, d = [];
+  for (const { addedNodes: h, removedNodes: T } of e || []) {
+    for (const _ of h) _ instanceof HTMLDataElement && d.unshift(_);
+    for (const _ of T) _ instanceof HTMLDataElement && d.push(_);
   }
-  const d = O(t);
-  if ((u ? a.length === 1 : a[0] === d) && t.contains(d)) {
-    const p = i ? s(i, f) : null;
-    t._speak = `${n[a[0].isConnected ? "added" : "removed"]} ${_(a[0])}, `, s(i, f, `${t._speak}${st(i)}`), t._focusMoved || setTimeout(() => x(t._speak.slice(0, -2))), setTimeout(Tt, 300, t, p);
+  const c = B(t);
+  if ((u ? d.length === 1 : d[0] === c) && t.contains(c)) {
+    const h = i ? a(i, m) : null;
+    t._speak = `${n[d[0].isConnected ? "added" : "removed"]} ${b(d[0])}, `, a(i, m, `${t._speak}${pt(i)}`), t._focusMoved || setTimeout(() => I(t._speak.slice(0, -2))), setTimeout($t, 300, t, h);
   }
   if (!u) {
-    const p = _(r[0]);
-    p !== t._itemSingleVale && E(t), t._itemSingleVale = p;
+    const h = b(r[0]);
+    h !== t._itemSingleVale && x(t), t._itemSingleVale = h;
   }
-  F(t), W(t), kt(t);
-  const v = `${r.length ? n.found.replace("%d", `${r.length}`) : n.empty}`;
-  s(i, "aria-description", u ? v : null), s(i, "list", ut(l)), s(t._listbox, f, n.items), (o = t._umutate) == null || o.takeRecords();
-}, Tt = (t, e) => {
-  t._speak = "", t.control && s(t.control, f, e), F(t);
-}, F = (t) => {
+  Y(t), z(t), Rt(t), s && a(s, "aria-expanded", `${!l?.hidden}`);
+  const f = `${r.length ? n.found.replace("%d", `${r.length}`) : n.empty}`;
+  a(i, "aria-description", u ? f : null), a(i, "list", mt(l)), a(t._listbox, m, n.items), (o = t._umutate) == null || o.takeRecords();
+}, $t = (t, e) => {
+  t._speak = "", t.control && a(t.control, m, e), Y(t);
+}, Y = (t) => {
   const { _texts: e, _speak: o, items: n } = t;
   let i = 0;
   for (const r of n) {
-    const l = `${o}${_(r)}, ${e.remove}${B ? `, ${++i} ${e.of} ${n.length}` : ""}`;
-    s(r, f, l), s(r, "role", "option"), s(r, "slot", "items"), s(r, "tabindex", "-1"), s(r, "value", r.value || _(r));
+    const l = `${o}${b(r)}, ${e.remove}${O ? `, ${++i} ${e.of} ${n.length}` : ""}`;
+    a(r, m, l), a(r, "role", "option"), a(r, "slot", "items"), a(r, "tabindex", "-1"), a(r, "value", S(r));
   }
-}, kt = (t) => {
+}, Rt = (t) => {
   var e, o;
   if ((e = t._select) != null && e.isConnected || (t._select = t.querySelector("select")), !t._select) return;
   const { _select: n, items: i, multiple: r } = t, l = [];
   let u = 0;
-  s(n, "multiple", r ? "" : null);
-  for (const a of i) {
-    const d = n?.options[u++], c = _(a), v = a?.value;
+  a(n, "multiple", r ? "" : null);
+  for (const s of i) {
+    const d = n?.options[u++], c = b(s), v = S(s);
     d ? Object.assign(d, {
       defaultSelected: !0,
       selected: !0,
@@ -263,26 +276,34 @@ var Y = Object.defineProperty, R = Object.getOwnPropertySymbols, z = Object.prot
     }) : l.push(new Option(c, v, !0, !0));
   }
   if (l.length) n.append(...l);
-  else for (const a of [...n.options].slice(u)) a.remove();
+  else for (const s of [...n.options].slice(u)) s.remove();
   (o = t._umutate) == null || o.takeRecords();
-}, A = (t) => {
-  if (!t.clear) return;
-  const { clear: e, control: o } = t, n = !o?.value || o?.disabled || o?.readOnly;
-  e.nodeName === "DEL" && s(e, "role", "button"), s(e, f) || s(e, f, t._texts.clear), s(e, "aria-hidden", `${B || P}`), s(e, "hidden", n ? "" : null), s(e, "tabindex", "-1");
-}, W = (t) => {
+}, M = (t) => {
+  const { clear: e, control: o, toggle: n } = t, i = !o?.value || o?.disabled || o?.readOnly;
+  e?.nodeName === "DEL" && a(e, "role", "button"), e && (a(e, m) || a(e, m, t._texts.clear), a(e, "aria-hidden", `${O || L}`), a(e, "hidden", i ? "" : null), a(e, "tabindex", "-1")), n && (a(n, m) || a(n, m, t._texts.toggle), a(n, "aria-hidden", `${O || L}`), a(n, "hidden", i ? null : ""), a(n, "tabindex", "-1"), a(n, "type", "button"));
+}, z = (t) => {
   if (!t.list) return;
   const { _texts: e, list: o, multiple: n, options: i, values: r } = t;
-  s(o, "data-sr-of", e.of), s(o, nt, `${n}`);
-  for (const l of i) l.selected = r.includes(l.value);
-}, E = (t) => {
+  a(o, "data-sr-of", e.of), a(o, st, `${n}`);
+  for (const l of i) J(l, r.includes(S(l)));
+}, x = (t) => {
   if (!t.control || t.multiple) return;
-  const { control: e, items: o } = t, n = _(o[0]), i = n ? "insertText" : "deleteContentBackward";
-  n !== e.value && V(e, n, i);
+  const { control: e, items: o } = t, n = b(o[0]), i = n ? "insertText" : "deleteContentBackward";
+  n !== e.value && F(e, n, i);
+}, K = (t) => {
+  var e;
+  return (e = a(t, "label")) != null ? e : b(t);
+}, S = (t) => {
+  var e;
+  return (e = a(t, "value")) != null ? e : b(t);
+}, J = (t, e) => a(t, "selected", e ? "" : null), Bt = (t) => {
+  var e;
+  return (e = t.selected) != null ? e : t.hasAttribute("selected");
 };
-ct.define("u-combobox", bt);
+ft.define("u-combobox", xt);
 export {
-  bt as UHTMLComboboxElement,
-  Lt as UHTMLComboboxShadowRoot,
-  U as UHTMLComboboxStyle
+  xt as UHTMLComboboxElement,
+  Mt as UHTMLComboboxShadowRoot,
+  X as UHTMLComboboxStyle
 };
 //# sourceMappingURL=u-combobox.js.map