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

package/components/options/index.cjs

@@ -15,24 +15,170 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("../mutation-controller-DkOMCW-c.cjs"),a=require("../base-CBCg3yyw.cjs"),L=require("../query-BL-TJj7K.cjs"),K=require("../focusable-EbipgXRh.cjs"),Z=require("../like-anchor-sod1C1fR.cjs"),G=require("../observe-slot-presence-bc9chhsi.cjs"),J=require("../observe-slot-text-Ceb7SvYT.cjs"),X=require("../random-id-CqvckpWe.cjs"),E=require("../luzmo-icons-D47EGj-3.cjs"),S=require("../directive-C7oCP5Bh.cjs"),Y=require("../async-directive-BX1T1e1_.cjs"),g=require("../directive-helpers-DyIRTWwA.cjs"),Q=require("../base-BjTwmyRF.cjs"),D=require("../sized-mixin-CPxE5C96.cjs");require("../progress-circle/index.cjs");const tt=require("../divider.module-DDvBo9zo.cjs");/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */let ot;function et(r){return(t,o)=>Q.e(t,o,{get(){return(this.renderRoot??ot??(ot=document.createDocumentFragment())).querySelectorAll(r)}})}const it='#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 nt=Object.defineProperty,lt=Object.getOwnPropertyDescriptor,z=(r,t,o,e)=>{for(var i=e>1?void 0:e?lt(t,o):t,n=r.length-1,s;n>=0;n--)(s=r[n])&&(i=(e?s(t,o,i):s(i))||i);return e&&i&&nt(t,o,i),i};const rt=r=>a.x`
-  <span class="icon-container icon checkmark ${r.join(" ")}">
-    ${E.p3(E.F)}
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const mutationController_js = require("@lit-labs/observers/mutation-controller.js");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const focusable = require("../focusable-BPrTcZPd.cjs");
+const likeAnchor = require("../like-anchor-D62faRNG.cjs");
+const observeSlotPresence = require("../observe-slot-presence-9AwLGUQ_.cjs");
+const observeSlotText = require("../observe-slot-text-CSofZeeF.cjs");
+const randomId = require("../random-id-BE6HA503.cjs");
+const icons = require("@luzmo/icons");
+require("@lit-labs/virtualizer");
+const repeat_js = require("lit/directives/repeat.js");
+const base = require("../base-COw9n7UR.cjs");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+require("../progress-circle/index.cjs");
+const divider_module = require("../divider.module-Cm5LcDRV.cjs");
+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;
+};
+const checkIcon = (classes) => lit.html`
+  <span class="icon-container icon checkmark ${classes.join(" ")}">
+    ${icons.luzmoIcon(icons.luzmoCheck)}
   </span>
-`,st=r=>a.x`
-  <span class="icon-container icon checkbox ${r.join(" ")}">
-    ${E.p3(E.z0)}
+`;
+const checkboxIcon = (classes) => lit.html`
+  <span class="icon-container icon checkbox ${classes.join(" ")}">
+    ${icons.luzmoIcon(icons.luzmoCheckbox)}
   </span>
-`,at=r=>a.x`
-  <span class="icon-container icon checkbox ${r.join(" ")}">
-    ${E.p3(E.v0)}
+`;
+const checkboxCheckedIcon = (classes) => lit.html`
+  <span class="icon-container icon checkbox ${classes.join(" ")}">
+    ${icons.luzmoIcon(icons.luzmoCheckboxChecked)}
   </span>
-`;class b extends Z.LikeAnchor(J.ObserveSlotText(G.ObserveSlotPresence(K.Focusable,'[slot="icon"]'))){constructor(){super(),this.active=!1,this.focused=!1,this.selected=!1,this.emphasized=!1,this.variant="checkmarks",this._value="",this.noWrap=!1,this.renderCheckIcon=(t,o)=>{const e=o?["check-icon--with-adjacent-icon"]:[];return this.variant==="checkboxes"?t?at(e):st(e):t&&this.variant!=="highlight"?rt(e):a.x``},this.proxyFocus=()=>{this.focus()},this.willDispatchUpdate=!1,this.addEventListener("click",this.handleClickCapture,{capture:!0}),new W.s(this,{config:{characterData:!0,childList:!0,subtree:!0},callback:()=>{this.breakItemChildrenCache()}})}static get styles(){return[a.r(it)]}get value(){return this._value||this.itemText}set value(t){t!==this._value&&(this._value=t||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((t,o)=>t+(o.textContent||"").trim(),"")}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const t=this.iconSlot.assignedElements().map(e=>{const i=e.cloneNode(!0);return i.removeAttribute("slot"),i.classList.toggle("icon"),i}),o=this.contentSlot.assignedNodes().map(e=>e.cloneNode(!0));return this._itemChildren={icon:t,content:o},this._itemChildren}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(t){if(this.disabled)return t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation(),!1}shouldProxyClick(){let t=!1;return this.anchorElement&&(this.anchorElement.click(),t=!0),t}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}render(){return a.x`
-      ${this.renderCheckIcon(this.selected,this.hasIcon)}
+`;
+class LuzmoOption extends likeAnchor.LikeAnchor(
+  observeSlotText.ObserveSlotText(observeSlotPresence.ObserveSlotPresence(focusable.Focusable, '[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) : lit.html``;
+    };
+    this.proxyFocus = () => {
+      this.focus();
+    };
+    this.willDispatchUpdate = false;
+    this.addEventListener("click", this.handleClickCapture, {
+      capture: true
+    });
+    new mutationController_js.MutationController(this, {
+      config: {
+        characterData: true,
+        childList: true,
+        subtree: true
+      },
+      callback: () => {
+        this.breakItemChildrenCache();
+      }
+    });
+  }
+  static get styles() {
+    return [lit.unsafeCSS(menuItemStyles)];
+  }
+  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");
+    }
+  }
+  /**
+   * @private
+   */
+  get itemText() {
+    return this.itemChildren.content.reduce(
+      (acc, node) => acc + (node.textContent || "").trim(),
+      ""
+    );
+  }
+  get focusElement() {
+    return this;
+  }
+  get hasIcon() {
+    return this.slotContentIsPresent;
+  }
+  get itemChildren() {
+    if (!this.iconSlot || !this.contentSlot) {
+      return {
+        icon: [],
+        content: []
+      };
+    }
+    if (this._itemChildren) {
+      return this._itemChildren;
+    }
+    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;
+  }
+  click() {
+    if (this.disabled) {
+      return;
+    }
+    if (this.shouldProxyClick()) {
+      return;
+    }
+    super.click();
+  }
+  handleClickCapture(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
+  }
+  shouldProxyClick() {
+    let handled = false;
+    if (this.anchorElement) {
+      this.anchorElement.click();
+      handled = true;
+    }
+    return handled;
+  }
+  breakItemChildrenCache() {
+    this._itemChildren = void 0;
+    this.triggerUpdate();
+  }
+  render() {
+    return lit.html`
+      ${this.renderCheckIcon(this.selected, this.hasIcon)}
       <div id="icon">
         <slot name="icon"></slot>
       </div>
@@ -41,61 +187,548 @@
       </div>
       <slot name="description"></slot>
       <slot name="value"></slot>
-      ${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):a.E}
-    `}handlePointerdown(){}firstUpdated(t){super.firstUpdated(t),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.hasAttribute("id")||(this.id=`luzmo-option-${X.randomID()}`)}updateAriaSelected(){const t=this.getAttribute("role");t==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):t==="optioncheckbox"&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(t){this.setAttribute("role",t),this.updateAriaSelected()}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&this.setAttribute("aria-label",this.label||""),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),t.has("selected")&&this.updateAriaSelected()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(t=>requestAnimationFrame(t)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.willDispatchUpdate=!1)}}z([a.n({type:Boolean,reflect:!0})],b.prototype,"active",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"focused",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"selected",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"emphasized",2);z([a.n({type:String,reflect:!0})],b.prototype,"variant",2);z([a.n({type:String})],b.prototype,"value",1);z([L.e("slot:not([name])")],b.prototype,"contentSlot",2);z([L.e('slot[name="icon"]')],b.prototype,"iconSlot",2);z([a.n({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],b.prototype,"noWrap",2);z([L.e(".anchor")],b.prototype,"anchorElement",2);function O(r,t,o,e){var i=arguments.length,n=i<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,o):e,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(r,t,o,e);else for(var l=r.length-1;l>=0;l--)(s=r[l])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n}/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const F=(r,t,o)=>{const e=new Map;for(let i=t;i<=o;i++)e.set(r[i],i);return e},j=S.e(class extends S.i{constructor(r){if(super(r),r.type!==S.t.CHILD)throw Error("repeat() can only be used in text expressions")}dt(r,t,o){let e;o===void 0?o=t:t!==void 0&&(e=t);const i=[],n=[];let s=0;for(const l of r)i[s]=e?e(l,s):s,n[s]=o(l,s),s++;return{values:n,keys:i}}render(r,t,o){return this.dt(r,t,o).values}update(r,[t,o,e]){const i=g.p(r),{values:n,keys:s}=this.dt(t,o,e);if(!Array.isArray(i))return this.ut=s,n;const l=this.ut??(this.ut=[]),c=[];let h,m,d=0,p=i.length-1,u=0,v=n.length-1;for(;d<=p&&u<=v;)if(i[d]===null)d++;else if(i[p]===null)p--;else if(l[d]===s[u])c[u]=g.v(i[d],n[u]),d++,u++;else if(l[p]===s[v])c[v]=g.v(i[p],n[v]),p--,v--;else if(l[d]===s[v])c[v]=g.v(i[d],n[v]),g.r(r,c[v+1],i[d]),d++,v--;else if(l[p]===s[u])c[u]=g.v(i[p],n[u]),g.r(r,i[d],i[p]),p--,u++;else if(h===void 0&&(h=F(s,u,v),m=F(l,d,p)),h.has(l[d]))if(h.has(l[p])){const f=m.get(s[u]),y=f!==void 0?i[f]:null;if(y===null){const x=g.r(r,i[d]);g.v(x,n[u]),c[u]=x}else c[u]=g.v(y,n[u]),g.r(r,i[d],y),i[f]=null;u++}else g.M(i[p]),p--;else g.M(i[d]),d++;for(;u<=v;){const f=g.r(r,c[v+1]);g.v(f,n[u]),c[u++]=f}for(;d<=p;){const f=i[d++];f!==null&&g.M(f)}return this.ut=s,g.m(r,c),a.T}});/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class T extends Event{constructor(t){super(T.eventName,{bubbles:!1}),this.first=t.first,this.last=t.last}}T.eventName="rangeChanged";class V extends Event{constructor(t){super(V.eventName,{bubbles:!1}),this.first=t.first,this.last=t.last}}V.eventName="visibilityChanged";class M extends Event{constructor(){super(M.eventName,{bubbles:!1})}}M.eventName="unpinned";/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class ct{constructor(t){this._element=null;const o=t??window;this._node=o,t&&(this._element=t)}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 ht extends ct{constructor(t,o){super(o),this._clients=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(t)}get _destination(){return this.__destination}get scrolling(){return this._destination!==null}scrollTo(t,o){const e=typeof t=="number"&&typeof o=="number"?{left:t,top:o}:t;this._scrollTo(e)}scrollBy(t,o){const e=typeof t=="number"&&typeof o=="number"?{left:t,top:o}:t;e.top!==void 0&&(e.top+=this.scrollTop),e.left!==void 0&&(e.left+=this.scrollLeft),this._scrollTo(e)}_nativeScrollTo(t){this._originalScrollTo.bind(this._element||window)(t)}_scrollTo(t,o=null,e=null){this._end!==null&&this._end(),t.behavior==="smooth"?(this._setDestination(t),this._retarget=o,this._end=e):this._resetScrollState(),this._nativeScrollTo(t)}_setDestination(t){let{top:o,left:e}=t;return o=o===void 0?void 0:Math.max(0,Math.min(o,this.maxScrollTop)),e=e===void 0?void 0:Math.max(0,Math.min(e,this.maxScrollLeft)),this._destination!==null&&e===this._destination.left&&o===this._destination.top?!1:(this.__destination={top:o,left:e,behavior:"smooth"},!0)}_resetScrollState(){this.__destination=null,this._retarget=null,this._end=null}_updateManagedScrollTo(t){this._destination&&this._setDestination(t)&&this._nativeScrollTo(this._destination)}managedScrollTo(t,o,e){return this._scrollTo(t,o,e),this._updateManagedScrollTo}correctScrollError(t){this.correctingScrollError=!0,requestAnimationFrame(()=>requestAnimationFrame(()=>this.correctingScrollError=!1)),this._nativeScrollTo(t),this._retarget&&this._setDestination(this._retarget()),this._destination&&this._nativeScrollTo(this._destination)}_checkForArrival(){if(this._destination!==null){const{scrollTop:t,scrollLeft:o}=this;let{top:e,left:i}=this._destination;e=Math.min(e||0,this.maxScrollTop),i=Math.min(i||0,this.maxScrollLeft);const n=Math.abs(e-t),s=Math.abs(i-o);n<1&&s<1&&(this._end&&this._end(),this._resetScrollState())}}detach(t){return this._clients.delete(t),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(t){this._clients.add(t),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 $=typeof window<"u"?window.ResizeObserver:void 0;const R=Symbol("virtualizerRef"),I="virtualizer-sizer";let P;class ut{constructor(t){if(this._benchmarkStart=null,this._layout=null,this._clippingAncestors=[],this._scrollSize=null,this._scrollError=null,this._childrenPos=null,this._childMeasurements=null,this._toBeMeasured=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=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,!t)throw new Error("Virtualizer constructor requires a configuration object");if(t.hostElement)this._init(t);else throw new Error('Virtualizer configuration requires the "hostElement" property')}set items(t){Array.isArray(t)&&t!==this._items&&(this._itemsChanged=!0,this._items=t,this._schedule(this._updateLayout))}_init(t){this._isScroller=!!t.scroller,this._initHostElement(t);const o=t.layout||{};this._layoutInitialized=this._initLayout(o)}_initObservers(){this._mutationObserver=new MutationObserver(this._finishDOMUpdate.bind(this)),this._hostElementRO=new $(()=>this._hostElementSizeChanged()),this._childrenRO=new $(this._childrenSizeChanged.bind(this))}_initHostElement(t){const o=this._hostElement=t.hostElement;this._applyVirtualizerStyles(),o[R]=this}connected(){this._initObservers();const t=this._isScroller;this._clippingAncestors=vt(this._hostElement,t),this._scrollerController=new ht(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(t=>{t.addEventListener("scroll",this,this._scrollEventListenerOptions),this._scrollEventListeners.push(t),this._hostElementRO.observe(t)}),this._hostElementRO.observe(this._scrollerController.element),this._children.forEach(t=>this._childrenRO.observe(t)),this._scrollEventListeners.forEach(t=>t.addEventListener("scroll",this,this._scrollEventListenerOptions))}disconnected(){var t,o,e,i;this._scrollEventListeners.forEach(n=>n.removeEventListener("scroll",this,this._scrollEventListenerOptions)),this._scrollEventListeners=[],this._clippingAncestors=[],(t=this._scrollerController)==null||t.detach(this),this._scrollerController=null,(o=this._mutationObserver)==null||o.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 o=this._hostElement.style;o.display=o.display||"block",o.position=o.position||"relative",o.contain=o.contain||"size layout",this._isScroller&&(o.overflow=o.overflow||"auto",o.minHeight=o.minHeight||"150px")}_getSizer(){const t=this._hostElement;if(!this._sizer){let o=t.querySelector(`[${I}]`);o||(o=document.createElement("div"),o.setAttribute(I,""),t.appendChild(o)),Object.assign(o.style,{position:"absolute",margin:"-2px 0 0 0",padding:0,visibility:"hidden",fontSize:"2px"}),o.textContent="&nbsp;",o.setAttribute(I,""),this._sizer=o}return this._sizer}async updateLayoutConfig(t){await this._layoutInitialized;const o=t.type||P;if(typeof o=="function"&&this._layout instanceof o){const e={...t};return delete e.type,this._layout.config=e,!0}return!1}async _initLayout(t){let o,e;if(typeof t.type=="function"){e=t.type;const i={...t};delete i.type,o=i}else o=t;e===void 0&&(P=e=(await Promise.resolve().then(()=>require("../flow-DM3dNAKs.cjs"))).FlowLayout),this._layout=new e(i=>this._handleLayoutMessage(i),o),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)}startBenchmarking(){this._benchmarkStart===null&&(this._benchmarkStart=window.performance.now())}stopBenchmarking(){if(this._benchmarkStart!==null){const t=window.performance.now(),o=t-this._benchmarkStart,i=performance.getEntriesByName("uv-virtualizing","measure").filter(n=>n.startTime>=this._benchmarkStart&&n.startTime<t).reduce((n,s)=>n+s.duration,0);return this._benchmarkStart=null,{timeElapsed:o,virtualizationTime:i}}return null}_measureChildren(){const t={},o=this._children,e=this._measureChildOverride||this._measureChild;for(let i=0;i<o.length;i++){const n=o[i],s=this._first+i;(this._itemsChanged||this._toBeMeasured.has(n))&&(t[s]=e.call(this,n,this._items[s]))}this._childMeasurements=t,this._schedule(this._updateLayout),this._toBeMeasured.clear()}_measureChild(t){const{width:o,height:e}=t.getBoundingClientRect();return Object.assign({width:o,height:e},dt(t))}async _schedule(t){this._scheduled.has(t)||(this._scheduled.add(t),await Promise.resolve(),this._scheduled.delete(t),t.call(this))}async _updateDOM(t){this._scrollSize=t.scrollSize,this._adjustRange(t.range),this._childrenPos=t.childPositions,this._scrollError=t.scrollError||null;const{_rangeChanged:o,_itemsChanged:e}=this;this._visibilityChanged&&(this._notifyVisibility(),this._visibilityChanged=!1),(o||e)&&(this._notifyRange(),this._rangeChanged=!1),this._finishDOMUpdate()}_finishDOMUpdate(){this._connected&&(this._children.forEach(t=>this._childrenRO.observe(t)),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 t;if(this._benchmarkStart&&"mark"in window.performance){try{window.performance.measure("uv-virtualizing","uv-start","uv-end")}catch(o){console.warn("Error measuring performance data: ",o)}window.performance.mark("uv-start")}this._scrollerController.correctingScrollError===!1&&((t=this._layout)==null||t.unpin()),this._schedule(this._updateLayout)}handleEvent(t){switch(t.type){case"scroll":(t.currentTarget===window||this._clippingAncestors.includes(t.currentTarget))&&this._handleScrollEvent();break;default:console.warn("event not handled",t)}}_handleLayoutMessage(t){t.type==="stateChanged"?this._updateDOM(t):t.type==="visibilityChanged"?(this._firstVisible=t.firstVisible,this._lastVisible=t.lastVisible,this._notifyVisibility()):t.type==="unpinned"&&this._hostElement.dispatchEvent(new M)}get _children(){const t=[];let o=this._hostElement.firstElementChild;for(;o;)o.hasAttribute(I)||t.push(o),o=o.nextElementSibling;return t}_updateView(){var i;const t=this._hostElement,o=(i=this._scrollerController)==null?void 0:i.element,e=this._layout;if(t&&o&&e){let n,s,l,c;const h=t.getBoundingClientRect();n=0,s=0,l=window.innerHeight,c=window.innerWidth;const m=this._clippingAncestors.map(w=>w.getBoundingClientRect());m.unshift(h);for(const w of m)n=Math.max(n,w.top),s=Math.max(s,w.left),l=Math.min(l,w.bottom),c=Math.min(c,w.right);const d=o.getBoundingClientRect(),p={left:h.left-d.left,top:h.top-d.top},u={width:o.scrollWidth,height:o.scrollHeight},v=n-h.top+t.scrollTop,f=s-h.left+t.scrollLeft,y=Math.max(0,l-n),x=Math.max(0,c-s);e.viewportSize={width:x,height:y},e.viewportScroll={top:v,left:f},e.totalScrollSize=u,e.offsetWithinScroller=p}}_sizeHostElement(t){const e=t&&t.width!==null?Math.min(82e5,t.width):0,i=t&&t.height!==null?Math.min(82e5,t.height):0;if(this._isScroller)this._getSizer().style.transform=`translate(${e}px, ${i}px)`;else{const n=this._hostElement.style;n.minWidth=e?`${e}px`:"100%",n.minHeight=i?`${i}px`:"100%"}}_positionChildren(t){t&&t.forEach(({top:o,left:e,width:i,height:n,xOffset:s,yOffset:l},c)=>{const h=this._children[c-this._first];h&&(h.style.position="absolute",h.style.boxSizing="border-box",h.style.transform=`translate(${e}px, ${o}px)`,i!==void 0&&(h.style.width=i+"px"),n!==void 0&&(h.style.height=n+"px"),h.style.left=s===void 0?null:s+"px",h.style.top=l===void 0?null:l+"px")})}async _adjustRange(t){const{_first:o,_last:e,_firstVisible:i,_lastVisible:n}=this;this._first=t.first,this._last=t.last,this._firstVisible=t.firstVisible,this._lastVisible=t.lastVisible,this._rangeChanged=this._rangeChanged||this._first!==o||this._last!==e,this._visibilityChanged=this._visibilityChanged||this._firstVisible!==i||this._lastVisible!==n}_correctScrollError(){if(this._scrollError){const{scrollTop:t,scrollLeft:o}=this._scrollerController,{top:e,left:i}=this._scrollError;this._scrollError=null,this._scrollerController.correctScrollError({top:t-e,left:o-i})}}element(t){var o;return t===1/0&&(t=this._items.length-1),((o=this._items)==null?void 0:o[t])===void 0?void 0:{scrollIntoView:(e={})=>this._scrollElementIntoView({...e,index:t})}}_scrollElementIntoView(t){if(t.index>=this._first&&t.index<=this._last)this._children[t.index-this._first].scrollIntoView(t);else if(t.index=Math.min(t.index,this._items.length-1),t.behavior==="smooth"){const o=this._layout.getScrollIntoViewCoordinates(t),{behavior:e}=t;this._updateScrollIntoViewCoordinates=this._scrollerController.managedScrollTo(Object.assign(o,{behavior:e}),()=>this._layout.getScrollIntoViewCoordinates(t),()=>this._scrollIntoViewTarget=null),this._scrollIntoViewTarget=t}else this._layout.pin=t}_checkScrollIntoViewTarget(t){const{index:o}=this._scrollIntoViewTarget||{};o&&(t!=null&&t.has(o))&&this._updateScrollIntoViewCoordinates(this._layout.getScrollIntoViewCoordinates(this._scrollIntoViewTarget))}_notifyRange(){this._hostElement.dispatchEvent(new T({first:this._first,last:this._last}))}_notifyVisibility(){this._hostElement.dispatchEvent(new V({first:this._firstVisible,last:this._lastVisible}))}get layoutComplete(){return this._layoutCompletePromise||(this._layoutCompletePromise=new Promise((t,o)=>{this._layoutCompleteResolver=t,this._layoutCompleteRejecter=o})),this._layoutCompletePromise}_rejectLayoutCompletePromise(t){this._layoutCompleteRejecter!==null&&this._layoutCompleteRejecter(t),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}_hostElementSizeChanged(){this._schedule(this._updateLayout)}_childLoaded(){}_childrenSizeChanged(t){var o;if((o=this._layout)!=null&&o.measureChildren){for(const e of t)this._toBeMeasured.set(e.target,e.contentRect);this._measureChildren()}this._scheduleLayoutComplete(),this._itemsChanged=!1,this._rangeChanged=!1}}function dt(r){const t=window.getComputedStyle(r);return{marginTop:A(t.marginTop),marginRight:A(t.marginRight),marginBottom:A(t.marginBottom),marginLeft:A(t.marginLeft)}}function A(r){const t=r?parseFloat(r):NaN;return Number.isNaN(t)?0:t}function B(r){if(r.assignedSlot!==null)return r.assignedSlot;if(r.parentElement!==null)return r.parentElement;const t=r.parentNode;return t&&t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host||null}function pt(r,t=!1){const o=[];let e=t?r:B(r);for(;e!==null;)o.push(e),e=B(e);return o}function vt(r,t=!1){let o=!1;return pt(r,t).filter(e=>{if(o)return!1;const i=getComputedStyle(e);return o=i.position==="fixed",i.overflow!=="visible"})}/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const U=r=>r,q=(r,t)=>a.x`${t}: ${JSON.stringify(r,null,2)}`;class mt extends Y.f{constructor(t){if(super(t),this._virtualizer=null,this._first=0,this._last=-1,this._renderItem=(o,e)=>q(o,e+this._first),this._keyFunction=(o,e)=>U(o,e+this._first),this._items=[],t.type!==S.t.CHILD)throw new Error("The virtualize directive can only be used in child expressions")}render(t){t&&this._setFunctions(t);const o=[];if(this._first>=0&&this._last>=this._first)for(let e=this._first;e<=this._last;e++)o.push(this._items[e]);return j(o,this._keyFunction,this._renderItem)}update(t,[o]){this._setFunctions(o);const e=this._items!==o.items;return this._items=o.items||[],this._virtualizer?this._updateVirtualizerConfig(t,o):this._initialize(t,o),e?a.T:this.render()}async _updateVirtualizerConfig(t,o){if(!await this._virtualizer.updateLayoutConfig(o.layout||{})){const i=t.parentNode;this._makeVirtualizer(i,o)}this._virtualizer.items=this._items}_setFunctions(t){const{renderItem:o,keyFunction:e}=t;o&&(this._renderItem=(i,n)=>o(i,n+this._first)),e&&(this._keyFunction=(i,n)=>e(i,n+this._first))}_makeVirtualizer(t,o){this._virtualizer&&this._virtualizer.disconnected();const{layout:e,scroller:i,items:n}=o;this._virtualizer=new ut({hostElement:t,layout:e,scroller:i}),this._virtualizer.items=n,this._virtualizer.connected()}_initialize(t,o){const e=t.parentNode;e&&e.nodeType===1&&(e.addEventListener("rangeChanged",i=>{this._first=i.first,this._last=i.last,this.setValue(this.render())}),this._makeVirtualizer(e,o))}disconnected(){var t;(t=this._virtualizer)==null||t.disconnected()}reconnected(){var t;(t=this._virtualizer)==null||t.connected()}}const ft=S.e(mt);/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class C extends a.r$1{constructor(){super(...arguments),this.items=[],this.renderItem=q,this.keyFunction=U,this.layout={},this.scroller=!1}createRenderRoot(){return this}render(){const{items:t,renderItem:o,keyFunction:e,layout:i,scroller:n}=this;return a.x`${ft({items:t,renderItem:o,keyFunction:e,layout:i,scroller:n})}`}element(t){var o;return(o=this[R])==null?void 0:o.element(t)}get layoutComplete(){var t;return(t=this[R])==null?void 0:t.layoutComplete}scrollToIndex(t,o="start"){var e;(e=this.element(t))==null||e.scrollIntoView({block:o})}}O([a.n({attribute:!1})],C.prototype,"items",void 0);O([a.n()],C.prototype,"renderItem",void 0);O([a.n()],C.prototype,"keyFunction",void 0);O([a.n({attribute:!1})],C.prototype,"layout",void 0);O([a.n({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 gt=":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 N extends D.SizedMixin(a.LuzmoElement,{validSizes:["s","m","l"]}){static get styles(){return[a.r(tt.dividerStyles),a.r(gt)]}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","separator")}}const bt=":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 _t=Object.defineProperty,k=(r,t,o,e)=>{for(var i=void 0,n=r.length-1,s;n>=0;n--)(s=r[n])&&(i=s(t,o,i)||i);return i&&_t(t,o,i),i};const H=25;function zt(r,t){return!!t&&(r===t||r.contains(t))}class _ extends D.SizedMixin(a.LuzmoElement,{noDefaultSize:!0}){constructor(){super(),this.label="",this.variant="highlight",this.selects="single",this.emphasized=!1,this.pending=!1,this.options=[],this.value=[],this.focusedOptionIndex=0,this._selectedOptions=[],this._firstVisibleIndex=0,this.addEventListener("focusin",this.handleFocusin),this.addEventListener("blur",this.handleBlur)}static get styles(){return[a.r(bt)]}get _virtualizeActive(){return this.options.length>H}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("tabindex")||(this.tabIndex=0);const o=[new Promise(e=>requestAnimationFrame(()=>e(!0)))];[...this.children].forEach(e=>{e.localName==="luzmo-option"&&o.push(e.updateComplete)}),this.optionElementsUpdated=Promise.all(o)}willUpdate(t){var e;t.has("selects")&&this.selects==="single"&&((e=this.value)==null?void 0:e.length)>1&&(this.value=this.value.slice(0,1))}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}async getUpdateComplete(){const t=await super.getUpdateComplete();return await this.optionElementsUpdated,t}focus({preventScroll:t}={}){super.focus({preventScroll:t}),this.focusOptionByOffset(0)}_removeFocusedPropertyOnOptions(){requestAnimationFrame(()=>{this.visibleOptionElements.forEach(t=>{t.focused=!1})})}scrollToTop(){this.scrollTop=0}handleFocusin(){this.startListeningToKeyboard()}handleBlur(t){zt(this,t.relatedTarget)||(this.stopListeningToKeyboard(),this._removeFocusedPropertyOnOptions(),this.removeAttribute("aria-activedescendant"))}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown)}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown)}handleKeydown(t){var n;if(t.defaultPrevented)return;const o=this.focusedOptionIndex,e=[...this.visibleOptionElements].find(s=>{var l,c,h,m;return((l=s.value)==null?void 0:l.toString())===((m=(h=(c=this.options)==null?void 0:c[o])==null?void 0:h.value)==null?void 0:m.toString())}),{key:i}=t;if(i==="Tab"){this.prepareToCleanUp();return}if(i===" "||i==="Enter"){t.preventDefault(),e&&this.toggleOption(t,(n=this.options)==null?void 0:n[o]);return}if(i==="ArrowDown"||i==="ArrowUp"){t.preventDefault(),this.navigateWithinOptions(t,e);return}}navigateWithinOptions(t,o){const{key:e}=t,i=e==="ArrowDown"?1:-1;t.preventDefault(),t.stopPropagation();const n=this.focusOptionByOffset(i,o,!0);n!==o&&(this._virtualizeActive||n==null||n.scrollIntoView({block:"nearest"}))}focusOptionByOffset(t,o,e){var d;const i=t||1;o&&(o.focused=!1);const n=this.focusedOptionIndex;this.focusedOptionIndex=this.options.length>0?(this.options.length+this.focusedOptionIndex+t)%this.options.length:0;let s=this.options[this.focusedOptionIndex],l=this.options.length;for(;(s!=null&&s.disabled||s!=null&&s.divider)&&l;)l-=1,this.focusedOptionIndex=(this.options.length+this.focusedOptionIndex+i)%this.options.length,s=this.options[this.focusedOptionIndex];const c=n<this.focusedOptionIndex&&t===-1,h=n>this.focusedOptionIndex&&t===1;(c||h)&&(this.focusedOptionIndex=n,this.dispatchEvent(new Event(`luzmo-exceeded-${c?"top":"bottom"}`,{bubbles:!0,composed:!0,cancelable:!0})));let m;return e&&this._virtualizeActive&&(m=[...this.visibleOptionElements].find(p=>{var u,v,f;return((u=p.value)==null?void 0:u.toString())===((f=(v=this.options[this.focusedOptionIndex])==null?void 0:v.value)==null?void 0:f.toString())}),m||(this.focusedOptionIndex=this._firstVisibleIndex)),this._virtualizeActive&&e&&((d=this.virtualizer.element(this.focusedOptionIndex))==null||d.scrollIntoView({behavior:"smooth",block:"nearest"})),m=m??[...this.visibleOptionElements].find(p=>{var u,v,f,y,x;return(p.value===null?null:(u=p.value)==null?void 0:u.toString())===(((v=this.options[this.focusedOptionIndex])==null?void 0:v.value)===null?(f=this.options[this.focusedOptionIndex])==null?void 0:f.value:(x=(y=this.options[this.focusedOptionIndex])==null?void 0:y.value)==null?void 0:x.toString())}),s!=null&&s.disabled||this.setFocusedAndActiveDescendant(m),m}updateSelectedItemIndex(){this.focusedOptionIndex=this._virtualizeActive?this._firstVisibleIndex:0}setSelectedOptionsFromValue(){this._selectedOptions=this.options.filter(t=>{var o;return Array.isArray(this.value)&&((o=this.value)==null?void 0:o.includes((t==null?void 0:t.value)??null))})}visibilityChanged(t){this._firstVisibleIndex=(t==null?void 0:t.first)??0}rangeChange(t){t.stopPropagation(),t.preventDefault(),(t==null?void 0:t.first)!==-1&&(t==null?void 0:t.last)!==-1&&this.dispatchEvent(new CustomEvent("luzmo-scrolled",{bubbles:!0,composed:!0,cancelable:!0,detail:{first:t.first,last:t.last}}))}async toggleOption(t,o){var s;const e=t instanceof KeyboardEvent,i=this.options.findIndex(l=>(l==null?void 0:l.value)===(o==null?void 0:o.value));this.focusedOptionIndex=i,this.visibleOptionElements.forEach(l=>{var c,h;if(e){const m=((l==null?void 0:l.value)===null?null:(c=l.value)==null?void 0:c.toString())===((o==null?void 0:o.value)===null?null:(h=o==null?void 0:o.value)==null?void 0:h.toString());l.focused=m,m&&this.setFocusedAndActiveDescendant(l)}else l.focused=!1});const n=Array.isArray(this.value)&&((s=this.value)==null?void 0:s.includes((o==null?void 0:o.value)??null));this.selects==="single"?(this.value=[o==null?void 0:o.value],this._selectedOptions=[o]):(this.value=n?this.value.filter(l=>l!==(o==null?void 0:o.value)):[...this.value??[],o==null?void 0:o.value],this._selectedOptions=n?this._selectedOptions.filter(l=>l.value!==o.value):[...this._selectedOptions,o]),await this.updateComplete,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}})),this.prepareToCleanUp()}handleOptionClick(t,o){this.toggleOption(o,t)}render(){const t=l=>a.x`<luzmo-icon
+      ${this.href && this.href.length > 0 ? super.renderAnchor({
+      id: "button",
+      ariaHidden: true,
+      className: "button anchor hidden"
+    }) : lit.nothing}
+    `;
+  }
+  handlePointerdown() {
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.setAttribute("tabindex", "-1");
+    this.addEventListener("pointerdown", this.handlePointerdown);
+    if (!this.hasAttribute("id")) {
+      this.id = `luzmo-option-${randomId.randomID()}`;
+    }
+  }
+  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");
+    }
+  }
+  setRole(role) {
+    this.setAttribute("role", role);
+    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();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.triggerUpdate();
+  }
+  async triggerUpdate() {
+    if (this.willDispatchUpdate) {
+      return;
+    }
+    this.willDispatchUpdate = true;
+    await new Promise((ready) => requestAnimationFrame(ready));
+    this.dispatchUpdate();
+  }
+  dispatchUpdate() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.willDispatchUpdate = false;
+  }
+}
+__decorateClass$1([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoOption.prototype, "active", 2);
+__decorateClass$1([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoOption.prototype, "focused", 2);
+__decorateClass$1([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoOption.prototype, "selected", 2);
+__decorateClass$1([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoOption.prototype, "emphasized", 2);
+__decorateClass$1([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoOption.prototype, "variant", 2);
+__decorateClass$1([
+  decorators_js.property({ type: String })
+], LuzmoOption.prototype, "value", 1);
+__decorateClass$1([
+  decorators_js.query("slot:not([name])")
+], LuzmoOption.prototype, "contentSlot", 2);
+__decorateClass$1([
+  decorators_js.query('slot[name="icon"]')
+], LuzmoOption.prototype, "iconSlot", 2);
+__decorateClass$1([
+  decorators_js.property({
+    type: Boolean,
+    reflect: true,
+    attribute: "no-wrap",
+    hasChanged() {
+      return false;
+    }
+  })
+], LuzmoOption.prototype, "noWrap", 2);
+__decorateClass$1([
+  decorators_js.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.SizedMixin(base.LuzmoElement, {
+  validSizes: ["s", "m", "l"]
+}) {
+  static get styles() {
+    return [lit.unsafeCSS(divider_module.dividerStyles), lit.unsafeCSS(optionsDividerStyles)];
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    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 VIRTUALIZE_AS_OF_NUM_ITEMS = 25;
+function elementIsOrContains(el, isOrContains) {
+  return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
+}
+class LuzmoOptions extends sizedMixin.SizedMixin(base.LuzmoElement, {
+  noDefaultSize: true
+}) {
+  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);
+  }
+  /**
+   * @internal
+   */
+  static get styles() {
+    return [lit.unsafeCSS(optionsStyles)];
+  }
+  /**
+   * @internal
+   */
+  get _virtualizeActive() {
+    return this.options.length > VIRTUALIZE_AS_OF_NUM_ITEMS;
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    if (!this.hasAttribute("tabindex")) {
+      this.tabIndex = 0;
+    }
+    const updates = [
+      new Promise((res) => requestAnimationFrame(() => res(true)))
+    ];
+    [...this.children].forEach((item) => {
+      if (item.localName === "luzmo-option") {
+        updates.push(item.updateComplete);
+      }
+    });
+    this.optionElementsUpdated = Promise.all(updates);
+  }
+  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);
+    }
+  }
+  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");
+      }
+    }
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this.optionElementsUpdated;
+    return complete;
+  }
+  focus({ preventScroll } = {}) {
+    super.focus({ preventScroll });
+    this.focusOptionByOffset(0);
+  }
+  _removeFocusedPropertyOnOptions() {
+    requestAnimationFrame(() => {
+      this.visibleOptionElements.forEach((item) => {
+        item.focused = false;
+      });
+    });
+  }
+  scrollToTop() {
+    this.scrollTop = 0;
+  }
+  handleFocusin() {
+    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");
+  }
+  startListeningToKeyboard() {
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  stopListeningToKeyboard() {
+    this.removeEventListener("keydown", this.handleKeydown);
+  }
+  handleKeydown(event) {
+    var _a;
+    if (event.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 { key } = event;
+    if (key === "Tab") {
+      this.prepareToCleanUp();
+      return;
+    }
+    if (key === " " || key === "Enter") {
+      event.preventDefault();
+      if (lastFocusedItem) {
+        this.toggleOption(event, (_a = this.options) == null ? void 0 : _a[lastFocusedIndex]);
+      }
+      return;
+    }
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      event.preventDefault();
+      this.navigateWithinOptions(event, lastFocusedItem);
+      return;
+    }
+  }
+  navigateWithinOptions(event, optionElement) {
+    const { key } = event;
+    const direction = key === "ArrowDown" ? 1 : -1;
+    event.preventDefault();
+    event.stopPropagation();
+    const itemToFocus = this.focusOptionByOffset(
+      direction,
+      optionElement,
+      true
+    );
+    if (itemToFocus === optionElement) {
+      return;
+    }
+    if (!this._virtualizeActive) {
+      itemToFocus == null ? void 0 : itemToFocus.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;
+      }
+    }
+    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());
+      }
+    );
+    if (!(optionToFocus == null ? void 0 : optionToFocus.disabled)) {
+      this.setFocusedAndActiveDescendant(itemToFocus);
+    }
+    return itemToFocus;
+  }
+  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));
+      }
+    );
+  }
+  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
+          }
+        })
+      );
+    }
+  }
+  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);
+        }
+      } else {
+        item.focused = false;
+      }
+    });
+    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(
+      new CustomEvent("change", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          value: this.value ?? []
+        }
+      })
+    );
+    this.prepareToCleanUp();
+  }
+  handleOptionClick(option, event) {
+    this.toggleOption(event, option);
+  }
+  render() {
+    const renderIcon = (icon) => {
+      return lit.html`<luzmo-icon
         slot="icon"
-        .icon=${l}
+        .icon=${icon}
         .size=${this.size}
-      ></luzmo-icon>`,o=l=>a.x`<span slot="description">${l}</span>`,e=l=>a.x`<luzmo-icon
+      ></luzmo-icon>`;
+    };
+    const renderDescription = (description) => {
+      return lit.html`<span slot="description">${description}</span>`;
+    };
+    const renderImg = (imgSrc) => {
+      return lit.html`<luzmo-icon
         slot="icon"
-        .src=${l}
+        .src=${imgSrc}
         .size=${this.size}
-      ></luzmo-icon>`,i=l=>{var f;const c=l==null?void 0:l.value,h=l==null?void 0:l.label,m=l==null?void 0:l.description,d=l==null?void 0:l.icon,p=l==null?void 0:l.imgSrc,u=l==null?void 0:l.divider,v=typeof l=="string"||l==null?void 0:l.disabled;return u?a.x`<luzmo-options-divider></luzmo-options-divider>`:a.x`<luzmo-option
-            .value=${c}
+      ></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 ? lit.html`<luzmo-options-divider></luzmo-options-divider>` : lit.html`<luzmo-option
+            .value=${value}
             .size=${this.size}
             .variant=${this.variant}
             ?emphasized=${this.emphasized}
             ?no-wrap=${this.noWrap}
-            ?disabled=${v}
-            .selected=${Array.isArray(this.value)?(f=this.value)==null?void 0:f.includes(c):!1}
-            .role=${this.selects==="single"?"option":"optioncheckbox"}
-            @click=${this.handleOptionClick.bind(this,l)}
+            ?disabled=${disabled}
+            .selected=${Array.isArray(this.value) ? (_a = this.value) == null ? void 0 : _a.includes(value) : false}
+            .role=${this.selects === "single" ? "option" : "optioncheckbox"}
+            @click=${this.handleOptionClick.bind(this, option)}
           >
-            ${d?t(d):p?e(p):a.E}
-            ${h} ${m?o(m):a.E}
-          </luzmo-option>`},n=this._virtualizeActive?a.x`<lit-virtualizer
+            ${icon ? renderIcon(icon) : imgSrc ? renderImg(imgSrc) : lit.nothing}
+            ${label} ${description ? renderDescription(description) : lit.nothing}
+          </luzmo-option>`;
+    };
+    const renderedOptions = this._virtualizeActive ? lit.html`<lit-virtualizer
           .items=${this.options}
-          .renderItem=${i}
+          .renderItem=${renderOption}
           @rangeChanged=${this.rangeChange}
           @visibilityChanged=${this.visibilityChanged}
-        ></lit-virtualizer>`:j(this.options,i),s=this.pending?a.x`<div id="pending">
+        ></lit-virtualizer>` : repeat_js.repeat(this.options, renderOption);
+    const pendingOption = this.pending ? lit.html`<div id="pending">
           <luzmo-progress-circle indeterminate></luzmo-progress-circle>
-        </div>`:a.E;return a.x`${n} ${s}`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.updateComplete.then(()=>this.updateItemFocus())}disconnectedCallback(){super.disconnectedCallback()}prepareToCleanUp(){document.addEventListener("focusout",()=>{requestAnimationFrame(()=>{this.updateSelectedItemIndex()})},{once:!0})}updateItemFocus(){if(this.visibleOptionElements.length===0)return;const t=this.focusedOptionIndex,o=[...this.visibleOptionElements].find(e=>{var i,n,s,l,c,h;return(e.value===null?null:(i=e.value)==null?void 0:i.toString())===(((s=(n=this.options)==null?void 0:n[t])==null?void 0:s.value)===null?null:(h=(c=(l=this.options)==null?void 0:l[t])==null?void 0:c.value)==null?void 0:h.toString())});this.setFocusedAndActiveDescendant(o)}setFocusedAndActiveDescendant(t){var e,i;if(!t)return;const o=this.hasVisibleFocusInTree()||!!((e=this.visibleOptionElements)!=null&&e.some&&((i=this.visibleOptionElements)!=null&&i.some(n=>n.hasVisibleFocusInTree())));t.focused=o,o&&this.setAttribute("aria-activedescendant",t.id)}}k([a.n({type:String,reflect:!0})],_.prototype,"label");k([a.n({type:String,reflect:!0})],_.prototype,"variant");k([a.n({type:String,reflect:!0})],_.prototype,"selects");k([a.n({type:Boolean,reflect:!0})],_.prototype,"emphasized");k([a.n({type:Boolean,reflect:!0})],_.prototype,"pending");k([a.n({type:Array})],_.prototype,"options");k([a.n({type:Boolean,reflect:!0,attribute:"no-wrap"})],_.prototype,"noWrap");k([a.n({type:Array})],_.prototype,"value");k([L.e("lit-virtualizer")],_.prototype,"virtualizer");k([et("luzmo-option")],_.prototype,"visibleOptionElements");customElements.get("luzmo-options")||customElements.define("luzmo-options",_);customElements.get("luzmo-options-divider")||customElements.define("luzmo-options-divider",N);customElements.get("luzmo-option")||customElements.define("luzmo-option",b);exports.LuzmoOption=b;exports.LuzmoOptions=_;exports.LuzmoOptionsDivider=N;exports.VIRTUALIZE_AS_OF_NUM_ITEMS=H;
+        </div>` : lit.nothing;
+    return lit.html`${renderedOptions} ${pendingOption}`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listbox");
+    this.updateComplete.then(() => this.updateItemFocus());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  prepareToCleanUp() {
+    document.addEventListener(
+      "focusout",
+      () => {
+        requestAnimationFrame(() => {
+          this.updateSelectedItemIndex();
+        });
+      },
+      { once: true }
+    );
+  }
+  updateItemFocus() {
+    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());
+      }
+    );
+    this.setFocusedAndActiveDescendant(lastFocusedItem);
+  }
+  setFocusedAndActiveDescendant(item) {
+    var _a, _b;
+    if (!item) {
+      return;
+    }
+    const focused = this.hasVisibleFocusInTree() || !!(((_a = this.visibleOptionElements) == null ? void 0 : _a.some) && ((_b = this.visibleOptionElements) == null ? void 0 : _b.some(
+      (child) => child.hasVisibleFocusInTree()
+    )));
+    item.focused = focused;
+    if (focused) {
+      this.setAttribute("aria-activedescendant", item.id);
+    }
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoOptions.prototype, "label");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoOptions.prototype, "variant");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoOptions.prototype, "selects");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoOptions.prototype, "emphasized");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoOptions.prototype, "pending");
+__decorateClass([
+  decorators_js.property({ type: Array })
+], LuzmoOptions.prototype, "options");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "no-wrap" })
+], LuzmoOptions.prototype, "noWrap");
+__decorateClass([
+  decorators_js.property({ type: Array })
+], LuzmoOptions.prototype, "value");
+__decorateClass([
+  decorators_js.query("lit-virtualizer")
+], LuzmoOptions.prototype, "virtualizer");
+__decorateClass([
+  decorators_js.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);
+}
+exports.LuzmoOption = LuzmoOption;
+exports.LuzmoOptions = LuzmoOptions;
+exports.LuzmoOptionsDivider = LuzmoOptionsDivider;
+exports.VIRTUALIZE_AS_OF_NUM_ITEMS = VIRTUALIZE_AS_OF_NUM_ITEMS;