@luzmo/lucero 1.0.1-alpha.3 → 1.0.1-alpha.30

package/components/overlay-nUwFClQq.cjs

@@ -0,0 +1,47 @@
+/*! * 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";const O=require("lit"),u=require("lit/decorators.js"),$=require("lit/directives/if-defined.js"),G=require("lit/directives/style-map.js"),M=require("./random-id-CqvckpWe.cjs"),Y=require("./element-resolution-BvRLGqIU.cjs"),le=require("./base-5nDSSNeT.cjs"),x=require("./focusable-selectors-BgFlyFcY.cjs"),b=require("@floating-ui/dom"),J=require("./slottable-request-event-BfUUt1Mh.cjs"),H=require("./condition-attribute-with-id-DrQYZzFS.cjs"),k=require("./platform-BJnOJJag.cjs");function he(a,e,t=[]){for(const[i,s]of e.entries()){const n=a[i],r=n.parentElement||n.getRootNode();t[i]&&t[i](s),r&&r!==n&&n.replaceWith(s),delete a[i]}return e}const ce=(a,e,{position:t,prepareCallback:i}={position:"beforeend"})=>{let{length:s}=a;if(s===0)return()=>a;let n=1,r=0;(t==="afterbegin"||t==="afterend")&&(n=-1,r=s-1);const o=new Array(s),h=new Array(s),p=typeof document<"u"?document.createComment("placeholder for reparented element"):null;do{const l=a[r];i&&(h[r]=i(l)),o[r]=p.cloneNode();const c=l.parentElement||l.getRootNode();c&&c!==l&&c.replaceChild(o[r],l),e.insertAdjacentElement(t,l),r+=n}while(--s>0);return function(){return he(o,a,h)}},pe=1e3,de=1e3;class ue{constructor(e={}){this.warmUpDelay=pe,this.coolDownDelay=de,this.isWarm=!1,this.timeout=0,Object.assign(this,e)}openTimer(e){if(this.cancelCooldownTimer(),!this.component||e!==this.component)return this.component&&(this.close(this.component),this.cancelCooldownTimer()),this.component=e,this.isWarm?Promise.resolve(!1):(this.promise=new Promise(t=>{this.resolve=t,this.timeout=typeof window<"u"?window.setTimeout(()=>{this.resolve&&(this.resolve(!1),this.isWarm=!0)},this.warmUpDelay):0}),this.promise);if(this.promise)return this.promise;throw new Error("Inconsistent state")}close(e){this.component&&this.component===e&&(this.resetCooldownTimer(),this.timeout>0&&(clearTimeout(this.timeout),this.timeout=0),this.resolve&&(this.resolve(!0),delete this.resolve),delete this.promise,delete this.component)}resetCooldownTimer(){this.isWarm&&(this.cooldownTimeout&&typeof window<"u"&&window.clearTimeout(this.cooldownTimeout),this.cooldownTimeout=typeof window<"u"?window.setTimeout(()=>{this.isWarm=!1,delete this.cooldownTimeout},this.coolDownDelay):void 0)}cancelCooldownTimer(){this.cooldownTimeout&&typeof window<"u"&&window.clearTimeout(this.cooldownTimeout),delete this.cooldownTimeout}}const D=new ue,E=()=>{},q=(a,e,t)=>{const i=new AbortController,s=new Map,n=()=>{i.abort(),t()};let r,o;const h=requestAnimationFrame(()=>{r=requestAnimationFrame(()=>{o=requestAnimationFrame(()=>{n()})})}),p=c=>{c.target===a&&(s.set(c.propertyName,s.get(c.propertyName)-1),s.get(c.propertyName)||s.delete(c.propertyName),s.size===0&&n())},l=c=>{c.target===a&&(s.has(c.propertyName)||s.set(c.propertyName,0),s.set(c.propertyName,s.get(c.propertyName)+1),cancelAnimationFrame(h),cancelAnimationFrame(r),cancelAnimationFrame(o))};a.addEventListener("transitionrun",l,{signal:i.signal}),a.addEventListener("transitionend",p,{signal:i.signal}),a.addEventListener("transitioncancel",p,{signal:i.signal}),e()};function f(){return new Promise(a=>requestAnimationFrame(()=>a()))}class C extends le.LuzmoElement{constructor(){super(...arguments),this.dispose=E,this.offset=0,this.willPreventClose=!1}applyFocus(e,t){}get delayed(){return!1}set delayed(e){}get disabled(){return!1}set disabled(e){}get elementResolver(){return this._elementResolver}set elementResolver(e){this._elementResolver=e}ensureOnDOM(e){}makeTransition(e){return null}manageDelay(e){}manageDialogOpen(){}managePopoverOpen(){}managePosition(){}get open(){return!1}set open(e){}get placementController(){return this._placementController}set placementController(e){this._placementController=e}requestSlottable(){}returnFocus(){}get state(){return"closed"}set state(e){}manuallyKeepOpen(){}static update(){const e=new CustomEvent("luzmo-update-overlays",{bubbles:!0,composed:!0,cancelable:!0});document.dispatchEvent(e)}static async open(e,t,i,s){await Promise.resolve().then(()=>N);const n=arguments.length===2,r=i||e,o=new this;let h=!1;const p=ce([r],o,{position:"beforeend",prepareCallback:v=>{const P=v.slot;return v.removeAttribute("slot"),()=>{v.slot=P}}});if(o.dispose=()=>{o.addEventListener("luzmo-closed",()=>{h||(p(),h=!0),requestAnimationFrame(()=>{o.remove()})}),o.open=!1,o.dispose=E},!n&&r&&s){const v=e,P=t,g=s;return C.applyOptions(o,{...g,delayed:g.delayed||r.hasAttribute("delayed"),trigger:g.virtualTrigger||v,type:P==="modal"?"modal":P==="hover"?"hint":"auto"}),v.after(o),await o.updateComplete,o.open=!0,o.dispose}const c=t;return o.append(r),C.applyOptions(o,{...c,delayed:c.delayed||r.hasAttribute("delayed")}),o.updateComplete.then(()=>{o.open=!0}),o}static applyOptions(e,t){e.delayed=!!t.delayed,e.receivesFocus=t.receivesFocus??"auto",e.triggerElement=t.trigger||null,e.type=t.type||"modal",e.offset=t.offset??0,e.placement=t.placement,e.willPreventClose=!!t.notImmediatelyClosable}}const W=a=>a.querySelector(x.userFocusableSelector),B=a=>a.assignedElements().find(t=>t.matches(x.userFocusableSelector));class K extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1}),this.currentState="open",this.newState="closed"}}class j extends Event{constructor(){super("beforetoggle",{bubbles:!1,composed:!1}),this.currentState="closed",this.newState="open"}}class y extends Event{constructor(e,t,{publish:i,interaction:s,reason:n}){super(e,{bubbles:i,composed:i}),this.overlay=t,this.detail={interaction:s,reason:n}}}class S{constructor(e,t){this.x=0,this.y=0,this.x=e,this.y=t}updateBoundingClientRect(e,t){this.x=e,this.y=t,C.update()}getBoundingClientRect(){return{width:0,height:0,top:this.y,right:this.x,y:this.y,x:this.x,bottom:this.y,left:this.x,toJSON(){}}}}function me(a){class e extends a{async manageDialogOpen(){const i=this.open;if(await f(),await this.managePosition(),this.open!==i)return;const s=await this.dialogMakeTransition(i);this.open===i&&await this.dialogApplyFocus(i,s)}dialogMakeTransition(i){let s=null;const n=(o,h)=>()=>{if(o.open=i,!i){const l=()=>{o.removeEventListener("close",l)};o.addEventListener("close",l)}if(h>0)return;const p=i?j:K;this.dispatchEvent(new p),i&&(o.matches(x.userFocusableSelector)&&(s=o),s=s||W(o),s||o.querySelectorAll("slot").forEach(c=>{s||(s=B(c))}),!(!this.isConnected||this.dialogEl.open)&&this.dialogEl.showModal())},r=(o,h)=>()=>{if(this.open!==i)return;const p=i?"luzmo-opened":"luzmo-closed";if(h>0){o.dispatchEvent(new y(p,this,{interaction:this.type,publish:!1}));return}if(!this.isConnected||i!==this.open)return;const l=async()=>{const c=this.triggerElement instanceof S;this.dispatchEvent(new y(p,this,{interaction:this.type,publish:c})),o.dispatchEvent(new y(p,this,{interaction:this.type,publish:!1})),this.triggerElement&&!c&&this.triggerElement.dispatchEvent(new y(p,this,{interaction:this.type,publish:!0})),this.state=i?"opened":"closed",this.returnFocus(),await f(),await f(),i===this.open&&i===!1&&this.requestSlottable()};!i&&this.dialogEl.open?(this.dialogEl.addEventListener("close",()=>{l()},{once:!0}),this.dialogEl.close()):l()};return this.elements.forEach((o,h)=>{q(o,n(o,h),r(o,h))}),s}dialogApplyFocus(i,s){this.applyFocus(i,s)}}return e}function ge(a){class e extends a{async managePopoverOpen(){await this.managePosition()}async manageDelay(i){if(i===!1||i!==this.open){D.close(this);return}this.delayed&&await D.openTimer(this)&&(this.open=!i)}ensureOnDOM(i){document.body.offsetHeight}makeTransition(i){if(this.open!==i)return null;let s=null;const n=(o,h)=>()=>{if(i!==this.open)return;if(o.open=i,h===0){const l=i?j:K;this.dispatchEvent(new l)}if(i!==!0||(o.matches(x.userFocusableSelector)&&(s=o),s=s||W(o),s))return;o.querySelectorAll("slot").forEach(l=>{s||(s=B(l))})},r=(o,h)=>async()=>{if(this.open!==i)return;const p=i?"luzmo-opened":"luzmo-closed";if(o.dispatchEvent(new y(p,this,{interaction:this.type})),h>0)return;const l=this.triggerElement instanceof S;this.dispatchEvent(new y(p,this,{interaction:this.type,publish:l})),this.triggerElement&&!l&&this.triggerElement.dispatchEvent(new y(p,this,{interaction:this.type,publish:!0})),this.state=i?"opened":"closed",this.returnFocus(),await f(),await f(),i===this.open&&i===!1&&this.requestSlottable()};return this.elements.forEach((o,h)=>{q(o,n(o,h),r(o,h))}),s}}return e}const fe=CSS.supports("(overlay: auto)");function Q(a){let e=!1;try{e=a.matches(":popover-open")}catch{}let t=!1;try{t=a.matches(":open")}catch{}return e||t}function ve(a){class e extends a{async manageDelay(i){if(i===!1||i!==this.open){D.close(this);return}this.delayed&&await D.openTimer(this)&&(this.open=!i)}shouldHidePopover(i){if(i&&this.open!==i)return;const s=async({newState:n}={})=>{n!=="open"&&await this.placementController.resetOverlayPosition()};if(!Q(this.dialogEl)){s();return}this.dialogEl.addEventListener("toggle",s,{once:!0})}shouldShowPopover(i){let s=!1;try{s=this.dialogEl.matches(":popover-open")}catch{}let n=!1;try{n=this.dialogEl.matches(":open")}catch{}i&&this.open===i&&!s&&!n&&this.isConnected&&(this.dialogEl.showPopover(),this.managePosition())}async ensureOnDOM(i){fe||await this.shouldHidePopover(i),this.shouldShowPopover(i),await f()}makeTransition(i){if(this.open!==i)return null;let s=null;const n=(o,h)=>()=>{if(o.open=i,h===0){const l=i?j:K;this.dispatchEvent(new l)}if(!i||(o.matches(x.userFocusableSelector)&&(s=o),s=s||W(o),s))return;o.querySelectorAll("slot").forEach(l=>{s||(s=B(l))})},r=(o,h)=>()=>{if(this.open!==i)return;const p=i?"luzmo-opened":"luzmo-closed";if(h>0){o.dispatchEvent(new y(p,this,{interaction:this.type,publish:!1}));return}const l=async()=>{if(this.open!==i)return;await f();const v=this.triggerElement instanceof S;this.dispatchEvent(new y(p,this,{interaction:this.type,publish:v})),o.dispatchEvent(new y(p,this,{interaction:this.type,publish:!1})),this.triggerElement&&!v&&this.triggerElement.dispatchEvent(new y(p,this,{interaction:this.type,publish:!0})),this.state=i?"opened":"closed",this.returnFocus(),await f(),await f(),i===this.open&&i===!1&&this.requestSlottable()};if(this.open!==i)return;const c=Q(this.dialogEl);i!==!0&&c&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{l()},{once:!0}),this.dialogEl.hidePopover()):l()};return this.elements.forEach((o,h)=>{q(o,n(o,h),r(o,h))}),s}}return e}const ye=typeof document<"u"&&"showPopover"in document.createElement("div");class be{constructor(){this.root=typeof document>"u"?null:document.body,this.stack=[],this.handleScroll=e=>{typeof document<"u"&&e.target!==document&&e.target!==document.documentElement&&e.target!==document.body||this.stack.forEach(t=>{t.open&&(t.type==="auto"&&t.triggerElement instanceof HTMLElement&&t.triggerElement.closest("luzmo-picker, luzmo-select, luzmo-action-menu")&&e.stopPropagation(),typeof document<"u"&&document.dispatchEvent(new CustomEvent("luzmo-update-overlays",{bubbles:!0,composed:!0,cancelable:!0})))})},this.handlePointerdown=e=>{this.pointerdownPath=e.composedPath(),this.lastOverlay=this.stack.at(-1)},this.handlePointerup=()=>{const e=this.pointerdownPath;if(this.pointerdownPath=void 0,this.stack.length===0||!(e!=null&&e.length))return;const t=this.lastOverlay;this.lastOverlay=void 0;const i=this.stack.length-1,s=this.stack.filter((n,r)=>!e.find(h=>h===n||h===(n==null?void 0:n.triggerElement)&&(n==null?void 0:n.type)==="hint"||r===i&&n!==t&&n.triggerInteraction==="longpress")&&!n.shouldPreventClose()&&n.type!=="manual"&&!(n.type==="modal"&&t!==n));s.reverse(),s.forEach(n=>{this.closeOverlay(n);let r=n.parentOverlayToForceClose;for(;r;)this.closeOverlay(r),r=r.parentOverlayToForceClose})},this.handleBeforetoggle=e=>{const{target:t,newState:i}=e;i!=="open"&&this.closeOverlay(t)},this.handleKeydown=e=>{if(e.code!=="Escape"||this.stack.length===0)return;const t=this.stack.at(-1);if((t==null?void 0:t.type)==="page"){e.preventDefault();return}if((t==null?void 0:t.type)==="manual"){this.closeOverlay(t);return}ye||t&&this.closeOverlay(t)},typeof document<"u"&&this.bindEvents()}get document(){return this.root.ownerDocument||document}bindEvents(){typeof document<"u"&&(this.document.addEventListener("pointerdown",this.handlePointerdown),this.document.addEventListener("pointerup",this.handlePointerup),this.document.addEventListener("keydown",this.handleKeydown),this.document.addEventListener("scroll",this.handleScroll,{capture:!0}))}closeOverlay(e){const t=this.stack.indexOf(e);t!==-1&&this.stack.splice(t,1),e.open=!1}overlaysByTriggerElement(e){return this.stack.filter(t=>t.triggerElement===e)}add(e){if(this.stack.includes(e)){const t=this.stack.indexOf(e);t!==-1&&(this.stack.splice(t,1),this.stack.push(e));return}if(e.type==="auto"||e.type==="modal"||e.type==="page"){const t="luzmo-overlay-query-path",i=new Event(t,{composed:!0,bubbles:!0});e.addEventListener(t,s=>{const n=s.composedPath();this.stack.forEach(r=>{!n.find(h=>h===r)&&r.type!=="manual"&&r.type!=="modal"&&this.closeOverlay(r)})},{once:!0}),e.dispatchEvent(i)}else if(e.type==="hint"){if(this.stack.some(i=>i.type!=="manual"&&i.triggerElement&&i.triggerElement===e.triggerElement)){e.open=!1;return}this.stack.forEach(i=>{i.type==="hint"&&this.closeOverlay(i)})}requestAnimationFrame(()=>{this.stack.push(e),e.addEventListener("beforetoggle",this.handleBeforetoggle,{once:!0})})}remove(e){this.closeOverlay(e)}}const X=new be,we=':host{display:contents;pointer-events:none;--luzmo-overlay-animation-distance: .5rem}:host(:has(> luzmo-tooltip)){--luzmo-overlay-animation-distance: var( --luzmo-tooltip-animation-distance, 4px )}.dialog{margin:0;border:0;background:none;padding:0;position:fixed;overflow:visible;opacity:1!important;box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;inset:auto;top:0;left:0;display:flex;--luzmo-overlay-open: true}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--luzmo-popover-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, .15))}:host(:not([open])) .dialog{--luzmo-overlay-open: false}.dialog::backdrop{display:none}.dialog:before{position:absolute;top:-999em;right:-999em;bottom:-999em;left:-999em;content:"";pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(luzmo-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--luzmo-popover-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, .15))}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--luzmo-popover-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, .15))}}@supports (overlay: auto){.dialog{display:none;transition:all var(--luzmo-overlay-animation-duration, .13s),translate 0s,display var(--luzmo-overlay-animation-duration, .13s);transition-behavior:allow-discrete}.dialog:popover-open,.dialog:modal{display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--luzmo-overlay-z-index-base, 1000) + var(--luzmo-overlay-open-count))}}';function A(a){if(a===void 0)return 0;const e=window.devicePixelRatio||1;return Math.round(a*e)/e}const R=8,Ee=100,Pe=a=>({left:["right","bottom","top"],"left-start":["right-start","bottom","top"],"left-end":["right-end","bottom","top"],right:["left","bottom","top"],"right-start":["left-start","bottom","top"],"right-end":["left-end","bottom","top"],top:["bottom","left","right"],"top-start":["bottom-start","left","right"],"top-end":["bottom-end","left","right"],bottom:["top","left","right"],"bottom-start":["top-start","left","right"],"bottom-end":["top-end","left","right"]})[a]??[a],Ce=Symbol("placement updated");class Z{constructor(e){this.originalPlacements=new WeakMap,this.allowPlacementUpdate=!1,this.closeForAncestorUpdate=()=>{!this.allowPlacementUpdate&&this.options.type!=="modal"&&this.cleanup&&this.target.dispatchEvent(new Event("close",{bubbles:!0})),this.allowPlacementUpdate=!1},this.updatePlacement=()=>{this.computePlacement()},this.resetOverlayPosition=()=>{!this.target||!this.options||(this.clearOverlayPosition(),this.host.offsetHeight,this.computePlacement())},this.host=e,this.host.addController(this)}placeOverlay(e=this.target,t=this.options){if(this.target=e,this.options=t,!e||!t)return;const i=b.autoUpdate(t.trigger,e,this.closeForAncestorUpdate,{ancestorResize:!1,elementResize:!1,layoutShift:!1}),s=b.autoUpdate(t.trigger,e,this.updatePlacement,{ancestorScroll:!1});this.cleanup=()=>{var n;(n=this.host.elements)==null||n.forEach(r=>{r.addEventListener("luzmo-closed",()=>{const o=this.originalPlacements.get(r);o&&r.setAttribute("placement",o),this.originalPlacements.delete(r)},{once:!0})}),i(),s()}}async computePlacement(){var v,P;const{options:e,target:t}=this;await(document.fonts?document.fonts.ready:Promise.resolve());const i=e.trigger instanceof HTMLElement?b.flip():b.flip({padding:R,fallbackPlacements:Pe(e.placement)}),[s=0,n=0]=Array.isArray(e==null?void 0:e.offset)?e.offset:[e.offset,0],r=(v=this.host.elements.find(g=>g.tipElement))==null?void 0:v.tipElement,o=[b.offset({mainAxis:s,crossAxis:n}),b.shift({padding:R}),i,b.size({padding:R,apply:({availableWidth:g,availableHeight:U,rects:{floating:re}})=>{const V=Math.max(Ee,Math.floor(U)),L=re.height;this.initialHeight=this.isConstrained&&this.initialHeight||L,this.isConstrained=L<this.initialHeight||V<=L;const ae=this.isConstrained?`${V}px`:"";Object.assign(t.style,{maxWidth:`${Math.floor(g)}px`,maxHeight:ae})}}),...r?[b.arrow({element:r,padding:e.tipPadding||R})]:[]],{x:h,y:p,placement:l,middlewareData:c}=await b.computePosition(e.trigger,t,{placement:e.placement,middleware:o,strategy:"fixed"});if(Object.assign(t.style,{top:"0px",left:"0px",translate:`${A(h)}px ${A(p)}px`}),t.setAttribute("actual-placement",l),(P=this.host.elements)==null||P.forEach(g=>{this.originalPlacements.has(g)||this.originalPlacements.set(g,g.getAttribute("placement")),g.setAttribute("placement",l)}),r&&c.arrow){const{x:g,y:U}=c.arrow;Object.assign(r.style,{top:l.startsWith("right")||l.startsWith("left")?"0px":"",left:l.startsWith("bottom")||l.startsWith("top")?"0px":"",translate:`${A(g)}px ${A(U)}px`})}}clearOverlayPosition(){this.target&&(this.target.style.removeProperty("max-height"),this.target.style.removeProperty("max-width"),this.initialHeight=void 0,this.isConstrained=!1)}hostConnected(){document.addEventListener("luzmo-update-overlays",this.resetOverlayPosition)}hostUpdated(){var e;this.host.open||((e=this.cleanup)==null||e.call(this),this.cleanup=void 0)}hostDisconnected(){var e;(e=this.cleanup)==null||e.call(this),this.cleanup=void 0,document.removeEventListener("luzmo-update-overlays",this.resetOverlayPosition)}}var T=(a=>(a.click="click",a.hover="hover",a.longpress="longpress",a))(T||{});const _=Symbol("lastInteractionType"),z="remove-focus-ring-safari-hack";class I{constructor(e,{overlay:t,isPersistent:i,handleOverlayReady:s}){this.target=e,this.isLazilyOpen=!1,this.isPersistent=!1,this.isPersistent=!!i,this.handleOverlayReady=s,this.isPersistent&&this.init(),this.overlay=t}get activelyOpening(){return!1}get open(){var e;return((e=this.overlay)==null?void 0:e.open)??this.isLazilyOpen}set open(e){if(e!==this.open){if(this.isLazilyOpen=e,this.overlay){this.overlay.open=e,this.target[_]=this.type;return}e&&(customElements.whenDefined("luzmo-overlay").then(async()=>{const{LuzmoOverlay:t}=await Promise.resolve().then(()=>N);this.overlay=new t,this.overlay.open=!0,this.target[_]=this.type}),Promise.resolve().then(()=>N))}}get overlay(){return this._overlay}set overlay(e){var t;e&&this.overlay!==e&&(this.overlay&&this.overlay.removeController(this),this._overlay=e,this.overlay.addController(this),this.initOverlay(),this.prepareDescription(this.target),(t=this.handleOverlayReady)==null||t.call(this,this.overlay))}prepareDescription(e){}releaseDescription(){}shouldCompleteOpen(){}init(){}initOverlay(){}abort(){var e;this.releaseDescription(),(e=this.abortController)==null||e.abort()}hostConnected(){this.init()}hostDisconnected(){this.isPersistent||this.abort()}}class ee extends I{constructor(){super(...arguments),this.type=T.click,this.preventNextToggle=!1}handleClick(){this.preventNextToggle||(this.open=!this.open),this.preventNextToggle=!1}handlePointerdown(){this.preventNextToggle=this.open}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("click",()=>this.handleClick(),{signal:e}),this.target.addEventListener("pointerdown",()=>this.handlePointerdown(),{signal:e})}}const Te=300;class te extends I{constructor(){super(...arguments),this.type=T.hover,this.elementIds=[],this.focusedin=!1,this.pointerentered=!1}handleKeyup(e){(e.code==="Tab"||e.code==="Escape")&&(this.open=!0,this.removeSafariFocusRingClass())}handleTargetFocusin(){if(this.target.matches(":focus-visible")){if(k.isWebKit()&&this.target[_]===T.click){this.target.classList.add(z);return}this.open=!0,this.focusedin=!0,this.removeSafariFocusRingClass()}}handleTargetFocusout(){this.removeSafariFocusRingClass(),this.focusedin=!1,!this.pointerentered&&(this.open=!1)}handleTargetPointerenter(){var e;this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0),!((e=this.overlay)!=null&&e.disabled)&&(this.open=!0,this.pointerentered=!0)}handleTargetPointerleave(){this.doPointerleave()}handleHostPointerenter(){this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0)}handleHostPointerleave(){this.doPointerleave()}prepareDescription(){if(this.overlay.elements.length===0)return;const e=this.target.getRootNode(),t=this.overlay.elements[0].getRootNode(),i=this.overlay.getRootNode();e===i?this.prepareOverlayRelativeDescription():e===t&&this.prepareContentRelativeDescription()}prepareOverlayRelativeDescription(){const e=H.conditionAttributeWithId(this.target,"aria-describedby",[this.overlay.id]);this.releaseDescription=()=>{e(),this.releaseDescription=E}}prepareContentRelativeDescription(){const e=[],t=this.overlay.elements.map(s=>(e.push(s.id),s.id||(s.id=`${this.overlay.tagName.toLowerCase()}-helper-${M.randomID()}`),s.id));this.elementIds=e;const i=H.conditionAttributeWithId(this.target,"aria-describedby",t);this.releaseDescription=()=>{i(),this.overlay.elements.map((s,n)=>{s.id=this.elementIds[n]}),this.releaseDescription=E}}doPointerleave(){this.pointerentered=!1;const e=this.target;this.focusedin&&e.matches(":focus-visible")||(this.hoverTimeout=setTimeout(()=>{this.open=!1},Te))}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("keyup",i=>this.handleKeyup(i),{signal:e}),this.target.addEventListener("focusin",()=>this.handleTargetFocusin(),{signal:e}),this.target.addEventListener("focusout",()=>this.handleTargetFocusout(),{signal:e}),this.target.addEventListener("pointerenter",()=>this.handleTargetPointerenter(),{signal:e}),this.target.addEventListener("pointerleave",()=>this.handleTargetPointerleave(),{signal:e}),this.overlay&&this.initOverlay()}initOverlay(){if(!this.abortController)return;const{signal:e}=this.abortController;this.overlay.addEventListener("pointerenter",()=>this.handleHostPointerenter(),{signal:e}),this.overlay.addEventListener("pointerleave",()=>this.handleHostPointerleave(),{signal:e})}removeSafariFocusRingClass(){k.isWebKit()&&this.target.classList.contains(z)&&this.target.classList.remove(z)}}const Oe=300,ie={touch:"Double tap and long press for additional options",keyboard:"Press Space or Alt+Down Arrow for additional options",mouse:"Click and hold for additional options"};class se extends I{constructor(){super(...arguments),this.type=T.longpress,this.longpressState=null,this.releaseDescription=E,this.handlePointerup=()=>{var e;clearTimeout(this.timeout),this.target&&(this.longpressState=((e=this.overlay)==null?void 0:e.state)==="opening"?"pressed":null,document.removeEventListener("pointerup",this.handlePointerup),document.removeEventListener("pointercancel",this.handlePointerup))}}get activelyOpening(){return this.longpressState==="opening"||this.longpressState==="pressed"}handleLongpress(){this.open=!0,this.longpressState=this.longpressState==="potential"?"opening":"pressed"}handlePointerdown(e){!this.target||e.button!==0||(this.longpressState="potential",document.addEventListener("pointerup",this.handlePointerup),document.addEventListener("pointercancel",this.handlePointerup),"holdAffordance"in this.target)||(this.timeout=setTimeout(()=>{this.target&&this.target.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},Oe))}handleKeydown(e){const{code:t,altKey:i}=e;i&&t==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation())}handleKeyup(e){const{code:t,altKey:i}=e;if(t==="Space"||i&&t==="ArrowDown"){if(!this.target)return;e.stopPropagation(),this.target.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),setTimeout(()=>{this.longpressState=null})}}prepareDescription(e){if(this.releaseDescription!==E||this.overlay.elements.length===0)return;const t=document.createElement("div");t.id=`longpress-describedby-descriptor-${M.randomID()}`;const i=k.isIOS()||k.isAndroid()?"touch":"keyboard";t.textContent=ie[i],t.slot="longpress-describedby-descriptor";const s=e.getRootNode(),n=this.overlay.getRootNode();s===n?this.overlay.append(t):(t.hidden=!("host"in s),e.after(t));const r=H.conditionAttributeWithId(e,"aria-describedby",[t.id]);this.releaseDescription=()=>{r(),t.remove(),this.releaseDescription=E}}shouldCompleteOpen(){this.longpressState=this.longpressState==="pressed"?null:this.longpressState}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("longpress",()=>this.handleLongpress(),{signal:e}),this.target.addEventListener("pointerdown",i=>this.handlePointerdown(i),{signal:e}),this.prepareDescription(this.target),!this.target.holdAffordance&&(this.target.addEventListener("keydown",i=>this.handleKeydown(i),{signal:e}),this.target.addEventListener("keyup",i=>this.handleKeyup(i),{signal:e}))}}const oe={click:ee,longpress:se,hover:te};var De=Object.defineProperty,xe=Object.getOwnPropertyDescriptor,m=(a,e,t,i)=>{for(var s=i>1?void 0:i?xe(e,t):e,n=a.length-1,r;n>=0;n--)(r=a[n])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&De(e,t,s),s};const Se=typeof document<"u"&&"showPopover"in document.createElement("div");let F=me(C);F=Se?ve(F):ge(F);var w;const d=(w=class extends F{constructor(){super(...arguments),this._delayed=!1,this._disabled=!1,this.offset=0,this._open=!1,this.lastRequestSlottableState=!1,this.receivesFocus="auto",this._state="closed",this.triggerElement=null,this.type="auto",this.wasOpen=!1,this.closeOnFocusOut=e=>{if(!e.relatedTarget)return;const t=new Event("overlay-relation-query",{bubbles:!0,composed:!0});e.relatedTarget.addEventListener(t.type,i=>{i.composedPath().includes(this)||(this.open=!1)}),e.relatedTarget.dispatchEvent(t)}}get delayed(){var e;return((e=this.elements.at(-1))==null?void 0:e.hasAttribute("delayed"))||this._delayed}set delayed(e){this._delayed=e}get disabled(){return this._disabled}set disabled(e){var t;this._disabled=e,e?((t=this.strategy)==null||t.abort(),this.wasOpen=this.open,this.open=!1):(this.bindEvents(),this.open=this.open||this.wasOpen,this.wasOpen=!1)}get hasNonVirtualTrigger(){return!!this.triggerElement&&!(this.triggerElement instanceof S)}get placementController(){return this._placementController||(this._placementController=new Z(this)),this._placementController}get open(){return this._open}set open(e){var t;e&&this.disabled||e!==this.open&&((t=this.strategy)!=null&&t.activelyOpening&&!e||(this._open=e,this.open&&(w.openCount+=1),this.requestUpdate("open",!this.open),this.open&&this.requestSlottable()))}get state(){return this._state}set state(e){var i;if(e===this.state)return;const t=this.state;this._state=e,(this.state==="opened"||this.state==="closed")&&((i=this.strategy)==null||i.shouldCompleteOpen()),this.requestUpdate("state",t)}get elementResolver(){return this._elementResolver||(this._elementResolver=new Y.ElementResolutionController(this)),this._elementResolver}get usesDialog(){return this.type==="modal"||this.type==="page"}get popoverValue(){if("popover"in this)switch(this.type){case"modal":case"page":return;case"hint":return"manual";default:return this.type}}get requiresPositioning(){return!(this.type==="page"||!this.open||!this.triggerElement||!this.placement&&this.type!=="hint")}managePosition(){if(!this.requiresPositioning||!this.open)return;const e=this.offset||0,t=this.triggerElement,i=this.placement||"right",s=this.tipPadding;this.placementController.placeOverlay(this.dialogEl,{offset:e,placement:i,tipPadding:s,trigger:t,type:this.type})}async managePopoverOpen(){super.managePopoverOpen();const e=this.open;if(this.open!==e||(await this.manageDelay(e),this.open!==e)||(this.triggerInteraction==="longpress"&&await f(),await this.ensureOnDOM(e),this.open!==e))return;const t=await this.makeTransition(e);this.open===e&&await this.applyFocus(e,t)}async applyFocus(e,t){if(!(this.receivesFocus==="false"||this.type==="hint")){if(await f(),await f(),e===this.open&&!this.open){this.hasNonVirtualTrigger&&this.contains(this.getRootNode().activeElement)&&this.triggerElement.focus();return}t==null||t.focus()}}returnFocus(){var t;if(this.open||this.type==="hint")return;const e=()=>{var n,r;const i=[];let s=typeof document<"u"?document.activeElement:null;for(;(n=s==null?void 0:s.shadowRoot)!=null&&n.activeElement;)s=s.shadowRoot.activeElement;for(;s;){const o=s.assignedSlot||s.parentElement||((r=s.getRootNode())==null?void 0:r.host);o&&i.push(o),s=o}return i};this.receivesFocus!=="false"&&((t=this.triggerElement)!=null&&t.focus)&&(this.contains(this.getRootNode().activeElement)||e().includes(this)||typeof document<"u"&&document.activeElement===document.body)&&this.triggerElement.focus()}async manageOpen(e){if(!(!this.isConnected&&this.open)&&(this.hasUpdated||await this.updateComplete,this.open?(X.add(this),this.willPreventClose&&(document.addEventListener("pointerup",()=>{this.dialogEl.classList.toggle("not-immediately-closable",!1),this.willPreventClose=!1},{once:!0}),this.dialogEl.classList.toggle("not-immediately-closable",!0))):(e&&this.dispose(),X.remove(this)),this.open&&this.state!=="opened"?this.state="opening":!this.open&&this.state!=="closed"&&(this.state="closing"),this.usesDialog?this.manageDialogOpen():this.managePopoverOpen(),this.type==="auto")){const t=this.getRootNode();this.open?t.addEventListener("focusout",this.closeOnFocusOut,{capture:!0}):t.removeEventListener("focusout",this.closeOnFocusOut,{capture:!0})}}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.strategy=void 0,this.hasNonVirtualTrigger&&this.triggerInteraction&&(this.strategy=new oe[this.triggerInteraction](this.triggerElement,{overlay:this}))}handleBeforetoggle(e){e.newState!=="open"&&this.handleBrowserClose(e)}handleBrowserClose(e){var t;if(e.stopPropagation(),!((t=this.strategy)!=null&&t.activelyOpening)){this.open=!1;return}this.manuallyKeepOpen()}manuallyKeepOpen(){this.open=!0,this.placementController.allowPlacementUpdate=!0,this.manageOpen(!1)}handleSlotchange(){var e,t;this.elements.length===0?(e=this.strategy)==null||e.releaseDescription():this.hasNonVirtualTrigger&&((t=this.strategy)==null||t.prepareDescription(this.triggerElement))}shouldPreventClose(){const e=this.willPreventClose;return this.willPreventClose=!1,e}requestSlottable(){this.lastRequestSlottableState!==this.open&&(this.open||document.body.offsetHeight,this.dispatchEvent(new J.SlottableRequestEvent("overlay-content",this.open?{}:J.removeSlottableRequest)),this.lastRequestSlottableState=this.open)}willUpdate(e){var i;if(this.hasAttribute("id")||this.setAttribute("id",`${this.tagName.toLowerCase()}-${M.randomID()}`),e.has("open")&&(this.hasUpdated||this.open)&&this.manageOpen(e.get("open")),e.has("trigger")){const[s,n]=((i=this.trigger)==null?void 0:i.split("@"))||[];this.elementResolver.selector=s?`#${s}`:"",this.triggerInteraction=n}let t=!1;e.has(Y.elementResolverUpdatedSymbol)&&(t=this.triggerElement,this.triggerElement=this.elementResolver.element),e.has("triggerElement")&&(t=e.get("triggerElement")),t!==!1&&this.bindEvents()}updated(e){super.updated(e),e.has("placement")&&(this.placement?this.dialogEl.setAttribute("actual-placement",this.placement):this.dialogEl.removeAttribute("actual-placement"),this.open&&e.get("placement")!==void 0&&this.placementController.resetOverlayPosition()),e.has("state")&&this.state==="closed"&&e.get("state")!==void 0&&this.placementController.clearOverlayPosition()}renderContent(){return O.html` <slot @slotchange=${this.handleSlotchange}></slot> `}get dialogStyleMap(){return{"--luzmo-overlay-open-count":w.openCount.toString()}}renderDialog(){return O.html`
+      <dialog
+        class="dialog"
+        part="dialog"
+        placement=${$.ifDefined(this.requiresPositioning?this.placement||"right":void 0)}
+        style=${G.styleMap(this.dialogStyleMap)}
+        @close=${this.handleBrowserClose}
+        @cancel=${this.handleBrowserClose}
+        @beforetoggle=${this.handleBeforetoggle}
+        ?is-visible=${this.state!=="closed"}
+      >
+        ${this.renderContent()}
+      </dialog>
+    `}renderPopover(){return O.html`
+      <div
+        class="dialog"
+        part="dialog"
+        placement=${$.ifDefined(this.requiresPositioning?this.placement||"right":void 0)}
+        popover=${$.ifDefined(this.popoverValue)}
+        style=${G.styleMap(this.dialogStyleMap)}
+        @beforetoggle=${this.handleBeforetoggle}
+        @close=${this.handleBrowserClose}
+        ?is-visible=${this.state!=="closed"}
+      >
+        ${this.renderContent()}
+      </div>
+    `}render(){const e=this.type==="modal"||this.type==="page";return O.html`
+      ${e?this.renderDialog():this.renderPopover()}
+      <slot name="longpress-describedby-descriptor"></slot>
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("close",()=>{this.open=!1}),this.hasUpdated&&this.bindEvents()}disconnectedCallback(){var e;(e=this.strategy)==null||e.releaseDescription(),this.open=!1,super.disconnectedCallback()}},w.styles=[O.unsafeCSS(we)],w.openCount=1,w);m([u.property({type:Boolean})],d.prototype,"delayed",1);m([u.query(".dialog")],d.prototype,"dialogEl",2);m([u.property({type:Boolean})],d.prototype,"disabled",1);m([u.queryAssignedElements({flatten:!0,selector:':not([slot="longpress-describedby-descriptor"], slot)'})],d.prototype,"elements",2);m([u.property({type:Number})],d.prototype,"offset",2);m([u.property({type:Boolean,reflect:!0})],d.prototype,"open",1);m([u.property()],d.prototype,"placement",2);m([u.property({attribute:"receives-focus"})],d.prototype,"receivesFocus",2);m([u.query("slot")],d.prototype,"slotEl",2);m([u.state()],d.prototype,"state",1);m([u.property({type:Number,attribute:"tip-padding"})],d.prototype,"tipPadding",2);m([u.property()],d.prototype,"trigger",2);m([u.property({attribute:!1})],d.prototype,"triggerElement",2);m([u.property({attribute:!1})],d.prototype,"triggerInteraction",2);m([u.property()],d.prototype,"type",2);let ne=d;const N=Object.freeze(Object.defineProperty({__proto__:null,LuzmoOverlay:ne},Symbol.toStringTag,{value:"Module"}));exports.ClickController=ee;exports.HoverController=te;exports.InteractionController=I;exports.InteractionTypes=T;exports.LONGPRESS_INSTRUCTIONS=ie;exports.LongpressController=se;exports.LuzmoAbstractOverlay=C;exports.LuzmoOverlay=ne;exports.PlacementController=Z;exports.SAFARI_FOCUS_RING_CLASS=z;exports.VirtualTrigger=S;exports.guaranteedAllTransitionend=q;exports.lastInteractionType=_;exports.nextFrame=f;exports.noop=E;exports.overlay=N;exports.overlayTimer=D;exports.placementUpdatedSymbol=Ce;exports.strategies=oe;

package/components/{pending-state-CaH1si5b.cjs → pending-state-DQctFHI8.cjs}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";const s=require("./base-CBCg3yyw.cjs");require("./progress-circle-BvRJNuNo.cjs");class r{constructor(e){this.cachedAriaLabel=null,this.host=e,this.host.addController(this)}renderPendingState(){const e=this.host.pendingLabel||"Pending";return this.host.pending?s.x`
+"use strict";const s=require("lit");require("./progress-circle-DgMbqrzG.cjs");class r{constructor(e){this.cachedAriaLabel=null,this.host=e,this.host.addController(this)}renderPendingState(){const e=this.host.pendingLabel||"Pending";return this.host.pending?s.html`
           <luzmo-progress-circle
             id="loader"
             size="s"
@@ -23,4 +23,4 @@
             aria-valuetext=${e}
             class="progress-circle"
           ></luzmo-progress-circle>
-        `:s.x``}updateAriaLabel(){const{pending:e,disabled:t,pendingLabel:i}=this.host,a=this.host.getAttribute("aria-label");e&&!t&&a!==i?(this.cachedAriaLabel=a,this.host.setAttribute("aria-label",i||"Pending")):(!e||t)&&(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()}}exports.PendingStateController=r;
+        `:s.html``}updateAriaLabel(){const{pending:e,disabled:t,pendingLabel:i}=this.host,a=this.host.getAttribute("aria-label");e&&!t&&a!==i?(this.cachedAriaLabel=a,this.host.setAttribute("aria-label",i||"Pending")):(!e||t)&&(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()}}exports.PendingStateController=r;

package/components/{pending-state-DTX7ggyF.js → pending-state-Dx1u3EXA.js}

@@ -15,8 +15,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { x as s } from "./base-WsynuqaS.js";
-import "./progress-circle-DXH9z8-6.js";
+import { html as s } from "lit";
+import "./progress-circle-D5J0ZwY0.js";
 class o {
   /**
    * Creates an instance of PendingStateController.

package/components/picker/index.cjs

@@ -15,4 +15,4 @@
  * 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 e=require("../picker-DWsBWdPN.cjs");customElements.get("luzmo-picker")||customElements.define("luzmo-picker",e.LuzmoPicker);exports.DESCRIPTION_ID=e.DESCRIPTION_ID;exports.LuzmoPicker=e.LuzmoPicker;exports.LuzmoPickerBase=e.LuzmoPickerBase;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../picker-DxYgh4LR.cjs");customElements.get("luzmo-picker")||customElements.define("luzmo-picker",e.LuzmoPicker);exports.DESCRIPTION_ID=e.DESCRIPTION_ID;exports.LuzmoPicker=e.LuzmoPicker;exports.LuzmoPickerBase=e.LuzmoPickerBase;

package/components/picker/index.js

@@ -15,8 +15,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as r } from "../picker-BmoXv1jt.js";
-import { D as c, L as z } from "../picker-BmoXv1jt.js";
+import { a as r } from "../picker-Cm6_didQ.js";
+import { D as c, L as z } from "../picker-Cm6_didQ.js";
 const l = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");

package/components/{picker-BmoXv1jt.js → picker-Cm6_didQ.js}

@@ -15,29 +15,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { x as n, E as d, B as g, r as f, n as l } from "./base-WsynuqaS.js";
-import { r as h } from "./state-Deh-vKYE.js";
-import { e as v } from "./query-D_KR_GUc.js";
-import { e as z } from "./class-map-NbVXqBU0.js";
-import { o as u } from "./if-defined-DOaE2coe.js";
-import { o as y } from "./style-map-IgqIKvlE.js";
-import { F as w } from "./focusable-BxtpnzWp.js";
-import { D as x } from "./dependency-manger-CEXvGQUV.js";
-import { M as I, I as $, s as k } from "./strategies-9indNIEb.js";
-import { P as S } from "./pending-state-DTX7ggyF.js";
-import { S as M } from "./sized-mixin-D4ACoVUr.js";
-import { O as b, T as C, I as q } from "./luzmo-icons-DbwDQtuO.js";
+import { html as n, nothing as d, render as m, unsafeCSS as g } from "lit";
+import { state as h, query as v, property as l } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { styleMap as z } from "lit/directives/style-map.js";
+import { F as y } from "./focusable-BjvsvVam.js";
+import { D as w } from "./dependency-manger-CO-VPlqq.js";
+import { M as x, I, s as S } from "./strategies-Bk97oVn1.js";
+import { P as $ } from "./pending-state-Dx1u3EXA.js";
+import { S as M } from "./sized-mixin-cJbo3PKR.js";
+import { luzmoIcon as b, luzmoAngleDown as C, luzmoAlert as q } from "@luzmo/icons";
 import "./menu/index.js";
 import "./overlay/index.js";
 import "./progress-circle/index.js";
 import "./tooltip/index.js";
 const E = '#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: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-width, var(--picker-focus-indicator-width));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-width, var(--picker-focus-indicator-width)) + 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-width, var(--picker-focus-indicator-width)) + 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: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:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color, var(--luzmo-picker-focus-indicator-color, var(--picker-focus-indicator-color)))}#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: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: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:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent)}:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--luzmo-picker-focus-indicator-width, var(--picker-focus-indicator-width)) 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-width: 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 B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, i = (s, e, o, r) => {
-  for (var c = r > 1 ? void 0 : r ? D(e, o) : e, a = s.length - 1, p; a >= 0; a--)
-    (p = s[a]) && (c = (r ? p(e, o, c) : p(c)) || c);
-  return r && c && B(e, o, c), c;
+var D = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (s, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? A(e, o) : e, c = s.length - 1, p; c >= 0; c--)
+    (p = s[c]) && (a = (r ? p(e, o, a) : p(a)) || a);
+  return r && a && D(e, o, a), a;
 };
-const A = () => n`
+const B = () => n`
   <div class="disclosure-icon icon">
     ${b(C, { className: "indicator" })}
   </div>
@@ -45,8 +44,8 @@ const A = () => n`
   <div class="icon-container validation-icon icon">
     ${b(q)}
   </div>
-`, m = "option-picker";
-class t extends M(w, {
+`, k = "option-picker";
+class t extends M(y, {
   noDefaultSize: !0
 }) {
   /**
@@ -54,12 +53,12 @@ class t extends M(w, {
    * 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 x(this), this.isMobile = new I(this, $), 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) => {
+    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 w(this), this.isMobile = new x(this, I), 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 = () => A(), this.renderAlertIcon = () => F(), this.handleEnterKeydown = (e) => {
+    }, this.renderAngleIcon = () => B(), this.renderAlertIcon = () => F(), this.handleEnterKeydown = (e) => {
       if (e.code === "Enter") {
         if (this.enterKeydownOn) {
           e.preventDefault();
@@ -73,7 +72,7 @@ class t extends M(w, {
           { once: !0 }
         );
       }
-    }, this.pendingStateController = new S(this);
+    }, this.pendingStateController = new $(this);
   }
   get selectedItem() {
     return this._selectedItem;
@@ -128,8 +127,8 @@ class t extends M(w, {
     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 k.mobile(this.button, this) : new k.desktop(this.button, this);
+    var e, o;
+    (e = this.strategy) == null || e.abort(), this.strategy = new S.desktop(this.button, this), (o = this.strategy) != null && o.overlay && (this.strategy.overlay.type = "auto", this.strategy.overlay.placement = this.placement);
   }
   connectedCallback() {
     super.connectedCallback(), this.recentlyConnected = this.hasUpdated;
@@ -140,7 +139,7 @@ class t extends M(w, {
   }
   async setValueFromItem(e, o) {
     this.open = !1, this.strategy && (this.strategy.open = !1);
-    const r = this.selectedItem, c = this.value;
+    const r = this.selectedItem, a = this.value;
     if (this.selectedItem = e, this.value = (e == null ? void 0 : e.value) ?? "", await this.updateComplete, !this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: !0,
@@ -150,10 +149,10 @@ class t extends M(w, {
         detail: this.value
       })
     ) && this.selects) {
-      o && o.preventDefault(), this.setMenuItemSelected(this.selectedItem, !1), r && this.setMenuItemSelected(r, !0), this.selectedItem = r, this.value = c, this.open = !0, this.strategy && (this.strategy.open = !0);
+      o && o.preventDefault(), this.setMenuItemSelected(this.selectedItem, !1), r && this.setMenuItemSelected(r, !0), this.selectedItem = r, this.value = a, this.open = !0, this.strategy && (this.strategy.open = !0);
       return;
     } else if (!this.selects) {
-      this.selectedItem = r, this.value = c;
+      this.selectedItem = r, this.value = a;
       return;
     }
     r && this.setMenuItemSelected(r, !1), this.setMenuItemSelected(e, !!this.selects);
@@ -197,7 +196,7 @@ class t extends M(w, {
         ${this._selectedItemIcon ? r : d}
         <div
           id=${u(this.value && this.selectedItem ? "label" : void 0)}
-          class=${z(e)}
+          class=${f(e)}
         >
           ${this.renderLabelContent(this.selectedItemContent.content)}
         </div>
@@ -224,17 +223,17 @@ class t extends M(w, {
     ];
   }
   renderOverlay(e) {
-    var r, c, a;
+    var r, a, c;
     if (((r = this.strategy) == null ? void 0 : r.overlay) === void 0)
       return e;
     const o = this.renderContainer(e);
-    return g(o, (c = this.strategy) == null ? void 0 : c.overlay, {
+    return m(o, (a = this.strategy) == null ? void 0 : a.overlay, {
       host: this
-    }), (a = this.strategy) == null ? void 0 : a.overlay;
+    }), (c = this.strategy) == null ? void 0 : c.overlay;
   }
   get renderDescriptionSlot() {
     return n`
-      <div id=${m}>
+      <div id=${k}>
         <slot name="description"></slot>
       </div>
     `;
@@ -247,7 +246,7 @@ class t extends M(w, {
         id="focus-helper"
         tabindex=${this.focused || this.open ? "-1" : "0"}
         @focus=${this.handleHelperFocus}
-        aria-describedby=${m}
+        aria-describedby=${k}
       ></span>
       <button
         aria-controls=${u(this.open ? "menu" : void 0)}
@@ -280,7 +279,8 @@ class t extends M(w, {
     this.button.addEventListener("keydown", this.handleKeydown);
   }
   updated(e) {
-    super.updated(e), e.has("open") && (this.strategy.open = this.open);
+    var o;
+    super.updated(e), e.has("open") && (this.strategy.open = this.open), (o = this.strategy) != null && o.overlay && this.strategy.overlay.type !== "auto" && (this.strategy.overlay.type = "auto", this.strategy.overlay.placement = this.placement);
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.bindButtonKeydownListener(), this.bindEvents();
@@ -305,7 +305,7 @@ class t extends M(w, {
         id="popover"
         size=${this.size}
         role="presentation"
-        style=${y(this.containerStyles)}
+        style=${z(this.containerStyles)}
         placement=${this.placement}
       >
         ${o}
@@ -428,7 +428,7 @@ i([
 i([
   h()
 ], t.prototype, "selectedItemContent", 1);
-class X extends t {
+class Q extends t {
   constructor() {
     super(...arguments), this.handleKeydown = (e) => {
       const { code: o } = e;
@@ -439,15 +439,15 @@ class X extends t {
         return;
       }
       e.preventDefault();
-      const r = this.selectedItem ? this.menuItems.indexOf(this.selectedItem) : -1, c = r < 0 || o === "ArrowRight" ? 1 : -1;
-      let a = r + c;
-      for (; this.menuItems[a] && this.menuItems[a].disabled; )
-        a += c;
-      !this.menuItems[a] || this.menuItems[a].disabled || (!this.value || a !== r) && this.setValueFromItem(this.menuItems[a]);
+      const r = this.selectedItem ? this.menuItems.indexOf(this.selectedItem) : -1, a = r < 0 || o === "ArrowRight" ? 1 : -1;
+      let c = r + a;
+      for (; this.menuItems[c] && this.menuItems[c].disabled; )
+        c += a;
+      !this.menuItems[c] || this.menuItems[c].disabled || (!this.value || c !== r) && this.setValueFromItem(this.menuItems[c]);
     };
   }
   static get styles() {
-    return [f(E)];
+    return [g(E)];
   }
   get containerStyles() {
     const e = super.containerStyles;
@@ -455,7 +455,7 @@ class X extends t {
   }
 }
 export {
-  m as D,
+  k as D,
   t as L,
-  X as a
+  Q as a
 };