npm - @luzmo/analytics-components-kit - Versions diffs - 1.0.1-alpha.3 → 1.0.1-alpha.31 - Mend

@luzmo/analytics-components-kit 1.0.1-alpha.3 → 1.0.1-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1260) hide show

package/components/index-DFnzlbHX.js ADDED Viewed

@@ -0,0 +1,779 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ *
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. 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 { v as x, R as c, m as w, d as u, w as I, a as C, D as s } from "./base-D76d76ww-D0dTUBua.js";
+import { _ as $, $ as S, s as E, n as v } from "./directive-helpers-Bx_ey3Gk-Csi4AxXe.js";
+import { m as h, d as m } from "./if-defined-D-1p2bLN-Bn-33APC.js";
+import { p as M } from "./index-BXMPi13W.js";
+import { r as q } from "./focusable-BNESohBR-DYvAZYXL.js";
+import { a as A } from "./index-CRx2nPkq.js";
+import { c as k } from "./async-directive-C_bp5UcZ-B5_19oN_.js";
+import "./index-CbeVu32V.js";
+import { S as b, s as L, u as F } from "./luzmo-icons-BLN3xVgr-Tz5XXgbL.js";
+import "./index-Rjoe8cIs.js";
+/*! * 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.
+ * */
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const O = $(class extends S {
+  constructor(r) {
+    var e;
+    if (super(r), r.type !== E.ATTRIBUTE || r.name !== "class" || ((e = r.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(r) {
+    return " " + Object.keys(r).filter((e) => r[e]).join(" ") + " ";
+  }
+  update(r, [e]) {
+    var o, t;
+    if (this.st === void 0) {
+      this.st = /* @__PURE__ */ new Set(), r.strings !== void 0 && (this.nt = new Set(r.strings.join(" ").split(/\s/).filter((i) => i !== "")));
+      for (const i in e) e[i] && !((o = this.nt) != null && o.has(i)) && this.st.add(i);
+      return this.render(e);
+    }
+    const n = r.element.classList;
+    for (const i of this.st) i in e || (n.remove(i), this.st.delete(i));
+    for (const i in e) {
+      const d = !!e[i];
+      d === this.st.has(i) || (t = this.nt) != null && t.has(i) || (d ? (n.add(i), this.st.add(i)) : (n.remove(i), this.st.delete(i)));
+    }
+    return x;
+  }
+});
+/*! * 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.
+ * */
+const B = "(max-width: 743px) and (hover: none) and (pointer: coarse)";
+class T {
+  constructor(e, o) {
+    this.key = Symbol("match-media-key"), this.matches = !1, this.host = e, this.host.addController(this), this.media = window.matchMedia(o), this.matches = this.media.matches, this.onChange = this.onChange.bind(this), e.addController(this);
+  }
+  hostConnected() {
+    var e;
+    (e = this.media) == null || e.addEventListener("change", this.onChange);
+  }
+  hostDisconnected() {
+    var e;
+    (e = this.media) == null || e.removeEventListener("change", this.onChange);
+  }
+  onChange(e) {
+    this.matches !== e.matches && (this.matches = e.matches, this.host.requestUpdate(this.key, !this.matches));
+  }
+}
+const P = '#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{margin-inline-end:var(--luzmo-picker-spacing-text-to-icon, var(--picker-spacing-text-to-icon));font-size:var(--luzmo-picker-font-size, var(--picker-font-size))}@media (forced-colors: active){:host{--highcontrast-picker-focus-indicator-color: Highlight;--highcontrast-picker-border-color-default: ButtonBorder;--highcontrast-picker-border-color-hover: Highlight;--highcontrast-picker-border-color-disabled: GrayText;--highcontrast-picker-content-color-default: ButtonText;--highcontrast-picker-content-color-disabled: GrayText;--highcontrast-picker-background-color: ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-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(--picker-minimum-width-multiplier) * var(--luzmo-picker-block-size, var(--picker-block-size)));block-size:var(--luzmo-picker-block-size, var(--picker-block-size));border-width:var(--luzmo-picker-border-width, var(--picker-border-width));border-radius:var(--luzmo-picker-border-radius, var(--picker-border-radius));box-shadow:var(--luzmo-picker-box-shadow, var(--picker-box-shadow));transition:background-color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)),box-shadow var(--luzmo-picker-animation-duration, var(--picker-animation-duration)),border-color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)) ease-in-out;color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-default, var(--picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-default, var(--picker-border-color-default)));margin-block-start:var(--luzmo-picker-spacing-label-to-picker, var(--picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--luzmo-picker-spacing-edge-to-text, var(--picker-spacing-edge-to-text));padding-inline-end:var(--luzmo-picker-spacing-edge-to-disclosure-icon, var(--picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) * 2 + var(--luzmo-picker-border-width, var(--picker-border-width)) * 2);inline-size:calc(100% + var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) * 2 + var(--luzmo-picker-border-width, var(--picker-border-width)) * 2);border-style:solid;border-width:var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness));border-radius:calc(var(--luzmo-picker-border-radius, var(--picker-border-radius)) + var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-border-width, var(--picker-border-width)));border-color:#0000;margin-block-start:calc((var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness)) + var(--luzmo-picker-border-width, var(--picker-border-width))) * -1);margin-inline-start:calc((var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness)) + var(--luzmo-picker-border-width, var(--picker-border-width))) * -1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-active, var(--picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-active, var(--picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-active, var(--picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-key-focus, var(--picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-key-focus, var(--picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-key-focus, var(--picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color, var(--luzmo-picker-focus-indicator-color, var(--picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-key-focus, var(--picker-font-color-key-focus)))}#button.is-keyboardFocused .disclosure-icon,#button:focus-visible .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-key-focus, var(--picker-icon-color-key-focus)))}:host([open]) #button:not(:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default-open, var(--picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-default-open, var(--picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-default-open, var(--picker-border-color-default-open)))}:host([open]) #button:not(:disabled,.is-disabled) .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-default-open, var(--picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-default, var(--picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-error, var(--picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-active, var(--picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-default-open, var(--picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-key-focus, var(--picker-border-color-error-key-focus)))}:host([pending]) #button .disclosure-icon{color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-icon-color-disabled, var(--picker-icon-color-disabled)))}.icon{flex-shrink:0}.label{white-space:nowrap;font-size:var(--luzmo-picker-font-size, var(--picker-font-size));line-height:var(--luzmo-picker-line-height, var(--picker-line-height));font-weight:var(--luzmo-picker-font-weight, var(--picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;overflow:hidden}.label.placeholder{font-weight:var(--luzmo-picker-placeholder-font-weight, var(--picker-font-weight));font-style:var(--luzmo-picker-placeholder-font-style, var(--picker-placeholder-font-style));transition:color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)) ease-in-out;color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-active, var(--picker-font-color-active)))}.disclosure-icon{vertical-align:top;transition:color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)) ease-out;margin-inline-start:var(--luzmo-picker-spacing-icon-to-disclosure-icon, var(--picker-spacing-icon-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-default, var(--picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.disclosure-icon:active{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-active, var(--picker-icon-color-active)))}luzmo-progress-circle,.validation-icon{margin-inline-start:var(--luzmo-picker-spacing-text-to-icon, var(--picker-spacing-text-to-icon))}.icon-container{display:flex;position:relative;height:100%;align-items:center;font-size:var(--luzmo-picker-disclosure-icon-size, var(--picker-disclosure-icon-size))}.icon-container.disclosure-icon{margin-inline-end:0}.label~.disclosure-icon{margin-inline-start:var(--luzmo-picker-spacing-text-to-icon, var(--picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--luzmo-picker-spacing-edge-to-text-quiet, var(--picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent);border:none;border-radius:0;box-shadow:none;margin-block-start:calc(var(--luzmo-picker-spacing-label-to-picker-quiet, var(--picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .disclosure-icon{margin-inline-end:var(--luzmo-picker-spacing-edge-to-disclosure-icon-quiet, var(--picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover: hover){#button:hover{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-hover, var(--picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-hover, var(--picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-hover, var(--picker-border-color-hover)))}#button:hover .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-hover, var(--picker-icon-color-hover)))}:host([open]):not([quiet]) #button:not(:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-hover-open, var(--picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-hover-open, var(--picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-hover-open, var(--picker-border-color-hover-open)))}:host([open]) #button:not(:disabled,.is-disabled):hover .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-hover-open, var(--picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-error-hover, var(--picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-error-hover-open, var(--picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-hover, var(--picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent)!important}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--luzmo-picker-focus-indicator-color, var(--picker-focus-indicator-color)));margin:calc((var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-border-width, var(--picker-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-picker-background-color, transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-disabled, var(--picker-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-picker-border-color-disabled, transparent);color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-font-color-disabled, var(--picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .disclosure-icon,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .disclosure-icon,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-icon-color-disabled, var(--picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-font-color-disabled, var(--picker-font-color-disabled)))}:host{--picker-box-shadow: 0px 1px 3px 0px rgba(var(--luzmo-border-color-rgb), .06);--picker-background-color-default: var(--luzmo-background-color);--picker-background-color-default-open: var(--luzmo-background-color-hover);--picker-background-color-active: var(--luzmo-background-color-down);--picker-background-color-hover: var(--luzmo-background-color-hover);--picker-background-color-hover-open: var(--luzmo-background-color-down);--picker-background-color-key-focus: var(--luzmo-background-color-down);--picker-border-color-default: var(--luzmo-border-color);--picker-border-color-default-open: var(--luzmo-border-color-hover);--picker-border-color-hover: var(--luzmo-border-color);--picker-border-color-hover-open: var(--luzmo-border-color-hover);--picker-border-color-active: var(--luzmo-border-color);--picker-border-color-key-focus: var(--luzmo-border-color);--picker-border-width: var(--luzmo-border-width);--picker-font-size: var(--luzmo-font-size);--picker-font-weight: var(--luzmo-font-weight);--picker-placeholder-font-style: var(--luzmo-font-style);--picker-line-height: var(--luzmo-line-height);--picker-block-size: 32px;--picker-border-radius: var(--luzmo-border-radius);--picker-spacing-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-text-quiet: 0px;--picker-spacing-label-to-picker: 0px;--picker-spacing-label-to-picker-quiet: calc( -1 * var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-disclosure-icon-quiet: 0px;--picker-animation-duration: var(--luzmo-animation-duration);--picker-font-color-default: var(--luzmo-font-color);--picker-font-color-default-open: var(--luzmo-font-color-hover);--picker-font-color-hover: var(--luzmo-font-color-hover);--picker-font-color-hover-open: var(--luzmo-font-color-down);--picker-font-color-active: var(--luzmo-font-color-focus);--picker-font-color-key-focus: var(--luzmo-font-color-focus);--picker-icon-color-default: var(--luzmo-font-color);--picker-icon-color-default-open: var(--luzmo-font-color-hover);--picker-icon-color-hover: var(--luzmo-font-color-hover);--picker-icon-color-hover-open: var(--luzmo-font-color-hover);--picker-icon-color-active: var(--luzmo-font-color-focus);--picker-icon-color-key-focus: var(--luzmo-font-color-focus);--picker-border-color-error-default: var(--luzmo-negative-color);--picker-border-color-error-default-open: var(--luzmo-negative-color-down);--picker-border-color-error-hover: var(--luzmo-negative-color-hover);--picker-border-color-error-hover-open: var(--luzmo-negative-color-down);--picker-border-color-error-active: var(--luzmo-negative-color-down);--picker-border-color-error-key-focus: var(--luzmo-negative-color-focus);--picker-icon-color-error: var(--luzmo-negative-color);--picker-background-color-disabled: var(--luzmo-background-color-disabled);--picker-font-color-disabled: var(--luzmo-disabled-color);--picker-icon-color-disabled: var(--luzmo-disabled-color);--picker-focus-indicator-gap: var(--luzmo-indicator-gap);--picker-focus-indicator-thickness: var(--luzmo-indicator-width);--picker-focus-indicator-color: var(--luzmo-indicator-color);--picker-disclosure-icon-size: var(--luzmo-font-size-s)}:host([size=s]){--picker-block-size: 28px;--picker-font-size: var(--luzmo-font-size-s);--picker-border-radius: var(--luzmo-border-radius);--picker-spacing-edge-to-text: var(--luzmo-spacing-3);--picker-spacing-text-to-icon: var(--luzmo-spacing-3);--picker-spacing-text-to-icon-inline-end: var(--luzmo-spacing-3);--picker-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-3);--picker-spacing-label-to-picker-quiet: calc(-1 * var(--luzmo-spacing-3));--picker-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-3);--picker-disclosure-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--picker-block-size: 40px;--picker-font-size: var(--luzmo-font-size-l);--picker-border-radius: var(--luzmo-border-radius);--picker-spacing-edge-to-text: var(--luzmo-spacing-4);--picker-spacing-text-to-icon: var(--luzmo-spacing-4);--picker-spacing-text-to-icon-inline-end: var(--luzmo-spacing-4);--picker-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-4);--picker-spacing-label-to-picker-quiet: calc(-1 * var(--luzmo-spacing-4));--picker-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-4);--picker-disclosure-icon-size: var(--luzmo-font-size)}:host([size=xl]){--picker-block-size: 48px;--picker-font-size: var(--luzmo-font-size-xl);--picker-border-radius: var(--luzmo-border-radius-l);--picker-spacing-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-label-to-picker-quiet: calc( -1 * var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-disclosure-icon-size: var(--luzmo-font-size-l)}:host([variant=highlight]) ::slotted(luzmo-menu-item[selected]){--menu-item-highlight-label-content-color: var(--luzmo-primary-inverse-color);--menu-item-label-icon-color-default: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));background-color:var(--luzmo-menu-item-highlight-label-background-color, var(--menu-item-highlight-label-background-color, var(--luzmo-border-color)))}:host{display:inline-flex;vertical-align:top;max-inline-size:100%;inline-size:var(--luzmo-picker-inline-size, var(--picker-inline-size));min-inline-size:calc(var(--picker-minimum-width-multiplier) * var(--luzmo-picker-block-size, var(--picker-block-size)))}: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{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}luzmo-overlay{pointer-events:none}luzmo-menu{pointer-events:initial}:host>luzmo-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--picker-placeholder-text-color-key-focus, var(--alias-placeholder-text-color-hover))}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet],[pending])) #button .picker{color:var(--picker-icon-color-key-focus, var(--alias-icon-color-focus))}.visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}luzmo-overlay:not(:defined){display:none}#button.remove-focus-ring-safari-hack:focus-visible{background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-default, var(--picker-background-color-default)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-default, var(--picker-border-color-default)));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-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-picker-background-color, var(--luzmo-picker-background-color-default, var(--picker-background-color-default)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-default, var(--picker-border-color-default)));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)))}';
+var g = /* @__PURE__ */ ((r) => (r[r.desktop = 0] = "desktop", r[r.mobile = 1] = "mobile", r))(g || {});
+let y = class {
+  constructor(e, o) {
+    this.target = e, this.host = o, this.preventNextToggle = "no", this.pointerdownState = !1, this.enterKeydownOn = null, this._open = !1, this.target = e, this.host = o, this.host.addController(this), this.init();
+  }
+  get activelyOpening() {
+    return !1;
+  }
+  get open() {
+    return this._open;
+  }
+  /**
+   * Set `open`
+   */
+  set open(e) {
+    if (this._open !== e) {
+      if (this._open = e, this.overlay) {
+        this.host.open = e;
+        return;
+      }
+      customElements.whenDefined("luzmo-overlay").then(async () => {
+        const { LuzmoOverlay: o } = await import("./index-BXMPi13W.js").then((t) => t.i);
+        this.overlay = new o(), this.host.open = !0, this.host.requestUpdate();
+      }), import("./index-BXMPi13W.js").then((o) => o.i);
+    }
+  }
+  get overlay() {
+    return this._overlay;
+  }
+  set overlay(e) {
+    e && this.overlay !== e && (this._overlay = e, this.initOverlay());
+  }
+  releaseDescription() {
+  }
+  handleBeforetoggle(e) {
+    var o;
+    e.composedPath()[0] === e.target && (e.newState === "closed" && (this.preventNextToggle === "no" ? this.open = !1 : this.pointerdownState || (o = this.overlay) == null || o.manuallyKeepOpen()), this.open || (this.host.optionsMenu.updateSelectedItemIndex(), this.host.optionsMenu.closeDescendentOverlays()));
+  }
+  initOverlay() {
+    this.overlay && (this.overlay.addEventListener("beforetoggle", (e) => {
+      this.handleBeforetoggle(
+        e
+      );
+    }), this.overlay.type = this.host.isMobile.matches ? "modal" : "auto", this.overlay.triggerElement = this.host, this.overlay.placement = this.host.isMobile.matches ? void 0 : this.host.placement, this.overlay.receivesFocus = "true", this.overlay.willPreventClose = this.preventNextToggle !== "no" && this.open, this.overlay.addEventListener(
+      "slottable-request",
+      this.host.handleSlottableRequest
+    ));
+  }
+  handlePointerdown(e) {
+  }
+  handleButtonFocus(e) {
+    this.preventNextToggle === "maybe" && e.relatedTarget === this.host.optionsMenu && (this.preventNextToggle = "yes");
+  }
+  handleActivate(e) {
+  }
+  /* c8 ignore next 3 */
+  init() {
+  }
+  abort() {
+    var e;
+    this.releaseDescription(), (e = this.abortController) == null || e.abort();
+  }
+  hostConnected() {
+    this.init();
+  }
+  hostDisconnected() {
+    var e;
+    (e = this.abortController) == null || e.abort();
+  }
+  hostUpdated() {
+    this.overlay && this.host.dependencyManager.loaded && this.host.open !== this.overlay.open && (this.overlay.willPreventClose = this.preventNextToggle !== "no", this.overlay.open = this.host.open);
+  }
+}, D = class extends y {
+  constructor() {
+    super(...arguments), this.type = g.desktop;
+  }
+  handlePointerdown(e) {
+    if (e.button !== 0 || e.pointerType === "touch")
+      return;
+    this.pointerdownState = this.open, this.preventNextToggle = "maybe";
+    let o = 0;
+    const t = () => {
+      cancelAnimationFrame(o), o = requestAnimationFrame(() => {
+        document.removeEventListener("pointerup", t), document.removeEventListener("pointercancel", t), this.target.removeEventListener("click", t), requestAnimationFrame(() => {
+          this.preventNextToggle = "no";
+        });
+      });
+    };
+    document.addEventListener("pointerup", t), document.addEventListener("pointercancel", t), this.target.addEventListener("click", t), this.handleActivate();
+  }
+  handleActivate(e) {
+    this.enterKeydownOn && this.enterKeydownOn !== this.target || this.preventNextToggle !== "yes" && ((e == null ? void 0 : e.type) === "click" && this.open !== this.pointerdownState || this.host.toggle());
+  }
+  init() {
+    var e;
+    (e = this.abortController) == null || e.abort(), this.abortController = new AbortController();
+    const { signal: o } = this.abortController;
+    this.target.addEventListener(
+      "click",
+      (t) => this.handleActivate(t),
+      {
+        signal: o
+      }
+    ), this.target.addEventListener(
+      "pointerdown",
+      (t) => this.handlePointerdown(t),
+      { signal: o }
+    ), this.target.addEventListener(
+      "focus",
+      (t) => this.handleButtonFocus(t),
+      {
+        signal: o
+      }
+    );
+  }
+};
+const p = "remove-focus-ring-safari-hack";
+class _ extends y {
+  constructor() {
+    super(...arguments), this.type = g.mobile;
+  }
+  handleClick() {
+    this.preventNextToggle === "no" && (this.open = !this.open), this.preventNextToggle = "no";
+  }
+  handlePointerdown() {
+    this.preventNextToggle = this.open ? "yes" : "no", k() && this.target.classList.add(p);
+  }
+  handleFocusOut() {
+    this.host.open || k() && this.target.classList.contains(p) && this.target.classList.remove(p);
+  }
+  init() {
+    var e;
+    (e = this.abortController) == null || e.abort(), this.abortController = new AbortController();
+    const { signal: o } = this.abortController;
+    this.target.addEventListener("click", () => this.handleClick(), {
+      signal: o
+    }), this.target.addEventListener(
+      "pointerdown",
+      () => this.handlePointerdown(),
+      { signal: o }
+    ), this.target.addEventListener("focusout", () => this.handleFocusOut(), {
+      signal: o
+    });
+  }
+}
+const f = {
+  desktop: D,
+  mobile: _
+};
+/*! * 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.
+ * */
+class R {
+  /**
+   * Creates an instance of PendingStateController.
+   * @param host - The host element that this controller is attached to.
+   */
+  constructor(e) {
+    this.cachedAriaLabel = null, this.host = e, this.host.addController(this);
+  }
+  /**
+   * Renders the pending state UI.
+   * @returns A TemplateResult representing the pending state UI.
+   */
+  renderPendingState() {
+    const e = this.host.pendingLabel || "Pending";
+    return this.host.pending ? c`
+          <luzmo-progress-circle
+            id="loader"
+            size="s"
+            indeterminate
+            aria-valuetext=${e}
+            class="progress-circle"
+          ></luzmo-progress-circle>
+        ` : c``;
+  }
+  /**
+   * Updates the ARIA label of the host element based on the pending state.
+   * Manages Cached Aria Label
+   */
+  updateAriaLabel() {
+    const { pending: e, disabled: o, pendingLabel: t } = this.host, n = this.host.getAttribute("aria-label");
+    e && !o && n !== t ? (this.cachedAriaLabel = n, this.host.setAttribute("aria-label", t || "Pending")) : (!e || o) && (this.cachedAriaLabel ? this.host.setAttribute("aria-label", this.cachedAriaLabel) : e || this.host.removeAttribute("aria-label"));
+  }
+  hostConnected() {
+    this.cachedAriaLabel || (this.cachedAriaLabel = this.host.getAttribute("aria-label")), this.updateAriaLabel();
+  }
+  hostUpdated() {
+    this.updateAriaLabel();
+  }
+}
+/*! * 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.
+ * */
+var U = Object.defineProperty, K = Object.getOwnPropertyDescriptor, a = (r, e, o, t) => {
+  for (var n = t > 1 ? void 0 : t ? K(e, o) : e, i = r.length - 1, d; i >= 0; i--)
+    (d = r[i]) && (n = (t ? d(e, o, n) : d(n)) || n);
+  return t && n && U(e, o, n), n;
+};
+const N = () => c`
+  <div class="disclosure-icon icon">
+    ${b(L, { className: "indicator" })}
+  </div>
+`, H = () => c`
+  <div class="icon-container validation-icon icon">
+    ${b(F)}
+  </div>
+`, z = "option-picker";
+class l extends w(q, {
+  noDefaultSize: !0
+}) {
+  /**
+   * Initializes the `PendingStateController` for the Picker component.
+   * The `PendingStateController` manages the pending state of the Picker.
+   */
+  constructor() {
+    super(), this.disabled = !1, this.focused = !1, this.invalid = !1, this.pending = !1, this.pendingLabel = "Pending", this.open = !1, this.readonly = !1, this.placement = "bottom-start", this.quiet = !1, this.value = "", this.selects = "single", this.dependencyManager = new A(this), this.isMobile = new T(this, B), this.listRole = "listbox", this.itemRole = "option", this.hasRenderedOverlay = !1, this._selfManageFocusElement = !1, this.deprecatedMenu = null, this.selectionPromise = Promise.resolve(), this.willManageSelection = !1, this.recentlyConnected = !1, this.enterKeydownOn = null, this.handleSlottableRequest = (e) => {
+    }, this.applyFocusElementLabel = (e, o) => {
+      this.appliedLabel = e, this.labelAlignment = o.sideAligned ? "inline" : void 0;
+    }, this.handleKeydown = (e) => {
+      this.focused = !0, !(e.code !== "ArrowDown" && e.code !== "ArrowUp") && (e.stopPropagation(), e.preventDefault(), this.toggle(!0));
+    }, this.renderAngleIcon = () => N(), this.renderAlertIcon = () => H(), this.handleEnterKeydown = (e) => {
+      if (e.code === "Enter") {
+        if (this.enterKeydownOn) {
+          e.preventDefault();
+          return;
+        }
+        this.enterKeydownOn = e.target, this.addEventListener(
+          "keyup",
+          (o) => {
+            o.code === "Enter" && (this.enterKeydownOn = null);
+          },
+          { once: !0 }
+        );
+      }
+    }, this.pendingStateController = new R(this);
+  }
+  get selectedItem() {
+    return this._selectedItem;
+  }
+  get selectedItemContent() {
+    return this._selectedItemContent || { icon: [], content: [] };
+  }
+  get selfManageFocusElement() {
+    return this._selfManageFocusElement;
+  }
+  get menuItems() {
+    return this.optionsMenu.childItems;
+  }
+  set selectedItem(e) {
+    const o = e == null ? void 0 : e.querySelector('[slot="icon"]');
+    if (this.selectedItemContent = e ? e.itemChildren : void 0, e === this.selectedItem)
+      return;
+    const t = this.selectedItem;
+    this._selectedItem = e, this._selectedItemIcon = (o == null ? void 0 : o.icon) ?? void 0, this.requestUpdate("selectedItem", t);
+  }
+  get focusElement() {
+    return this.open ? 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.strategy && (this.strategy.preventNextToggle = "no");
+    const o = e.target, [t] = o.selectedItems;
+    e.stopPropagation(), e.cancelable ? this.setValueFromItem(t, e) : (this.open = !1, this.strategy && (this.strategy.open = !1));
+  }
+  handleButtonFocus(e) {
+    var o;
+    (o = this.strategy) == null || o.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() {
+    var e;
+    (e = this.strategy) == null || e.abort(), this.strategy = this.isMobile.matches ? new f.mobile(this.button, this) : new f.desktop(this.button, this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.recentlyConnected = this.hasUpdated;
+  }
+  disconnectedCallback() {
+    var e;
+    this.close(), (e = this.strategy) == null || e.releaseDescription(), super.disconnectedCallback();
+  }
+  async setValueFromItem(e, o) {
+    this.open = !1, this.strategy && (this.strategy.open = !1);
+    const t = this.selectedItem, n = this.value;
+    if (this.selectedItem = e, this.value = (e == null ? void 0 : e.value) ?? "", await this.updateComplete, !this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        // Allow it to be prevented.
+        cancelable: !0,
+        composed: !0,
+        detail: this.value
+      })
+    ) && this.selects) {
+      o && o.preventDefault(), this.setMenuItemSelected(this.selectedItem, !1), t && this.setMenuItemSelected(t, !0), this.selectedItem = t, this.value = n, this.open = !0, this.strategy && (this.strategy.open = !0);
+      return;
+    } else if (!this.selects) {
+      this.selectedItem = t, this.value = n;
+      return;
+    }
+    t && this.setMenuItemSelected(t, !1), this.setMenuItemSelected(e, !!this.selects);
+  }
+  setMenuItemSelected(e, o) {
+    this.selects != null && (e.selected = o);
+  }
+  get containerStyles() {
+    return this.isMobile.matches ? {
+      "--swc-menu-width": "100%"
+    } : {};
+  }
+  set selectedItemContent(e) {
+    if (e === this.selectedItemContent)
+      return;
+    const o = this.selectedItemContent;
+    this._selectedItemContent = e, this.requestUpdate("selectedItemContent", o);
+  }
+  handleTooltipSlotchange(e) {
+    this.tooltipEl = e.target.assignedElements()[0];
+  }
+  renderLabelContent(e) {
+    return this.value && this.selectedItem ? e : c`
+      <slot name="label" id="label">
+        <span aria-hidden=${h(this.appliedLabel ? void 0 : "true")}>
+          ${this.label}
+        </span>
+      </slot>
+    `;
+  }
+  get buttonContent() {
+    const e = {
+      "visually-hidden": this.icons === "only" && !!this.value,
+      placeholder: !this.value,
+      label: !0
+    }, o = this.appliedLabel || this.label, t = c` <div id="icon" ?hidden=${this.icons === "none"}>
+      ${this._selectedItemIcon ? b(this._selectedItemIcon) : u}
+    </div>`;
+    return [
+      c`
+        ${this._selectedItemIcon ? t : u}
+        <div
+          id=${h(this.value && this.selectedItem ? "label" : void 0)}
+          class=${O(e)}
+        >
+          ${this.renderLabelContent(this.selectedItemContent.content)}
+        </div>
+        ${this.value && this.selectedItem ? c`
+              <div
+                aria-hidden="true"
+                class="visually-hidden"
+                id="applied-label"
+              >
+                ${o}
+                <slot name="label"></slot>
+              </div>
+            ` : c` <span hidden id="applied-label">${o}</span> `}
+        ${this.invalid && !this.pending ? c` ${this.renderAlertIcon()} ` : u}
+        ${this.pendingStateController.renderPendingState()}
+        ${this.readonly ? u : this.renderAngleIcon()}
+        <slot
+          aria-hidden="true"
+          name="tooltip"
+          id="tooltip"
+          @slotchange=${this.handleTooltipSlotchange}
+        ></slot>
+      `
+    ];
+  }
+  renderOverlay(e) {
+    var o, t, n;
+    if (((o = this.strategy) == null ? void 0 : o.overlay) === void 0)
+      return e;
+    const i = this.renderContainer(e);
+    return I(i, (t = this.strategy) == null ? void 0 : t.overlay, {
+      host: this
+    }), (n = this.strategy) == null ? void 0 : n.overlay;
+  }
+  get renderDescriptionSlot() {
+    return c`
+      <div id=${z}>
+        <slot name="description"></slot>
+      </div>
+    `;
+  }
+  // a helper to throw focus to the button is needed because Safari
+  // won't include buttons in the tab order even with tabindex="0"
+  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=${z}
+      ></span>
+      <button
+        aria-controls=${h(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=${h(
+      this.labelAlignment ? `label-${this.labelAlignment}` : void 0
+    )}
+        @blur=${this.handleButtonBlur}
+        @keydown=${{
+      handleEvent: this.handleEnterKeydown,
+      capture: !0
+    }}
+        ?disabled=${this.disabled}
+        tabindex="-1"
+      >
+        ${this.buttonContent}
+      </button>
+      ${this.renderMenu} ${this.renderDescriptionSlot}
+    `;
+  }
+  update(e) {
+    var o, t;
+    this.selects && (this.selects = "single"), 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), e.has("value") && this.shouldScheduleManageSelection(), this.hasUpdated || (this.deprecatedMenu = this.querySelector(":scope > luzmo-menu"), (o = this.deprecatedMenu) == null || o.toggleAttribute("ignore", !0), (t = this.deprecatedMenu) == null || t.setAttribute("selects", "inherit")), super.update(e);
+  }
+  bindButtonKeydownListener() {
+    this.button.addEventListener("keydown", this.handleKeydown);
+  }
+  updated(e) {
+    super.updated(e), e.has("open") && (this.strategy.open = this.open);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.bindButtonKeydownListener(), this.bindEvents();
+  }
+  get dismissHelper() {
+    return c`
+      <div class="visually-hidden">
+        <button
+          tabindex="-1"
+          aria-label="Dismiss"
+          @click=${this.close}
+        ></button>
+      </div>
+    `;
+  }
+  renderContainer(e) {
+    const o = c`
+      ${this.dismissHelper} ${e} ${this.dismissHelper}
+    `;
+    return this.dependencyManager.add("luzmo-popover"), import("./index-Brg_sVUg.js"), c`
+      <luzmo-popover
+        id="popover"
+        size=${this.size}
+        role="presentation"
+        style=${M(this.containerStyles)}
+        placement=${this.placement}
+      >
+        ${o}
+      </luzmo-popover>
+    `;
+  }
+  get renderMenu() {
+    const e = c`
+      <luzmo-menu
+        aria-labelledby="applied-label"
+        @change=${this.handleChange}
+        id="menu"
+        @keydown=${{
+      handleEvent: this.handleEnterKeydown,
+      capture: !0
+    }}
+        @scroll=${this.onScroll}
+        role=${this.listRole}
+        .selects=${this.selects}
+        .selected=${this.value ? [this.value] : []}
+        size=${this.size}
+        @luzmo-menu-item-added-or-updated=${this.shouldManageSelection}
+      >
+        <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
+      </luzmo-menu>
+    `;
+    return this.hasRenderedOverlay = this.hasRenderedOverlay || this.focused || this.open || !!this.deprecatedMenu, this.hasRenderedOverlay ? (this.dependencyManager.loaded && this.dependencyManager.add("luzmo-overlay"), this.renderOverlay(e)) : e;
+  }
+  shouldScheduleManageSelection(e) {
+    !this.willManageSelection && (!e || e.target.getRootNode().host === this) && (this.willManageSelection = !0, requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.manageSelection();
+      });
+    }));
+  }
+  shouldManageSelection() {
+    this.willManageSelection || (this.willManageSelection = !0, this.manageSelection());
+  }
+  async manageSelection() {
+    if (this.selects == null)
+      return;
+    this.selectionPromise = new Promise(
+      (o) => this.selectionResolver = o
+    );
+    let e;
+    await this.optionsMenu.updateComplete, this.recentlyConnected && (await new Promise((o) => requestAnimationFrame(() => o(!0))), this.recentlyConnected = !1), this.menuItems.forEach((o) => {
+      this.value === o.value && !o.disabled ? e = o : o.selected = !1;
+    }), e ? (e.selected = !!this.selects, this.selectedItem = e) : (this.value = "", this.selectedItem = void 0), this.open && (await this.optionsMenu.updateComplete, this.optionsMenu.updateSelectedItemIndex()), this.selectionResolver(), this.willManageSelection = !1;
+  }
+  async getUpdateComplete() {
+    const e = await super.getUpdateComplete();
+    return await this.selectionPromise, e;
+  }
+  onScroll() {
+    this.dispatchEvent(
+      new Event("scroll", {
+        cancelable: !0,
+        composed: !0
+      })
+    );
+  }
+}
+a([
+  v()
+], l.prototype, "appliedLabel", 2);
+a([
+  m("#button")
+], l.prototype, "button", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "focused", 2);
+a([
+  s({ type: String, reflect: !0 })
+], l.prototype, "icons", 2);
+a([
+  s({ type: String, reflect: !0 })
+], l.prototype, "variant", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "invalid", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "pending", 2);
+a([
+  s({ type: String, attribute: "pending-label" })
+], l.prototype, "pendingLabel", 2);
+a([
+  s()
+], l.prototype, "label", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "open", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "readonly", 2);
+a([
+  v()
+], l.prototype, "labelAlignment", 2);
+a([
+  m("luzmo-menu")
+], l.prototype, "optionsMenu", 2);
+a([
+  m("luzmo-overlay")
+], l.prototype, "overlayElement", 2);
+a([
+  s()
+], l.prototype, "placement", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "quiet", 2);
+a([
+  s({ type: String })
+], l.prototype, "value", 2);
+a([
+  s({ attribute: !1 })
+], l.prototype, "selectedItem", 1);
+a([
+  v()
+], l.prototype, "selectedItemContent", 1);
+class j extends l {
+  constructor() {
+    super(...arguments), this.handleKeydown = (e) => {
+      const { code: o } = e;
+      if (this.focused = !0, !o.startsWith("Arrow") || this.readonly || this.pending)
+        return;
+      if (o === "ArrowUp" || o === "ArrowDown") {
+        this.toggle(!0), e.preventDefault();
+        return;
+      }
+      e.preventDefault();
+      const t = this.selectedItem ? this.menuItems.indexOf(this.selectedItem) : -1, n = t < 0 || o === "ArrowRight" ? 1 : -1;
+      let i = t + n;
+      for (; this.menuItems[i] && this.menuItems[i].disabled; )
+        i += n;
+      !this.menuItems[i] || this.menuItems[i].disabled || (!this.value || i !== t) && this.setValueFromItem(this.menuItems[i]);
+    };
+  }
+  static get styles() {
+    return [C(P)];
+  }
+  get containerStyles() {
+    const e = super.containerStyles;
+    return this.quiet || (e["min-width"] = `${this.offsetWidth}px`), e;
+  }
+}
+/*! * 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.
+ * */
+const V = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+V();
+customElements.get("luzmo-picker") || customElements.define("luzmo-picker", j);