@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/select-DPeI0jP9.js

@@ -0,0 +1,518 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-aGxJUVxg.js";
+import { n as t } from "./sized-mixin-DaBoZkVS.js";
+import { t as n } from "./focusable-BmS8IzhH.js";
+import "./icon-CwBAE1eU.js";
+import { t as r } from "./dependency-manger-DMrulWcJ.js";
+import { n as i, r as a, t as o } from "./strategies-DhxJGIZT.js";
+import { t as s } from "./pending-state-DFcNf5rd.js";
+import "./overlay-CwR_36OV.js";
+import "./progress-circle/index.js";
+import "./tooltip-C3O4AQ1l.js";
+import "./popover/index.js";
+import "./options-Dz-ejkxF.js";
+import { html as c, nothing as l, render as u, unsafeCSS as d } from "lit";
+import { property as f, query as p, state as m } from "lit/decorators.js";
+import { luzmoAlert as h, luzmoAngleDown as g, luzmoClose14 as _, luzmoIcon as v, luzmoSearch as y } from "@luzmo/icons";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { classMap as x } from "lit/directives/class-map.js";
+//#region src/utils/get-css-variable.ts
+var S = (e, t) => {
+	let n = getComputedStyle(e).getPropertyValue(t);
+	for (; !n && e.parentElement;) e = e.parentElement, n = getComputedStyle(e).getPropertyValue(t);
+	return n.trim();
+}, C = ":host{font-family:var(--luzmo-select-font-family,var(--select-font-family));font-size:var(--luzmo-select-font-size,var(--select-font-size))}#button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--luzmo-button-font-family,var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height,var(--luzmo-line-height,1.3));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, border-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, box-shadow var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}#icon{font-size:var(--luzmo-select-font-size,var(--select-font-size));margin-inline-end:var(--luzmo-select-spacing-text-to-icon,var(--select-spacing-text-to-icon))}@media (forced-colors:active){:host{--highcontrast-select-focus-indicator-color:Highlight;--highcontrast-select-border-color-default:ButtonBorder;--highcontrast-select-border-color-hover:Highlight;--highcontrast-select-border-color-disabled:GrayText;--highcontrast-select-content-color-default:ButtonText;--highcontrast-select-content-color-disabled:GrayText;--highcontrast-select-background-color:ButtonFace}#button:focus-visible{--highcontrast-select-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--select-minimum-width-multiplier) * var(--luzmo-select-button-block-size,var(--select-button-block-size)));block-size:var(--luzmo-select-button-block-size,var(--select-button-block-size));border-width:var(--luzmo-select-button-border-width,var(--select-button-border-width));border-radius:var(--luzmo-select-button-border-radius,var(--select-button-border-radius));box-shadow:var(--luzmo-select-button-box-shadow,var(--select-button-box-shadow));transition:background-color var(--luzmo-select-animation-duration,var(--select-animation-duration)), box-shadow var(--luzmo-select-animation-duration,var(--select-animation-duration)), border-color var(--luzmo-select-animation-duration,var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-default,var(--select-background-color-default)));border-style:solid;border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-default,var(--select-border-color-default)));margin-block-start:var(--luzmo-select-spacing-label-to-select,var(--select-spacing-label-to-select));padding-block:0;padding-inline-start:var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content));padding-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon,var(--select-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:\"\";block-size:calc(100% + var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width,var(--select-button-border-width)) * 2);inline-size:calc(100% + var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width,var(--select-button-border-width)) * 2);border-style:solid;border-width:var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width));border-radius:calc(var(--luzmo-select-button-border-radius,var(--select-button-border-radius)) + var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width,var(--select-button-border-width)));border-color:#0000;margin-block-start:calc((var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width,var(--select-button-border-width))) * -1);margin-inline-start:calc((var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width,var(--select-button-border-width))) * -1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-active,var(--select-background-color-active)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-active,var(--select-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-active,var(--select-font-color-active)))}#button:focus-visible{background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-key-focus,var(--select-background-color-key-focus)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-key-focus,var(--select-border-color-key-focus)));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-key-focus,var(--select-font-color-key-focus)));outline:none}#button:focus-visible:after{border-color:var(--highcontrast-select-focus-indicator-color,var(--luzmo-select-focus-indicator-color,var(--select-focus-indicator-color)))}#button.placeholder:focus-visible{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-key-focus,var(--select-font-color-key-focus)))}#button:focus-visible .disclosure-icon,#button:focus-visible .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-key-focus,var(--select-icon-color-key-focus)))}:host([open]) #button:not(:disabled,.is-disabled){color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default-open,var(--select-font-color-default-open)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-default-open,var(--select-background-color-default-open)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-default-open,var(--select-border-color-default-open)))}:host([open]) #button:not(:disabled,.is-disabled) .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled) .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-default-open,var(--select-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-default,var(--select-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-error,var(--select-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-active,var(--select-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-default-open,var(--select-border-color-error-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-key-focus,var(--select-border-color-error-key-focus)))}:host([pending]) #button .disclosure-icon,:host([pending]) #button .clear-icon{color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-icon-color-disabled,var(--select-icon-color-disabled)))}.icon{flex-shrink:0}.label{white-space:nowrap;font-size:var(--luzmo-select-font-size,var(--select-font-size));line-height:var(--luzmo-select-button-line-height,var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight,var(--select-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;overflow:hidden}.label.placeholder{font-weight:var(--luzmo-select-placeholder-font-weight,var(--select-font-weight));font-style:var(--luzmo-select-placeholder-font-style,var(--select-placeholder-font-style));transition:color var(--luzmo-select-animation-duration,var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-active,var(--select-font-color-active)))}.clear-icon,.disclosure-icon{vertical-align:top;transition:color var(--luzmo-select-animation-duration,var(--select-animation-duration)) ease-out;color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-default,var(--select-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.disclosure-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-disclosure-icon,var(--select-spacing-icon-to-disclosure-icon))}.clear-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-clear-icon,var(--select-spacing-icon-to-clear-icon))}.disclosure-icon:active{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-active,var(--select-icon-color-active)))}luzmo-progress-circle,.validation-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon,var(--select-spacing-text-to-icon))}.icon-container{height:100%;font-size:var(--luzmo-select-disclosure-icon-size,var(--select-disclosure-icon-size));align-items:center;display:flex;position:relative}.icon-container.disclosure-icon{margin-inline-end:0}.label~.disclosure-icon,.label~.clear-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon,var(--select-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--luzmo-select-inline-edge-to-content-quiet,var(--select-inline-edge-to-content-quiet));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)));background-color:initial;background-color:var(--highcontrast-select-background-color,transparent);box-shadow:none;border:none;border-radius:0;margin-block-start:calc(var(--luzmo-select-spacing-label-to-select-quiet,var(--select-spacing-label-to-select-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .disclosure-icon{margin-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon-quiet,var(--select-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{border:none;block-size:auto;inline-size:auto}@media (hover:hover){#button:hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-hover,var(--select-font-color-hover)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-hover,var(--select-background-color-hover)));border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-hover,var(--select-border-color-hover)))}#button:hover .disclosure-icon,#button:hover .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-hover,var(--select-icon-color-hover)))}#button:hover .clear-icon:hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-clear-icon-color-hover,var(--select-icon-color-focus)))}:host([open]):not([quiet]) #button:not(:disabled,.is-disabled):hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-hover-open,var(--select-font-color-hover-open)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-hover-open,var(--select-background-color-hover-open)));border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-hover-open,var(--select-border-color-hover-open)))}:host([open]) #button:not(:disabled,.is-disabled):hover .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled):hover .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-hover-open,var(--select-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-error-hover,var(--select-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-error-hover-open,var(--select-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-hover,var(--select-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-select-background-color,transparent)!important}}:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-select-background-color,transparent)}:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width)) 0 0 var(--highcontrast-select-focus-indicator-color,var(--luzmo-select-focus-indicator-color,var(--select-focus-indicator-color)));margin:calc((var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width,var(--select-button-border-width))) * -1) 0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-select-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-disabled,var(--select-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-select-border-color-disabled,transparent);color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-font-color-disabled,var(--select-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .disclosure-icon,:host([disabled]) #button .clear-icon,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .disclosure-icon,#button:disabled .clear-icon,#button:disabled .validation-icon{color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-icon-color-disabled,var(--select-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-font-color-disabled,var(--select-font-color-disabled)))}#popover{max-width:var(--luzmo-select-popover-max-width,var(--select-popover-max-width));min-width:var(--luzmo-select-popover-min-width,var(--select-popover-min-width));width:var(--luzmo-select-popover-width,var(--select-popover-width))}#popover.search-on{padding:0 0 var(--luzmo-popover-content-area-spacing-vertical,var(--popover-content-area-spacing-vertical)) 0!important}#search-container{border-bottom:var(--luzmo-select-search-container-border-bottom-width,var(--select-search-container-border-bottom-width)) solid var(--luzmo-select-search-container-border-bottom-color,var(--select-search-container-border-bottom-color));flex:none;display:flex;position:relative}#search-icon{left:var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content));color:var(--luzmo-select-search-icon-color,var(--select-search-icon-color));font-size:var(--luzmo-select-search-icon-height,var(--select-search-icon-height));width:var(--luzmo-select-search-icon-width,var(--select-search-icon-width));text-align:center;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0}#search:focus-within+#search-icon,#search:focus+#search-icon{color:var(--luzmo-select-search-icon-color-focus,var(--select-search-icon-color-focus))}#search{box-sizing:border-box;border-top-left-radius:var(--luzmo-popover-border-radius,var(--popover-border-radius));border-top-right-radius:var(--luzmo-popover-border-radius,var(--popover-border-radius));background-color:var(--luzmo-select-search-background-color,var(--select-search-background-color));width:100%;color:var(--luzmo-select-search-color,var(--select-search-color));height:var(--luzmo-select-button-block-size,var(--select-button-block-size));line-height:var(--luzmo-select-button-block-size,var(--select-button-block-size));padding-left:calc(var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content)) + var(--luzmo-select-spacing-search-icon-to-text,var(--select-spacing-search-icon-to-text)) + var(--luzmo-select-search-icon-width,var(--select-search-icon-width)));padding-right:var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content));font-size:var(--luzmo-select-font-size,var(--select-font-size));font-family:var(--luzmo-select-font-family,var(--select-font-family));line-height:var(--luzmo-select-button-line-height,var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight,var(--select-font-weight));border:var(--luzmo-select-search-input-border-bottom-width,var(--select-search-input-border-bottom-width)) solid var(--luzmo-select-search-input-border-bottom-color,var(--select-search-input-border-bottom-color));outline:none}#no-results{color:var(--luzmo-select-no-results-color,var(--select-no-results-color));font-style:var(--luzmo-select-no-results-font-style,var(--select-no-results-font-style));height:var(--luzmo-select-no-results-height,var(--select-no-results-height));padding-inline:var(--luzmo-select-no-results-spacing-edge-to-text,var(--select-no-results-spacing-edge-to-text));align-items:center;display:flex}:host{--select-popover-max-width:300px;--select-popover-min-width:160px;--select-font-family:var(--luzmo-font-family);--select-font-size:var(--luzmo-font-size);--select-font-weight:var(--luzmo-font-weight);--select-spacing-search-icon-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-search-icon-height:var(--luzmo-font-size);--select-search-icon-width:var(--luzmo-font-size);--select-search-icon-color:var(--luzmo-disabled-color);--select-search-icon-color-focus:var(--luzmo-font-color);--select-search-color:var(--luzmo-font-color);--select-search-background-color:var(--luzmo-background-color);--select-search-container-border-bottom-width:var(--luzmo-border-width);--select-search-container-border-bottom-color:var(--luzmo-border-color);--select-search-input-border-bottom-width:var(--luzmo-border-width);--select-search-input-border-bottom-color:transparent;--select-background-color-default:var(--luzmo-background-color);--select-background-color-default-open:var(--luzmo-background-color-hover);--select-background-color-active:var(--luzmo-background-color-down);--select-background-color-hover:var(--luzmo-background-color-hover);--select-background-color-hover-open:var(--luzmo-background-color-down);--select-background-color-key-focus:var(--luzmo-background-color-down);--select-border-color-default:var(--luzmo-border-color);--select-border-color-default-open:var(--luzmo-border-color-hover);--select-border-color-hover:var(--luzmo-border-color);--select-border-color-hover-open:var(--luzmo-border-color-hover);--select-border-color-active:var(--luzmo-border-color);--select-border-color-key-focus:var(--luzmo-border-color);--select-button-border-width:var(--luzmo-border-width);--select-placeholder-font-style:var(--luzmo-font-style);--select-button-line-height:var(--luzmo-line-height);--select-button-box-shadow:0px 1px 3px 0px rgba(var(--luzmo-border-color-rgb), .06);--select-button-block-size:var(--luzmo-component-height);--select-button-border-radius:var(--luzmo-border-radius);--select-button-border-radius-reset:0;--select-inline-edge-to-content:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-text-to-icon-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-icon-to-disclosure-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-icon-to-clear-icon:var(--select-spacing-icon-to-disclosure-icon);--select-inline-edge-to-content-quiet:0px;--select-spacing-label-to-select:0px;--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-edge-to-disclosure-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-edge-to-disclosure-icon-quiet:0px;--select-animation-duration:var(--luzmo-animation-duration);--select-font-color-default:var(--luzmo-font-color);--select-font-color-default-open:var(--luzmo-font-color-hover);--select-font-color-hover:var(--luzmo-font-color-hover);--select-font-color-hover-open:var(--luzmo-font-color-down);--select-font-color-active:var(--luzmo-font-color-focus);--select-font-color-key-focus:var(--luzmo-font-color-focus);--select-icon-color-default:var(--luzmo-font-color);--select-icon-color-default-open:var(--luzmo-font-color-hover);--select-icon-color-hover:var(--luzmo-font-color-hover);--select-icon-color-hover-open:var(--luzmo-font-color-hover);--select-icon-color-active:var(--luzmo-font-color-focus);--select-icon-color-key-focus:var(--luzmo-font-color-focus);--select-border-color-error-default:var(--luzmo-negative-color);--select-border-color-error-default-open:var(--luzmo-negative-color-down);--select-border-color-error-hover:var(--luzmo-negative-color-hover);--select-border-color-error-hover-open:var(--luzmo-negative-color-down);--select-border-color-error-active:var(--luzmo-negative-color-down);--select-border-color-error-key-focus:var(--luzmo-negative-color-focus);--select-icon-color-error:var(--luzmo-negative-color);--select-background-color-disabled:var(--luzmo-background-color-disabled);--select-font-color-disabled:var(--luzmo-disabled-color);--select-icon-color-disabled:var(--luzmo-disabled-color);--select-focus-indicator-gap:var(--luzmo-indicator-gap);--select-focus-indicator-width:var(--luzmo-indicator-width);--select-focus-indicator-color:var(--luzmo-indicator-color);--select-disclosure-icon-size:var(--luzmo-font-size-s);--select-no-results-height:var(--select-button-block-size);--select-no-results-color:var(--select-font-color-disabled);--select-no-results-font-style:italic;--select-no-results-spacing-edge-to-text:var(--select-inline-edge-to-content)}:host([size=s]){--select-button-block-size:var(--luzmo-component-height-s);--select-font-size:var(--luzmo-font-size-s);--select-search-icon-height:var(--luzmo-font-size-s);--select-search-icon-width:var(--luzmo-font-size-s);--select-popover-max-width:280px;--select-popover-min-width:140px;--select-spacing-search-icon-to-text:var(--luzmo-spacing-3);--select-inline-edge-to-content:var(--luzmo-spacing-3);--select-spacing-text-to-icon:var(--luzmo-spacing-3);--select-spacing-text-to-icon-inline-end:var(--luzmo-spacing-3);--select-spacing-icon-to-disclosure-icon:var(--luzmo-spacing-3);--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-3));--select-spacing-edge-to-disclosure-icon:var(--luzmo-spacing-3);--select-disclosure-icon-size:var(--luzmo-font-size-s)}:host([size=l]){--select-button-block-size:var(--luzmo-component-height-l);--select-font-size:var(--luzmo-font-size-l);--select-search-icon-height:var(--luzmo-font-size-l);--select-search-icon-width:var(--luzmo-font-size-l);--select-popover-max-width:360px;--select-popover-min-width:220px;--select-spacing-search-icon-to-text:var(--luzmo-spacing-4);--select-inline-edge-to-content:var(--luzmo-spacing-4);--select-spacing-text-to-icon:var(--luzmo-spacing-4);--select-spacing-text-to-icon-inline-end:var(--luzmo-spacing-4);--select-spacing-icon-to-disclosure-icon:var(--luzmo-spacing-4);--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-4));--select-spacing-edge-to-disclosure-icon:var(--luzmo-spacing-4);--select-disclosure-icon-size:var(--luzmo-font-size)}:host([size=xl]){--select-button-block-size:var(--luzmo-component-height-xl);--select-font-size:var(--luzmo-font-size-xl);--select-search-icon-height:var(--luzmo-font-size-xl);--select-search-icon-width:var(--luzmo-font-size-xl);--select-popover-max-width:400px;--select-popover-min-width:260px;--select-spacing-search-icon-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-inline-edge-to-content:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-text-to-icon:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-text-to-icon-inline-end:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-icon-to-disclosure-icon:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-edge-to-disclosure-icon:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-disclosure-icon-size:var(--luzmo-font-size-l)}:host([variant=highlight]) ::slotted(luzmo-option[selected]){--option-highlight-label-content-color:var(--luzmo-primary-inverse-color);--option-label-icon-color-default:var(--luzmo-primary-inverse-color);--menu-checkmark-display:var(--menu-checkmark-display-hidden);background-color:var(--luzmo-option-highlight-label-background-color,var(--option-highlight-label-background-color,var(--luzmo-border-color)));padding-inline-start:var(--luzmo-option-label-inline-edge-to-content,var(--option-label-inline-edge-to-content))}:host{vertical-align:top;max-inline-size:100%;inline-size:var(--luzmo-select-inline-size,var(--select-inline-size));min-inline-size:calc(var(--select-minimum-width-multiplier) * var(--luzmo-select-block-size,var(--select-block-size)));display:inline-flex}:host([quiet]){width:auto;min-width:0}:host([disabled]){pointer-events:none}#button{width:100%;min-width:100%;max-width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{user-select:inherit}.validation-icon{flex-shrink:0}luzmo-overlay{pointer-events:none}luzmo-options{pointer-events:initial}:host>#no-results,:host>luzmo-options{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--select-placeholder-text-color-key-focus,var(--alias-placeholder-text-color-hover))}.visually-hidden{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0 -1px -1px 0;padding:0;position:absolute;overflow:hidden}luzmo-overlay:not(:defined){display:none}#button.remove-focus-ring-safari-hack:focus-visible{background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-default,var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-default,var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)))}#button.remove-focus-ring-safari-hack:after{border:none}#button.remove-focus-ring-safari-hack:focus-visible:after{box-shadow:none}#button.remove-focus-ring-safari-hack:active{background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-default,var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-default,var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)))}", w = () => c`
+  <div class="disclosure-icon icon">
+    ${v(g, { className: "indicator" })}
+  </div>
+`, T = () => c`
+  <div class="icon-container validation-icon icon">
+    ${v(h)}
+  </div>
+`, E = () => c`
+  <div class="icon-container search-icon icon" id="search-icon">
+    ${v(y)}
+  </div>
+`, D = "select-option-menu", O = class extends t(n, { noDefaultSize: !0 }) {
+	static get styles() {
+		return [d(C)];
+	}
+	get selfManageFocusElement() {
+		return this._selfManageFocusElement;
+	}
+	constructor() {
+		super(), this.disabled = !1, this.focused = !1, this.variant = "checkmarks", this.emphasized = !1, this.invalid = !1, this.search = "auto", this.noWrap = !1, this.retrieving = !1, this.pending = !1, this.clearable = !1, this.hideDropdownIcon = !1, this.pendingLabel = "Pending", this.searchLabel = "Search", this.noResultsLabel = "No results", this.noDataLabel = "No data", this.multipleLabelTemplate = "Selected {count} items", this.label = "Select", this.open = !1, this.readonly = !1, this.placement = "bottom-end", this.quiet = !1, this.value = [], this.options = [], this.selects = "multiple", this.dependencyManager = new r(this), this.isMobile = new a(this, i), this.listRole = "listbox", this.itemRole = "option", this.hasRenderedOverlay = !1, this._selfManageFocusElement = !1, this.selectionPromise = Promise.resolve(), this.enterKeydownOn = null, this._selectedOptions = [], this.handleSlottableRequest = (e) => {}, this.renderAngleIcon = () => w(), this.renderAlertIcon = () => T(), this.handleEnterKeydown = (e) => {
+			if (e.code === "Enter") {
+				if (this.enterKeydownOn) {
+					e.preventDefault();
+					return;
+				}
+				this.enterKeydownOn = e.target, this.addEventListener("keyup", (e) => {
+					e.code === "Enter" && (this.enterKeydownOn = null);
+				}, { once: !0 });
+			}
+		}, this.clearValue = (e) => {
+			e.preventDefault(), e.stopPropagation(), this.value = [], this.strategy && (this.strategy.preventNextToggle = "no"), this.open = !1, this.strategy && (this.strategy.open = !1), this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0,
+				detail: { value: this.value ?? [] }
+			}));
+		}, this.handleEscape = (e) => {
+			e.code === "Escape" && this.open && (e.stopPropagation(), e.preventDefault(), this.toggle(!1));
+		}, this.handleKeydown = (e) => {
+			let { code: t } = e;
+			if (t === "Escape") {
+				this.handleEscape(e);
+				return;
+			}
+			if (["Delete", "Backspace"].includes(t)) {
+				this.clearValue(e);
+				return;
+			}
+			if (this.focused = !0, !(!t.startsWith("Arrow") || this.readonly || this.pending)) {
+				if (t === "ArrowUp" || t === "ArrowDown") {
+					this.toggle(!0), e.preventDefault();
+					return;
+				}
+				if (e.preventDefault(), this.selects === "single") {
+					let e = t === "ArrowRight" ? 1 : -1, n = this.options.findIndex((e) => e?.value?.toString() === this.value?.[0]?.toString()), r = (this.options.length + n + e) % this.options.length, i = this.options.length;
+					for (; this.options?.[r]?.disabled && i;) --i, r = (this.options.length + r + e) % this.options.length;
+					this.value = [this.options[r].value], this.dispatchEvent(new CustomEvent("change", {
+						bubbles: !0,
+						cancelable: !0,
+						composed: !0,
+						detail: { value: this.value ?? [] }
+					}));
+				}
+			}
+		}, this.pendingStateController = new s(this);
+	}
+	get focusElement() {
+		return this.open ? this.search === "on" || this.search === "auto" && this.options?.length > 20 ? this.searchInput : this.optionsMenu : this.button;
+	}
+	forceFocusVisible() {
+		this.disabled || (this.focused = !0);
+	}
+	click() {
+		this.disabled || this.toggle();
+	}
+	handleButtonBlur() {
+		this.focused = !1;
+	}
+	focus(e) {
+		super.focus(e), !this.disabled && this.focusElement && (this.focused = this.hasVisibleFocusInTree());
+	}
+	handleHelperFocus() {
+		this.focused = !0, this.button.focus();
+	}
+	handleChange(e) {
+		this.value = e?.detail?.value ?? [], this.strategy && (this.strategy.preventNextToggle = "no"), e.stopPropagation(), (!e.cancelable || this.selects === "single") && (this.open = !1, this.strategy && (this.strategy.open = !1)), e.preventDefault(), this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0,
+			detail: { value: this.value ?? [] }
+		}));
+	}
+	handleButtonFocus(e) {
+		this.strategy?.handleButtonFocus(e);
+	}
+	toggle(e) {
+		this.readonly || this.pending || (this.open = e === void 0 ? !this.open : e, this.strategy && (this.strategy.open = this.open), this._selfManageFocusElement = this.open);
+	}
+	close() {
+		this.readonly || this.strategy && (this.open = !1, this.strategy.open = !1);
+	}
+	bindEvents() {
+		this.strategy?.abort(), this.strategy = new o.desktop(this.button, this), this.strategy?.overlay && (this.strategy.overlay.type = "auto", this.strategy.overlay.placement = this.placement);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		this.close(), this.strategy?.releaseDescription(), super.disconnectedCallback();
+	}
+	handleTooltipSlotchange(e) {
+		this.tooltipEl = e.target.assignedElements()[0];
+	}
+	get labelTemplate() {
+		let e = this._selectedOptions?.length === 1 && this._selectedOptions[0]?.icon, t = c`<div
+      id="icon"
+      ?hidden=${typeof this.icons == "string" || this.value?.length > 1 || !e}
+    >
+      ${e ? v(this._selectedOptions[0].icon) : l}
+    </div>`, n = (e) => e.replaceAll(/{([^}]+)}/g, (e, t) => t === "count" ? String(this.value?.length) : e), r = {
+			"visually-hidden": this.icons === "only" && this.value?.length > 0,
+			placeholder: !this.value?.length,
+			label: !0
+		}, i;
+		i = this.value?.length ? this.value.length === 1 ? c`<span
+              >${this._selectedOptions?.[0]?.shortLabel ?? this._selectedOptions?.[0]?.label ?? this.value?.[0]}</span
+            >` : c`<span
+              >${n(this.multipleLabelTemplate)}</span
+            >` : c`
+        <slot name="label" id="label">
+          <span aria-hidden="true"> ${this.label} </span>
+        </slot>
+      `;
+		let a = this.value?.length ? c`
+          <div aria-hidden="true" class="visually-hidden" id="applied-label">
+            ${this.label}
+            <slot name="label"></slot>
+          </div>
+        ` : c` <span hidden id="applied-label">${this.label}</span> `;
+		return [c`
+        ${this.value?.length === 1 ? t : l}
+        <div
+          id=${b(this.value?.length ? "label" : void 0)}
+          class=${x(r)}
+        >
+          ${i}
+        </div>
+        ${a}
+        ${this.invalid && !this.pending ? c` ${this.renderAlertIcon()} ` : l}
+        ${this.pendingStateController.renderPendingState()}
+        ${this.clearable && !this.readonly && this.value?.length > 0 ? c`
+      <div class="icon-container clear-icon icon" @click=${this.clearValue}>
+        ${v(_)}
+      </div>
+    ` : l}
+        ${this.readonly || this.hideDropdownIcon ? l : this.renderAngleIcon()}
+        <slot
+          aria-hidden="true"
+          name="tooltip"
+          id="tooltip"
+          @slotchange=${this.handleTooltipSlotchange}
+        ></slot>
+      `];
+	}
+	update(e) {
+		e.has("disabled") && this.disabled && this.strategy && (this.open = !1, this.strategy.open = !1), e.has("pending") && this.pending && this.strategy && (this.open = !1, this.strategy.open = !1), super.update(e);
+	}
+	bindButtonKeydownListener() {
+		this.button.addEventListener("keydown", this.handleKeydown);
+	}
+	willUpdate(e) {
+		let t = e.has("open"), n = e.has("value"), r = e.has("options"), i = e.has("selects"), a = e.get("open");
+		i && this.selects === "single" && this.value?.length > 1 && (console.warn("luzmo-select is being set to a single value given the selects property changed to 'single'"), this.value = this.value.slice(0, 1)), t && a === !1 && this.open && this.searchString && (this.searchString = ""), (n || r) && this.setSelectedOptionsFromValue();
+	}
+	updated(e) {
+		super.updated(e);
+		let t = e.has("options"), n = e.has("open"), r = e.has("placement");
+		if (n && (this.strategy.open = this.open, this.open === !1 && this.optionsMenu.scrollToTop()), t) {
+			let e = this.options?.length ?? 0;
+			for (let t of this.options ?? []) t.children?.length && (e += t.children.length);
+			if (e > 25) {
+				let e = this.options.reduce((e, t) => (e?.label?.length ?? 0) > (t?.label?.length ?? 0) ? e : t, 0);
+				for (let t of this.options) if (t.children?.length) for (let n of t.children) {
+					let r = `${t.label} (${n.label})`;
+					r.length > (e?.label?.length ?? 0) && (e = {
+						...n,
+						label: r
+					});
+				}
+				this._estimatePopoverWidth(e);
+			} else this.style.removeProperty("--select-popover-width");
+		}
+		this.strategy?.overlay && (this.strategy.overlay.type !== "auto" && (this.strategy.overlay.type = "auto"), (r || this.strategy.overlay.type === "auto") && (this.strategy.overlay.placement = this.placement));
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.bindButtonKeydownListener(), this.bindEvents();
+	}
+	_getCssVarInPixels(e) {
+		let t = S(this, e), n;
+		if (t.endsWith("rem")) {
+			let e = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+			n = Number.parseFloat(t) * e;
+		} else if (t.endsWith("em")) {
+			let e = Number.parseFloat(getComputedStyle(this).fontSize);
+			n = Number.parseFloat(t) * e;
+		} else n = Number.parseFloat(t);
+		return n >= 0 ? n : void 0;
+	}
+	_estimatePopoverWidth(e) {
+		let t = this._getCssVarInPixels("--luzmo-select-font-size") ?? this._getCssVarInPixels("--select-font-size"), n = this._getCssVarInPixels("--luzmo-select-popover-min-width") ?? this._getCssVarInPixels("--select-popover-min-width"), r = this._getCssVarInPixels("--luzmo-spacing-5"), i = document.createElement("luzmo-options");
+		i.style.setProperty("--luzmo-select-font-size", `${t}px`), i.options = [e], i.value = [e], i.variant = this.variant, i.size = this.size, i.style.position = "absolute", i.style.left = "-9999px", i.style.top = "-9999px", i.style.opacity = "0", i.style.width = "auto", document.body.append(i), i.updateComplete.then(() => {
+			let e = i.offsetWidth + (r ?? 0);
+			return e > (n ?? 0) ? this.style.setProperty("--select-popover-width", `${e}px`) : this.style.removeProperty("--select-popover-width"), i.remove(), e;
+		}).catch((e) => {
+			console.error(e), i.remove();
+		});
+	}
+	get dismissHelper() {
+		return c`
+      <div class="visually-hidden">
+        <button
+          tabindex="-1"
+          aria-label="Dismiss"
+          @click=${this.close}
+        ></button>
+      </div>
+    `;
+	}
+	render() {
+		return this.tooltipEl && (this.tooltipEl.disabled = this.open), c`
+      <span
+        id="focus-helper"
+        tabindex=${this.focused || this.open ? "-1" : "0"}
+        @focus=${this.handleHelperFocus}
+        aria-describedby=${D}
+      ></span>
+      <button
+        aria-controls=${b(this.open ? "menu" : void 0)}
+        aria-describedby="tooltip"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-haspopup="true"
+        aria-labelledby="loader icon label applied-label"
+        id="button"
+        class=${b(this.labelAlignment ? `label-${this.labelAlignment}` : void 0)}
+        @blur=${this.handleButtonBlur}
+        @keydown=${{
+			handleEvent: this.handleEnterKeydown,
+			capture: !0
+		}}
+        ?disabled=${this.disabled}
+        tabindex="-1"
+      >
+        ${this.labelTemplate}
+      </button>
+      ${this.renderMenu} ${this.renderDescriptionSlot}
+    `;
+	}
+	get renderDescriptionSlot() {
+		return c`
+      <div id=${D}>
+        <slot name="description"></slot>
+      </div>
+    `;
+	}
+	setSelectedOptionsFromValue() {
+		let e = [];
+		for (let t of this.options) {
+			let n = typeof t == "string" ? t : t?.value;
+			if (this.value?.includes(n) && e.push(t), t.children?.length) for (let n of t.children) {
+				let r = typeof n == "string" ? n : n?.value;
+				this.value?.includes(r) && e.push({
+					...n,
+					label: `${t.label} (${n.label})`
+				});
+			}
+		}
+		this._selectedOptions = e;
+	}
+	renderSearchInput() {
+		return c`
+      <div id="search-container">
+        <input
+          type="text"
+          id="search"
+          .placeholder=${this.searchLabel}
+          @input=${this.handleSearchInput}
+          @keydown=${this.handleSearchKeydown}
+          .value=${this.searchString ?? ""}
+          .aria-label=${this.searchLabel}
+          autocomplete="off"
+          tabindex="0"
+          role="searchbox"
+        />
+        ${E()}
+      </div>
+    `;
+	}
+	get renderMenu() {
+		let e = this.options.filter((e) => (typeof e == "string" ? e : e?.label)?.toString()?.toLowerCase()?.includes(this.searchString?.toLowerCase() ?? "")), t = c`
+      <luzmo-options
+        .variant=${this.variant}
+        aria-labelledby="applied-label"
+        id="menu"
+        ?emphasized=${this.emphasized}
+        .selects=${this.selects ?? "multiple"}
+        .options=${e}
+        .value=${this.value}
+        .optionIconRenderer=${this.optionIconRenderer}
+        ?pending=${this.retrieving}
+        ?no-wrap=${this.noWrap}
+        @change=${this.handleChange}
+        @keydown=${{
+			handleEvent: this.handleEnterKeydown,
+			capture: !0
+		}}
+        @luzmo-scrolled=${this.handleScrolled}
+        @luzmo-exceeded-top=${this.handleExceededTop}
+        role=${this.listRole}
+        size=${this.size}
+        tabindex="0"
+      >
+      </luzmo-options>
+      ${e.length === 0 && !this.retrieving && !this.pending ? c`<div id="no-results">
+            ${this.searchString ? this.noResultsLabel : this.noDataLabel}
+          </div>` : l}
+    `;
+		return this.hasRenderedOverlay = this.hasRenderedOverlay || this.focused || this.open, this.hasRenderedOverlay ? (this.dependencyManager.loaded && this.dependencyManager.add("luzmo-overlay"), this.renderOverlay(t)) : t;
+	}
+	renderOverlay(e) {
+		return this.strategy?.overlay === void 0 ? e : (u(this.renderContainer(e), this.strategy?.overlay, { host: this }), this.strategy?.overlay);
+	}
+	renderContainer(e) {
+		let t = this.search === "on" || this.searchString && this.searchString?.length > 0 || this.search === "auto" && this.options?.length > 20, n = c`
+      ${t ? this.renderSearchInput() : l} ${this.dismissHelper} ${e} ${this.dismissHelper}
+    `;
+		return this.dependencyManager.add("luzmo-popover"), c`
+      <luzmo-popover
+        class=${b(t ? "search-on" : void 0)}
+        id="popover"
+        size=${this.size}
+        role="presentation"
+        placement=${this.placement}
+      >
+        ${n}
+      </luzmo-popover>
+    `;
+	}
+	async getUpdateComplete() {
+		let e = await super.getUpdateComplete();
+		return await this.selectionPromise, this.overlayElement && await this.overlayElement.updateComplete, e;
+	}
+	handleScrolled(e) {
+		e.stopPropagation(), e.preventDefault(), this.dispatchEvent(new CustomEvent("luzmo-scrolled", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: {
+				first: e?.detail?.first,
+				last: e?.detail?.last
+			}
+		}));
+	}
+	handleExceededTop(e) {
+		e.preventDefault(), e.stopPropagation(), this.searchInput ? this.searchInput.focus() : this.toggle(!1);
+	}
+	handleSearchInput(e) {
+		let t = e.target.value;
+		t !== this.searchString && (this.searchString = t, this.dispatchEvent(new CustomEvent("luzmo-search", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { string: this.searchString }
+		})));
+	}
+	handleSearchKeydown(e) {
+		if (e.code === "Escape") {
+			this.searchString ? this.searchString = "" : this.handleEscape(e);
+			return;
+		}
+		if (e.code === "ArrowDown") {
+			this.optionsMenu.focus(), e.preventDefault(), e.stopPropagation();
+			return;
+		} else if (e.code === "ArrowUp") {
+			this.toggle(!1);
+			return;
+		}
+	}
+};
+//#endregion
+//#region src/components/select/index.ts
+e([p("#button")], O.prototype, "button", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "disabled", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "focused", void 0), e([f({
+	type: String,
+	reflect: !0
+})], O.prototype, "icons", void 0), e([f({
+	type: String,
+	reflect: !0
+})], O.prototype, "variant", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "emphasized", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "invalid", void 0), e([f({
+	type: String,
+	reflect: !0
+})], O.prototype, "search", void 0), e([f({
+	type: Boolean,
+	reflect: !0,
+	attribute: "no-wrap"
+})], O.prototype, "noWrap", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "retrieving", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "pending", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "clearable", void 0), e([f({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-dropdown-icon"
+})], O.prototype, "hideDropdownIcon", void 0), e([f({
+	type: String,
+	attribute: "pending-label"
+})], O.prototype, "pendingLabel", void 0), e([f({
+	type: String,
+	attribute: "search-label"
+})], O.prototype, "searchLabel", void 0), e([f({
+	type: String,
+	attribute: "no-results-label"
+})], O.prototype, "noResultsLabel", void 0), e([f({
+	type: String,
+	attribute: "no-data-label"
+})], O.prototype, "noDataLabel", void 0), e([f({
+	type: String,
+	attribute: "multiple-label-template",
+	reflect: !0
+})], O.prototype, "multipleLabelTemplate", void 0), e([f({
+	type: String,
+	reflect: !0
+})], O.prototype, "label", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "open", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "readonly", void 0), e([m()], O.prototype, "labelAlignment", void 0), e([m()], O.prototype, "displayLabelContent", void 0), e([m()], O.prototype, "searchString", void 0), e([p("luzmo-options")], O.prototype, "optionsMenu", void 0), e([p("#search")], O.prototype, "searchInput", void 0), e([p("luzmo-overlay")], O.prototype, "overlayElement", void 0), e([f({
+	type: String,
+	reflect: !0
+})], O.prototype, "placement", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "quiet", void 0), e([f({
+	type: Array,
+	converter: {
+		fromAttribute: (e) => {
+			if (!e || e === "") return [];
+			try {
+				return JSON.parse(e);
+			} catch {
+				return [];
+			}
+		},
+		toAttribute: (e) => JSON.stringify(e)
+	}
+})], O.prototype, "value", void 0), e([f({ type: Array })], O.prototype, "options", void 0), e([f({ attribute: !1 })], O.prototype, "optionIconRenderer", void 0), e([f({
+	type: String,
+	reflect: !0
+})], O.prototype, "selects", void 0), customElements.get("luzmo-select") || customElements.define("luzmo-select", O);
+//#endregion
+export { O as t };

package/components/{language-resolution-8yZa5r_P.js → sized-mixin-DaBoZkVS.js}

@@ -15,39 +15,42 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const o = Symbol(
-  "language resolver updated"
-);
-class l {
-  constructor(e) {
-    this.language = document.documentElement.lang || navigator.language, this.host = e, this.host.addController(this);
-  }
-  hostConnected() {
-    this.resolveLanguage();
-  }
-  hostDisconnected() {
-    var e;
-    (e = this.unsubscribe) == null || e.call(this);
-  }
-  resolveLanguage() {
-    const e = new CustomEvent(
-      "luzmo-language-context",
-      {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          callback: (t, s) => {
-            const a = this.language;
-            this.language = t, this.unsubscribe = s, this.host.requestUpdate(o, a);
-          }
-        },
-        cancelable: !0
-      }
-    );
-    this.host.dispatchEvent(e);
-  }
-}
-export {
-  l as L,
-  o as l
+import { t as e } from "./decorate-aGxJUVxg.js";
+import { property as t } from "lit/decorators.js";
+//#region src/utils/sized-mixin.ts
+var n = {
+	xxs: "xxs",
+	xs: "xs",
+	s: "s",
+	m: "m",
+	l: "l",
+	xl: "xl",
+	xxl: "xxl"
 };
+function r(n, { validSizes: r = [
+	"s",
+	"m",
+	"l",
+	"xl"
+], noDefaultSize: i, defaultSize: a = "m" } = {}) {
+	class o extends n {
+		constructor(...e) {
+			super(...e), this._size = a;
+		}
+		get size() {
+			return this._size || a;
+		}
+		set size(e) {
+			let t = i ? null : a, n = e && e.toLocaleLowerCase(), o = r.includes(n) ? n : t;
+			if (o && this.setAttribute("size", o), this._size === o) return;
+			let s = this._size;
+			this._size = o, this.requestUpdate("size", s);
+		}
+		update(e) {
+			!this.hasAttribute("size") && !i && this.setAttribute("size", this.size), super.update(e);
+		}
+	}
+	return e([t({ type: String })], o.prototype, "size", null), o;
+}
+//#endregion
+export { r as n, n as t };

package/components/sized-mixin-StFA4y0J.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`);let t=require(`lit/decorators.js`);var n={xxs:`xxs`,xs:`xs`,s:`s`,m:`m`,l:`l`,xl:`xl`,xxl:`xxl`};function r(n,{validSizes:r=[`s`,`m`,`l`,`xl`],noDefaultSize:i,defaultSize:a=`m`}={}){class o extends n{constructor(...e){super(...e),this._size=a}get size(){return this._size||a}set size(e){let t=i?null:a,n=e&&e.toLocaleLowerCase(),o=r.includes(n)?n:t;if(o&&this.setAttribute(`size`,o),this._size===o)return;let s=this._size;this._size=o,this.requestUpdate(`size`,s)}update(e){!this.hasAttribute(`size`)&&!i&&this.setAttribute(`size`,this.size),super.update(e)}}return e.t([(0,t.property)({type:String})],o.prototype,`size`,null),o}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});