@luzmo/lucero 1.0.1-alpha.17 → 1.0.1-alpha.19

package/components/options/index.js

@@ -15,87 +15,75 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const initializeGlobalLuzmoCSSVariables = () => {
-  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
-    const styleElement = document.createElement("style");
-    styleElement.setAttribute("data-luzmo-vars", "");
-    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
-    document.head.appendChild(styleElement);
+import { s as Q } from "../mutation-controller-DH7YOCyj.js";
+import { x as g, r as T, E as L, n as f, T as H, c as oo, a as W } from "../base-CFWO09N1.js";
+import { e as V } from "../query-D_KR_GUc.js";
+import { F as to } from "../focusable-C5JjRZmT.js";
+import { L as eo } from "../like-anchor-DCFJN0LV.js";
+import { O as io } from "../observe-slot-presence-CmVi0zTc.js";
+import { O as lo } from "../observe-slot-text-C3moTjwy.js";
+import { r as ro } from "../random-id-ByCz1xaq.js";
+import { T as D, v as no, z as so, F as ao } from "../luzmo-icons-CiSek5iM.js";
+import { e as q, i as co, t as K } from "../directive-oAbCiebi.js";
+import { f as ho } from "../async-directive-BwIAw5tB.js";
+import { p as uo, v as w, r as S, M, m as po } from "../directive-helpers-D4KMv2dC.js";
+import { e as mo } from "../base-D76d76ww.js";
+import { S as G } from "../sized-mixin-CJbBHWRQ.js";
+import "../progress-circle/index.js";
+import { d as vo } from "../divider.module-DoQWQEIJ.js";
+const Y = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const n = document.createElement("style");
+    n.setAttribute("data-luzmo-vars", ""), n.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(n);
   }
 };
-initializeGlobalLuzmoCSSVariables();
-import { MutationController } from "@lit-labs/observers/mutation-controller.js";
-import { html, unsafeCSS, nothing } from "lit";
-import { property, query, queryAll } from "lit/decorators.js";
-import { F as Focusable } from "../focusable-ChCLg1k4.js";
-import { L as LikeAnchor } from "../like-anchor-v3cJ9RWM.js";
-import { O as ObserveSlotPresence } from "../observe-slot-presence-DcMdoumP.js";
-import { O as ObserveSlotText } from "../observe-slot-text-CjnkkBPn.js";
-import { r as randomID } from "../random-id-BEc6QIUL.js";
-import { luzmoIcon, luzmoCheckboxChecked, luzmoCheckbox, luzmoCheck } from "@luzmo/icons";
-import "@lit-labs/virtualizer";
-import { repeat } from "lit/directives/repeat.js";
-import { a as LuzmoElement } from "../base-DmeVy0cq.js";
-import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
-import "../progress-circle/index.js";
-import { d as dividerStyles } from "../divider.module-DauH6k2_.js";
-const menuItemStyles = '#icon{grid-area:iconArea;align-self:start;height:var(--luzmo-option-icon-container-height, var(--option-icon-container-height));display:flex;align-items:center;justify-content:center;color:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)))}::slotted([slot=icon]){fill:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)));margin-inline-end:var(--luzmo-option-label-text-to-visual, var(--option-label-text-to-visual));block-size:var(--luzmo-option-icon-size, var(--option-icon-height));inline-size:var(--luzmo-option-icon-width, var(--option-icon-height));font-size:var(--luzmo-option-icon-size, var(--option-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}: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:var(--luzmo-option-min-height, var(--option-min-height));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));grid-template:". . headingIconArea sectionHeadingArea . ." "selectedArea checkArea iconArea labelArea valueArea actionsArea" 1fr ". . . descriptionArea . ." ". . . . . ."/auto auto auto 1fr auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;outline:none;align-items:center;position:relative;flex-shrink:0}: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)))}:host:dir(rtl),: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]):hover #label{color:var(--luzmo-option-highlight-selected-label-content-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]):focus #label{color:var(--luzmo-option-highlight-selected-label-content-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}@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(: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;top:0;right:0;bottom:0;left: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}';
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
+Y();
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let fo;
+function go(n) {
+  return (o, t) => mo(o, t, { get() {
+    return (this.renderRoot ?? fo ?? (fo = document.createDocumentFragment())).querySelectorAll(n);
+  } });
+}
+const bo = '#icon{grid-area:iconArea;align-self:start;height:var(--luzmo-option-icon-container-height, var(--option-icon-container-height));display:flex;align-items:center;justify-content:center;color:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)))}::slotted([slot=icon]){fill:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)));margin-inline-end:var(--luzmo-option-label-text-to-visual, var(--option-label-text-to-visual));block-size:var(--luzmo-option-icon-size, var(--option-icon-height));inline-size:var(--luzmo-option-icon-width, var(--option-icon-height));font-size:var(--luzmo-option-icon-size, var(--option-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}: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:var(--luzmo-option-min-height, var(--option-min-height));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));grid-template:". . headingIconArea sectionHeadingArea . ." "selectedArea checkArea iconArea labelArea valueArea actionsArea" 1fr ". . . descriptionArea . ." ". . . . . ."/auto auto auto 1fr auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;outline:none;align-items:center;position:relative;flex-shrink:0}: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)))}:host:dir(rtl),: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]):hover #label{color:var(--luzmo-option-highlight-selected-label-content-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]):focus #label{color:var(--luzmo-option-highlight-selected-label-content-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}@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(: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;top:0;right:0;bottom:0;left: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}';
+var zo = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, _ = (n, o, t, e) => {
+  for (var i = e > 1 ? void 0 : e ? _o(o, t) : o, l = n.length - 1, s; l >= 0; l--)
+    (s = n[l]) && (i = (e ? s(o, t, i) : s(i)) || i);
+  return e && i && zo(o, t, i), i;
 };
-const checkIcon = (classes) => html`
-  <span class="icon-container icon checkmark ${classes.join(" ")}">
-    ${luzmoIcon(luzmoCheck)}
+const yo = (n) => g`
+  <span class="icon-container icon checkmark ${n.join(" ")}">
+    ${D(ao)}
   </span>
-`;
-const checkboxIcon = (classes) => html`
-  <span class="icon-container icon checkbox ${classes.join(" ")}">
-    ${luzmoIcon(luzmoCheckbox)}
+`, ko = (n) => g`
+  <span class="icon-container icon checkbox ${n.join(" ")}">
+    ${D(so)}
   </span>
-`;
-const checkboxCheckedIcon = (classes) => html`
-  <span class="icon-container icon checkbox ${classes.join(" ")}">
-    ${luzmoIcon(luzmoCheckboxChecked)}
+`, xo = (n) => g`
+  <span class="icon-container icon checkbox ${n.join(" ")}">
+    ${D(no)}
   </span>
 `;
-class LuzmoOption extends LikeAnchor(
-  ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
+class b extends eo(
+  lo(io(to, '[slot="icon"]'))
 ) {
   constructor() {
-    super();
-    this.active = false;
-    this.focused = false;
-    this.selected = false;
-    this.emphasized = false;
-    this.variant = "checkmarks";
-    this._value = "";
-    this.noWrap = false;
-    this.renderCheckIcon = (selected, hasIcon) => {
-      const classes = hasIcon ? ["check-icon--with-adjacent-icon"] : [];
-      if (this.variant === "checkboxes") {
-        return selected ? checkboxCheckedIcon(classes) : checkboxIcon(classes);
-      }
-      return selected && this.variant !== "highlight" ? checkIcon(classes) : html``;
-    };
-    this.proxyFocus = () => {
+    super(), this.active = !1, this.focused = !1, this.selected = !1, this.emphasized = !1, this.variant = "checkmarks", this._value = "", this.noWrap = !1, this.renderCheckIcon = (o, t) => {
+      const e = t ? ["check-icon--with-adjacent-icon"] : [];
+      return this.variant === "checkboxes" ? o ? xo(e) : ko(e) : o && this.variant !== "highlight" ? yo(e) : g``;
+    }, this.proxyFocus = () => {
       this.focus();
-    };
-    this.willDispatchUpdate = false;
-    this.addEventListener("click", this.handleClickCapture, {
-      capture: true
-    });
-    new MutationController(this, {
+    }, this.willDispatchUpdate = !1, this.addEventListener("click", this.handleClickCapture, {
+      capture: !0
+    }), new Q(this, {
       config: {
-        characterData: true,
-        childList: true,
-        subtree: true
+        characterData: !0,
+        childList: !0,
+        subtree: !0
       },
       callback: () => {
         this.breakItemChildrenCache();
@@ -103,28 +91,20 @@ class LuzmoOption extends LikeAnchor(
     });
   }
   static get styles() {
-    return [unsafeCSS(menuItemStyles)];
+    return [T(bo)];
   }
   get value() {
     return this._value || this.itemText;
   }
-  set value(value) {
-    if (value === this._value) {
-      return;
-    }
-    this._value = value || "";
-    if (this._value) {
-      this.setAttribute("value", this._value);
-    } else {
-      this.removeAttribute("value");
-    }
+  set value(o) {
+    o !== this._value && (this._value = o || "", this._value ? this.setAttribute("value", this._value) : this.removeAttribute("value"));
   }
   /**
    * @private
    */
   get itemText() {
     return this.itemChildren.content.reduce(
-      (acc, node) => acc + (node.textContent || "").trim(),
+      (o, t) => o + (t.textContent || "").trim(),
       ""
     );
   }
@@ -135,56 +115,35 @@ class LuzmoOption extends LikeAnchor(
     return this.slotContentIsPresent;
   }
   get itemChildren() {
-    if (!this.iconSlot || !this.contentSlot) {
+    if (!this.iconSlot || !this.contentSlot)
       return {
         icon: [],
         content: []
       };
-    }
-    if (this._itemChildren) {
+    if (this._itemChildren)
       return this._itemChildren;
-    }
-    const icon = this.iconSlot.assignedElements().map((element) => {
-      const newElement = element.cloneNode(true);
-      newElement.removeAttribute("slot");
-      newElement.classList.toggle("icon");
-      return newElement;
-    });
-    const content = this.contentSlot.assignedNodes().map((node) => node.cloneNode(true));
-    this._itemChildren = { icon, content };
-    return this._itemChildren;
+    const o = this.iconSlot.assignedElements().map((e) => {
+      const i = e.cloneNode(!0);
+      return i.removeAttribute("slot"), i.classList.toggle("icon"), i;
+    }), t = this.contentSlot.assignedNodes().map((e) => e.cloneNode(!0));
+    return this._itemChildren = { icon: o, content: t }, this._itemChildren;
   }
   click() {
-    if (this.disabled) {
-      return;
-    }
-    if (this.shouldProxyClick()) {
-      return;
-    }
-    super.click();
-  }
-  handleClickCapture(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      return false;
-    }
+    this.disabled || this.shouldProxyClick() || super.click();
+  }
+  handleClickCapture(o) {
+    if (this.disabled)
+      return o.preventDefault(), o.stopImmediatePropagation(), o.stopPropagation(), !1;
   }
   shouldProxyClick() {
-    let handled = false;
-    if (this.anchorElement) {
-      this.anchorElement.click();
-      handled = true;
-    }
-    return handled;
+    let o = !1;
+    return this.anchorElement && (this.anchorElement.click(), o = !0), o;
   }
   breakItemChildrenCache() {
-    this._itemChildren = void 0;
-    this.triggerUpdate();
+    this._itemChildren = void 0, this.triggerUpdate();
   }
   render() {
-    return html`
+    return g`
       ${this.renderCheckIcon(this.selected, this.hasIcon)}
       <div id="icon">
         <slot name="icon"></slot>
@@ -196,204 +155,771 @@ class LuzmoOption extends LikeAnchor(
       <slot name="value"></slot>
       ${this.href && this.href.length > 0 ? super.renderAnchor({
       id: "button",
-      ariaHidden: true,
+      ariaHidden: !0,
       className: "button anchor hidden"
-    }) : nothing}
+    }) : L}
     `;
   }
   handlePointerdown() {
   }
-  firstUpdated(changes) {
-    super.firstUpdated(changes);
-    this.setAttribute("tabindex", "-1");
-    this.addEventListener("pointerdown", this.handlePointerdown);
-    if (!this.hasAttribute("id")) {
-      this.id = `luzmo-option-${randomID()}`;
-    }
+  firstUpdated(o) {
+    super.firstUpdated(o), this.setAttribute("tabindex", "-1"), this.addEventListener("pointerdown", this.handlePointerdown), this.hasAttribute("id") || (this.id = `luzmo-option-${ro()}`);
   }
   updateAriaSelected() {
-    const role = this.getAttribute("role");
-    if (role === "option") {
-      this.setAttribute("aria-selected", this.selected ? "true" : "false");
-    } else if (role === "optioncheckbox") {
-      this.setAttribute("aria-checked", this.selected ? "true" : "false");
-    }
+    const o = this.getAttribute("role");
+    o === "option" ? this.setAttribute("aria-selected", this.selected ? "true" : "false") : o === "optioncheckbox" && this.setAttribute("aria-checked", this.selected ? "true" : "false");
   }
-  setRole(role) {
-    this.setAttribute("role", role);
-    this.updateAriaSelected();
+  setRole(o) {
+    this.setAttribute("role", o), this.updateAriaSelected();
   }
-  updated(changes) {
-    super.updated(changes);
-    if (changes.has("label") && (this.label || changes.get("label") !== void 0)) {
-      this.setAttribute("aria-label", this.label || "");
-    }
-    if (this.anchorElement) {
-      this.anchorElement.addEventListener("focus", this.proxyFocus);
-      this.anchorElement.tabIndex = -1;
-    }
-    if (changes.has("selected")) {
-      this.updateAriaSelected();
-    }
+  updated(o) {
+    super.updated(o), o.has("label") && (this.label || o.get("label") !== void 0) && this.setAttribute("aria-label", this.label || ""), this.anchorElement && (this.anchorElement.addEventListener("focus", this.proxyFocus), this.anchorElement.tabIndex = -1), o.has("selected") && this.updateAriaSelected();
   }
   connectedCallback() {
-    super.connectedCallback();
-    this.triggerUpdate();
+    super.connectedCallback(), this.triggerUpdate();
   }
   async triggerUpdate() {
-    if (this.willDispatchUpdate) {
-      return;
-    }
-    this.willDispatchUpdate = true;
-    await new Promise((ready) => requestAnimationFrame(ready));
-    this.dispatchUpdate();
+    this.willDispatchUpdate || (this.willDispatchUpdate = !0, await new Promise((o) => requestAnimationFrame(o)), this.dispatchUpdate());
   }
   dispatchUpdate() {
-    if (!this.isConnected) {
-      return;
-    }
-    this.willDispatchUpdate = false;
+    this.isConnected && (this.willDispatchUpdate = !1);
   }
 }
-__decorateClass$1([
-  property({ type: Boolean, reflect: true })
-], LuzmoOption.prototype, "active", 2);
-__decorateClass$1([
-  property({ type: Boolean, reflect: true })
-], LuzmoOption.prototype, "focused", 2);
-__decorateClass$1([
-  property({ type: Boolean, reflect: true })
-], LuzmoOption.prototype, "selected", 2);
-__decorateClass$1([
-  property({ type: Boolean, reflect: true })
-], LuzmoOption.prototype, "emphasized", 2);
-__decorateClass$1([
-  property({ type: String, reflect: true })
-], LuzmoOption.prototype, "variant", 2);
-__decorateClass$1([
-  property({ type: String })
-], LuzmoOption.prototype, "value", 1);
-__decorateClass$1([
-  query("slot:not([name])")
-], LuzmoOption.prototype, "contentSlot", 2);
-__decorateClass$1([
-  query('slot[name="icon"]')
-], LuzmoOption.prototype, "iconSlot", 2);
-__decorateClass$1([
-  property({
+_([
+  f({ type: Boolean, reflect: !0 })
+], b.prototype, "active", 2);
+_([
+  f({ type: Boolean, reflect: !0 })
+], b.prototype, "focused", 2);
+_([
+  f({ type: Boolean, reflect: !0 })
+], b.prototype, "selected", 2);
+_([
+  f({ type: Boolean, reflect: !0 })
+], b.prototype, "emphasized", 2);
+_([
+  f({ type: String, reflect: !0 })
+], b.prototype, "variant", 2);
+_([
+  f({ type: String })
+], b.prototype, "value", 1);
+_([
+  V("slot:not([name])")
+], b.prototype, "contentSlot", 2);
+_([
+  V('slot[name="icon"]')
+], b.prototype, "iconSlot", 2);
+_([
+  f({
     type: Boolean,
-    reflect: true,
+    reflect: !0,
     attribute: "no-wrap",
     hasChanged() {
-      return false;
+      return !1;
     }
   })
-], LuzmoOption.prototype, "noWrap", 2);
-__decorateClass$1([
-  query(".anchor")
-], LuzmoOption.prototype, "anchorElement", 2);
-const optionsDividerStyles = ":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));overflow:visible}:host{display:block;flex-shrink:0}";
-class LuzmoOptionsDivider extends SizedMixin(LuzmoElement, {
+], b.prototype, "noWrap", 2);
+_([
+  V(".anchor")
+], b.prototype, "anchorElement", 2);
+function O(n, o, t, e) {
+  var i = arguments.length, l = i < 3 ? o : e === null ? e = Object.getOwnPropertyDescriptor(o, t) : e, s;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") l = Reflect.decorate(n, o, t, e);
+  else for (var r = n.length - 1; r >= 0; r--) (s = n[r]) && (l = (i < 3 ? s(l) : i > 3 ? s(o, t, l) : s(o, t)) || l);
+  return i > 3 && l && Object.defineProperty(o, t, l), l;
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const P = (n, o, t) => {
+  const e = /* @__PURE__ */ new Map();
+  for (let i = o; i <= t; i++) e.set(n[i], i);
+  return e;
+}, Z = q(class extends co {
+  constructor(n) {
+    if (super(n), n.type !== K.CHILD) throw Error("repeat() can only be used in text expressions");
+  }
+  dt(n, o, t) {
+    let e;
+    t === void 0 ? t = o : o !== void 0 && (e = o);
+    const i = [], l = [];
+    let s = 0;
+    for (const r of n) i[s] = e ? e(r, s) : s, l[s] = t(r, s), s++;
+    return { values: l, keys: i };
+  }
+  render(n, o, t) {
+    return this.dt(n, o, t).values;
+  }
+  update(n, [o, t, e]) {
+    const i = uo(n), { values: l, keys: s } = this.dt(o, t, e);
+    if (!Array.isArray(i)) return this.ut = s, l;
+    const r = this.ut ?? (this.ut = []), a = [];
+    let c, m, u = 0, d = i.length - 1, h = 0, p = l.length - 1;
+    for (; u <= d && h <= p; ) if (i[u] === null) u++;
+    else if (i[d] === null) d--;
+    else if (r[u] === s[h]) a[h] = w(i[u], l[h]), u++, h++;
+    else if (r[d] === s[p]) a[p] = w(i[d], l[p]), d--, p--;
+    else if (r[u] === s[p]) a[p] = w(i[u], l[p]), S(n, a[p + 1], i[u]), u++, p--;
+    else if (r[d] === s[h]) a[h] = w(i[d], l[h]), S(n, i[u], i[d]), d--, h++;
+    else if (c === void 0 && (c = P(s, h, p), m = P(r, u, d)), c.has(r[u])) if (c.has(r[d])) {
+      const v = m.get(s[h]), k = v !== void 0 ? i[v] : null;
+      if (k === null) {
+        const x = S(n, i[u]);
+        w(x, l[h]), a[h] = x;
+      } else a[h] = w(k, l[h]), S(n, i[u], k), i[v] = null;
+      h++;
+    } else M(i[d]), d--;
+    else M(i[u]), u++;
+    for (; h <= p; ) {
+      const v = S(n, a[p + 1]);
+      w(v, l[h]), a[h++] = v;
+    }
+    for (; u <= d; ) {
+      const v = i[u++];
+      v !== null && M(v);
+    }
+    return this.ut = s, po(n, a), H;
+  }
+});
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class R extends Event {
+  constructor(o) {
+    super(R.eventName, { bubbles: !1 }), this.first = o.first, this.last = o.last;
+  }
+}
+R.eventName = "rangeChanged";
+class $ extends Event {
+  constructor(o) {
+    super($.eventName, { bubbles: !1 }), this.first = o.first, this.last = o.last;
+  }
+}
+$.eventName = "visibilityChanged";
+class F extends Event {
+  constructor() {
+    super(F.eventName, { bubbles: !1 });
+  }
+}
+F.eventName = "unpinned";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class wo {
+  constructor(o) {
+    this._element = null;
+    const t = o ?? window;
+    this._node = t, o && (this._element = o);
+  }
+  get element() {
+    return this._element || document.scrollingElement || document.documentElement;
+  }
+  get scrollTop() {
+    return this.element.scrollTop || window.scrollY;
+  }
+  get scrollLeft() {
+    return this.element.scrollLeft || window.scrollX;
+  }
+  get scrollHeight() {
+    return this.element.scrollHeight;
+  }
+  get scrollWidth() {
+    return this.element.scrollWidth;
+  }
+  get viewportHeight() {
+    return this._element ? this._element.getBoundingClientRect().height : window.innerHeight;
+  }
+  get viewportWidth() {
+    return this._element ? this._element.getBoundingClientRect().width : window.innerWidth;
+  }
+  get maxScrollTop() {
+    return this.scrollHeight - this.viewportHeight;
+  }
+  get maxScrollLeft() {
+    return this.scrollWidth - this.viewportWidth;
+  }
+}
+class Eo extends wo {
+  constructor(o, t) {
+    super(t), this._clients = /* @__PURE__ */ new Set(), this._retarget = null, this._end = null, this.__destination = null, this.correctingScrollError = !1, this._checkForArrival = this._checkForArrival.bind(this), this._updateManagedScrollTo = this._updateManagedScrollTo.bind(this), this.scrollTo = this.scrollTo.bind(this), this.scrollBy = this.scrollBy.bind(this);
+    const e = this._node;
+    this._originalScrollTo = e.scrollTo, this._originalScrollBy = e.scrollBy, this._originalScroll = e.scroll, this._attach(o);
+  }
+  get _destination() {
+    return this.__destination;
+  }
+  get scrolling() {
+    return this._destination !== null;
+  }
+  scrollTo(o, t) {
+    const e = typeof o == "number" && typeof t == "number" ? { left: o, top: t } : o;
+    this._scrollTo(e);
+  }
+  scrollBy(o, t) {
+    const e = typeof o == "number" && typeof t == "number" ? { left: o, top: t } : o;
+    e.top !== void 0 && (e.top += this.scrollTop), e.left !== void 0 && (e.left += this.scrollLeft), this._scrollTo(e);
+  }
+  _nativeScrollTo(o) {
+    this._originalScrollTo.bind(this._element || window)(o);
+  }
+  _scrollTo(o, t = null, e = null) {
+    this._end !== null && this._end(), o.behavior === "smooth" ? (this._setDestination(o), this._retarget = t, this._end = e) : this._resetScrollState(), this._nativeScrollTo(o);
+  }
+  _setDestination(o) {
+    let { top: t, left: e } = o;
+    return t = t === void 0 ? void 0 : Math.max(0, Math.min(t, this.maxScrollTop)), e = e === void 0 ? void 0 : Math.max(0, Math.min(e, this.maxScrollLeft)), this._destination !== null && e === this._destination.left && t === this._destination.top ? !1 : (this.__destination = { top: t, left: e, behavior: "smooth" }, !0);
+  }
+  _resetScrollState() {
+    this.__destination = null, this._retarget = null, this._end = null;
+  }
+  _updateManagedScrollTo(o) {
+    this._destination && this._setDestination(o) && this._nativeScrollTo(this._destination);
+  }
+  managedScrollTo(o, t, e) {
+    return this._scrollTo(o, t, e), this._updateManagedScrollTo;
+  }
+  correctScrollError(o) {
+    this.correctingScrollError = !0, requestAnimationFrame(() => requestAnimationFrame(() => this.correctingScrollError = !1)), this._nativeScrollTo(o), this._retarget && this._setDestination(this._retarget()), this._destination && this._nativeScrollTo(this._destination);
+  }
+  _checkForArrival() {
+    if (this._destination !== null) {
+      const { scrollTop: o, scrollLeft: t } = this;
+      let { top: e, left: i } = this._destination;
+      e = Math.min(e || 0, this.maxScrollTop), i = Math.min(i || 0, this.maxScrollLeft);
+      const l = Math.abs(e - o), s = Math.abs(i - t);
+      l < 1 && s < 1 && (this._end && this._end(), this._resetScrollState());
+    }
+  }
+  detach(o) {
+    return this._clients.delete(o), this._clients.size === 0 && (this._node.scrollTo = this._originalScrollTo, this._node.scrollBy = this._originalScrollBy, this._node.scroll = this._originalScroll, this._node.removeEventListener("scroll", this._checkForArrival)), null;
+  }
+  _attach(o) {
+    this._clients.add(o), this._clients.size === 1 && (this._node.scrollTo = this.scrollTo, this._node.scrollBy = this.scrollBy, this._node.scroll = this.scrollTo, this._node.addEventListener("scroll", this._checkForArrival));
+  }
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let j = typeof window < "u" ? window.ResizeObserver : void 0;
+const B = Symbol("virtualizerRef"), I = "virtualizer-sizer";
+let U;
+class Co {
+  constructor(o) {
+    if (this._benchmarkStart = null, this._layout = null, this._clippingAncestors = [], this._scrollSize = null, this._scrollError = null, this._childrenPos = null, this._childMeasurements = null, this._toBeMeasured = /* @__PURE__ */ new Map(), this._rangeChanged = !0, this._itemsChanged = !0, this._visibilityChanged = !0, this._scrollerController = null, this._isScroller = !1, this._sizer = null, this._hostElementRO = null, this._childrenRO = null, this._mutationObserver = null, this._scrollEventListeners = [], this._scrollEventListenerOptions = {
+      passive: !0
+    }, this._loadListener = this._childLoaded.bind(this), this._scrollIntoViewTarget = null, this._updateScrollIntoViewCoordinates = null, this._items = [], this._first = -1, this._last = -1, this._firstVisible = -1, this._lastVisible = -1, this._scheduled = /* @__PURE__ */ new WeakSet(), this._measureCallback = null, this._measureChildOverride = null, this._layoutCompletePromise = null, this._layoutCompleteResolver = null, this._layoutCompleteRejecter = null, this._pendingLayoutComplete = null, this._layoutInitialized = null, this._connected = !1, !o)
+      throw new Error("Virtualizer constructor requires a configuration object");
+    if (o.hostElement)
+      this._init(o);
+    else
+      throw new Error('Virtualizer configuration requires the "hostElement" property');
+  }
+  set items(o) {
+    Array.isArray(o) && o !== this._items && (this._itemsChanged = !0, this._items = o, this._schedule(this._updateLayout));
+  }
+  _init(o) {
+    this._isScroller = !!o.scroller, this._initHostElement(o);
+    const t = o.layout || {};
+    this._layoutInitialized = this._initLayout(t);
+  }
+  _initObservers() {
+    this._mutationObserver = new MutationObserver(this._finishDOMUpdate.bind(this)), this._hostElementRO = new j(() => this._hostElementSizeChanged()), this._childrenRO = new j(this._childrenSizeChanged.bind(this));
+  }
+  _initHostElement(o) {
+    const t = this._hostElement = o.hostElement;
+    this._applyVirtualizerStyles(), t[B] = this;
+  }
+  connected() {
+    this._initObservers();
+    const o = this._isScroller;
+    this._clippingAncestors = Io(this._hostElement, o), this._scrollerController = new Eo(this, this._clippingAncestors[0]), this._schedule(this._updateLayout), this._observeAndListen(), this._connected = !0;
+  }
+  _observeAndListen() {
+    this._mutationObserver.observe(this._hostElement, { childList: !0 }), this._hostElementRO.observe(this._hostElement), this._scrollEventListeners.push(window), window.addEventListener("scroll", this, this._scrollEventListenerOptions), this._clippingAncestors.forEach((o) => {
+      o.addEventListener("scroll", this, this._scrollEventListenerOptions), this._scrollEventListeners.push(o), this._hostElementRO.observe(o);
+    }), this._hostElementRO.observe(this._scrollerController.element), this._children.forEach((o) => this._childrenRO.observe(o)), this._scrollEventListeners.forEach((o) => o.addEventListener("scroll", this, this._scrollEventListenerOptions));
+  }
+  disconnected() {
+    var o, t, e, i;
+    this._scrollEventListeners.forEach((l) => l.removeEventListener("scroll", this, this._scrollEventListenerOptions)), this._scrollEventListeners = [], this._clippingAncestors = [], (o = this._scrollerController) == null || o.detach(this), this._scrollerController = null, (t = this._mutationObserver) == null || t.disconnect(), this._mutationObserver = null, (e = this._hostElementRO) == null || e.disconnect(), this._hostElementRO = null, (i = this._childrenRO) == null || i.disconnect(), this._childrenRO = null, this._rejectLayoutCompletePromise("disconnected"), this._connected = !1;
+  }
+  _applyVirtualizerStyles() {
+    const t = this._hostElement.style;
+    t.display = t.display || "block", t.position = t.position || "relative", t.contain = t.contain || "size layout", this._isScroller && (t.overflow = t.overflow || "auto", t.minHeight = t.minHeight || "150px");
+  }
+  _getSizer() {
+    const o = this._hostElement;
+    if (!this._sizer) {
+      let t = o.querySelector(`[${I}]`);
+      t || (t = document.createElement("div"), t.setAttribute(I, ""), o.appendChild(t)), Object.assign(t.style, {
+        position: "absolute",
+        margin: "-2px 0 0 0",
+        padding: 0,
+        visibility: "hidden",
+        fontSize: "2px"
+      }), t.textContent = "&nbsp;", t.setAttribute(I, ""), this._sizer = t;
+    }
+    return this._sizer;
+  }
+  async updateLayoutConfig(o) {
+    await this._layoutInitialized;
+    const t = o.type || // The new config is compatible with the current layout,
+    // so we update the config and return true to indicate
+    // a successful update
+    U;
+    if (typeof t == "function" && this._layout instanceof t) {
+      const e = { ...o };
+      return delete e.type, this._layout.config = e, !0;
+    }
+    return !1;
+  }
+  async _initLayout(o) {
+    let t, e;
+    if (typeof o.type == "function") {
+      e = o.type;
+      const i = { ...o };
+      delete i.type, t = i;
+    } else
+      t = o;
+    e === void 0 && (U = e = (await import("../flow-D-0MTYCm.js")).FlowLayout), this._layout = new e((i) => this._handleLayoutMessage(i), t), this._layout.measureChildren && typeof this._layout.updateItemSizes == "function" && (typeof this._layout.measureChildren == "function" && (this._measureChildOverride = this._layout.measureChildren), this._measureCallback = this._layout.updateItemSizes.bind(this._layout)), this._layout.listenForChildLoadEvents && this._hostElement.addEventListener("load", this._loadListener, !0), this._schedule(this._updateLayout);
+  }
+  // TODO (graynorton): Rework benchmarking so that it has no API and
+  // instead is always on except in production builds
+  startBenchmarking() {
+    this._benchmarkStart === null && (this._benchmarkStart = window.performance.now());
+  }
+  stopBenchmarking() {
+    if (this._benchmarkStart !== null) {
+      const o = window.performance.now(), t = o - this._benchmarkStart, i = performance.getEntriesByName("uv-virtualizing", "measure").filter((l) => l.startTime >= this._benchmarkStart && l.startTime < o).reduce((l, s) => l + s.duration, 0);
+      return this._benchmarkStart = null, { timeElapsed: t, virtualizationTime: i };
+    }
+    return null;
+  }
+  _measureChildren() {
+    const o = {}, t = this._children, e = this._measureChildOverride || this._measureChild;
+    for (let i = 0; i < t.length; i++) {
+      const l = t[i], s = this._first + i;
+      (this._itemsChanged || this._toBeMeasured.has(l)) && (o[s] = e.call(this, l, this._items[s]));
+    }
+    this._childMeasurements = o, this._schedule(this._updateLayout), this._toBeMeasured.clear();
+  }
+  /**
+   * Returns the width, height, and margins of the given child.
+   */
+  _measureChild(o) {
+    const { width: t, height: e } = o.getBoundingClientRect();
+    return Object.assign({ width: t, height: e }, So(o));
+  }
+  async _schedule(o) {
+    this._scheduled.has(o) || (this._scheduled.add(o), await Promise.resolve(), this._scheduled.delete(o), o.call(this));
+  }
+  async _updateDOM(o) {
+    this._scrollSize = o.scrollSize, this._adjustRange(o.range), this._childrenPos = o.childPositions, this._scrollError = o.scrollError || null;
+    const { _rangeChanged: t, _itemsChanged: e } = this;
+    this._visibilityChanged && (this._notifyVisibility(), this._visibilityChanged = !1), (t || e) && (this._notifyRange(), this._rangeChanged = !1), this._finishDOMUpdate();
+  }
+  _finishDOMUpdate() {
+    this._connected && (this._children.forEach((o) => this._childrenRO.observe(o)), this._checkScrollIntoViewTarget(this._childrenPos), this._positionChildren(this._childrenPos), this._sizeHostElement(this._scrollSize), this._correctScrollError(), this._benchmarkStart && "mark" in window.performance && window.performance.mark("uv-end"));
+  }
+  _updateLayout() {
+    this._layout && this._connected && (this._layout.items = this._items, this._updateView(), this._childMeasurements !== null && (this._measureCallback && this._measureCallback(this._childMeasurements), this._childMeasurements = null), this._layout.reflowIfNeeded(), this._benchmarkStart && "mark" in window.performance && window.performance.mark("uv-end"));
+  }
+  _handleScrollEvent() {
+    var o;
+    if (this._benchmarkStart && "mark" in window.performance) {
+      try {
+        window.performance.measure("uv-virtualizing", "uv-start", "uv-end");
+      } catch (t) {
+        console.warn("Error measuring performance data: ", t);
+      }
+      window.performance.mark("uv-start");
+    }
+    this._scrollerController.correctingScrollError === !1 && ((o = this._layout) == null || o.unpin()), this._schedule(this._updateLayout);
+  }
+  handleEvent(o) {
+    switch (o.type) {
+      case "scroll":
+        (o.currentTarget === window || this._clippingAncestors.includes(o.currentTarget)) && this._handleScrollEvent();
+        break;
+      default:
+        console.warn("event not handled", o);
+    }
+  }
+  _handleLayoutMessage(o) {
+    o.type === "stateChanged" ? this._updateDOM(o) : o.type === "visibilityChanged" ? (this._firstVisible = o.firstVisible, this._lastVisible = o.lastVisible, this._notifyVisibility()) : o.type === "unpinned" && this._hostElement.dispatchEvent(new F());
+  }
+  get _children() {
+    const o = [];
+    let t = this._hostElement.firstElementChild;
+    for (; t; )
+      t.hasAttribute(I) || o.push(t), t = t.nextElementSibling;
+    return o;
+  }
+  _updateView() {
+    var i;
+    const o = this._hostElement, t = (i = this._scrollerController) == null ? void 0 : i.element, e = this._layout;
+    if (o && t && e) {
+      let l, s, r, a;
+      const c = o.getBoundingClientRect();
+      l = 0, s = 0, r = window.innerHeight, a = window.innerWidth;
+      const m = this._clippingAncestors.map((E) => E.getBoundingClientRect());
+      m.unshift(c);
+      for (const E of m)
+        l = Math.max(l, E.top), s = Math.max(s, E.left), r = Math.min(r, E.bottom), a = Math.min(a, E.right);
+      const u = t.getBoundingClientRect(), d = {
+        left: c.left - u.left,
+        top: c.top - u.top
+      }, h = {
+        width: t.scrollWidth,
+        height: t.scrollHeight
+      }, p = l - c.top + o.scrollTop, v = s - c.left + o.scrollLeft, k = Math.max(0, r - l), x = Math.max(0, a - s);
+      e.viewportSize = { width: x, height: k }, e.viewportScroll = { top: p, left: v }, e.totalScrollSize = h, e.offsetWithinScroller = d;
+    }
+  }
+  /**
+   * Styles the host element so that its size reflects the
+   * total size of all items.
+   */
+  _sizeHostElement(o) {
+    const e = o && o.width !== null ? Math.min(82e5, o.width) : 0, i = o && o.height !== null ? Math.min(82e5, o.height) : 0;
+    if (this._isScroller)
+      this._getSizer().style.transform = `translate(${e}px, ${i}px)`;
+    else {
+      const l = this._hostElement.style;
+      l.minWidth = e ? `${e}px` : "100%", l.minHeight = i ? `${i}px` : "100%";
+    }
+  }
+  /**
+   * Sets the top and left transform style of the children from the values in
+   * pos.
+   */
+  _positionChildren(o) {
+    o && o.forEach(({ top: t, left: e, width: i, height: l, xOffset: s, yOffset: r }, a) => {
+      const c = this._children[a - this._first];
+      c && (c.style.position = "absolute", c.style.boxSizing = "border-box", c.style.transform = `translate(${e}px, ${t}px)`, i !== void 0 && (c.style.width = i + "px"), l !== void 0 && (c.style.height = l + "px"), c.style.left = s === void 0 ? null : s + "px", c.style.top = r === void 0 ? null : r + "px");
+    });
+  }
+  async _adjustRange(o) {
+    const { _first: t, _last: e, _firstVisible: i, _lastVisible: l } = this;
+    this._first = o.first, this._last = o.last, this._firstVisible = o.firstVisible, this._lastVisible = o.lastVisible, this._rangeChanged = this._rangeChanged || this._first !== t || this._last !== e, this._visibilityChanged = this._visibilityChanged || this._firstVisible !== i || this._lastVisible !== l;
+  }
+  _correctScrollError() {
+    if (this._scrollError) {
+      const { scrollTop: o, scrollLeft: t } = this._scrollerController, { top: e, left: i } = this._scrollError;
+      this._scrollError = null, this._scrollerController.correctScrollError({
+        top: o - e,
+        left: t - i
+      });
+    }
+  }
+  element(o) {
+    var t;
+    return o === 1 / 0 && (o = this._items.length - 1), ((t = this._items) == null ? void 0 : t[o]) === void 0 ? void 0 : {
+      scrollIntoView: (e = {}) => this._scrollElementIntoView({ ...e, index: o })
+    };
+  }
+  _scrollElementIntoView(o) {
+    if (o.index >= this._first && o.index <= this._last)
+      this._children[o.index - this._first].scrollIntoView(o);
+    else if (o.index = Math.min(o.index, this._items.length - 1), o.behavior === "smooth") {
+      const t = this._layout.getScrollIntoViewCoordinates(o), { behavior: e } = o;
+      this._updateScrollIntoViewCoordinates = this._scrollerController.managedScrollTo(Object.assign(t, { behavior: e }), () => this._layout.getScrollIntoViewCoordinates(o), () => this._scrollIntoViewTarget = null), this._scrollIntoViewTarget = o;
+    } else
+      this._layout.pin = o;
+  }
+  /**
+   * If we are smoothly scrolling to an element and the target element
+   * is in the DOM, we update our target coordinates as needed
+   */
+  _checkScrollIntoViewTarget(o) {
+    const { index: t } = this._scrollIntoViewTarget || {};
+    t && (o != null && o.has(t)) && this._updateScrollIntoViewCoordinates(this._layout.getScrollIntoViewCoordinates(this._scrollIntoViewTarget));
+  }
+  /**
+   * Emits a rangechange event with the current first, last, firstVisible, and
+   * lastVisible.
+   */
+  _notifyRange() {
+    this._hostElement.dispatchEvent(new R({ first: this._first, last: this._last }));
+  }
+  _notifyVisibility() {
+    this._hostElement.dispatchEvent(new $({
+      first: this._firstVisible,
+      last: this._lastVisible
+    }));
+  }
+  get layoutComplete() {
+    return this._layoutCompletePromise || (this._layoutCompletePromise = new Promise((o, t) => {
+      this._layoutCompleteResolver = o, this._layoutCompleteRejecter = t;
+    })), this._layoutCompletePromise;
+  }
+  _rejectLayoutCompletePromise(o) {
+    this._layoutCompleteRejecter !== null && this._layoutCompleteRejecter(o), this._resetLayoutCompleteState();
+  }
+  _scheduleLayoutComplete() {
+    this._layoutCompletePromise && this._pendingLayoutComplete === null && (this._pendingLayoutComplete = requestAnimationFrame(() => requestAnimationFrame(() => this._resolveLayoutCompletePromise())));
+  }
+  _resolveLayoutCompletePromise() {
+    this._layoutCompleteResolver !== null && this._layoutCompleteResolver(), this._resetLayoutCompleteState();
+  }
+  _resetLayoutCompleteState() {
+    this._layoutCompletePromise = null, this._layoutCompleteResolver = null, this._layoutCompleteRejecter = null, this._pendingLayoutComplete = null;
+  }
+  /**
+   * Render and update the view at the next opportunity with the given
+   * hostElement size.
+   */
+  _hostElementSizeChanged() {
+    this._schedule(this._updateLayout);
+  }
+  // TODO (graynorton): Rethink how this works. Probably child loading is too specific
+  // to have dedicated support for; might want some more generic lifecycle hooks for
+  // layouts to use. Possibly handle measurement this way, too, or maybe that remains
+  // a first-class feature?
+  _childLoaded() {
+  }
+  // This is the callback for the ResizeObserver that watches the
+  // virtualizer's children. We land here at the end of every virtualizer
+  // update cycle that results in changes to physical items, and we also
+  // end up here if one or more children change size independently of
+  // the virtualizer update cycle.
+  _childrenSizeChanged(o) {
+    var t;
+    if ((t = this._layout) != null && t.measureChildren) {
+      for (const e of o)
+        this._toBeMeasured.set(e.target, e.contentRect);
+      this._measureChildren();
+    }
+    this._scheduleLayoutComplete(), this._itemsChanged = !1, this._rangeChanged = !1;
+  }
+}
+function So(n) {
+  const o = window.getComputedStyle(n);
+  return {
+    marginTop: A(o.marginTop),
+    marginRight: A(o.marginRight),
+    marginBottom: A(o.marginBottom),
+    marginLeft: A(o.marginLeft)
+  };
+}
+function A(n) {
+  const o = n ? parseFloat(n) : NaN;
+  return Number.isNaN(o) ? 0 : o;
+}
+function N(n) {
+  if (n.assignedSlot !== null)
+    return n.assignedSlot;
+  if (n.parentElement !== null)
+    return n.parentElement;
+  const o = n.parentNode;
+  return o && o.nodeType === Node.DOCUMENT_FRAGMENT_NODE && o.host || null;
+}
+function Oo(n, o = !1) {
+  const t = [];
+  let e = o ? n : N(n);
+  for (; e !== null; )
+    t.push(e), e = N(e);
+  return t;
+}
+function Io(n, o = !1) {
+  let t = !1;
+  return Oo(n, o).filter((e) => {
+    if (t)
+      return !1;
+    const i = getComputedStyle(e);
+    return t = i.position === "fixed", i.overflow !== "visible";
+  });
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const J = (n) => n, X = (n, o) => g`${o}: ${JSON.stringify(n, null, 2)}`;
+class Ao extends ho {
+  constructor(o) {
+    if (super(o), this._virtualizer = null, this._first = 0, this._last = -1, this._renderItem = (t, e) => X(t, e + this._first), this._keyFunction = (t, e) => J(t, e + this._first), this._items = [], o.type !== K.CHILD)
+      throw new Error("The virtualize directive can only be used in child expressions");
+  }
+  render(o) {
+    o && this._setFunctions(o);
+    const t = [];
+    if (this._first >= 0 && this._last >= this._first)
+      for (let e = this._first; e <= this._last; e++)
+        t.push(this._items[e]);
+    return Z(t, this._keyFunction, this._renderItem);
+  }
+  update(o, [t]) {
+    this._setFunctions(t);
+    const e = this._items !== t.items;
+    return this._items = t.items || [], this._virtualizer ? this._updateVirtualizerConfig(o, t) : this._initialize(o, t), e ? H : this.render();
+  }
+  async _updateVirtualizerConfig(o, t) {
+    if (!await this._virtualizer.updateLayoutConfig(t.layout || {})) {
+      const i = o.parentNode;
+      this._makeVirtualizer(i, t);
+    }
+    this._virtualizer.items = this._items;
+  }
+  _setFunctions(o) {
+    const { renderItem: t, keyFunction: e } = o;
+    t && (this._renderItem = (i, l) => t(i, l + this._first)), e && (this._keyFunction = (i, l) => e(i, l + this._first));
+  }
+  _makeVirtualizer(o, t) {
+    this._virtualizer && this._virtualizer.disconnected();
+    const { layout: e, scroller: i, items: l } = t;
+    this._virtualizer = new Co({ hostElement: o, layout: e, scroller: i }), this._virtualizer.items = l, this._virtualizer.connected();
+  }
+  _initialize(o, t) {
+    const e = o.parentNode;
+    e && e.nodeType === 1 && (e.addEventListener("rangeChanged", (i) => {
+      this._first = i.first, this._last = i.last, this.setValue(this.render());
+    }), this._makeVirtualizer(e, t));
+  }
+  disconnected() {
+    var o;
+    (o = this._virtualizer) == null || o.disconnected();
+  }
+  reconnected() {
+    var o;
+    (o = this._virtualizer) == null || o.connected();
+  }
+}
+const Lo = q(Ao);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class C extends oo {
+  constructor() {
+    super(...arguments), this.items = [], this.renderItem = X, this.keyFunction = J, this.layout = {}, this.scroller = !1;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    const { items: o, renderItem: t, keyFunction: e, layout: i, scroller: l } = this;
+    return g`${Lo({
+      items: o,
+      renderItem: t,
+      keyFunction: e,
+      layout: i,
+      scroller: l
+    })}`;
+  }
+  element(o) {
+    var t;
+    return (t = this[B]) == null ? void 0 : t.element(o);
+  }
+  get layoutComplete() {
+    var o;
+    return (o = this[B]) == null ? void 0 : o.layoutComplete;
+  }
+  /**
+   * This scrollToIndex() shim is here to provide backwards compatibility with other 0.x versions of
+   * lit-virtualizer. It is deprecated and will likely be removed in the 1.0.0 release.
+   */
+  scrollToIndex(o, t = "start") {
+    var e;
+    (e = this.element(o)) == null || e.scrollIntoView({ block: t });
+  }
+}
+O([
+  f({ attribute: !1 })
+], C.prototype, "items", void 0);
+O([
+  f()
+], C.prototype, "renderItem", void 0);
+O([
+  f()
+], C.prototype, "keyFunction", void 0);
+O([
+  f({ attribute: !1 })
+], C.prototype, "layout", void 0);
+O([
+  f({ reflect: !0, type: Boolean })
+], C.prototype, "scroller", void 0);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+customElements.define("lit-virtualizer", C);
+const To = ":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));overflow:visible}:host{display:block;flex-shrink:0}";
+class Vo extends G(W, {
   validSizes: ["s", "m", "l"]
 }) {
   static get styles() {
-    return [unsafeCSS(dividerStyles), unsafeCSS(optionsDividerStyles)];
+    return [T(vo), T(To)];
   }
-  firstUpdated(changed) {
-    super.firstUpdated(changed);
-    this.setAttribute("role", "separator");
+  firstUpdated(o) {
+    super.firstUpdated(o), this.setAttribute("role", "separator");
   }
 }
-const optionsStyles = ":host{--option-top-to-action: var(--luzmo-spacing-1);--option-top-to-checkbox: 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-hard);--options-collapsible-icon-color: var(--luzmo-font-color-hard);--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)}:host{--option-min-height: var(--luzmo-component-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-l);--option-icon-width: var(--luzmo-font-size-l);--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) );--option-top-to-checkbox: 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);--option-icon-width: var(--luzmo-font-size);--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;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}: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{display:flex;flex-shrink:0;align-items:center;height:var(--options-pending-height);padding-inline:var(--pending-inline-edge-to-content)}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
+const Ro = ":host{--option-top-to-action: var(--luzmo-spacing-1);--option-top-to-checkbox: 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-hard);--options-collapsible-icon-color: var(--luzmo-font-color-hard);--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)}:host{--option-min-height: var(--luzmo-component-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-l);--option-icon-width: var(--luzmo-font-size-l);--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) );--option-top-to-checkbox: 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);--option-icon-width: var(--luzmo-font-size);--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;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}: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{display:flex;flex-shrink:0;align-items:center;height:var(--options-pending-height);padding-inline:var(--pending-inline-edge-to-content)}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";
+var $o = Object.defineProperty, y = (n, o, t, e) => {
+  for (var i = void 0, l = n.length - 1, s; l >= 0; l--)
+    (s = n[l]) && (i = s(o, t, i) || i);
+  return i && $o(o, t, i), i;
 };
-const VIRTUALIZE_AS_OF_NUM_ITEMS = 25;
-function elementIsOrContains(el, isOrContains) {
-  return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
+const Fo = 25;
+function Mo(n, o) {
+  return !!o && (n === o || n.contains(o));
 }
-class LuzmoOptions extends SizedMixin(LuzmoElement, {
-  noDefaultSize: true
+class z extends G(W, {
+  noDefaultSize: !0
 }) {
   constructor() {
-    super();
-    this.label = "";
-    this.variant = "highlight";
-    this.selects = "single";
-    this.emphasized = false;
-    this.pending = false;
-    this.options = [];
-    this.value = [];
-    this.focusedOptionIndex = 0;
-    this._selectedOptions = [];
-    this._firstVisibleIndex = 0;
-    this.addEventListener("focusin", this.handleFocusin);
-    this.addEventListener("blur", this.handleBlur);
+    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.addEventListener("focusin", this.handleFocusin), this.addEventListener("blur", this.handleBlur);
   }
   /**
    * @internal
    */
   static get styles() {
-    return [unsafeCSS(optionsStyles)];
+    return [T(Ro)];
   }
   /**
    * @internal
    */
   get _virtualizeActive() {
-    return this.options.length > VIRTUALIZE_AS_OF_NUM_ITEMS;
+    return this.options.length > Fo;
   }
-  firstUpdated(changed) {
-    super.firstUpdated(changed);
-    if (!this.hasAttribute("tabindex")) {
-      this.tabIndex = 0;
-    }
-    const updates = [
-      new Promise((res) => requestAnimationFrame(() => res(true)))
+  firstUpdated(o) {
+    super.firstUpdated(o), this.hasAttribute("tabindex") || (this.tabIndex = 0);
+    const t = [
+      new Promise((e) => requestAnimationFrame(() => e(!0)))
     ];
-    [...this.children].forEach((item) => {
-      if (item.localName === "luzmo-option") {
-        updates.push(item.updateComplete);
-      }
-    });
-    this.optionElementsUpdated = Promise.all(updates);
+    [...this.children].forEach((e) => {
+      e.localName === "luzmo-option" && t.push(e.updateComplete);
+    }), this.optionElementsUpdated = Promise.all(t);
   }
-  willUpdate(changes) {
-    var _a;
-    const hasChangedSelects = changes.has("selects");
-    if (hasChangedSelects && this.selects === "single" && ((_a = this.value) == null ? void 0 : _a.length) > 1) {
-      this.value = this.value.slice(0, 1);
-    }
+  willUpdate(o) {
+    var e;
+    o.has("selects") && this.selects === "single" && ((e = this.value) == null ? void 0 : e.length) > 1 && (this.value = this.value.slice(0, 1));
   }
-  updated(changes) {
-    super.updated(changes);
-    const changedLabel = changes.has("label");
-    if (changedLabel && (this.label || changes.get("label") !== void 0)) {
-      if (this.label) {
-        this.setAttribute("aria-label", this.label);
-      } else {
-        this.removeAttribute("aria-label");
-      }
-    }
+  updated(o) {
+    super.updated(o), o.has("label") && (this.label || o.get("label") !== void 0) && (this.label ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label"));
   }
   async getUpdateComplete() {
-    const complete = await super.getUpdateComplete();
-    await this.optionElementsUpdated;
-    return complete;
+    const o = await super.getUpdateComplete();
+    return await this.optionElementsUpdated, o;
   }
-  focus({ preventScroll } = {}) {
-    super.focus({ preventScroll });
-    this.focusOptionByOffset(0);
+  focus({ preventScroll: o } = {}) {
+    super.focus({ preventScroll: o }), this.focusOptionByOffset(0);
   }
   _removeFocusedPropertyOnOptions() {
     requestAnimationFrame(() => {
-      this.visibleOptionElements.forEach((item) => {
-        item.focused = false;
+      this.visibleOptionElements.forEach((o) => {
+        o.focused = !1;
       });
     });
   }
@@ -404,13 +930,8 @@ class LuzmoOptions extends SizedMixin(LuzmoElement, {
     this.startListeningToKeyboard();
   }
   // when the focus is lost in the options menu, we need to remove the focus from the item, stop listening to keyboard events and clean up the aria-activedescendant
-  handleBlur(event) {
-    if (elementIsOrContains(this, event.relatedTarget)) {
-      return;
-    }
-    this.stopListeningToKeyboard();
-    this._removeFocusedPropertyOnOptions();
-    this.removeAttribute("aria-activedescendant");
+  handleBlur(o) {
+    Mo(this, o.relatedTarget) || (this.stopListeningToKeyboard(), this._removeFocusedPropertyOnOptions(), this.removeAttribute("aria-activedescendant"));
   }
   startListeningToKeyboard() {
     this.addEventListener("keydown", this.handleKeydown);
@@ -418,242 +939,167 @@ class LuzmoOptions extends SizedMixin(LuzmoElement, {
   stopListeningToKeyboard() {
     this.removeEventListener("keydown", this.handleKeydown);
   }
-  handleKeydown(event) {
-    var _a;
-    if (event.defaultPrevented) {
+  handleKeydown(o) {
+    var l;
+    if (o.defaultPrevented)
       return;
-    }
-    const lastFocusedIndex = this.focusedOptionIndex;
-    const lastFocusedItem = [...this.visibleOptionElements].find(
-      (item) => {
-        var _a2, _b, _c, _d;
-        return ((_a2 = item.value) == null ? void 0 : _a2.toString()) === ((_d = (_c = (_b = this.options) == null ? void 0 : _b[lastFocusedIndex]) == null ? void 0 : _c.value) == null ? void 0 : _d.toString());
+    const t = this.focusedOptionIndex, e = [...this.visibleOptionElements].find(
+      (s) => {
+        var r, a, c, m;
+        return ((r = s.value) == null ? void 0 : r.toString()) === ((m = (c = (a = this.options) == null ? void 0 : a[t]) == null ? void 0 : c.value) == null ? void 0 : m.toString());
       }
-    );
-    const { key } = event;
-    if (key === "Tab") {
+    ), { key: i } = o;
+    if (i === "Tab") {
       this.prepareToCleanUp();
       return;
     }
-    if (key === " " || key === "Enter") {
-      event.preventDefault();
-      if (lastFocusedItem) {
-        this.toggleOption(event, (_a = this.options) == null ? void 0 : _a[lastFocusedIndex]);
-      }
+    if (i === " " || i === "Enter") {
+      o.preventDefault(), e && this.toggleOption(o, (l = this.options) == null ? void 0 : l[t]);
       return;
     }
-    if (key === "ArrowDown" || key === "ArrowUp") {
-      event.preventDefault();
-      this.navigateWithinOptions(event, lastFocusedItem);
+    if (i === "ArrowDown" || i === "ArrowUp") {
+      o.preventDefault(), this.navigateWithinOptions(o, e);
       return;
     }
   }
-  navigateWithinOptions(event, optionElement) {
-    const { key } = event;
-    const direction = key === "ArrowDown" ? 1 : -1;
-    event.preventDefault();
-    event.stopPropagation();
-    const itemToFocus = this.focusOptionByOffset(
-      direction,
-      optionElement,
-      true
+  navigateWithinOptions(o, t) {
+    const { key: e } = o, i = e === "ArrowDown" ? 1 : -1;
+    o.preventDefault(), o.stopPropagation();
+    const l = this.focusOptionByOffset(
+      i,
+      t,
+      !0
     );
-    if (itemToFocus === optionElement) {
-      return;
-    }
-    if (!this._virtualizeActive) {
-      itemToFocus == null ? void 0 : itemToFocus.scrollIntoView({ block: "nearest" });
-    }
+    l !== t && (this._virtualizeActive || l == null || l.scrollIntoView({ block: "nearest" }));
   }
-  focusOptionByOffset(offset, optionElement, scrollIntoView) {
-    var _a;
-    const step = offset || 1;
-    if (optionElement) {
-      optionElement.focused = false;
-    }
-    const previousFocusedOptionIndex = this.focusedOptionIndex;
-    this.focusedOptionIndex = this.options.length > 0 ? (this.options.length + this.focusedOptionIndex + offset) % this.options.length : 0;
-    let optionToFocus = this.options[this.focusedOptionIndex];
-    let availableItems = this.options.length;
-    while (((optionToFocus == null ? void 0 : optionToFocus.disabled) || (optionToFocus == null ? void 0 : optionToFocus.divider)) && availableItems) {
-      availableItems -= 1;
-      this.focusedOptionIndex = (this.options.length + this.focusedOptionIndex + step) % this.options.length;
-      optionToFocus = this.options[this.focusedOptionIndex];
-    }
-    const reachedStart = previousFocusedOptionIndex < this.focusedOptionIndex && offset === -1;
-    const reachedEnd = previousFocusedOptionIndex > this.focusedOptionIndex && offset === 1;
-    if (reachedStart || reachedEnd) {
-      this.focusedOptionIndex = previousFocusedOptionIndex;
-      this.dispatchEvent(
-        new Event(`luzmo-exceeded-${reachedStart ? "top" : "bottom"}`, {
-          bubbles: true,
-          composed: true,
-          cancelable: true
-        })
-      );
-    }
-    let itemToFocus;
-    if (scrollIntoView && this._virtualizeActive) {
-      itemToFocus = [...this.visibleOptionElements].find(
-        (item) => {
-          var _a2, _b, _c;
-          return ((_a2 = item.value) == null ? void 0 : _a2.toString()) === ((_c = (_b = this.options[this.focusedOptionIndex]) == null ? void 0 : _b.value) == null ? void 0 : _c.toString());
-        }
-      );
-      if (!itemToFocus) {
-        this.focusedOptionIndex = this._firstVisibleIndex;
+  focusOptionByOffset(o, t, e) {
+    var u;
+    const i = o || 1;
+    t && (t.focused = !1);
+    const l = this.focusedOptionIndex;
+    this.focusedOptionIndex = this.options.length > 0 ? (this.options.length + this.focusedOptionIndex + o) % this.options.length : 0;
+    let s = this.options[this.focusedOptionIndex], r = this.options.length;
+    for (; (s != null && s.disabled || s != null && s.divider) && r; )
+      r -= 1, this.focusedOptionIndex = (this.options.length + this.focusedOptionIndex + i) % this.options.length, s = this.options[this.focusedOptionIndex];
+    const a = l < this.focusedOptionIndex && o === -1, c = l > this.focusedOptionIndex && o === 1;
+    (a || c) && (this.focusedOptionIndex = l, this.dispatchEvent(
+      new Event(`luzmo-exceeded-${a ? "top" : "bottom"}`, {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ));
+    let m;
+    return e && this._virtualizeActive && (m = [...this.visibleOptionElements].find(
+      (d) => {
+        var h, p, v;
+        return ((h = d.value) == null ? void 0 : h.toString()) === ((v = (p = this.options[this.focusedOptionIndex]) == null ? void 0 : p.value) == null ? void 0 : v.toString());
       }
-    }
-    if (this._virtualizeActive && scrollIntoView) {
-      (_a = this.virtualizer.element(this.focusedOptionIndex)) == null ? void 0 : _a.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest"
-      });
-    }
-    itemToFocus = itemToFocus ?? [...this.visibleOptionElements].find(
-      (item) => {
-        var _a2, _b, _c, _d, _e;
-        return (item.value === null ? null : (_a2 = item.value) == null ? void 0 : _a2.toString()) === (((_b = this.options[this.focusedOptionIndex]) == null ? void 0 : _b.value) === null ? (_c = this.options[this.focusedOptionIndex]) == null ? void 0 : _c.value : (_e = (_d = this.options[this.focusedOptionIndex]) == null ? void 0 : _d.value) == null ? void 0 : _e.toString());
+    ), m || (this.focusedOptionIndex = this._firstVisibleIndex)), this._virtualizeActive && e && ((u = this.virtualizer.element(this.focusedOptionIndex)) == null || u.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    })), m = m ?? [...this.visibleOptionElements].find(
+      (d) => {
+        var h, p, v, k, x;
+        return (d.value === null ? null : (h = d.value) == null ? void 0 : h.toString()) === (((p = this.options[this.focusedOptionIndex]) == null ? void 0 : p.value) === null ? (v = this.options[this.focusedOptionIndex]) == null ? void 0 : v.value : (x = (k = this.options[this.focusedOptionIndex]) == null ? void 0 : k.value) == null ? void 0 : x.toString());
       }
-    );
-    if (!(optionToFocus == null ? void 0 : optionToFocus.disabled)) {
-      this.setFocusedAndActiveDescendant(itemToFocus);
-    }
-    return itemToFocus;
+    ), s != null && s.disabled || this.setFocusedAndActiveDescendant(m), m;
   }
   updateSelectedItemIndex() {
     this.focusedOptionIndex = this._virtualizeActive ? this._firstVisibleIndex : 0;
   }
   setSelectedOptionsFromValue() {
     this._selectedOptions = this.options.filter(
-      (option) => {
-        var _a;
-        return Array.isArray(this.value) && ((_a = this.value) == null ? void 0 : _a.includes((option == null ? void 0 : option.value) ?? null));
+      (o) => {
+        var t;
+        return Array.isArray(this.value) && ((t = this.value) == null ? void 0 : t.includes((o == null ? void 0 : o.value) ?? null));
       }
     );
   }
-  visibilityChanged(event) {
-    this._firstVisibleIndex = (event == null ? void 0 : event.first) ?? 0;
-  }
-  rangeChange(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    if ((event == null ? void 0 : event.first) !== -1 && (event == null ? void 0 : event.last) !== -1) {
-      this.dispatchEvent(
-        new CustomEvent("luzmo-scrolled", {
-          bubbles: true,
-          composed: true,
-          cancelable: true,
-          detail: {
-            first: event.first,
-            last: event.last
-          }
-        })
-      );
-    }
+  visibilityChanged(o) {
+    this._firstVisibleIndex = (o == null ? void 0 : o.first) ?? 0;
   }
-  async toggleOption(event, choice) {
-    var _a;
-    const keyboardEvent = event instanceof KeyboardEvent;
-    const index = this.options.findIndex(
-      (option) => (option == null ? void 0 : option.value) === (choice == null ? void 0 : choice.value)
-    );
-    this.focusedOptionIndex = index;
-    this.visibleOptionElements.forEach((item) => {
-      var _a2, _b;
-      if (keyboardEvent) {
-        const focused = ((item == null ? void 0 : item.value) === null ? null : (_a2 = item.value) == null ? void 0 : _a2.toString()) === ((choice == null ? void 0 : choice.value) === null ? null : (_b = choice == null ? void 0 : choice.value) == null ? void 0 : _b.toString());
-        item.focused = focused;
-        if (focused) {
-          this.setFocusedAndActiveDescendant(item);
+  rangeChange(o) {
+    o.stopPropagation(), o.preventDefault(), (o == null ? void 0 : o.first) !== -1 && (o == null ? void 0 : o.last) !== -1 && this.dispatchEvent(
+      new CustomEvent("luzmo-scrolled", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          first: o.first,
+          last: o.last
         }
-      } else {
-        item.focused = false;
-      }
+      })
+    );
+  }
+  async toggleOption(o, t) {
+    var s;
+    const e = o instanceof KeyboardEvent, i = this.options.findIndex(
+      (r) => (r == null ? void 0 : r.value) === (t == null ? void 0 : t.value)
+    );
+    this.focusedOptionIndex = i, this.visibleOptionElements.forEach((r) => {
+      var a, c;
+      if (e) {
+        const m = ((r == null ? void 0 : r.value) === null ? null : (a = r.value) == null ? void 0 : a.toString()) === ((t == null ? void 0 : t.value) === null ? null : (c = t == null ? void 0 : t.value) == null ? void 0 : c.toString());
+        r.focused = m, m && this.setFocusedAndActiveDescendant(r);
+      } else
+        r.focused = !1;
     });
-    const hasOption = Array.isArray(this.value) && ((_a = this.value) == null ? void 0 : _a.includes((choice == null ? void 0 : choice.value) ?? null));
-    if (this.selects === "single") {
-      this.value = [choice == null ? void 0 : choice.value];
-      this._selectedOptions = [choice];
-    } else {
-      this.value = hasOption ? this.value.filter((value) => value !== (choice == null ? void 0 : choice.value)) : [...this.value ?? [], choice == null ? void 0 : choice.value];
-      this._selectedOptions = hasOption ? this._selectedOptions.filter(
-        (option) => option.value !== choice.value
-      ) : [...this._selectedOptions, choice];
-    }
-    await this.updateComplete;
-    this.dispatchEvent(
+    const l = Array.isArray(this.value) && ((s = this.value) == null ? void 0 : s.includes((t == null ? void 0 : t.value) ?? null));
+    this.selects === "single" ? (this.value = [t == null ? void 0 : t.value], this._selectedOptions = [t]) : (this.value = l ? this.value.filter((r) => r !== (t == null ? void 0 : t.value)) : [...this.value ?? [], t == null ? void 0 : t.value], this._selectedOptions = l ? this._selectedOptions.filter(
+      (r) => r.value !== t.value
+    ) : [...this._selectedOptions, t]), await this.updateComplete, this.dispatchEvent(
       new CustomEvent("change", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0,
         detail: {
           value: this.value ?? []
         }
       })
-    );
-    this.prepareToCleanUp();
+    ), this.prepareToCleanUp();
   }
-  handleOptionClick(option, event) {
-    this.toggleOption(event, option);
+  handleOptionClick(o, t) {
+    this.toggleOption(t, o);
   }
   render() {
-    const renderIcon = (icon) => {
-      return html`<luzmo-icon
+    const o = (r) => g`<luzmo-icon
         slot="icon"
-        .icon=${icon}
+        .icon=${r}
         .size=${this.size}
-      ></luzmo-icon>`;
-    };
-    const renderDescription = (description) => {
-      return html`<span slot="description">${description}</span>`;
-    };
-    const renderImg = (imgSrc) => {
-      return html`<luzmo-icon
+      ></luzmo-icon>`, t = (r) => g`<span slot="description">${r}</span>`, e = (r) => g`<luzmo-icon
         slot="icon"
-        .src=${imgSrc}
+        .src=${r}
         .size=${this.size}
-      ></luzmo-icon>`;
-    };
-    const renderOption = (option) => {
-      var _a;
-      const value = option == null ? void 0 : option.value;
-      const label = option == null ? void 0 : option.label;
-      const description = option == null ? void 0 : option.description;
-      const icon = option == null ? void 0 : option.icon;
-      const imgSrc = option == null ? void 0 : option.imgSrc;
-      const divider = option == null ? void 0 : option.divider;
-      const disabled = typeof option === "string" ? void 0 : option == null ? void 0 : option.disabled;
-      return divider ? html`<luzmo-options-divider></luzmo-options-divider>` : html`<luzmo-option
-            .value=${value}
+      ></luzmo-icon>`, i = (r) => {
+      var v;
+      const a = r == null ? void 0 : r.value, c = r == null ? void 0 : r.label, m = r == null ? void 0 : r.description, u = r == null ? void 0 : r.icon, d = r == null ? void 0 : r.imgSrc, h = r == null ? void 0 : r.divider, p = typeof r == "string" || r == null ? void 0 : r.disabled;
+      return h ? g`<luzmo-options-divider></luzmo-options-divider>` : g`<luzmo-option
+            .value=${a}
             .size=${this.size}
             .variant=${this.variant}
             ?emphasized=${this.emphasized}
             ?no-wrap=${this.noWrap}
-            ?disabled=${disabled}
-            .selected=${Array.isArray(this.value) ? (_a = this.value) == null ? void 0 : _a.includes(value) : false}
+            ?disabled=${p}
+            .selected=${Array.isArray(this.value) ? (v = this.value) == null ? void 0 : v.includes(a) : !1}
             .role=${this.selects === "single" ? "option" : "optioncheckbox"}
-            @click=${this.handleOptionClick.bind(this, option)}
+            @click=${this.handleOptionClick.bind(this, r)}
           >
-            ${icon ? renderIcon(icon) : imgSrc ? renderImg(imgSrc) : nothing}
-            ${label} ${description ? renderDescription(description) : nothing}
+            ${u ? o(u) : d ? e(d) : L}
+            ${c} ${m ? t(m) : L}
           </luzmo-option>`;
-    };
-    const renderedOptions = this._virtualizeActive ? html`<lit-virtualizer
+    }, l = this._virtualizeActive ? g`<lit-virtualizer
           .items=${this.options}
-          .renderItem=${renderOption}
+          .renderItem=${i}
           @rangeChanged=${this.rangeChange}
           @visibilityChanged=${this.visibilityChanged}
-        ></lit-virtualizer>` : repeat(this.options, renderOption);
-    const pendingOption = this.pending ? html`<div id="pending">
+        ></lit-virtualizer>` : Z(this.options, i), s = this.pending ? g`<div id="pending">
           <luzmo-progress-circle indeterminate></luzmo-progress-circle>
-        </div>` : nothing;
-    return html`${renderedOptions} ${pendingOption}`;
+        </div>` : L;
+    return g`${l} ${s}`;
   }
   connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "listbox");
-    this.updateComplete.then(() => this.updateItemFocus());
+    super.connectedCallback(), this.setAttribute("role", "listbox"), this.updateComplete.then(() => this.updateItemFocus());
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -666,78 +1112,66 @@ class LuzmoOptions extends SizedMixin(LuzmoElement, {
           this.updateSelectedItemIndex();
         });
       },
-      { once: true }
+      { once: !0 }
     );
   }
   updateItemFocus() {
-    if (this.visibleOptionElements.length === 0) {
+    if (this.visibleOptionElements.length === 0)
       return;
-    }
-    const lastFocusedIndex = this.focusedOptionIndex;
-    const lastFocusedItem = [...this.visibleOptionElements].find(
-      (item) => {
-        var _a, _b, _c, _d, _e, _f;
-        return (item.value === null ? null : (_a = item.value) == null ? void 0 : _a.toString()) === (((_c = (_b = this.options) == null ? void 0 : _b[lastFocusedIndex]) == null ? void 0 : _c.value) === null ? null : (_f = (_e = (_d = this.options) == null ? void 0 : _d[lastFocusedIndex]) == null ? void 0 : _e.value) == null ? void 0 : _f.toString());
+    const o = this.focusedOptionIndex, t = [...this.visibleOptionElements].find(
+      (e) => {
+        var i, l, s, r, a, c;
+        return (e.value === null ? null : (i = e.value) == null ? void 0 : i.toString()) === (((s = (l = this.options) == null ? void 0 : l[o]) == null ? void 0 : s.value) === null ? null : (c = (a = (r = this.options) == null ? void 0 : r[o]) == null ? void 0 : a.value) == null ? void 0 : c.toString());
       }
     );
-    this.setFocusedAndActiveDescendant(lastFocusedItem);
+    this.setFocusedAndActiveDescendant(t);
   }
-  setFocusedAndActiveDescendant(item) {
-    var _a, _b;
-    if (!item) {
+  setFocusedAndActiveDescendant(o) {
+    var e, i;
+    if (!o)
       return;
-    }
-    const focused = this.hasVisibleFocusInTree() || !!(((_a = this.visibleOptionElements) == null ? void 0 : _a.some) && ((_b = this.visibleOptionElements) == null ? void 0 : _b.some(
-      (child) => child.hasVisibleFocusInTree()
+    const t = this.hasVisibleFocusInTree() || !!((e = this.visibleOptionElements) != null && e.some && ((i = this.visibleOptionElements) != null && i.some(
+      (l) => l.hasVisibleFocusInTree()
     )));
-    item.focused = focused;
-    if (focused) {
-      this.setAttribute("aria-activedescendant", item.id);
-    }
+    o.focused = t, t && this.setAttribute("aria-activedescendant", o.id);
   }
 }
-__decorateClass([
-  property({ type: String, reflect: true })
-], LuzmoOptions.prototype, "label");
-__decorateClass([
-  property({ type: String, reflect: true })
-], LuzmoOptions.prototype, "variant");
-__decorateClass([
-  property({ type: String, reflect: true })
-], LuzmoOptions.prototype, "selects");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LuzmoOptions.prototype, "emphasized");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LuzmoOptions.prototype, "pending");
-__decorateClass([
-  property({ type: Array })
-], LuzmoOptions.prototype, "options");
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "no-wrap" })
-], LuzmoOptions.prototype, "noWrap");
-__decorateClass([
-  property({ type: Array })
-], LuzmoOptions.prototype, "value");
-__decorateClass([
-  query("lit-virtualizer")
-], LuzmoOptions.prototype, "virtualizer");
-__decorateClass([
-  queryAll("luzmo-option")
-], LuzmoOptions.prototype, "visibleOptionElements");
-if (!customElements.get("luzmo-options")) {
-  customElements.define("luzmo-options", LuzmoOptions);
-}
-if (!customElements.get("luzmo-options-divider")) {
-  customElements.define("luzmo-options-divider", LuzmoOptionsDivider);
-}
-if (!customElements.get("luzmo-option")) {
-  customElements.define("luzmo-option", LuzmoOption);
-}
+y([
+  f({ type: String, reflect: !0 })
+], z.prototype, "label");
+y([
+  f({ type: String, reflect: !0 })
+], z.prototype, "variant");
+y([
+  f({ type: String, reflect: !0 })
+], z.prototype, "selects");
+y([
+  f({ type: Boolean, reflect: !0 })
+], z.prototype, "emphasized");
+y([
+  f({ type: Boolean, reflect: !0 })
+], z.prototype, "pending");
+y([
+  f({ type: Array })
+], z.prototype, "options");
+y([
+  f({ type: Boolean, reflect: !0, attribute: "no-wrap" })
+], z.prototype, "noWrap");
+y([
+  f({ type: Array })
+], z.prototype, "value");
+y([
+  V("lit-virtualizer")
+], z.prototype, "virtualizer");
+y([
+  go("luzmo-option")
+], z.prototype, "visibleOptionElements");
+customElements.get("luzmo-options") || customElements.define("luzmo-options", z);
+customElements.get("luzmo-options-divider") || customElements.define("luzmo-options-divider", Vo);
+customElements.get("luzmo-option") || customElements.define("luzmo-option", b);
 export {
-  LuzmoOption,
-  LuzmoOptions,
-  LuzmoOptionsDivider,
-  VIRTUALIZE_AS_OF_NUM_ITEMS
+  b as LuzmoOption,
+  z as LuzmoOptions,
+  Vo as LuzmoOptionsDivider,
+  Fo as VIRTUALIZE_AS_OF_NUM_ITEMS
 };