@mattilsynet/design 3.3.8 → 3.3.10

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 {

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-8design{${b}`);
+@layer mt.v3-3-10design{${b}`);
   }
   connectedCallback() {
     const t = this.shadowRoot?.lastElementChild, e = a(this, "data-cluster") ?? "false", o = new i.TileLayer(k, {

package/mtds/atlas/atlas-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\"; // Extend L namespace\nimport \"./cluster.js\";\nimport {\n\tattachStyle,\n\tattr,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\ttag,\n} from \"../utils\";\nimport css from \"./atlas.css?raw\";\n\nexport { MTDSAtlasMarkerElement } from \"./atlas-marker\";\nexport { MTDSAtlasMatgeoElement } from \"./atlas-matgeo\";\nexport { MTDSAtlasWMSElement } from \"./atlas-wms\";\nexport { L };\n\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n// TODO: Add search helper (https://ws.geonorge.no/adresser/v1/openapi.json + https://ws.geonorge.no/adresser/v1/#/default/get_sok)\n// TODO: matgeo-autoload popover info\n\ntype Link = { href: string; rel: string; type: string; title: string };\ntype BBox = [number, number, number, number];\nexport type MTDSAtlasCollections = Record<string, MTDSAtlasCollection>;\nexport type MTDSAtlasCollection = {\n\tcrs: string[];\n\tdescription: string;\n\textent: { spatial: { bbox: BBox[] } };\n\tgeometry: string;\n\tid: string;\n\titemType: string;\n\tlinks: Link[];\n\ttitle: string;\n};\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas\": MTDSAtlasElement;\n\t}\n\n\tinterface Window {\n\t\t_matgeoCollections?: Promise<MTDSAtlasCollections>;\n\t}\n}\n\nlet SKIP_CLICK: number | NodeJS.Timeout = 0;\nconst KARTVERKET_MAX_ZOOM = 18; // Kartverket does not support more than zoom level 18\nconst KARTVERKET_TILES_URL =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\nexport const MATGEO_URL =\n\t\"https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(tag(\"figure\"));\n\t\tattachStyle(this, `@layer leaflet{${LeafletCSS}}\\n@layer mt.design{${css}`);\n\t}\n\tconnectedCallback() {\n\t\tconst container = this.shadowRoot?.lastElementChild as HTMLElement;\n\t\tconst cluster = attr(this, \"data-cluster\") ?? \"false\";\n\t\tconst tiles = new L.TileLayer(KARTVERKET_TILES_URL, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tclassName: \"leaflet-kartverket-tiles\",\n\t\t\tmaxZoom: KARTVERKET_MAX_ZOOM,\n\t\t});\n\n\t\tthis.map = new L.Map(container, {\n\t\t\tattributionControl: false,\n\t\t\tfadeAnimation: false, // Prevent popup fades\n\t\t\tlayers: [tiles],\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0.2,\n\t\t});\n\n\t\ton(this, \"pointerup click\", this.#skipClick); // Prevent clicks from bubbling up unless sent from Leaflet\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\tthis.map.on(\"popupopen popupclose\", this.#handlePopup, this);\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tzoomToBoundsOnClick: true,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom:\n\t\t\t\tcluster === \"false\" ? 1 : Number(cluster) || KARTVERKET_MAX_ZOOM + 1,\n\t\t\ticonCreateFunction: (cluster: L.MarkerCluster) =>\n\t\t\t\tnew L.DivIcon({\n\t\t\t\t\thtml: `${cluster.getChildCount()}`,\n\t\t\t\t\tclassName: \"leaflet-cluster-icon\",\n\t\t\t\t\ticonSize: [40, 40],\n\t\t\t\t}),\n\t\t}).addTo(this.map);\n\n\t\t// Initial setup attributes\n\t\tfor (const name of MTDSAtlasElement.observedAttributes)\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t}\n\tattributeChangedCallback(name: string, _prev?: null, next?: string | null) {\n\t\tif (name === \"data-view\") this.setView(next || \"\");\n\t\tif (name === \"data-scrollzoom\")\n\t\t\tthis.map?.scrollWheelZoom[next === \"false\" ? \"disable\" : \"enable\"]();\n\t}\n\tsetView(view: string | number[], opts?: L.FitBoundsOptions) {\n\t\tconst p = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst b = this.cluster?.getBounds();\n\n\t\tif (p.length === 3) return this.map?.setView([p[0], p[1]], p[2], opts);\n\t\tif (view !== \"fit\") return this.map?.fitBounds(BOUNDS_NORWAY, opts);\n\t\tif (b?.isValid()) return this.map?.fitBounds(b.pad(0.1), opts);\n\t\tthis.cluster?.once(\"layeradd\", () => {\n\t\t\tsetTimeout(() => this.setView(\"fit\"), 50); // Add all markers before fitting\n\t\t});\n\t}\n\tlatLngFromPoint(x: number, y: number) {\n\t\t// @ts-expect-error -- Missing from Leaflet@2.0.0-alpha.1 types\n\t\treturn this.map?.pointerEventToLatLng({ clientX: x, clientY: y });\n\t}\n\tdisconnectedCallback() {\n\t\toff(this, \"pointerup click\", this.#skipClick);\n\t\tthis.map?.remove();\n\t\tthis.map = this.cluster = undefined;\n\t}\n\tasync getCollections() {\n\t\tif (!window._matgeoCollections)\n\t\t\twindow._matgeoCollections = fetch(MATGEO_URL)\n\t\t\t\t.then((res) => res.json())\n\t\t\t\t.then((d) => d.collections.map((c: MTDSAtlasCollection) => [c.id, c]))\n\t\t\t\t.then(Object.fromEntries);\n\t\treturn window._matgeoCollections;\n\t}\n\t#handlePopup({ type, popup }: { type: string; popup: L.Popup }) {\n\t\tconst open = type === \"popupopen\";\n\t\tconst cont = popup.getElement()?.querySelector(\".leaflet-popup-content\");\n\t\tconst slot = cont?.querySelector<HTMLSlotElement>(\":scope > slot\");\n\t\tconst id = cont?.textContent?.match(/^#(\\S+)/)?.[1] || \"\";\n\t\tconst el = document.getElementById(slot?.name || id); // If content of popup is #id, replace with <slot>\n\n\t\tif (!el) return open && id && popup.close(); // Close popup if target element not found\n\t\tL.Util.setOptions(popup, { maxWidth: this.offsetWidth - 40 });\n\t\tattr(el, \"data-popover\", open ? attr(el, \"popover\") : null); // Store previous popover mode\n\t\tattr(el, \"popover\", open ? null : attr(el, \"data-popover\")); // But temporarily remove it so popover renders\n\t\tattr(el, \"slot\", open ? el.id : null); // Render popover in slot\n\t\tif (open) popup.setContent(tag(\"slot\", { name: el.id }));\n\t}\n\t#skipClick(event: Partial<MouseEvent>) {\n\t\tif (event.type === \"click\") SKIP_CLICK && event.stopPropagation?.();\n\t\telse if (document.body.classList.contains(\"leaflet-dragging\"))\n\t\t\tSKIP_CLICK = setTimeout(() => {\n\t\t\t\tSKIP_CLICK = 0;\n\t\t\t}, 50); // Was dragging, so skip succeeding click\n\t}\n}\n\ndefineElement(\"mtds-atlas\", MTDSAtlasElement);\n\nif (isBrowser())\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<div class=\"leaflet-marker-generated-slot\"><div class=\"leaflet-marker-generated-icon\"></div></div>',\n\t\ticonSize: [0, 0],\n\t});\n"],"names":["SKIP_CLICK","KARTVERKET_MAX_ZOOM","KARTVERKET_TILES_URL","MATGEO_URL","BOUNDS_NORWAY","MTDSAtlasElement","MTDSElement","tag","attachStyle","LeafletCSS","css","container","cluster","attr","tiles","L","on","#skipClick","#handlePopup","name","_prev","next","view","opts","p","b","x","y","off","res","d","c","type","popup","open","cont","slot","id","el","event","defineElement","isBrowser"],"mappings":"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"}
+{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\"; // Extend L namespace\nimport \"./cluster.js\";\nimport {\n\tattachStyle,\n\tattr,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\ttag,\n} from \"../utils\";\nimport css from \"./atlas.css?raw\";\n\nexport { MTDSAtlasMarkerElement } from \"./atlas-marker\";\nexport { MTDSAtlasMatgeoElement } from \"./atlas-matgeo\";\nexport { MTDSAtlasWMSElement } from \"./atlas-wms\";\nexport { L };\n\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n// TODO: Add search helper (https://ws.geonorge.no/adresser/v1/openapi.json + https://ws.geonorge.no/adresser/v1/#/default/get_sok)\n// TODO: matgeo-autoload popover info\n\ntype Link = { href: string; rel: string; type: string; title: string };\ntype BBox = [number, number, number, number];\nexport type MTDSAtlasCollections = Record<string, MTDSAtlasCollection>;\nexport type MTDSAtlasCollection = {\n\tcrs: string[];\n\tdescription: string;\n\textent: { spatial: { bbox: BBox[] } };\n\tgeometry: string;\n\tid: string;\n\titemType: string;\n\tlinks: Link[];\n\ttitle: string;\n};\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas\": MTDSAtlasElement;\n\t}\n\n\tinterface Window {\n\t\t_matgeoCollections?: Promise<MTDSAtlasCollections>;\n\t}\n}\n\nlet SKIP_CLICK: number | NodeJS.Timeout = 0;\nconst KARTVERKET_MAX_ZOOM = 18; // Kartverket does not support more than zoom level 18\nconst KARTVERKET_TILES_URL =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\nexport const MATGEO_URL =\n\t\"https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(tag(\"figure\"));\n\t\tattachStyle(this, `@layer leaflet{${LeafletCSS}}\\n@layer mt.design{${css}`);\n\t}\n\tconnectedCallback() {\n\t\tconst container = this.shadowRoot?.lastElementChild as HTMLElement;\n\t\tconst cluster = attr(this, \"data-cluster\") ?? \"false\";\n\t\tconst tiles = new L.TileLayer(KARTVERKET_TILES_URL, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tclassName: \"leaflet-kartverket-tiles\",\n\t\t\tmaxZoom: KARTVERKET_MAX_ZOOM,\n\t\t});\n\n\t\tthis.map = new L.Map(container, {\n\t\t\tattributionControl: false,\n\t\t\tfadeAnimation: false, // Prevent popup fades\n\t\t\tlayers: [tiles],\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0.2,\n\t\t});\n\n\t\ton(this, \"pointerup click\", this.#skipClick); // Prevent clicks from bubbling up unless sent from Leaflet\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\tthis.map.on(\"popupopen popupclose\", this.#handlePopup, this);\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tzoomToBoundsOnClick: true,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom:\n\t\t\t\tcluster === \"false\" ? 1 : Number(cluster) || KARTVERKET_MAX_ZOOM + 1,\n\t\t\ticonCreateFunction: (cluster: L.MarkerCluster) =>\n\t\t\t\tnew L.DivIcon({\n\t\t\t\t\thtml: `${cluster.getChildCount()}`,\n\t\t\t\t\tclassName: \"leaflet-cluster-icon\",\n\t\t\t\t\ticonSize: [40, 40],\n\t\t\t\t}),\n\t\t}).addTo(this.map);\n\n\t\t// Initial setup attributes\n\t\tfor (const name of MTDSAtlasElement.observedAttributes)\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t}\n\tattributeChangedCallback(name: string, _prev?: null, next?: string | null) {\n\t\tif (name === \"data-view\") this.setView(next || \"\");\n\t\tif (name === \"data-scrollzoom\")\n\t\t\tthis.map?.scrollWheelZoom[next === \"false\" ? \"disable\" : \"enable\"]();\n\t}\n\tsetView(view: string | number[], opts?: L.FitBoundsOptions) {\n\t\tconst p = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst b = this.cluster?.getBounds();\n\n\t\tif (p.length === 3) return this.map?.setView([p[0], p[1]], p[2], opts);\n\t\tif (view !== \"fit\") return this.map?.fitBounds(BOUNDS_NORWAY, opts);\n\t\tif (b?.isValid()) return this.map?.fitBounds(b.pad(0.1), opts);\n\t\tthis.cluster?.once(\"layeradd\", () => {\n\t\t\tsetTimeout(() => this.setView(\"fit\"), 50); // Add all markers before fitting\n\t\t});\n\t}\n\tlatLngFromPoint(x: number, y: number) {\n\t\t// @ts-expect-error -- Missing from Leaflet@2.0.0-alpha.1 types\n\t\treturn this.map?.pointerEventToLatLng({ clientX: x, clientY: y });\n\t}\n\tdisconnectedCallback() {\n\t\toff(this, \"pointerup click\", this.#skipClick);\n\t\tthis.map?.remove();\n\t\tthis.map = this.cluster = undefined;\n\t}\n\tasync getCollections() {\n\t\tif (!window._matgeoCollections)\n\t\t\twindow._matgeoCollections = fetch(MATGEO_URL)\n\t\t\t\t.then((res) => res.json())\n\t\t\t\t.then((d) => d.collections.map((c: MTDSAtlasCollection) => [c.id, c]))\n\t\t\t\t.then(Object.fromEntries);\n\t\treturn window._matgeoCollections;\n\t}\n\t#handlePopup({ type, popup }: { type: string; popup: L.Popup }) {\n\t\tconst open = type === \"popupopen\";\n\t\tconst cont = popup.getElement()?.querySelector(\".leaflet-popup-content\");\n\t\tconst slot = cont?.querySelector<HTMLSlotElement>(\":scope > slot\");\n\t\tconst id = cont?.textContent?.match(/^#(\\S+)/)?.[1] || \"\";\n\t\tconst el = document.getElementById(slot?.name || id); // If content of popup is #id, replace with <slot>\n\n\t\tif (!el) return open && id && popup.close(); // Close popup if target element not found\n\t\tL.Util.setOptions(popup, { maxWidth: this.offsetWidth - 40 });\n\t\tattr(el, \"data-popover\", open ? attr(el, \"popover\") : null); // Store previous popover mode\n\t\tattr(el, \"popover\", open ? null : attr(el, \"data-popover\")); // But temporarily remove it so popover renders\n\t\tattr(el, \"slot\", open ? el.id : null); // Render popover in slot\n\t\tif (open) popup.setContent(tag(\"slot\", { name: el.id }));\n\t}\n\t#skipClick(event: Partial<MouseEvent>) {\n\t\tif (event.type === \"click\") SKIP_CLICK && event.stopPropagation?.();\n\t\telse if (document.body.classList.contains(\"leaflet-dragging\"))\n\t\t\tSKIP_CLICK = setTimeout(() => {\n\t\t\t\tSKIP_CLICK = 0;\n\t\t\t}, 50); // Was dragging, so skip succeeding click\n\t}\n}\n\ndefineElement(\"mtds-atlas\", MTDSAtlasElement);\n\nif (isBrowser())\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<div class=\"leaflet-marker-generated-slot\"><div class=\"leaflet-marker-generated-icon\"></div></div>',\n\t\ticonSize: [0, 0],\n\t});\n"],"names":["SKIP_CLICK","KARTVERKET_MAX_ZOOM","KARTVERKET_TILES_URL","MATGEO_URL","BOUNDS_NORWAY","MTDSAtlasElement","MTDSElement","tag","attachStyle","LeafletCSS","css","container","cluster","attr","tiles","L","on","#skipClick","#handlePopup","name","_prev","next","view","opts","p","b","x","y","off","res","d","c","type","popup","open","cont","slot","id","el","event","defineElement","isBrowser"],"mappings":"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"}

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