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

package/components/picker-button/index.cjs

@@ -15,8 +15,48 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-CBCg3yyw.cjs"),d=require("../sized-mixin-CPxE5C96.cjs"),l=require("../luzmo-icons-D47EGj-3.cjs"),b=require("../class-map-Di1D_rCm.cjs"),s=require("../observe-slot-presence-bc9chhsi.cjs"),p=require("../button-base-XgPLmwP-.cjs");require("../icon/index.cjs");const k="@media (hover: hover){.root:hover{--picker-button-background-color: var( --luzmo-picker-button-background-color-hover, var(--picker-button-background-color-hover) );--picker-button-font-color: var( --luzmo-picker-button-font-color-hover, var(--picker-button-font-color-hover) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-hover, var(--picker-button-icon-color-hover) )}}:host([open]) .root,:host(:is(:active,[active])) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-down, var(--picker-button-background-color-down) );--picker-button-font-color: var( --luzmo-picker-button-font-color-down, var(--picker-button-font-color-down) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-down, var(--picker-button-icon-color-down) )}:host([focused]) .root,.root:focus,.root:focus-visible{--picker-button-background-color: var( --luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus) );--picker-button-font-color: var( --luzmo-picker-button-font-color-key-focus, var(--picker-button-font-color-key-focus) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-key-focus, var(--picker-button-icon-color-key-focus) )}:host([disabled]) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-disabled, var(--luzmo-background-color-disabled) );--picker-button-border-color: var( --luzmo-picker-button-border-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-font-color: var( --luzmo-picker-button-font-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-hover: var( --luzmo-picker-button-font-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-down: var( --luzmo-picker-button-font-color-down-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-hover: var( --luzmo-picker-button-icon-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-down: var( --luzmo-picker-button-icon-color-down-disabled, var(--luzmo-font-color-disabled) )}:host([quiet]) .root{--luzmo-picker-button-background-color: var( --luzmo-picker-button-background-color-quiet, transparent );--luzmo-picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-quiet, transparent );--luzmo-picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-quiet, transparent );--luzmo-picker-button-background-color-key-focus: var( --luzmo-picker-button-background-color-key-focus-quiet, transparent );--luzmo-picker-button-border-color: var( --luzmo-picker-button-border-color-quiet, transparent )}.root{background-color:initial;block-size:var(--luzmo-picker-button-width, var(--picker-button-width));box-sizing:border-box;padding:var(--luzmo-picker-button-padding, var(--picker-button-padding));border-style:none;justify-content:center;align-items:center;display:flex}.root.uiicononly{inline-size:var(--luzmo-picker-button-height, var(--picker-button-height))}.luzmo-picker-button-label{color:var(--luzmo-picker-button-font-color, var(--picker-button-font-color));white-space:nowrap;font-family:var(--luzmo-picker-button-font-family, var(--picker-button-font-family));font-style:var(--luzmo-picker-button-font-style, var(--picker-button-font-style));font-weight:var(--luzmo-picker-button-font-weight, var(--picker-button-font-weight));font-size:var(--luzmo-picker-button-font-size, var(--picker-button-font-size));flex:auto;padding-block-start:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));padding-block-end:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));overflow:hidden}.uiicononly .luzmo-picker-button-label{display:none}:host(:focus-visible) .luzmo-picker-button-fill{border-color:var(--luzmo-picker-button-indicator-color, var(--picker-button-indicator-color));background-color:var(--luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus))}.luzmo-picker-button-fill{box-sizing:border-box;block-size:100%;inline-size:100%;justify-content:center;align-items:center;gap:var(--luzmo-picker-button-gap, var(--picker-button-gap));background-color:var(--luzmo-picker-button-background-color, var(--picker-button-background-color));border-color:var(--luzmo-picker-button-border-color, var(--picker-button-border-color));border-width:var(--luzmo-picker-button-border-width, var(--picker-button-border-width));padding:var(--luzmo-picker-button-horizontal-padding, var(--picker-button-horizontal-padding));transition:border-color var(--luzmo-picker-button-background-animation-duration, var(--picker-button-background-animation-duration)) ease-in-out;border-style:solid;border-start-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-start-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));display:flex}:host([position=right]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=right][rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([position=left]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=left][rounded]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded))}.uiicononly .luzmo-picker-button-fill{padding:0}.textuiicon .luzmo-picker-button-fill{inline-size:auto}.luzmo-picker-button-icon{color:var(--luzmo-picker-button-icon-color, var(--picker-button-icon-color));flex-shrink:0}.root{--picker-button-height: var(--luzmo-component-height);--picker-button-width: var(--luzmo-component-height);--picker-button-gap: calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--picker-button-label-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--picker-button-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-button-indicator-color: var(--luzmo-indicator-color);--picker-button-icon-color: var(--luzmo-font-color);--picker-button-icon-color-hover: var(--luzmo-font-color-hover);--picker-button-icon-color-down: var(--luzmo-font-color-down);--picker-button-icon-color-key-focus: var(--luzmo-font-color-focus);--picker-button-font-color: var(--luzmo-font-color);--picker-button-font-color-hover: var(--luzmo-font-color-hover);--picker-button-font-color-down: var(--luzmo-font-color-down);--picker-button-font-color-key-focus: var(--neutral-content-color-focus);--picker-button-font-family: var(--luzmo-font-family);--picker-button-font-style: var(--luzmo-font-style);--picker-button-font-weight: var(--body-sans-serif-font-weight);--picker-button-font-size: var(--luzmo-font-size);--picker-button-border-radius-rounded: var(--luzmo-border-radius);--picker-button-background-animation-duration: var( --luzmo-animation-duration )}.root{--picker-button-background-color: var(--luzmo-background-color);--picker-button-background-color-hover: var(--luzmo-background-color-hover);--picker-button-background-color-down: var(--luzmo-background-color-down);--picker-button-background-color-key-focus: var( --luzmo-background-color-focus );--picker-button-border-color: var(--luzmo-border-color);--picker-button-border-radius: var(--luzmo-border-radius);--picker-button-border-radius-rounded-sided: var(--luzmo-border-radius);--picker-button-border-radius-sided: 0;--picker-button-border-width: var(--luzmo-border-width)}:host([size=s]) .root{--picker-button-height: var(--luzmo-component-height-s);--picker-button-width: var(--luzmo-component-height-s);--picker-button-label-padding: var(--luzmo-spacing-2);--picker-button-font-size: var(--luzmo-font-size-s);--picker-button-horizontal-padding: var(--luzmo-spacing-3)}:host([size=l]) .root{--picker-button-height: var(--luzmo-component-height-l);--picker-button-width: var(--luzmo-component-height-l);--picker-button-label-padding: var(--luzmo-spacing-3);--picker-button-font-size: var(--luzmo-font-size-l);--picker-button-horizontal-padding: var(--luzmo-spacing-4)}:host([size=xl]) .root{--picker-button-height: var(--luzmo-component-height-xl);--picker-button-width: var(--luzmo-component-height-xl);--picker-button-label-padding: var(--luzmo-spacing-4);--picker-button-font-size: var(--luzmo-font-size-xl);--picker-button-horizontal-padding: var(--luzmo-spacing-5)}:host{display:inline-flex}.root{display:flex}";var v=Object.defineProperty,a=(n,r,u,z)=>{for(var o=void 0,i=n.length-1,c;i>=0;i--)(c=n[i])&&(o=c(r,u,o)||o);return o&&v(r,u,o),o};class e extends d.SizedMixin(s.ObserveSlotPresence(p.LuzmoButtonBase,'[slot="label"]')){constructor(){super(...arguments),this.invalid=!1,this.position="right"}static get styles(){return[t.r(k)]}get hasText(){return this.slotContentIsPresent}render(){const r={root:!0,uiicononly:!this.hasText,textuiicon:this.hasText};return t.x`
-      <div class=${b.e(r)}>
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+const icons = require("@luzmo/icons");
+const decorators_js = require("lit/decorators.js");
+const classMap_js = require("lit/directives/class-map.js");
+const observeSlotPresence = require("../observe-slot-presence-9AwLGUQ_.cjs");
+const buttonBase = require("../button-base-7Ak55xFd.cjs");
+require("../icon/index.cjs");
+const pickerButtonStyles = "@media (hover: hover){.root:hover{--picker-button-background-color: var( --luzmo-picker-button-background-color-hover, var(--picker-button-background-color-hover) );--picker-button-font-color: var( --luzmo-picker-button-font-color-hover, var(--picker-button-font-color-hover) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-hover, var(--picker-button-icon-color-hover) )}}:host([open]) .root,:host(:is(:active,[active])) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-down, var(--picker-button-background-color-down) );--picker-button-font-color: var( --luzmo-picker-button-font-color-down, var(--picker-button-font-color-down) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-down, var(--picker-button-icon-color-down) )}:host([focused]) .root,.root:focus,.root:focus-visible{--picker-button-background-color: var( --luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus) );--picker-button-font-color: var( --luzmo-picker-button-font-color-key-focus, var(--picker-button-font-color-key-focus) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-key-focus, var(--picker-button-icon-color-key-focus) )}:host([disabled]) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-disabled, var(--luzmo-background-color-disabled) );--picker-button-border-color: var( --luzmo-picker-button-border-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-font-color: var( --luzmo-picker-button-font-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-hover: var( --luzmo-picker-button-font-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-down: var( --luzmo-picker-button-font-color-down-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-hover: var( --luzmo-picker-button-icon-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-down: var( --luzmo-picker-button-icon-color-down-disabled, var(--luzmo-font-color-disabled) )}:host([quiet]) .root{--luzmo-picker-button-background-color: var( --luzmo-picker-button-background-color-quiet, transparent );--luzmo-picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-quiet, transparent );--luzmo-picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-quiet, transparent );--luzmo-picker-button-background-color-key-focus: var( --luzmo-picker-button-background-color-key-focus-quiet, transparent );--luzmo-picker-button-border-color: var( --luzmo-picker-button-border-color-quiet, transparent )}.root{background-color:initial;block-size:var(--luzmo-picker-button-width, var(--picker-button-width));box-sizing:border-box;padding:var(--luzmo-picker-button-padding, var(--picker-button-padding));border-style:none;justify-content:center;align-items:center;display:flex}.root.uiicononly{inline-size:var(--luzmo-picker-button-height, var(--picker-button-height))}.luzmo-picker-button-label{color:var(--luzmo-picker-button-font-color, var(--picker-button-font-color));white-space:nowrap;font-family:var(--luzmo-picker-button-font-family, var(--picker-button-font-family));font-style:var(--luzmo-picker-button-font-style, var(--picker-button-font-style));font-weight:var(--luzmo-picker-button-font-weight, var(--picker-button-font-weight));font-size:var(--luzmo-picker-button-font-size, var(--picker-button-font-size));flex:auto;padding-block-start:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));padding-block-end:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));overflow:hidden}.uiicononly .luzmo-picker-button-label{display:none}:host(:focus-visible) .luzmo-picker-button-fill{border-color:var(--luzmo-picker-button-indicator-color, var(--picker-button-indicator-color));background-color:var(--luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus))}.luzmo-picker-button-fill{box-sizing:border-box;block-size:100%;inline-size:100%;justify-content:center;align-items:center;gap:var(--luzmo-picker-button-gap, var(--picker-button-gap));background-color:var(--luzmo-picker-button-background-color, var(--picker-button-background-color));border-color:var(--luzmo-picker-button-border-color, var(--picker-button-border-color));border-width:var(--luzmo-picker-button-border-width, var(--picker-button-border-width));padding:var(--luzmo-picker-button-horizontal-padding, var(--picker-button-horizontal-padding));transition:border-color var(--luzmo-picker-button-background-animation-duration, var(--picker-button-background-animation-duration)) ease-in-out;border-style:solid;border-start-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-start-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));display:flex}:host([position=right]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=right][rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([position=left]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=left][rounded]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded))}.uiicononly .luzmo-picker-button-fill{padding:0}.textuiicon .luzmo-picker-button-fill{inline-size:auto}.luzmo-picker-button-icon{color:var(--luzmo-picker-button-icon-color, var(--picker-button-icon-color));flex-shrink:0}.root{--picker-button-height: var(--luzmo-component-height);--picker-button-width: var(--luzmo-component-height);--picker-button-gap: calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--picker-button-label-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--picker-button-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-button-indicator-color: var(--luzmo-indicator-color);--picker-button-icon-color: var(--luzmo-font-color);--picker-button-icon-color-hover: var(--luzmo-font-color-hover);--picker-button-icon-color-down: var(--luzmo-font-color-down);--picker-button-icon-color-key-focus: var(--luzmo-font-color-focus);--picker-button-font-color: var(--luzmo-font-color);--picker-button-font-color-hover: var(--luzmo-font-color-hover);--picker-button-font-color-down: var(--luzmo-font-color-down);--picker-button-font-color-key-focus: var(--neutral-content-color-focus);--picker-button-font-family: var(--luzmo-font-family);--picker-button-font-style: var(--luzmo-font-style);--picker-button-font-weight: var(--body-sans-serif-font-weight);--picker-button-font-size: var(--luzmo-font-size);--picker-button-border-radius-rounded: var(--luzmo-border-radius);--picker-button-background-animation-duration: var( --luzmo-animation-duration )}.root{--picker-button-background-color: var(--luzmo-background-color);--picker-button-background-color-hover: var(--luzmo-background-color-hover);--picker-button-background-color-down: var(--luzmo-background-color-down);--picker-button-background-color-key-focus: var( --luzmo-background-color-focus );--picker-button-border-color: var(--luzmo-border-color);--picker-button-border-radius: var(--luzmo-border-radius);--picker-button-border-radius-rounded-sided: var(--luzmo-border-radius);--picker-button-border-radius-sided: 0;--picker-button-border-width: var(--luzmo-border-width)}:host([size=s]) .root{--picker-button-height: var(--luzmo-component-height-s);--picker-button-width: var(--luzmo-component-height-s);--picker-button-label-padding: var(--luzmo-spacing-2);--picker-button-font-size: var(--luzmo-font-size-s);--picker-button-horizontal-padding: var(--luzmo-spacing-3)}:host([size=l]) .root{--picker-button-height: var(--luzmo-component-height-l);--picker-button-width: var(--luzmo-component-height-l);--picker-button-label-padding: var(--luzmo-spacing-3);--picker-button-font-size: var(--luzmo-font-size-l);--picker-button-horizontal-padding: var(--luzmo-spacing-4)}:host([size=xl]) .root{--picker-button-height: var(--luzmo-component-height-xl);--picker-button-width: var(--luzmo-component-height-xl);--picker-button-label-padding: var(--luzmo-spacing-4);--picker-button-font-size: var(--luzmo-font-size-xl);--picker-button-horizontal-padding: var(--luzmo-spacing-5)}:host{display:inline-flex}.root{display:flex}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class LuzmoPickerButton extends sizedMixin.SizedMixin(
+  observeSlotPresence.ObserveSlotPresence(buttonBase.LuzmoButtonBase, '[slot="label"]')
+) {
+  constructor() {
+    super(...arguments);
+    this.invalid = false;
+    this.position = "right";
+  }
+  static get styles() {
+    return [lit.unsafeCSS(pickerButtonStyles)];
+  }
+  get hasText() {
+    return this.slotContentIsPresent;
+  }
+  render() {
+    const rootClasses = {
+      root: true,
+      uiicononly: !this.hasText,
+      textuiicon: this.hasText
+    };
+    return lit.html`
+      <div class=${classMap_js.classMap(rootClasses)}>
         <div class="luzmo-picker-button-fill">
           <span
             class="luzmo-picker-button-label is-placeholder"
@@ -26,7 +66,7 @@
           </span>
           <slot name="icon">
             <luzmo-icon
-              .icon=${l.T}
+              .icon=${icons.luzmoAngleDown}
               size=${this.size}
               block
               class="luzmo-picker-button-icon"
@@ -34,4 +74,16 @@
           </slot>
         </div>
       </div>
-    `}}a([t.n({type:Boolean,reflect:!0})],e.prototype,"invalid");a([t.n({reflect:!0})],e.prototype,"position");customElements.get("luzmo-picker-button")||customElements.define("luzmo-picker-button",e);exports.LuzmoPickerButton=e;
+    `;
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoPickerButton.prototype, "invalid");
+__decorateClass([
+  decorators_js.property({ reflect: true })
+], LuzmoPickerButton.prototype, "position");
+if (!customElements.get("luzmo-picker-button")) {
+  customElements.define("luzmo-picker-button", LuzmoPickerButton);
+}
+exports.LuzmoPickerButton = LuzmoPickerButton;

package/components/picker-button/index.js

@@ -15,46 +15,55 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as d, x as b, n as l } from "../base-WsynuqaS.js";
-import { S as s } from "../sized-mixin-D4ACoVUr.js";
-import { T as p } from "../luzmo-icons-NEyaMpEM.js";
-import { e as m } from "../class-map-NbVXqBU0.js";
-import { O as z } from "../observe-slot-presence-CmVi0zTc.js";
-import { L as k } from "../button-base-DbkDzb71.js";
-import "../icon/index.js";
-const a = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.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(o);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
+    document.head.appendChild(styleElement);
   }
 };
-a();
-const v = "@media (hover: hover){.root:hover{--picker-button-background-color: var( --luzmo-picker-button-background-color-hover, var(--picker-button-background-color-hover) );--picker-button-font-color: var( --luzmo-picker-button-font-color-hover, var(--picker-button-font-color-hover) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-hover, var(--picker-button-icon-color-hover) )}}:host([open]) .root,:host(:is(:active,[active])) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-down, var(--picker-button-background-color-down) );--picker-button-font-color: var( --luzmo-picker-button-font-color-down, var(--picker-button-font-color-down) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-down, var(--picker-button-icon-color-down) )}:host([focused]) .root,.root:focus,.root:focus-visible{--picker-button-background-color: var( --luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus) );--picker-button-font-color: var( --luzmo-picker-button-font-color-key-focus, var(--picker-button-font-color-key-focus) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-key-focus, var(--picker-button-icon-color-key-focus) )}:host([disabled]) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-disabled, var(--luzmo-background-color-disabled) );--picker-button-border-color: var( --luzmo-picker-button-border-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-font-color: var( --luzmo-picker-button-font-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-hover: var( --luzmo-picker-button-font-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-down: var( --luzmo-picker-button-font-color-down-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-hover: var( --luzmo-picker-button-icon-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-down: var( --luzmo-picker-button-icon-color-down-disabled, var(--luzmo-font-color-disabled) )}:host([quiet]) .root{--luzmo-picker-button-background-color: var( --luzmo-picker-button-background-color-quiet, transparent );--luzmo-picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-quiet, transparent );--luzmo-picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-quiet, transparent );--luzmo-picker-button-background-color-key-focus: var( --luzmo-picker-button-background-color-key-focus-quiet, transparent );--luzmo-picker-button-border-color: var( --luzmo-picker-button-border-color-quiet, transparent )}.root{background-color:initial;block-size:var(--luzmo-picker-button-width, var(--picker-button-width));box-sizing:border-box;padding:var(--luzmo-picker-button-padding, var(--picker-button-padding));border-style:none;justify-content:center;align-items:center;display:flex}.root.uiicononly{inline-size:var(--luzmo-picker-button-height, var(--picker-button-height))}.luzmo-picker-button-label{color:var(--luzmo-picker-button-font-color, var(--picker-button-font-color));white-space:nowrap;font-family:var(--luzmo-picker-button-font-family, var(--picker-button-font-family));font-style:var(--luzmo-picker-button-font-style, var(--picker-button-font-style));font-weight:var(--luzmo-picker-button-font-weight, var(--picker-button-font-weight));font-size:var(--luzmo-picker-button-font-size, var(--picker-button-font-size));flex:auto;padding-block-start:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));padding-block-end:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));overflow:hidden}.uiicononly .luzmo-picker-button-label{display:none}:host(:focus-visible) .luzmo-picker-button-fill{border-color:var(--luzmo-picker-button-indicator-color, var(--picker-button-indicator-color));background-color:var(--luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus))}.luzmo-picker-button-fill{box-sizing:border-box;block-size:100%;inline-size:100%;justify-content:center;align-items:center;gap:var(--luzmo-picker-button-gap, var(--picker-button-gap));background-color:var(--luzmo-picker-button-background-color, var(--picker-button-background-color));border-color:var(--luzmo-picker-button-border-color, var(--picker-button-border-color));border-width:var(--luzmo-picker-button-border-width, var(--picker-button-border-width));padding:var(--luzmo-picker-button-horizontal-padding, var(--picker-button-horizontal-padding));transition:border-color var(--luzmo-picker-button-background-animation-duration, var(--picker-button-background-animation-duration)) ease-in-out;border-style:solid;border-start-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-start-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));display:flex}:host([position=right]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=right][rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([position=left]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=left][rounded]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded))}.uiicononly .luzmo-picker-button-fill{padding:0}.textuiicon .luzmo-picker-button-fill{inline-size:auto}.luzmo-picker-button-icon{color:var(--luzmo-picker-button-icon-color, var(--picker-button-icon-color));flex-shrink:0}.root{--picker-button-height: var(--luzmo-component-height);--picker-button-width: var(--luzmo-component-height);--picker-button-gap: calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--picker-button-label-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--picker-button-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-button-indicator-color: var(--luzmo-indicator-color);--picker-button-icon-color: var(--luzmo-font-color);--picker-button-icon-color-hover: var(--luzmo-font-color-hover);--picker-button-icon-color-down: var(--luzmo-font-color-down);--picker-button-icon-color-key-focus: var(--luzmo-font-color-focus);--picker-button-font-color: var(--luzmo-font-color);--picker-button-font-color-hover: var(--luzmo-font-color-hover);--picker-button-font-color-down: var(--luzmo-font-color-down);--picker-button-font-color-key-focus: var(--neutral-content-color-focus);--picker-button-font-family: var(--luzmo-font-family);--picker-button-font-style: var(--luzmo-font-style);--picker-button-font-weight: var(--body-sans-serif-font-weight);--picker-button-font-size: var(--luzmo-font-size);--picker-button-border-radius-rounded: var(--luzmo-border-radius);--picker-button-background-animation-duration: var( --luzmo-animation-duration )}.root{--picker-button-background-color: var(--luzmo-background-color);--picker-button-background-color-hover: var(--luzmo-background-color-hover);--picker-button-background-color-down: var(--luzmo-background-color-down);--picker-button-background-color-key-focus: var( --luzmo-background-color-focus );--picker-button-border-color: var(--luzmo-border-color);--picker-button-border-radius: var(--luzmo-border-radius);--picker-button-border-radius-rounded-sided: var(--luzmo-border-radius);--picker-button-border-radius-sided: 0;--picker-button-border-width: var(--luzmo-border-width)}:host([size=s]) .root{--picker-button-height: var(--luzmo-component-height-s);--picker-button-width: var(--luzmo-component-height-s);--picker-button-label-padding: var(--luzmo-spacing-2);--picker-button-font-size: var(--luzmo-font-size-s);--picker-button-horizontal-padding: var(--luzmo-spacing-3)}:host([size=l]) .root{--picker-button-height: var(--luzmo-component-height-l);--picker-button-width: var(--luzmo-component-height-l);--picker-button-label-padding: var(--luzmo-spacing-3);--picker-button-font-size: var(--luzmo-font-size-l);--picker-button-horizontal-padding: var(--luzmo-spacing-4)}:host([size=xl]) .root{--picker-button-height: var(--luzmo-component-height-xl);--picker-button-width: var(--luzmo-component-height-xl);--picker-button-label-padding: var(--luzmo-spacing-4);--picker-button-font-size: var(--luzmo-font-size-xl);--picker-button-horizontal-padding: var(--luzmo-spacing-5)}:host{display:inline-flex}.root{display:flex}";
-var f = Object.defineProperty, c = (o, t, i, g) => {
-  for (var r = void 0, e = o.length - 1, n; e >= 0; e--)
-    (n = o[e]) && (r = n(t, i, r) || r);
-  return r && f(t, i, r), r;
+initializeGlobalLuzmoCSSVariables();
+import { unsafeCSS, html } from "lit";
+import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
+import { luzmoAngleDown } from "@luzmo/icons";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { O as ObserveSlotPresence } from "../observe-slot-presence-DcMdoumP.js";
+import { L as LuzmoButtonBase } from "../button-base-C3kf6BTK.js";
+import "../icon/index.js";
+const pickerButtonStyles = "@media (hover: hover){.root:hover{--picker-button-background-color: var( --luzmo-picker-button-background-color-hover, var(--picker-button-background-color-hover) );--picker-button-font-color: var( --luzmo-picker-button-font-color-hover, var(--picker-button-font-color-hover) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-hover, var(--picker-button-icon-color-hover) )}}:host([open]) .root,:host(:is(:active,[active])) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-down, var(--picker-button-background-color-down) );--picker-button-font-color: var( --luzmo-picker-button-font-color-down, var(--picker-button-font-color-down) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-down, var(--picker-button-icon-color-down) )}:host([focused]) .root,.root:focus,.root:focus-visible{--picker-button-background-color: var( --luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus) );--picker-button-font-color: var( --luzmo-picker-button-font-color-key-focus, var(--picker-button-font-color-key-focus) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-key-focus, var(--picker-button-icon-color-key-focus) )}:host([disabled]) .root{--picker-button-background-color: var( --luzmo-picker-button-background-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-disabled, var(--luzmo-background-color-disabled) );--picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-disabled, var(--luzmo-background-color-disabled) );--picker-button-border-color: var( --luzmo-picker-button-border-color-disabled, var(--luzmo-background-color-disabled) );--picker-button-font-color: var( --luzmo-picker-button-font-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-hover: var( --luzmo-picker-button-font-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-font-color-down: var( --luzmo-picker-button-font-color-down-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color: var( --luzmo-picker-button-icon-color-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-hover: var( --luzmo-picker-button-icon-color-hover-disabled, var(--luzmo-font-color-disabled) );--picker-button-icon-color-down: var( --luzmo-picker-button-icon-color-down-disabled, var(--luzmo-font-color-disabled) )}:host([quiet]) .root{--luzmo-picker-button-background-color: var( --luzmo-picker-button-background-color-quiet, transparent );--luzmo-picker-button-background-color-hover: var( --luzmo-picker-button-background-color-hover-quiet, transparent );--luzmo-picker-button-background-color-down: var( --luzmo-picker-button-background-color-down-quiet, transparent );--luzmo-picker-button-background-color-key-focus: var( --luzmo-picker-button-background-color-key-focus-quiet, transparent );--luzmo-picker-button-border-color: var( --luzmo-picker-button-border-color-quiet, transparent )}.root{background-color:initial;block-size:var(--luzmo-picker-button-width, var(--picker-button-width));box-sizing:border-box;padding:var(--luzmo-picker-button-padding, var(--picker-button-padding));border-style:none;justify-content:center;align-items:center;display:flex}.root.uiicononly{inline-size:var(--luzmo-picker-button-height, var(--picker-button-height))}.luzmo-picker-button-label{color:var(--luzmo-picker-button-font-color, var(--picker-button-font-color));white-space:nowrap;font-family:var(--luzmo-picker-button-font-family, var(--picker-button-font-family));font-style:var(--luzmo-picker-button-font-style, var(--picker-button-font-style));font-weight:var(--luzmo-picker-button-font-weight, var(--picker-button-font-weight));font-size:var(--luzmo-picker-button-font-size, var(--picker-button-font-size));flex:auto;padding-block-start:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));padding-block-end:var(--luzmo-picker-button-label-padding, var(--picker-button-label-padding));overflow:hidden}.uiicononly .luzmo-picker-button-label{display:none}:host(:focus-visible) .luzmo-picker-button-fill{border-color:var(--luzmo-picker-button-indicator-color, var(--picker-button-indicator-color));background-color:var(--luzmo-picker-button-background-color-key-focus, var(--picker-button-background-color-key-focus))}.luzmo-picker-button-fill{box-sizing:border-box;block-size:100%;inline-size:100%;justify-content:center;align-items:center;gap:var(--luzmo-picker-button-gap, var(--picker-button-gap));background-color:var(--luzmo-picker-button-background-color, var(--picker-button-background-color));border-color:var(--luzmo-picker-button-border-color, var(--picker-button-border-color));border-width:var(--luzmo-picker-button-border-width, var(--picker-button-border-width));padding:var(--luzmo-picker-button-horizontal-padding, var(--picker-button-horizontal-padding));transition:border-color var(--luzmo-picker-button-background-animation-duration, var(--picker-button-background-animation-duration)) ease-in-out;border-style:solid;border-start-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-start-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-end-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));border-end-start-radius:var(--luzmo-picker-button-border-radius, var(--picker-button-border-radius));display:flex}:host([position=right]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=right][rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([position=left]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-sided, var(--picker-button-border-radius-sided))}:host([position=left][rounded]) .luzmo-picker-button-fill{border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded-sided, var(--picker-button-border-radius-rounded-sided))}:host([rounded]) .luzmo-picker-button-fill{border-start-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-start-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-end-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded));border-end-start-radius:var(--luzmo-picker-button-border-radius-rounded, var(--picker-button-border-radius-rounded))}.uiicononly .luzmo-picker-button-fill{padding:0}.textuiicon .luzmo-picker-button-fill{inline-size:auto}.luzmo-picker-button-icon{color:var(--luzmo-picker-button-icon-color, var(--picker-button-icon-color));flex-shrink:0}.root{--picker-button-height: var(--luzmo-component-height);--picker-button-width: var(--luzmo-component-height);--picker-button-gap: calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--picker-button-label-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--picker-button-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-button-indicator-color: var(--luzmo-indicator-color);--picker-button-icon-color: var(--luzmo-font-color);--picker-button-icon-color-hover: var(--luzmo-font-color-hover);--picker-button-icon-color-down: var(--luzmo-font-color-down);--picker-button-icon-color-key-focus: var(--luzmo-font-color-focus);--picker-button-font-color: var(--luzmo-font-color);--picker-button-font-color-hover: var(--luzmo-font-color-hover);--picker-button-font-color-down: var(--luzmo-font-color-down);--picker-button-font-color-key-focus: var(--neutral-content-color-focus);--picker-button-font-family: var(--luzmo-font-family);--picker-button-font-style: var(--luzmo-font-style);--picker-button-font-weight: var(--body-sans-serif-font-weight);--picker-button-font-size: var(--luzmo-font-size);--picker-button-border-radius-rounded: var(--luzmo-border-radius);--picker-button-background-animation-duration: var( --luzmo-animation-duration )}.root{--picker-button-background-color: var(--luzmo-background-color);--picker-button-background-color-hover: var(--luzmo-background-color-hover);--picker-button-background-color-down: var(--luzmo-background-color-down);--picker-button-background-color-key-focus: var( --luzmo-background-color-focus );--picker-button-border-color: var(--luzmo-border-color);--picker-button-border-radius: var(--luzmo-border-radius);--picker-button-border-radius-rounded-sided: var(--luzmo-border-radius);--picker-button-border-radius-sided: 0;--picker-button-border-width: var(--luzmo-border-width)}:host([size=s]) .root{--picker-button-height: var(--luzmo-component-height-s);--picker-button-width: var(--luzmo-component-height-s);--picker-button-label-padding: var(--luzmo-spacing-2);--picker-button-font-size: var(--luzmo-font-size-s);--picker-button-horizontal-padding: var(--luzmo-spacing-3)}:host([size=l]) .root{--picker-button-height: var(--luzmo-component-height-l);--picker-button-width: var(--luzmo-component-height-l);--picker-button-label-padding: var(--luzmo-spacing-3);--picker-button-font-size: var(--luzmo-font-size-l);--picker-button-horizontal-padding: var(--luzmo-spacing-4)}:host([size=xl]) .root{--picker-button-height: var(--luzmo-component-height-xl);--picker-button-width: var(--luzmo-component-height-xl);--picker-button-label-padding: var(--luzmo-spacing-4);--picker-button-font-size: var(--luzmo-font-size-xl);--picker-button-horizontal-padding: var(--luzmo-spacing-5)}:host{display:inline-flex}.root{display:flex}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
 };
-class u extends s(
-  z(k, '[slot="label"]')
+class LuzmoPickerButton extends SizedMixin(
+  ObserveSlotPresence(LuzmoButtonBase, '[slot="label"]')
 ) {
   constructor() {
-    super(...arguments), this.invalid = !1, this.position = "right";
+    super(...arguments);
+    this.invalid = false;
+    this.position = "right";
   }
   static get styles() {
-    return [d(v)];
+    return [unsafeCSS(pickerButtonStyles)];
   }
   get hasText() {
     return this.slotContentIsPresent;
   }
   render() {
-    const t = {
-      root: !0,
+    const rootClasses = {
+      root: true,
       uiicononly: !this.hasText,
       textuiicon: this.hasText
     };
-    return b`
-      <div class=${m(t)}>
+    return html`
+      <div class=${classMap(rootClasses)}>
         <div class="luzmo-picker-button-fill">
           <span
             class="luzmo-picker-button-label is-placeholder"
@@ -64,7 +73,7 @@ class u extends s(
           </span>
           <slot name="icon">
             <luzmo-icon
-              .icon=${p}
+              .icon=${luzmoAngleDown}
               size=${this.size}
               block
               class="luzmo-picker-button-icon"
@@ -75,13 +84,15 @@ class u extends s(
     `;
   }
 }
-c([
-  l({ type: Boolean, reflect: !0 })
-], u.prototype, "invalid");
-c([
-  l({ reflect: !0 })
-], u.prototype, "position");
-customElements.get("luzmo-picker-button") || customElements.define("luzmo-picker-button", u);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoPickerButton.prototype, "invalid");
+__decorateClass([
+  property({ reflect: true })
+], LuzmoPickerButton.prototype, "position");
+if (!customElements.get("luzmo-picker-button")) {
+  customElements.define("luzmo-picker-button", LuzmoPickerButton);
+}
 export {
-  u as LuzmoPickerButton
+  LuzmoPickerButton
 };

package/components/platform-CxDar3Dn.cjs

@@ -0,0 +1,68 @@
+/*! * 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.
+ * */
+"use strict";
+function testUserAgent(re) {
+  return typeof window !== "undefined" && window.navigator != null ? re.test(window.navigator.userAgent) : false;
+}
+function testPlatform(re) {
+  return typeof window !== "undefined" && window.navigator != null ? (
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    re.test(window.navigator.platform)
+  ) : false;
+}
+function isMac() {
+  return testPlatform(/^Mac/);
+}
+function isIPhone() {
+  return testPlatform(/^iPhone/);
+}
+function isIPad() {
+  return testPlatform(/^iPad/) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  isMac() && navigator.maxTouchPoints > 1;
+}
+function isIOS() {
+  return isIPhone() || isIPad();
+}
+function isAppleDevice() {
+  return isMac() || isIOS();
+}
+function isChrome() {
+  return testUserAgent(/Chrome/);
+}
+function isWebKit() {
+  return testUserAgent(/AppleWebKit/) && !isChrome();
+}
+function isSeamonkey() {
+  return testUserAgent(/Seamonkey/);
+}
+function isFirefox() {
+  return testUserAgent(/Firefox/) && !isSeamonkey();
+}
+function isAndroid() {
+  return testUserAgent(/Android/);
+}
+exports.isAndroid = isAndroid;
+exports.isAppleDevice = isAppleDevice;
+exports.isChrome = isChrome;
+exports.isFirefox = isFirefox;
+exports.isIOS = isIOS;
+exports.isIPad = isIPad;
+exports.isIPhone = isIPhone;
+exports.isMac = isMac;
+exports.isSeamonkey = isSeamonkey;
+exports.isWebKit = isWebKit;

package/components/platform-Cxn0WbyT.js

@@ -0,0 +1,69 @@
+/*! * 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.
+ * */
+function testUserAgent(re) {
+  return typeof window !== "undefined" && window.navigator != null ? re.test(window.navigator.userAgent) : false;
+}
+function testPlatform(re) {
+  return typeof window !== "undefined" && window.navigator != null ? (
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    re.test(window.navigator.platform)
+  ) : false;
+}
+function isMac() {
+  return testPlatform(/^Mac/);
+}
+function isIPhone() {
+  return testPlatform(/^iPhone/);
+}
+function isIPad() {
+  return testPlatform(/^iPad/) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  isMac() && navigator.maxTouchPoints > 1;
+}
+function isIOS() {
+  return isIPhone() || isIPad();
+}
+function isAppleDevice() {
+  return isMac() || isIOS();
+}
+function isChrome() {
+  return testUserAgent(/Chrome/);
+}
+function isWebKit() {
+  return testUserAgent(/AppleWebKit/) && !isChrome();
+}
+function isSeamonkey() {
+  return testUserAgent(/Seamonkey/);
+}
+function isFirefox() {
+  return testUserAgent(/Firefox/) && !isSeamonkey();
+}
+function isAndroid() {
+  return testUserAgent(/Android/);
+}
+export {
+  isIPhone as a,
+  isIPad as b,
+  isIOS as c,
+  isAppleDevice as d,
+  isChrome as e,
+  isWebKit as f,
+  isSeamonkey as g,
+  isFirefox as h,
+  isMac as i,
+  isAndroid as j
+};

package/components/popover/index.cjs

@@ -15,4 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../popover-KFfO0IYL.cjs");customElements.get("luzmo-popover")||customElements.define("luzmo-popover",o.LuzmoPopover);exports.LuzmoPopover=o.LuzmoPopover;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const popover = require("../popover-BkgUf0kL.cjs");
+if (!customElements.get("luzmo-popover")) {
+  customElements.define("luzmo-popover", popover.LuzmoPopover);
+}
+exports.LuzmoPopover = popover.LuzmoPopover;

package/components/popover/index.js

@@ -15,15 +15,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { LuzmoPopover as r } from "../popover-DjX0aAnY.js";
-const l = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.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(o);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
+    document.head.appendChild(styleElement);
   }
 };
-l();
-customElements.get("luzmo-popover") || customElements.define("luzmo-popover", r);
+initializeGlobalLuzmoCSSVariables();
+import { LuzmoPopover } from "../popover-BkbYhl3i.js";
+if (!customElements.get("luzmo-popover")) {
+  customElements.define("luzmo-popover", LuzmoPopover);
+}
 export {
-  r as LuzmoPopover
+  LuzmoPopover
 };

package/components/popover-BkbYhl3i.js

@@ -0,0 +1,74 @@
+/*! * 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 { unsafeCSS, html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { a as LuzmoElement } from "./base-DmeVy0cq.js";
+import { S as SizedMixin } from "./sized-mixin-DmkrNdWB.js";
+const popoverStyles = ":host{pointer-events:none;visibility:hidden;opacity:0;max-height:var(--luzmo-popover-max-height)!important;transition:transform .13s ease-in-out,opacity .13s ease-in-out,visibility 0s linear .13s;transition:transform var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s)) ease-in-out,opacity var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s)) ease-in-out,visibility 0s linear var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s))}:host([open]){pointer-events:auto;visibility:visible;opacity:1;transition-delay:0s;transition-delay:var(--luzmo-overlay-animation-duration-opened, var(--animation-duration-0, 0s))}@media (forced-colors: active){:host{--highcontrast-popover-border-color: CanvasText}}:host{--popover-filter: drop-shadow( var(--luzmo-popover-shadow-horizontal, var(--popover-shadow-horizontal)) var(--luzmo-popover-shadow-vertical, var(--popover-shadow-vertical)) var(--luzmo-popover-shadow-blur, var(--popover-shadow-blur)) var(--luzmo-popover-shadow-color, var(--popover-shadow-color)) );box-sizing:border-box;padding:var(--luzmo-popover-content-area-spacing-vertical, var(--popover-content-area-spacing-vertical)) 0;border-radius:var(--luzmo-popover-corner-radius, var(--popover-corner-radius));border-style:solid;border-color:var(--highcontrast-popover-border-color, var(--luzmo-popover-border-color, var(--popover-border-color)));border-width:var(--luzmo-popover-border-width, var(--popover-border-width));background-color:var(--luzmo-popover-background-color, var(--popover-background-color));filter:var(--luzmo-popover-filter, var(--popover-filter));outline:none;flex-direction:column;display:inline-flex;position:absolute}:host([tip]) #tip .triangle{stroke-linecap:square;stroke-linejoin:miter;fill:var(--highcontrast-popover-background-color, var(--luzmo-popover-background-color, var(--popover-background-color)));stroke:var(--highcontrast-popover-border-color, var(--luzmo-popover-border-color, var(--popover-border-color)));stroke-width:var(--luzmo-popover-border-width, var(--popover-border-width))}*{--luzmo-popover-filter: none}:host([tip]) .luzmo-Popover--top-end,:host([tip]) .luzmo-Popover--top-left,:host([tip]) .luzmo-Popover--top-right,:host([tip]) .luzmo-Popover--top-start,:host([placement*=top][tip]){margin-block-end:calc(var(--luzmo-popover-pointer-height, var(--popover-pointer-height)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--top-end,:host([open]) .luzmo-Popover--top-left,:host([open]) .luzmo-Popover--top-right,:host([open]) .luzmo-Popover--top-start,:host([placement*=top][open]){transform:translateY(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) .luzmo-Popover--bottom-end,:host([tip]) .luzmo-Popover--bottom-left,:host([tip]) .luzmo-Popover--bottom-right,:host([tip]) .luzmo-Popover--bottom-start,:host([placement*=bottom][tip]){margin-block-start:calc(var(--luzmo-popover-pointer-height, var(--popover-pointer-height)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--bottom-end,:host([open]) .luzmo-Popover--bottom-left,:host([open]) .luzmo-Popover--bottom-right,:host([open]) .luzmo-Popover--bottom-start,:host([placement*=bottom][open]){transform:translateY(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--right-bottom,:host([tip]) .luzmo-Popover--right-top,:host([placement*=right][tip]){margin-left:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--right-bottom,:host([open]) .luzmo-Popover--right-top,:host([placement*=right][open]){transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--left-bottom,:host([tip]) .luzmo-Popover--left-top,:host([placement*=left][tip]){margin-right:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--left-bottom,:host([open]) .luzmo-Popover--left-top,:host([placement*=left][open]){transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) .luzmo-Popover--start-bottom,:host([tip]) .luzmo-Popover--start-top,:host([tip]) .luzmo-Popover--start{margin-inline-end:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--start-bottom,:host([open]) .luzmo-Popover--start-top,:host([open]) .luzmo-Popover--start{transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([open]) .luzmo-Popover--start-bottom:dir(rtl),:host([open]) .luzmo-Popover--start-top:dir(rtl),:host([open]) .luzmo-Popover--start:dir(rtl),:host([dir=rtl][open]) .luzmo-Popover--start-bottom,:host([dir=rtl][open]) .luzmo-Popover--start-top,:host([dir=rtl][open]) .luzmo-Popover--start{transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--end-bottom,:host([tip]) .luzmo-Popover--end-top,:host([tip]) .luzmo-Popover--end{margin-inline-start:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--end-bottom,:host([open]) .luzmo-Popover--end-top,:host([open]) .luzmo-Popover--end{transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([open]) .luzmo-Popover--end-bottom:dir(rtl),:host([open]) .luzmo-Popover--end-top:dir(rtl),:host([open]) .luzmo-Popover--end:dir(rtl),:host([dir=rtl][open]) .luzmo-Popover--end-bottom,:host([dir=rtl][open]) .luzmo-Popover--end-top,:host([dir=rtl][open]) .luzmo-Popover--end{transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) #tip,:host([tip][placement*=bottom]) #tip,:host([tip]) .luzmo-Popover--bottom-end #tip,:host([tip]) .luzmo-Popover--bottom-left #tip,:host([tip]) .luzmo-Popover--bottom-right #tip,:host([tip]) .luzmo-Popover--bottom-start #tip,:host([tip][placement*=top]) #tip,:host([tip]) .luzmo-Popover--top-end #tip,:host([tip]) .luzmo-Popover--top-left #tip,:host([tip]) .luzmo-Popover--top-right #tip,:host([tip]) .luzmo-Popover--top-start #tip{inline-size:var(--luzmo-popover-pointer-width, var(--popover-pointer-width));block-size:var(--luzmo-popover-pointer-height, var(--popover-pointer-height));margin:auto;position:absolute;inset-block-start:100%;inset-inline:0;transform:translate(0)}:host([tip]) .luzmo-Popover--top-left #tip{inset-inline:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--top-right #tip{inset-inline:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--top-start #tip{margin-inline-start:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--top-end #tip{margin-inline-end:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip][placement*=bottom]) #tip,:host([tip]) .luzmo-Popover--bottom-end #tip,:host([tip]) .luzmo-Popover--bottom-left #tip,:host([tip]) .luzmo-Popover--bottom-right #tip,:host([tip]) .luzmo-Popover--bottom-start #tip{inset-block:auto 100%;transform:scaleY(-1)}:host([tip]) .luzmo-Popover--bottom-left #tip{inset-inline:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--bottom-right #tip{inset-inline:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--bottom-start #tip{margin-inline-start:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--bottom-end #tip{margin-inline-end:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--end #tip,:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--end-top #tip,:host([tip][placement*=left]) #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--left-top #tip,:host([tip][placement*=right]) #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--right-top #tip,:host([tip]) .luzmo-Popover--start #tip,:host([tip]) .luzmo-Popover--start-bottom #tip,:host([tip]) .luzmo-Popover--start-top #tip{inline-size:var(--luzmo-popover-pointer-height, var(--popover-pointer-height));block-size:var(--luzmo-popover-pointer-width, var(--popover-pointer-width));inset-block:0}:host([tip][placement*=left]) #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--left-top #tip{left:100%;right:auto}:host([tip][placement*=right]) #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--right-top #tip{left:auto;right:100%;transform:scaleX(-1)}:host([tip]) .luzmo-Popover--end-top #tip,:host([tip]) .luzmo-Popover--left-top #tip,:host([tip]) .luzmo-Popover--right-top #tip,:host([tip]) .luzmo-Popover--start-top #tip{inset-block:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--start-bottom #tip{inset-block:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--start #tip,:host([tip]) .luzmo-Popover--start-bottom #tip,:host([tip]) .luzmo-Popover--start-top #tip{margin-inline-start:100%}:host([tip]) .luzmo-Popover--start #tip:dir(rtl),:host([tip]) .luzmo-Popover--start-bottom #tip:dir(rtl),:host([tip]) .luzmo-Popover--start-top #tip:dir(rtl),:host([dir=rtl][tip]) .luzmo-Popover--start #tip,:host([dir=rtl][tip]) .luzmo-Popover--start-bottom #tip,:host([dir=rtl][tip]) .luzmo-Popover--start-top #tip{transform:none}:host([tip]) .luzmo-Popover--end #tip,:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--end-top #tip{margin-inline-end:100%;transform:scaleX(-1)}:host([tip]) .luzmo-Popover--end #tip:dir(rtl),:host([tip]) .luzmo-Popover--end-bottom #tip:dir(rtl),:host([tip]) .luzmo-Popover--end-top #tip:dir(rtl),:host([dir=rtl][tip]) .luzmo-Popover--end #tip,:host([dir=rtl][tip]) .luzmo-Popover--end-bottom #tip,:host([dir=rtl][tip]) .luzmo-Popover--end-top #tip{transform:scaleX(1)}:host{--popover-border-width: var(--luzmo-border-width);--popover-animation-distance: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--popover-background-color: var(--luzmo-background-color);--popover-border-color: var(--luzmo-border-color);--popover-content-area-spacing-vertical: var(--luzmo-spacing-2);--popover-shadow-horizontal: 0;--popover-shadow-vertical: 1px;--popover-shadow-blur: 4px;--popover-shadow-color: var(--luzmo-border-color);--popover-corner-radius: var(--luzmo-border-radius);--popover-pointer-width: var(--luzmo-spacing-5);--popover-pointer-height: var(--luzmo-spacing-3);--popover-pointer-edge-offset: 16px;--popover-pointer-edge-spacing: 24px}:host([size=s]){--popover-animation-distance: var(--luzmo-spacing-2)}:host([size=l]){--popover-animation-distance: var(--luzmo-spacing-3)}:host([size=xl]){--popover-animation-distance: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host{min-width:min-content;max-height:100%;max-width:100%;clip-path:none}::slotted(*){overscroll-behavior:contain}:host([placement*=left]) #tip[style],:host([placement*=right]) #tip[style]{inset-block-end:auto}:host([placement*=top]) #tip[style],:host([placement*=bottom]) #tip[style]{inset-inline-end:auto}.block,.inline{width:100%;height:100%;display:block}:host([placement*=left]) .block,:host([placement*=right]) .block{display:none}:host([placement*=top]) .inline,:host([placement*=bottom]) .inline{display:none}::slotted(.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}::slotted(luzmo-menu){margin:0}:host([dialog]){min-width:var(--luzmo-popover-dialog-min-width, 270px);padding:var(--luzmo-popover-dialog-padding, 30px 29px)}:host([tip][placement]) #tip{height:auto}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class LuzmoPopover extends SizedMixin(LuzmoElement) {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.tip = false;
+  }
+  static get styles() {
+    return [unsafeCSS(popoverStyles)];
+  }
+  renderTip() {
+    return html`
+      <div id="tip" aria-hidden="true">
+        <svg class="tip block" viewBox="0 -0.5 16 9">
+          <path class="triangle" d="M-1,-1 8,8 17,-1"></path>
+        </svg>
+        <svg class="tip inline" viewBox="0 -0.5 9 16">
+          <path class="triangle" d="M-1,-1 8,8 -1,17"></path>
+        </svg>
+      </div>
+    `;
+  }
+  render() {
+    return html`
+      <slot></slot>
+      ${this.tip ? this.renderTip() : nothing}
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoPopover.prototype, "open");
+__decorateClass([
+  property({ reflect: true })
+], LuzmoPopover.prototype, "placement");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoPopover.prototype, "tip");
+__decorateClass([
+  query("#tip")
+], LuzmoPopover.prototype, "tipElement");
+export {
+  LuzmoPopover
+};