@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/options-Dz-ejkxF.js

@@ -0,0 +1,484 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "./decorate-aGxJUVxg.js";
+import { n } from "./sized-mixin-DaBoZkVS.js";
+import { t as r } from "./focusable-BmS8IzhH.js";
+import { t as i } from "./like-anchor-DeOXX-MX.js";
+import { t as a } from "./observe-slot-text-Ddf1OC6F.js";
+import { t as o } from "./random-id-Dd4boCPV.js";
+import { t as s } from "./observe-slot-presence-BCqd3VSd.js";
+import { t as c } from "./divider.module-C65RfSUa.js";
+import "./progress-circle/index.js";
+import { html as l, nothing as u, unsafeCSS as d } from "lit";
+import { property as f, query as p, queryAll as m, state as h } from "lit/decorators.js";
+import { luzmoAngleRight as g, luzmoCheck as _, luzmoCheckbox as v, luzmoCheckboxChecked as y, luzmoIcon as b } from "@luzmo/icons";
+import { MutationController as x } from "@lit-labs/observers/mutation-controller.js";
+import { LitVirtualizer as S } from "@lit-labs/virtualizer/LitVirtualizer.js";
+import { repeat as C } from "lit/directives/repeat.js";
+//#region src/components/options/option.module.scss?inline
+var w = "#icon{height:var(--luzmo-option-icon-container-height,var(--option-icon-container-height));min-height:var(--luzmo-option-icon-size,var(--option-icon-height));color:var(--highcontrast-option-color-default,var(--luzmo-option-label-icon-color-default,var(--option-label-icon-color-default)));grid-area:iconArea;justify-content:center;align-self:start;align-items:center;display:flex}::slotted([slot=icon]){fill:var(--highcontrast-option-color-default,var(--luzmo-option-label-icon-color-default,var(--option-label-icon-color-default)));block-size:var(--luzmo-option-icon-size,var(--option-icon-height));inline-size:var(--luzmo-option-icon-width,var(--option-icon-width));font-size:var(--luzmo-option-icon-size,var(--option-icon-height));border-radius:var(--luzmo-option-icon-border-radius,0);border-width:var(--luzmo-option-icon-border-width,0);border-style:var(--luzmo-option-icon-border-style,solid);border-color:var(--luzmo-option-icon-border-color,transparent);text-align:center;--luzmo-icon-vertical-align:0;--luzmo-icon-img-object-fit:var(--luzmo-option-icon-object-fit,var(--option-icon-object-fit,fill));--luzmo-icon-img-object-position:var(--luzmo-option-icon-object-position,var(--option-icon-object-position,50% 50%));justify-content:center;align-items:center;margin-inline-end:max(var(--luzmo-option-label-text-to-visual,var(--option-label-text-to-visual)), var(--luzmo-option-icon-size,var(--option-icon-height)) * .35);display:flex;overflow:hidden}::slotted([slot=icon][data-option-thumbnail]){border-radius:var(--luzmo-option-thumbnail-border-radius,var(--luzmo-option-icon-border-radius,var(--luzmo-border-radius-s,4px)));border-width:var(--luzmo-option-thumbnail-border-width,1px);border-style:var(--luzmo-option-thumbnail-border-style,solid);border-color:var(--luzmo-option-thumbnail-border-color,var(--luzmo-option-icon-border-color,var(--luzmo-border-color-full,var(--luzmo-border-color,#0000001f))))}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-option-background-color-default,var(--luzmo-option-background-color-default,var(--option-background-color-default)));line-height:var(--luzmo-option-label-line-height,var(--option-label-line-height));min-block-size:max(var(--luzmo-option-min-height,var(--option-min-height)), var(--luzmo-option-icon-size,var(--option-icon-height)) + var(--luzmo-option-top-edge-to-text,var(--option-top-edge-to-text)) + var(--luzmo-option-bottom-edge-to-text,var(--option-bottom-edge-to-text)));padding-block-start:var(--luzmo-option-top-edge-to-text,var(--option-top-edge-to-text));padding-block-end:var(--luzmo-option-bottom-edge-to-text,var(--option-bottom-edge-to-text));padding-inline:var(--luzmo-option-label-inline-edge-to-content,var(--option-label-inline-edge-to-content));outline:none;flex-shrink:0;grid-template:\". .headingIconArea sectionHeadingArea. .\"\"selectedArea checkArea iconArea labelArea valueArea actionsArea\"1fr\". . .descriptionArea. .\"\". . . . . .\"/auto auto auto 1fr auto auto;justify-content:start;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}:host:focus-visible{outline:none}#label{grid-area:submenuItemLabelArea}.checkmark,.checkbox{opacity:1;grid-area:checkArea;align-self:start;display:block}.checkmark{font-size:var(--luzmo-option-checkmark-size,var(--option-checkmark-size));fill:var(--highcontrast-options-checkmark-icon-color-default,var(--luzmo-options-checkmark-icon-color-default,var(--options-checkmark-icon-color-default)));color:var(--highcontrast-options-checkmark-icon-color-default,var(--luzmo-options-checkmark-icon-color-default,var(--options-checkmark-icon-color-default)));margin-block-start:calc(var(--luzmo-option-top-to-checkmark,var(--option-top-to-checkmark)) - var(--luzmo-option-top-edge-to-text,var(--option-top-edge-to-text)));margin-inline-end:var(--luzmo-option-text-to-control,var(--option-label-text-to-control))}.checkbox{font-size:var(--luzmo-option-checkbox-size,var(--option-checkbox-size));fill:var(--highcontrast-options-checkbox-icon-color-default,var(--luzmo-options-checkbox-icon-color-default,var(--options-checkbox-icon-color-default)));color:var(--highcontrast-options-checkbox-icon-color-default,var(--luzmo-options-checkbox-icon-color-default,var(--options-checkbox-icon-color-default)));margin-block-start:calc(var(--luzmo-option-top-to-checkbox,var(--option-top-to-checkbox)) - var(--luzmo-option-top-edge-to-text,var(--option-top-edge-to-text)));margin-inline-end:var(--luzmo-option-text-to-control,var(--option-label-text-to-control))}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]){background-color:var(--highcontrast-option-background-color-focus,var(--luzmo-option-background-color-key-focus,var(--option-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label{color:var(--highcontrast-option-color-focus,var(--luzmo-option-label-content-color-focus,var(--option-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus,var(--luzmo-option-description-color-focus,var(--option-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-option-color-focus,var(--luzmo-option-value-color-focus,var(--option-value-color-focus)))}:host([focused])>.icon:not(.checkmark,.checkbox),:host(:focus)>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus,var(--luzmo-option-label-icon-color-focus,var(--option-label-icon-color-focus)));color:var(--highcontrast-option-color-focus,var(--luzmo-option-label-icon-color-focus,var(--option-label-icon-color-focus)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-option-color-focus,var(--luzmo-options-checkmark-icon-color-focus,var(--options-checkmark-icon-color-focus)));color:var(--highcontrast-option-color-focus,var(--luzmo-options-checkmark-icon-color-focus,var(--options-checkmark-icon-color-focus)))}:host([focused])>.checkbox,:host(:focus)>.checkbox{fill:var(--highcontrast-option-color-focus,var(--luzmo-options-checkbox-icon-color-focus,var(--options-checkbox-icon-color-focus)));color:var(--highcontrast-option-color-focus,var(--luzmo-options-checkbox-icon-color-focus,var(--options-checkbox-icon-color-focus)))}:is(:host:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([dir=rtl])){--option-focus-indicator-direction-scalar:-1}:host(:is(:active,[active])){background-color:var(--highcontrast-option-background-color-focus,var(--luzmo-option-background-color-down,var(--option-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-option-color-focus,var(--luzmo-option-label-content-color-down,var(--option-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus,var(--luzmo-option-description-color-down,var(--option-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-option-color-focus,var(--luzmo-option-value-color-down,var(--option-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus,var(--luzmo-option-label-icon-color-down,var(--option-label-icon-color-down)));color:var(--highcontrast-option-color-focus,var(--luzmo-option-label-icon-color-down,var(--option-label-icon-color-down)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-option-color-focus,var(--luzmo-options-checkmark-icon-color-down,var(--options-checkmark-icon-color-down)));color:var(--highcontrast-option-color-focus,var(--luzmo-options-checkmark-icon-color-down,var(--options-checkmark-icon-color-down)))}:host(:is(:active,[active]))>.checkbox{fill:var(--highcontrast-option-color-focus,var(--luzmo-options-checkbox-icon-color-down,var(--options-checkbox-icon-color-down)));color:var(--highcontrast-option-color-focus,var(--luzmo-options-checkbox-icon-color-down,var(--options-checkbox-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}:host([disabled]) #label,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-option-color-disabled,var(--luzmo-option-label-content-color-disabled,var(--option-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-option-color-disabled,var(--luzmo-option-description-color-disabled,var(--option-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled,var(--luzmo-option-label-icon-color-disabled,var(--option-label-icon-color-disabled)));fill:var(--highcontrast-option-color-disabled,var(--luzmo-option-label-icon-color-disabled,var(--option-label-icon-color-disabled)))}:host([focused]){box-shadow:inset calc(var(--luzmo-option-focus-indicator-width,var(--option-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-option-focus-indicator-color,var(--luzmo-option-focus-indicator-color,var(--option-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-option-focus-indicator-width,var(--option-focus-indicator-width)) * var(--option-focus-indicator-direction-scalar,1)) 0 0 0 var(--highcontrast-option-focus-indicator-color,var(--luzmo-option-focus-indicator-color,var(--option-focus-indicator-color)))}#label{font-size:var(--luzmo-option-label-font-size,var(--option-label-font-size));color:var(--highcontrast-option-color-default,var(--luzmo-option-label-content-color-default,var(--option-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}:host([variant=highlight][selected]){background-color:var(--luzmo-option-highlight-selected-label-background-color,var(--option-highlight-selected-label-background-color))}:host([variant=highlight][selected]) #label{color:var(--luzmo-option-highlight-selected-label-content-color,var(--option-highlight-selected-label-content-color))}:host([variant=highlight][selected]) [name=description]::slotted(*){color:var(--luzmo-option-highlight-selected-description-color,var(--option-highlight-selected-label-content-color))}:host([variant=highlight][selected]):hover #label{color:var(--luzmo-option-highlight-selected-label-content-color-hover,var(--option-highlight-selected-label-content-color-hover))}:host([variant=highlight][selected]):hover [name=description]::slotted(*){color:var(--luzmo-option-highlight-selected-description-color-hover,var(--option-highlight-selected-label-content-color-hover))}:host([variant=highlight][selected]):active #label{color:var(--luzmo-option-highlight-selected-label-content-color-down,var(--option-highlight-selected-label-content-color-down))}:host([variant=highlight][selected]):active [name=description]::slotted(*){color:var(--luzmo-option-highlight-selected-description-color-down,var(--option-highlight-selected-label-content-color-down))}:host([variant=highlight][selected]):focus #label{color:var(--luzmo-option-highlight-selected-label-content-color-focus,var(--option-highlight-selected-label-content-color-focus))}:host([variant=highlight][selected]):focus [name=description]::slotted(*){color:var(--luzmo-option-highlight-selected-description-color-focus,var(--option-highlight-selected-label-content-color-focus))}:host([variant=highlight][selected]) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled,var(--luzmo-option-highlight-selected-label-content-color,var(--option-highlight-selected-label-content-color)));fill:var(--highcontrast-option-color-disabled,var(--luzmo-option-highlight-selected-label-content-color,var(--option-highlight-selected-label-content-color)))}::slotted([slot=value]){color:var(--highcontrast-option-color-default,var(--luzmo-option-value-color-default,var(--option-value-color-default)));font-size:var(--luzmo-option-label-font-size,var(--option-label-font-size));grid-area:valueArea;justify-self:end}[name=description]::slotted(*){color:var(--highcontrast-option-color-default,var(--luzmo-option-description-color-default,var(--option-description-color-default)));font-size:var(--luzmo-option-description-font-size,var(--option-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-option-description-line-height,var(--option-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-option-label-to-description-spacing,var(--option-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([expandable]){cursor:pointer}:host([expandable][has-selected-child][variant=highlight]:not([expanded])){background-color:color-mix(in srgb, var(--luzmo-option-highlight-selected-label-background-color,var(--option-highlight-selected-label-background-color)) 12%, transparent)}:host([expandable])>.checkmark{color:color-mix(in srgb, var(--highcontrast-options-checkmark-icon-color-default,var(--luzmo-options-checkmark-icon-color-default,var(--options-checkmark-icon-color-default))) 50%, transparent);fill:color-mix(in srgb, var(--highcontrast-options-checkmark-icon-color-default,var(--luzmo-options-checkmark-icon-color-default,var(--options-checkmark-icon-color-default))) 50%, transparent)}:host([expandable])>.checkbox{color:color-mix(in srgb, var(--highcontrast-options-checkbox-icon-color-default,var(--luzmo-options-checkbox-icon-color-default,var(--options-checkbox-icon-color-default))) 50%, transparent);fill:color-mix(in srgb, var(--highcontrast-options-checkbox-icon-color-default,var(--luzmo-options-checkbox-icon-color-default,var(--options-checkbox-icon-color-default))) 50%, transparent)}:host([expandable][has-selected-child])>.checkmark{color:color-mix(in srgb, var(--highcontrast-options-checkmark-icon-color-default,var(--luzmo-options-checkmark-icon-color-default,var(--options-checkmark-icon-color-default))) 50%, transparent);fill:color-mix(in srgb, var(--highcontrast-options-checkmark-icon-color-default,var(--luzmo-options-checkmark-icon-color-default,var(--options-checkmark-icon-color-default))) 50%, transparent)}:host([expandable][has-selected-child])>.checkbox{color:color-mix(in srgb, var(--highcontrast-options-checkbox-icon-color-default,var(--luzmo-options-checkbox-icon-color-default,var(--options-checkbox-icon-color-default))) 50%, transparent);fill:color-mix(in srgb, var(--highcontrast-options-checkbox-icon-color-default,var(--luzmo-options-checkbox-icon-color-default,var(--options-checkbox-icon-color-default))) 50%, transparent)}:host([child-option]){padding-inline-start:calc(var(--luzmo-option-label-inline-edge-to-content,var(--option-label-inline-edge-to-content)) + 24px)}@media (hover:hover){:host(:hover){background-color:var(--highcontrast-option-background-color-focus,var(--luzmo-option-background-color-hover,var(--option-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-option-color-focus,var(--luzmo-option-label-content-color-hover,var(--option-label-content-color-hover)))}:host([variant=highlight][selected]:hover)>#label{color:var(--luzmo-option-highlight-selected-label-content-color-hover,var(--option-highlight-selected-label-content-color-hover))}:host([variant=highlight][selected]:hover)>[name=description]::slotted(*){color:var(--luzmo-option-highlight-selected-description-color-hover,var(--option-highlight-selected-label-content-color-hover))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus,var(--luzmo-option-description-color-hover,var(--option-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-option-color-focus,var(--luzmo-option-value-color-hover,var(--option-value-color-hover)))}:host(:hover)>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus,var(--luzmo-option-label-icon-color-hover,var(--option-label-icon-color-hover)));color:var(--highcontrast-option-color-focus,var(--luzmo-option-label-icon-color-hover,var(--option-label-icon-color-hover)))}:host([variant=highlight][selected]:hover)>.icon:not(.checkmark,.checkbox){fill:var(--luzmo-option-highlight-selected-label-icon-color-hover,var(--option-highlight-selected-label-icon-color-hover))}:host(:hover)>.checkmark{fill:var(--highcontrast-option-color-focus,var(--luzmo-options-checkmark-icon-color-hover,var(--options-checkmark-icon-color-hover)));color:var(--highcontrast-option-color-focus,var(--luzmo-options-checkmark-icon-color-hover,var(--options-checkmark-icon-color-hover)))}:host(:hover)>.checkbox{fill:var(--highcontrast-option-color-focus,var(--luzmo-options-checkbox-icon-color-hover,var(--options-checkbox-icon-color-hover)));color:var(--highcontrast-option-color-focus,var(--luzmo-options-checkbox-icon-color-hover,var(--options-checkbox-icon-color-hover)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}:host([disabled]:hover) #label,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-option-color-disabled,var(--luzmo-option-label-content-color-disabled,var(--option-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-option-color-disabled,var(--luzmo-option-description-color-disabled,var(--option-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled,var(--luzmo-option-label-icon-color-disabled,var(--option-label-icon-color-disabled)));fill:var(--highcontrast-option-color-disabled,var(--luzmo-option-label-icon-color-disabled,var(--option-label-icon-color-disabled)))}}:host([emphasized]){--options-checkmark-icon-color-default:var(--luzmo-primary);--options-checkmark-icon-color-hover:var(--luzmo-primary-hover);--options-checkmark-icon-color-down:var(--luzmo-primary-down);--options-checkmark-icon-color-focus:var(--luzmo-primary-focus);--options-checkbox-icon-color-default:var(--luzmo-primary);--options-checkbox-icon-color-hover:var(--luzmo-primary-hover);--options-checkbox-icon-color-down:var(--luzmo-primary-down);--options-checkbox-icon-color-focus:var(--luzmo-primary-focus)}:host{text-align:initial;font-family:var(--luzmo-option-font-family,var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-option-label-icon-color-disabled,var(--luzmo-disabled-color))}#button{position:absolute;inset:0}.icon-container>svg{vertical-align:top}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors:active){:host{forced-color-adjust:none}}:host([no-wrap]) #label{display:block}", T = (e) => l`
+  <span class="icon-container icon checkmark ${e.join(" ")}">
+    ${b(_)}
+  </span>
+`, E = (e) => l`
+  <span class="icon-container icon checkbox ${e.join(" ")}">
+    ${b(v)}
+  </span>
+`, D = (e) => l`
+  <span class="icon-container icon checkbox ${e.join(" ")}">
+    ${b(y)}
+  </span>
+`, O = class extends i(a(s(r, "[slot=\"icon\"]"))) {
+	static get styles() {
+		return [d(w)];
+	}
+	get value() {
+		return this._value || this.itemText;
+	}
+	set value(e) {
+		e !== this._value && (this._value = e || "", this._value ? this.setAttribute("value", this._value) : this.removeAttribute("value"));
+	}
+	get itemText() {
+		return this.itemChildren.content.reduce((e, t) => e + (t.textContent || "").trim(), "");
+	}
+	get focusElement() {
+		return this;
+	}
+	get hasIcon() {
+		return this.slotContentIsPresent;
+	}
+	get itemChildren() {
+		if (!this.iconSlot || !this.contentSlot) return {
+			icon: [],
+			content: []
+		};
+		if (this._itemChildren) return this._itemChildren;
+		let e = this.iconSlot.assignedElements().map((e) => {
+			let t = e.cloneNode(!0);
+			return t.removeAttribute("slot"), t.classList.toggle("icon"), t;
+		}), t = this.contentSlot.assignedNodes().map((e) => e.cloneNode(!0));
+		return this._itemChildren = {
+			icon: e,
+			content: t
+		}, this._itemChildren;
+	}
+	constructor() {
+		super(), this.active = !1, this.focused = !1, this.selected = !1, this.emphasized = !1, this.expandable = !1, this.expanded = !1, this.childOption = !1, this.hasSelectedChild = !1, this.variant = "checkmarks", this._value = "", this.noWrap = !1, this.renderCheckIcon = (e, t) => {
+			let n = t ? ["check-icon--with-adjacent-icon"] : [];
+			return this.variant === "checkboxes" ? e ? D(n) : E(n) : e && this.variant !== "highlight" ? T(n) : l``;
+		}, this.proxyFocus = () => {
+			this.focus();
+		}, this.willDispatchUpdate = !1, this.addEventListener("click", this.handleClickCapture, { capture: !0 }), new x(this, {
+			config: {
+				characterData: !0,
+				childList: !0,
+				subtree: !0
+			},
+			callback: () => {
+				this.breakItemChildrenCache();
+			}
+		});
+	}
+	click() {
+		this.disabled || this.shouldProxyClick() || super.click();
+	}
+	handleClickCapture(e) {
+		if (this.disabled) return e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation(), !1;
+	}
+	shouldProxyClick() {
+		let e = !1;
+		return this.anchorElement && (this.anchorElement.click(), e = !0), e;
+	}
+	breakItemChildrenCache() {
+		this._itemChildren = void 0, this.triggerUpdate();
+	}
+	render() {
+		return l`
+      ${this.renderCheckIcon(this.selected || this.hasSelectedChild, this.hasIcon)}
+      <div id="icon">
+        <slot name="icon"></slot>
+      </div>
+      <div id="label">
+        <slot id="slot"></slot>
+      </div>
+      <slot name="description"></slot>
+      <slot name="value"></slot>
+      ${this.href && this.href.length > 0 ? super.renderAnchor({
+			id: "button",
+			ariaHidden: !0,
+			className: "button anchor hidden"
+		}) : u}
+    `;
+	}
+	handlePointerdown() {}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.setAttribute("tabindex", "-1"), this.addEventListener("pointerdown", this.handlePointerdown), this.hasAttribute("id") || (this.id = `luzmo-option-${o()}`);
+	}
+	updateAriaSelected() {
+		let e = this.getAttribute("role");
+		e === "option" ? this.setAttribute("aria-selected", this.selected ? "true" : "false") : e === "optioncheckbox" && this.setAttribute("aria-checked", this.selected ? "true" : "false");
+	}
+	setRole(e) {
+		this.setAttribute("role", e), this.updateAriaSelected();
+	}
+	updated(e) {
+		super.updated(e), e.has("label") && (this.label || e.get("label") !== void 0) && this.setAttribute("aria-label", this.label || ""), this.anchorElement && (this.anchorElement.addEventListener("focus", this.proxyFocus), this.anchorElement.tabIndex = -1), e.has("selected") && this.updateAriaSelected();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.triggerUpdate();
+	}
+	async triggerUpdate() {
+		this.willDispatchUpdate || (this.willDispatchUpdate = !0, await new Promise((e) => requestAnimationFrame(e)), this.dispatchUpdate());
+	}
+	dispatchUpdate() {
+		this.isConnected && (this.willDispatchUpdate = !1);
+	}
+};
+t([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "active", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "focused", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "selected", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "emphasized", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "expandable", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "expanded", void 0), t([f({
+	type: Boolean,
+	reflect: !0,
+	attribute: "child-option"
+})], O.prototype, "childOption", void 0), t([f({
+	type: Boolean,
+	reflect: !0,
+	attribute: "has-selected-child"
+})], O.prototype, "hasSelectedChild", void 0), t([f({
+	type: String,
+	reflect: !0
+})], O.prototype, "variant", void 0), t([f({ type: String })], O.prototype, "value", null), t([p("slot:not([name])")], O.prototype, "contentSlot", void 0), t([p("slot[name=\"icon\"]")], O.prototype, "iconSlot", void 0), t([f({
+	type: Boolean,
+	reflect: !0,
+	attribute: "no-wrap",
+	hasChanged() {
+		return !1;
+	}
+})], O.prototype, "noWrap", void 0), t([p(".anchor")], O.prototype, "anchorElement", void 0);
+//#endregion
+//#region src/components/options/options-divider.module.scss?inline
+var k = ":host{--options-divider-thickness:var(--divider-thickness-medium,var(--luzmo-border-width));inline-size:auto;margin-block:var(--luzmo-options-section-divider-margin-block,max(0px, (var(--option-section-divider-height) - var(--options-divider-thickness)) / 2));margin-inline:var(--luzmo-option-label-inline-edge-to-content,var(--option-label-inline-edge-to-content));flex-shrink:0;display:block;overflow:visible}", A = class extends n(e, { validSizes: [
+	"s",
+	"m",
+	"l"
+] }) {
+	static get styles() {
+		return [d(c), d(k)];
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.hasAttribute("role") || this.setAttribute("role", "separator");
+	}
+}, j = ":host{--option-top-to-action:var(--luzmo-spacing-1);--option-top-to-checkbox:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--option-label-line-height:var(--luzmo-line-height);--option-label-line-height-cjk:1.5;--option-label-to-description-spacing:1px;--option-focus-indicator-width:var(--luzmo-indicator-width);--option-focus-indicator-color:var(--luzmo-indicator-color);--option-label-to-value-area-min-spacing:var(--luzmo-spacing-3);--option-label-content-color-default:var(--luzmo-font-color);--option-label-content-color-hover:var(--luzmo-font-color-hover);--option-label-content-color-down:var(--luzmo-font-color-down);--option-label-content-color-focus:var(--luzmo-font-color-focus);--option-label-icon-color-default:var(--luzmo-font-color);--option-label-icon-color-hover:var(--luzmo-font-color-hover);--option-label-icon-color-down:var(--luzmo-font-color-down);--option-label-icon-color-focus:var(--luzmo-font-color-focus);--option-highlight-selected-label-background-color:var(--luzmo-primary);--option-highlight-selected-label-content-color:var(--luzmo-primary-inverse-color);--option-highlight-selected-label-content-color-hover:var(--luzmo-primary-inverse-color);--option-highlight-selected-label-content-color-down:var(--luzmo-primary-inverse-color);--option-highlight-selected-label-content-color-focus:var(--luzmo-primary-inverse-color);--option-label-content-color-disabled:var(--luzmo-font-color-disabled);--option-label-icon-color-disabled:var(--luzmo-font-color-disabled);--option-description-line-height:var(--luzmo-line-height);--option-description-line-height-cjk:1.5;--option-description-color-default:var(--luzmo-font-color);--option-description-color-hover:var(--luzmo-font-color-hover);--option-description-color-down:var(--luzmo-font-color-down);--option-description-color-focus:var(--luzmo-font-color-focus);--option-description-color-disabled:var(--luzmo-disabled-color);--options-section-header-line-height:var(--luzmo-line-height);--options-section-header-line-height-cjk:1.5;--options-section-header-font-weight:bold;--options-section-header-color:var(--luzmo-font-color-down);--options-collapsible-icon-color:var(--luzmo-font-color-down);--options-checkmark-icon-color-default:var(--luzmo-font-color);--options-checkmark-icon-color-hover:var(--luzmo-font-color-hover);--options-checkmark-icon-color-down:var(--luzmo-font-color-down);--options-checkmark-icon-color-focus:var(--luzmo-font-color-focus);--options-checkbox-icon-color-default:var(--luzmo-font-color);--options-checkbox-icon-color-hover:var(--luzmo-font-color-hover);--options-checkbox-icon-color-down:var(--luzmo-font-color-down);--options-checkbox-icon-color-focus:var(--luzmo-font-color-focus);--options-drillin-icon-color-default:var(--luzmo-font-color);--options-drillin-icon-color-hover:var(--luzmo-font-color-hover);--options-drillin-icon-color-down:var(--luzmo-font-color-down);--options-drillin-icon-color-focus:var(--luzmo-font-color-focus);--option-value-color-default:var(--luzmo-font-color);--option-value-color-hover:var(--luzmo-font-color-hover);--option-value-color-down:var(--luzmo-font-color-down);--option-value-color-focus:var(--luzmo-font-color-focus);--option-collapsible-no-icon-suboption-padding-x-start:28px;--option-background-color-selected:var(--luzmo-background-color);--option-background-color-default:var(--luzmo-background-color);--option-background-color-hover:var(--luzmo-background-color-hover);--option-background-color-down:var(--luzmo-background-color-down);--option-background-color-key-focus:var(--luzmo-background-color-focus);--options-scrollbar-width:var(--luzmo-scrollbar-size);--options-scrollbar-track-background:var(--luzmo-scrollbar-track-background);--options-scrollbar-track-border-radius:var(--luzmo-scrollbar-track-border-radius);--options-scrollbar-thumb-background:var(--luzmo-scrollbar-thumb-background);--options-scrollbar-thumb-border-radius:var(--luzmo-scrollbar-thumb-border-radius);--options-scrollbar-thumb-hover-background:var(--luzmo-scrollbar-thumb-hover-background);--luzmo-option-thumbnail-border-radius:var(--luzmo-border-radius-s,4px);--luzmo-option-thumbnail-border-width:1px;--luzmo-option-thumbnail-border-style:solid;--luzmo-option-thumbnail-border-color:var(--luzmo-border-color-full,var(--luzmo-border-color,#0000001f));--option-min-height:var(--luzmo-component-height);--options-max-height:calc(8 * var(--option-min-height));--option-icon-container-height:18px;--options-pending-height:var(--option-min-height);--progress-circle-size:calc(var(--options-pending-height) - var(--option-top-edge-to-text) - var(--option-bottom-edge-to-text));--option-icon-height:var(--luzmo-font-size);--option-icon-width:var(--luzmo-font-size);--option-label-font-size:var(--luzmo-font-size);--option-label-text-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--option-label-text-to-control:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--option-label-inline-edge-to-content:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--pending-inline-edge-to-content:var(--option-label-inline-edge-to-content);--option-top-edge-to-text:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--option-bottom-edge-to-text:var(--luzmo-spacing-3);--option-description-font-size:var(--luzmo-font-size-xs);--options-section-header-font-size:var(--luzmo-font-size);--options-section-header-min-width:var(--luzmo-component-height);--option-selectable-edge-to-text-not-selected:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--option-checkmark-size:var(--luzmo-font-size-xs);--option-checkbox-size:var(--luzmo-font-size-xs);--option-top-to-checkmark:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]){--option-min-height:var(--luzmo-component-height-s);--option-icon-container-height:17px;--option-icon-height:var(--luzmo-font-size-s);--option-icon-width:var(--luzmo-font-size-s);--option-label-font-size:var(--luzmo-font-size-s);--option-label-text-to-visual:var(--luzmo-spacing-3);--option-label-text-to-control:var(--luzmo-spacing-3);--option-label-inline-edge-to-content:var(--luzmo-spacing-3);--option-top-edge-to-text:calc(var(--luzmo-spacing-1) + var(--luzmo-spacing-2));--option-bottom-edge-to-text:var(--luzmo-spacing-2);--option-description-font-size:var(--luzmo-font-size-xs);--options-section-header-font-size:var(--luzmo-font-size-s);--options-section-header-min-width:var(--luzmo-component-height-s);--option-selectable-edge-to-text-not-selected:var(--luzmo-spacing-3);--option-checkmark-size:var(--luzmo-font-size-xs);--option-checkbox-size:var(--luzmo-font-size-xs);--option-top-to-checkmark:var(--luzmo-spacing-3);--option-top-to-checkbox:var(--luzmo-spacing-3)}:host([size=l]){--option-min-height:var(--luzmo-component-height-l);--option-icon-container-height:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--option-icon-height:var(--luzmo-font-size-l);--option-icon-width:var(--luzmo-font-size-l);--option-label-font-size:var(--luzmo-font-size-l);--option-label-text-to-visual:var(--luzmo-spacing-4);--option-label-text-to-control:var(--luzmo-spacing-4);--option-label-inline-edge-to-content:var(--luzmo-spacing-4);--option-top-edge-to-text:var(--luzmo-spacing-4);--option-bottom-edge-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--option-description-font-size:var(--luzmo-font-size-s);--options-section-header-font-size:var(--luzmo-font-size-l);--options-section-header-min-width:var(--luzmo-component-height-l);--option-selectable-edge-to-text-not-selected:var(--luzmo-spacing-4);--option-checkmark-size:var(--luzmo-font-size-s);--option-checkbox-size:var(--luzmo-font-size-s);--option-top-to-checkmark:var(--luzmo-spacing-4);--option-top-to-checkbox:var(--luzmo-spacing-4)}:host([size=xl]){--option-min-height:var(--luzmo-component-height-xl);--option-icon-container-height:26px;--option-icon-height:var(--luzmo-font-size-xl);--option-icon-width:var(--luzmo-font-size-xl);--option-label-font-size:var(--luzmo-font-size-xl);--option-label-text-to-visual:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--option-label-text-to-control:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--option-label-inline-edge-to-content:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--option-top-edge-to-text:var(--luzmo-spacing-4);--option-bottom-edge-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--option-description-font-size:var(--luzmo-font-size);--options-section-header-font-size:var(--luzmo-font-size-xl);--options-section-header-min-width:var(--luzmo-component-height-xl);--option-selectable-edge-to-text-not-selected:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--option-checkmark-size:var(--luzmo-font-size);--option-checkbox-size:var(--luzmo-font-size);--option-top-to-checkmark:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--option-top-to-checkbox:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1))}@media (forced-colors:active){:host{--highcontrast-option-background-color-default:ButtonFace;--highcontrast-option-color-default:ButtonText;--highcontrast-option-background-color-focus:Highlight;--highcontrast-option-color-focus:HighlightText;--highcontrast-options-checkmark-icon-color-default:Highlight;--highcontrast-options-checkbox-icon-color-default:Highlight;--highcontrast-option-color-disabled:GrayText;--highcontrast-option-focus-indicator-color:Highlight;--highcontrast-option-selected-background-color:Highlight;--highcontrast-option-selected-color:HighlightText}@supports (color:SelectedItem){:host{--highcontrast-option-selected-background-color:SelectedItem;--highcontrast-option-selected-color:SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-options-inline-size,auto);box-sizing:border-box;max-height:var(--luzmo-options-max-height,var(--options-max-height));margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host::-webkit-scrollbar{width:var(--luzmo-options-scrollbar-width,var(--options-scrollbar-width))}:host::-webkit-scrollbar-track{background:var(--luzmo-options-scrollbar-track-background,var(--options-scrollbar-track-background));border-radius:var(--luzmo-options-scrollbar-track-border-radius,var(--options-scrollbar-track-border-radius))}:host::-webkit-scrollbar-thumb{background:var(--luzmo-options-scrollbar-thumb-background,var(--options-scrollbar-thumb-background));border-radius:var(--luzmo-options-scrollbar-thumb-border-radius,var(--options-scrollbar-thumb-border-radius))}:host::-webkit-scrollbar-thumb:hover{background:var(--luzmo-options-scrollbar-thumb-hover-background,var(--options-scrollbar-thumb-hover-background))}:host{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-options-scrollbar-thumb-background,var(--options-scrollbar-thumb-background)) var(--luzmo-options-scrollbar-track-background,var(--options-scrollbar-track-background))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--option-label-line-height:var(--luzmo-option-label-line-height-cjk,var(--option-label-line-height-cjk));--option-description-line-height:var(--luzmo-option-description-line-height-cjk,var(--option-description-line-height-cjk));--options-section-header-line-height:var(--luzmo-options-section-header-line-height-cjk,var(--options-section-header-line-height-cjk))}luzmo-option{width:100%}#pending{height:var(--options-pending-height);padding-inline:var(--pending-inline-edge-to-content);flex-shrink:0;align-items:center;display:flex}:host{flex-direction:column;width:100%;display:inline-flex}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";
+//#endregion
+//#region src/components/options/options.ts
+customElements.get("lit-virtualizer") || customElements.define("lit-virtualizer", S);
+var M = (e) => l`
+  <luzmo-icon
+    block
+    .icon=${g}
+    style="transition: transform var(--luzmo-animation-duration, 130ms) ease; transform: rotate(${e ? "90deg" : "0deg"})"
+  ></luzmo-icon>
+`, N = 25;
+function P(e, t) {
+	return !!t && (e === t || e.contains(t));
+}
+var F = class extends n(e, { noDefaultSize: !0 }) {
+	static get styles() {
+		return [d(j)];
+	}
+	get _flattenedOptions() {
+		let e = [];
+		for (let t of this.options) if (e.push(t), t.children?.length && t.value !== void 0 && this._expandedValues.has(t.value)) for (let n of t.children) e.push({
+			...n,
+			_isChild: !0,
+			_parentValue: t.value
+		});
+		return e;
+	}
+	get _flatVirtualizeActive() {
+		let e = this.options.length;
+		for (let t of this.options) t.children?.length && (e += t.children.length);
+		return e > 25;
+	}
+	toggleExpand(e) {
+		let t = e.value;
+		if (t === void 0) return;
+		let n = new Set(this._expandedValues);
+		n.has(t) ? n.delete(t) : n.add(t), this._expandedValues = n;
+	}
+	constructor() {
+		super(), this.label = "", this.variant = "highlight", this.selects = "single", this.emphasized = !1, this.pending = !1, this.options = [], this.value = [], this.focusedOptionIndex = 0, this._selectedOptions = [], this._firstVisibleIndex = 0, this._expandedValues = /* @__PURE__ */ new Set(), this.addEventListener("focusin", this.handleFocusin), this.addEventListener("blur", this.handleBlur);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.hasAttribute("tabindex") || (this.tabIndex = 0);
+		let t = [new Promise((e) => requestAnimationFrame(() => e(!0)))];
+		[...this.children].forEach((e) => {
+			e.localName === "luzmo-option" && t.push(e.updateComplete);
+		}), this.optionElementsUpdated = Promise.all(t);
+	}
+	willUpdate(e) {
+		e.has("selects") && this.selects === "single" && this.value?.length > 1 && (this.value = this.value.slice(0, 1));
+	}
+	updated(e) {
+		super.updated(e), e.has("label") && (this.label || e.get("label") !== void 0) && (this.label ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label")), e.has("pending") && (this.pending ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy"));
+	}
+	async getUpdateComplete() {
+		let e = await super.getUpdateComplete();
+		return await this.optionElementsUpdated, e;
+	}
+	focus({ preventScroll: e } = {}) {
+		super.focus({ preventScroll: e }), this.focusOptionByOffset(0);
+	}
+	_removeFocusedPropertyOnOptions() {
+		requestAnimationFrame(() => {
+			this.visibleOptionElements.forEach((e) => {
+				e.focused = !1;
+			});
+		});
+	}
+	scrollToTop() {
+		this.scrollTop = 0;
+	}
+	handleFocusin() {
+		this.startListeningToKeyboard();
+	}
+	handleBlur(e) {
+		P(this, e.relatedTarget) || (this.stopListeningToKeyboard(), this._removeFocusedPropertyOnOptions(), this.removeAttribute("aria-activedescendant"));
+	}
+	startListeningToKeyboard() {
+		this.addEventListener("keydown", this.handleKeydown);
+	}
+	stopListeningToKeyboard() {
+		this.removeEventListener("keydown", this.handleKeydown);
+	}
+	handleKeydown(e) {
+		if (e.defaultPrevented) return;
+		let t = this._flattenedOptions, n = this.focusedOptionIndex, r = [...this.visibleOptionElements].find((e) => e.value?.toString() === t?.[n]?.value?.toString()), { key: i } = e;
+		if (i === "Tab") {
+			this.prepareToCleanUp();
+			return;
+		}
+		if (i === " " || i === "Enter") {
+			e.preventDefault();
+			let i = t?.[n];
+			r && i && (i.children?.length ? this.toggleExpand(i) : this.toggleOption(e, i));
+			return;
+		}
+		if (i === "ArrowDown" || i === "ArrowUp") {
+			e.preventDefault(), this.navigateWithinOptions(e, r);
+			return;
+		}
+	}
+	navigateWithinOptions(e, t) {
+		let { key: n } = e, r = n === "ArrowDown" ? 1 : -1;
+		e.preventDefault(), e.stopPropagation();
+		let i = this.focusOptionByOffset(r, t, !0);
+		i !== t && (this._flatVirtualizeActive || i?.scrollIntoView({ block: "nearest" }));
+	}
+	focusOptionByOffset(e, t, n) {
+		let r = this._flattenedOptions, i = e || 1;
+		t && (t.focused = !1);
+		let a = this.focusedOptionIndex;
+		this.focusedOptionIndex = r.length > 0 ? (r.length + this.focusedOptionIndex + e) % r.length : 0;
+		let o = r[this.focusedOptionIndex], s = r.length;
+		for (; (o?.disabled || o?.divider) && s;) --s, this.focusedOptionIndex = (r.length + this.focusedOptionIndex + i) % r.length, o = r[this.focusedOptionIndex];
+		let c = a < this.focusedOptionIndex && e === -1, l = a > this.focusedOptionIndex && e === 1;
+		(c || l) && (this.focusedOptionIndex = a, this.dispatchEvent(new Event(`luzmo-exceeded-${c ? "top" : "bottom"}`, {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		})));
+		let u;
+		return n && this._flatVirtualizeActive && (u = [...this.visibleOptionElements].find((e) => e.value?.toString() === r[this.focusedOptionIndex]?.value?.toString()), u || (this.focusedOptionIndex = this._firstVisibleIndex)), this._flatVirtualizeActive && n && this.virtualizer.element(this.focusedOptionIndex)?.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest"
+		}), u ??= [...this.visibleOptionElements].find((e) => (e.value === null ? null : e.value?.toString()) === (r[this.focusedOptionIndex]?.value === null ? r[this.focusedOptionIndex]?.value : r[this.focusedOptionIndex]?.value?.toString())), o?.disabled || this.setFocusedAndActiveDescendant(u), u;
+	}
+	updateSelectedItemIndex() {
+		this.focusedOptionIndex = this._flatVirtualizeActive ? this._firstVisibleIndex : 0;
+	}
+	setSelectedOptionsFromValue() {
+		this._selectedOptions = this.options.filter((e) => Array.isArray(this.value) && this.value?.includes(e?.value ?? null));
+	}
+	visibilityChanged(e) {
+		this._firstVisibleIndex = e?.first ?? 0;
+	}
+	rangeChange(e) {
+		e.stopPropagation(), e.preventDefault(), e?.first !== -1 && e?.last !== -1 && this.dispatchEvent(new CustomEvent("luzmo-scrolled", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: {
+				first: e.first,
+				last: e.last
+			}
+		}));
+	}
+	async toggleOption(e, t) {
+		let n = e instanceof KeyboardEvent, r = this._flattenedOptions.findIndex((e) => e?.value === t?.value);
+		this.focusedOptionIndex = r, this.visibleOptionElements.forEach((e) => {
+			if (n) {
+				let n = (e?.value === null ? null : e.value?.toString()) === (t?.value === null ? null : t?.value?.toString());
+				e.focused = n, n && this.setFocusedAndActiveDescendant(e);
+			} else e.focused = !1;
+		});
+		let i = Array.isArray(this.value) && this.value?.includes(t?.value ?? null);
+		this.selects === "single" ? (this.value = [t?.value], this._selectedOptions = [t]) : (this.value = i ? this.value.filter((e) => e !== t?.value) : [...this.value ?? [], t?.value], this._selectedOptions = i ? this._selectedOptions.filter((e) => e.value !== t.value) : [...this._selectedOptions, t]), await this.updateComplete, this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0,
+			detail: { value: this.value ?? [] }
+		})), this.prepareToCleanUp();
+	}
+	handleOptionClick(e, t) {
+		this.toggleOption(t, e);
+	}
+	handleExpandClick(e) {
+		this.toggleExpand(e);
+	}
+	render() {
+		let e = (e) => l`<luzmo-icon
+        slot="icon"
+        .icon=${e}
+        .size=${this.size}
+      ></luzmo-icon>`, t = (e) => l`<span slot="description">${e}</span>`, n = (e) => l`<luzmo-icon
+        slot="icon"
+        data-option-thumbnail
+        .src=${e}
+        .size=${this.size}
+      ></luzmo-icon>`, r = (r) => {
+			let i = r?.value, a = r?.label, o = r?.description, s = r?.icon, c = r?.imgSrc, d = r?.divider, f = typeof r == "string" ? void 0 : r?.disabled, p = !!(r.children && r.children.length > 0), m = !!r._isChild, h = p && i !== void 0 && this._expandedValues.has(i);
+			if (d) return l`<luzmo-options-divider
+          role="presentation"
+        ></luzmo-options-divider>`;
+			let g = this.optionIconRenderer?.(r, { size: this.size ?? "m" }) ?? (s ? e(s) : c ? n(c) : u);
+			if (p) {
+				let e = Array.isArray(this.value) && r.children.some((e) => this.value.includes(e.value));
+				return l`<luzmo-option
+          .value=${i}
+          .size=${this.size}
+          .variant=${this.variant}
+          ?emphasized=${this.emphasized}
+          ?no-wrap=${this.noWrap}
+          ?disabled=${f}
+          expandable
+          ?expanded=${h}
+          ?has-selected-child=${e}
+          .selected=${!1}
+          role="option"
+          aria-expanded=${h ? "true" : "false"}
+          @click=${(e) => {
+					e.stopPropagation(), this.handleExpandClick(r);
+				}}
+        >
+          ${g} ${a}
+          ${o ? t(o) : u}
+          <span slot="value">${M(h)}</span>
+        </luzmo-option>`;
+			}
+			return l`<luzmo-option
+        .value=${i}
+        .size=${this.size}
+        .variant=${this.variant}
+        ?emphasized=${this.emphasized}
+        ?no-wrap=${this.noWrap}
+        ?disabled=${f}
+        ?child-option=${m}
+        .selected=${Array.isArray(this.value) ? this.value?.includes(i) : !1}
+        .role=${this.selects === "single" ? "option" : "optioncheckbox"}
+        @click=${this.handleOptionClick.bind(this, r)}
+      >
+        ${g} ${a}
+        ${o ? t(o) : u}
+      </luzmo-option>`;
+		}, i = this._flattenedOptions;
+		return l`${this._flatVirtualizeActive ? l`<lit-virtualizer
+          role="presentation"
+          .items=${i}
+          .renderItem=${r}
+          @rangeChanged=${this.rangeChange}
+          @visibilityChanged=${this.visibilityChanged}
+        ></lit-virtualizer>` : C(i, r)} ${this.pending ? l`<div id="pending" aria-hidden="true">
+          <luzmo-progress-circle
+            indeterminate
+            label="Loading"
+          ></luzmo-progress-circle>
+        </div>` : u}`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "listbox"), this.updateComplete.then(() => this.updateItemFocus());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+	}
+	prepareToCleanUp() {
+		document.addEventListener("focusout", () => {
+			requestAnimationFrame(() => {
+				this.updateSelectedItemIndex();
+			});
+		}, { once: !0 });
+	}
+	updateItemFocus() {
+		if (this.visibleOptionElements.length === 0) return;
+		let e = this._flattenedOptions, t = this.focusedOptionIndex, n = [...this.visibleOptionElements].find((n) => (n.value === null ? null : n.value?.toString()) === (e?.[t]?.value === null ? null : e?.[t]?.value?.toString()));
+		this.setFocusedAndActiveDescendant(n);
+	}
+	setFocusedAndActiveDescendant(e) {
+		if (!e) return;
+		let t = this.hasVisibleFocusInTree() || !!(this.visibleOptionElements?.some && this.visibleOptionElements?.some((e) => e.hasVisibleFocusInTree()));
+		e.focused = t, t && this.setAttribute("aria-activedescendant", e.id);
+	}
+};
+t([f({
+	type: String,
+	reflect: !0
+})], F.prototype, "label", void 0), t([f({
+	type: String,
+	reflect: !0
+})], F.prototype, "variant", void 0), t([f({
+	type: String,
+	reflect: !0
+})], F.prototype, "selects", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], F.prototype, "emphasized", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], F.prototype, "pending", void 0), t([f({ type: Array })], F.prototype, "options", void 0), t([f({
+	type: Boolean,
+	reflect: !0,
+	attribute: "no-wrap"
+})], F.prototype, "noWrap", void 0), t([f({ type: Array })], F.prototype, "value", void 0), t([f({ attribute: !1 })], F.prototype, "optionIconRenderer", void 0), t([p("lit-virtualizer")], F.prototype, "virtualizer", void 0), t([m("luzmo-option")], F.prototype, "visibleOptionElements", void 0), t([h()], F.prototype, "_expandedValues", void 0), customElements.get("luzmo-options") || customElements.define("luzmo-options", F), customElements.get("luzmo-options-divider") || customElements.define("luzmo-options-divider", A), customElements.get("luzmo-option") || customElements.define("luzmo-option", O);
+//#endregion
+export { O as i, N as n, A as r, F as t };

package/components/overlay/index.cjs

@@ -15,59 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../overlay-KSKMzzkh.cjs"),n=require("../base-CBCg3yyw.cjs"),p=require("../state-D8JEtYqe.cjs"),d=require("../query-BL-TJj7K.cjs"),f=require("../directive-C7oCP5Bh.cjs"),O=require("../async-directive-BX1T1e1_.cjs"),u=require("../slottable-request-event-BfUUt1Mh.cjs"),S=":host([disabled]) ::slotted([slot=trigger]){pointer-events:none}slot[name=longpress-describedby-descriptor]{display:none}";var $=Object.defineProperty,l=(h,e,r,t)=>{for(var i=void 0,a=h.length-1,c;a>=0;a--)(c=h[a])&&(i=c(e,r,i)||i);return i&&$(e,r,i),i};class o extends n.LuzmoElement{constructor(){super(...arguments),this.content="click hover longpress",this.offset=6,this.disabled=!1,this.receivesFocus="auto",this.clickContent=[],this.longpressContent=[],this.hoverContent=[],this.targetContent=[]}static get styles(){return[n.r(S)]}getAssignedElementsFromSlot(e){return e.assignedElements({flatten:!0})}handleTriggerContent(e){this.targetContent=this.getAssignedElementsFromSlot(e.target)}handleSlotContent(e){switch(e.target.name){case"click-content":{this.clickContent=this.getAssignedElementsFromSlot(e.target);break}case"longpress-content":{this.longpressContent=this.getAssignedElementsFromSlot(e.target);break}case"hover-content":{this.hoverContent=this.getAssignedElementsFromSlot(e.target);break}}}handleBeforetoggle(e){const{target:r}=e;let t;if(r===this.clickOverlayElement)t="click";else if(r===this.longpressOverlayElement)t="longpress";else if(r===this.hoverOverlayElement)t="hover";else return;e.newState==="open"?this.open=t:this.open===t&&(this.open=void 0)}update(e){var r,t,i,a,c,g;e.has("clickContent")&&(this.clickPlacement=((r=this.clickContent[0])==null?void 0:r.getAttribute("placement"))||((t=this.clickContent[0])==null?void 0:t.getAttribute("direction"))||void 0),e.has("hoverContent")&&(this.hoverPlacement=((i=this.hoverContent[0])==null?void 0:i.getAttribute("placement"))||((a=this.hoverContent[0])==null?void 0:a.getAttribute("direction"))||void 0),e.has("longpressContent")&&(this.longpressPlacement=((c=this.longpressContent[0])==null?void 0:c.getAttribute("placement"))||((g=this.longpressContent[0])==null?void 0:g.getAttribute("direction"))||void 0),super.update(e)}renderSlot(e){return n.x`
-      <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
-    `}renderClickOverlay(){var t;const e=this.renderSlot("click-content"),r=n.x`
-      <luzmo-overlay
-        id="click-overlay"
-        ?disabled=${this.disabled||this.clickContent.length===0}
-        ?open=${this.open==="click"&&this.clickContent.length>0}
-        .offset=${this.offset}
-        .placement=${this.clickPlacement||this.placement}
-        .triggerElement=${this.targetContent[0]}
-        .triggerInteraction=${"click"}
-        .type=${this.type==="modal"?"modal":"auto"}
-        @beforetoggle=${this.handleBeforetoggle}
-        .receivesFocus=${this.receivesFocus}
-      >
-        ${e}
-      </luzmo-overlay>
-    `;return(t=this.triggeredBy)!=null&&t.includes("click")?r:this.clickContent.length===0?e:r}renderHoverOverlay(){var t;const e=this.renderSlot("hover-content"),r=n.x`
-      <luzmo-overlay
-        id="hover-overlay"
-        ?open=${this.open==="hover"&&this.hoverContent.length>0}
-        ?disabled=${this.disabled||this.hoverContent.length===0||!!this.open&&this.open!=="hover"}
-        .offset=${this.offset}
-        .placement=${this.hoverPlacement||this.placement}
-        .triggerElement=${this.targetContent[0]}
-        .triggerInteraction=${"hover"}
-        .type=${"hint"}
-        @beforetoggle=${this.handleBeforetoggle}
-        .receivesFocus=${this.receivesFocus}
-      >
-        ${e}
-      </luzmo-overlay>
-    `;return(t=this.triggeredBy)!=null&&t.includes("hover")?r:this.hoverContent.length===0?e:r}renderLongpressOverlay(){var t;const e=this.renderSlot("longpress-content"),r=n.x`
-      <luzmo-overlay
-        id="longpress-overlay"
-        ?disabled=${this.disabled||this.longpressContent.length===0}
-        ?open=${this.open==="longpress"&&this.longpressContent.length>0}
-        .offset=${this.offset}
-        .placement=${this.longpressPlacement||this.placement}
-        .triggerElement=${this.targetContent[0]}
-        .triggerInteraction=${"longpress"}
-        .type=${"auto"}
-        @beforetoggle=${this.handleBeforetoggle}
-        .receivesFocus=${this.receivesFocus}
-      >
-        ${e}
-      </luzmo-overlay>
-      <slot name="longpress-describedby-descriptor"></slot>
-    `;return(t=this.triggeredBy)!=null&&t.includes("longpress")?r:this.longpressContent.length===0?e:r}render(){return n.x`
-      <slot
-        id="trigger"
-        name="trigger"
-        @slotchange=${this.handleTriggerContent}
-      ></slot>
-      ${[this.renderClickOverlay(),this.renderHoverOverlay(),this.renderLongpressOverlay()]}
-    `}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}}l([n.n()],o.prototype,"content");l([n.n({attribute:"triggered-by"})],o.prototype,"triggeredBy");l([n.n({reflect:!0})],o.prototype,"placement");l([n.n()],o.prototype,"type");l([n.n({type:Number})],o.prototype,"offset");l([n.n({reflect:!0})],o.prototype,"open");l([n.n({type:Boolean,reflect:!0})],o.prototype,"disabled");l([n.n({attribute:"receives-focus"})],o.prototype,"receivesFocus");l([p.r()],o.prototype,"clickContent");l([p.r()],o.prototype,"longpressContent");l([p.r()],o.prototype,"hoverContent");l([p.r()],o.prototype,"targetContent");l([d.e("#click-overlay",!0)],o.prototype,"clickOverlayElement");l([d.e("#longpress-overlay",!0)],o.prototype,"longpressOverlayElement");l([d.e("#hover-overlay",!0)],o.prototype,"hoverOverlayElement");function k(h,e,r,t){return s.LuzmoOverlay.open(h,e,r,t)}class v extends O.f{render(e){return n.E}update(e,[r]){this.template=r,this.target!==e.element&&(this.target=e.element,this.renderBefore=this.target.children[0]),this.listenerHost=this.target,this.init()}handleSlottableRequest(e){if(e.target!==e.currentTarget)return;const r=e.data===u.removeSlottableRequest;n.B(r?void 0:this.template(),this.target,{renderBefore:this.renderBefore})}init(){var r;(r=this.listeners)==null||r.abort(),this.listeners=new AbortController;const{signal:e}=this.listeners;this.listenerHost.addEventListener("slottable-request",t=>this.handleSlottableRequest(t),{signal:e})}disconnected(){var e;(e=this.listeners)==null||e.abort()}reconnected(){this.init()}}const E=f.e(v);class b extends v{constructor(){super(...arguments),this.defaultOptions={triggerInteraction:"click",overlayOptions:{type:"auto",offset:0}},this.options={...this.defaultOptions.overlayOptions}}render(e,r){return n.E}update(e,[r,t]){var g,y,m;this.options={...this.defaultOptions.overlayOptions,...t==null?void 0:t.overlayOptions},this.insertionOptions=t==null?void 0:t.insertionOptions,this.template=r,this.host=(g=e.options)==null?void 0:g.host;let i=!1;const a=(t==null?void 0:t.triggerInteraction)||this.defaultOptions.triggerInteraction,c=s.InteractionTypes[(y=this.strategy)==null?void 0:y.type]!==a;this.target!==e.element&&(this.target=e.element,i=!0),(i||c)&&((m=this.strategy)==null||m.abort(),this.strategy=new s.strategies[a](this.target,{isPersistent:!0,handleOverlayReady:C=>{this.listenerHost=this.overlay=C,this.init()}})),this.strategy.open=(t==null?void 0:t.open)??!1}handleSlottableRequest(e){var i,a;if(e.target!==e.currentTarget)return;const r=e.data===u.removeSlottableRequest,t={};if(this.host&&(t.host=this.host),n.B(r?void 0:this.template(),this.overlay,t),r)this.overlay.remove();else{s.LuzmoAbstractOverlay.applyOptions(this.overlay,{...this.options,trigger:this.target});const c=typeof((i=this.insertionOptions)==null?void 0:i.el)=="function"?this.insertionOptions.el():((a=this.insertionOptions)==null?void 0:a.el)||this.target,{where:g="afterend"}=this.insertionOptions||{};c.insertAdjacentElement(g,this.overlay)}}}const T=f.e(b);customElements.get("luzmo-overlay")||customElements.define("luzmo-overlay",s.LuzmoOverlay);customElements.get("luzmo-overlay-trigger")||customElements.define("luzmo-overlay-trigger",o);exports.ClickController=s.ClickController;exports.HoverController=s.HoverController;exports.InteractionController=s.InteractionController;exports.InteractionTypes=s.InteractionTypes;exports.LONGPRESS_INSTRUCTIONS=s.LONGPRESS_INSTRUCTIONS;exports.LongpressController=s.LongpressController;exports.LuzmoAbstractOverlay=s.LuzmoAbstractOverlay;exports.LuzmoOverlay=s.LuzmoOverlay;exports.PlacementController=s.PlacementController;exports.SAFARI_FOCUS_RING_CLASS=s.SAFARI_FOCUS_RING_CLASS;exports.VirtualTrigger=s.VirtualTrigger;exports.guaranteedAllTransitionend=s.guaranteedAllTransitionend;exports.lastInteractionType=s.lastInteractionType;exports.nextFrame=s.nextFrame;exports.noop=s.noop;exports.overlayTimer=s.overlayTimer;exports.placementUpdatedSymbol=s.placementUpdatedSymbol;exports.SlottableRequestEvent=u.SlottableRequestEvent;exports.removeSlottableRequest=u.removeSlottableRequest;exports.LuzmoOverlayTrigger=o;exports.OverlayTriggerDirective=b;exports.SlottableRequestDirective=v;exports.openOverlay=k;exports.slottableRequest=E;exports.trigger=T;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../slottable-request-event-gAcEQan2.cjs`),t=require(`../overlay-DdrfkOry.cjs`),n=require(`../overlay-CMd2Dnpv.cjs`);exports.ClickController=t.s,exports.HoverController=t.o,exports.InteractionController=t.c,exports.InteractionTypes=t.l,exports.LONGPRESS_INSTRUCTIONS=t.i,exports.LongpressController=t.a,exports.LuzmoAbstractOverlay=t.h,exports.LuzmoOverlay=t.t,exports.LuzmoOverlayTrigger=n.o,exports.OverlayTriggerDirective=n.t,exports.PlacementController=t.f,exports.SAFARI_FOCUS_RING_CLASS=t.u,exports.SlottableRequestDirective=n.r,exports.SlottableRequestEvent=e.t,exports.VirtualTrigger=t.m,exports.guaranteedAllTransitionend=t.g,exports.lastInteractionType=t.d,exports.nextFrame=t._,exports.noop=t.v,exports.openOverlay=n.a,exports.overlayTimer=t.y,exports.placementUpdatedSymbol=t.p,exports.removeSlottableRequest=e.n,exports.slottableRequest=n.i,exports.trigger=n.n;