@luzmo/lucero 0.0.38 → 0.0.40

package/components/action-menu/index.cjs

@@ -15,7 +15,7 @@
  * 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 h=require("../luzmo-icons-DletXGWU.cjs"),o=require("../base-CBCg3yyw.cjs"),b=require("../state-D8JEtYqe.cjs"),u=require("../if-defined-C9YGdo33.cjs"),m=require("../observe-slot-presence-bc9chhsi.cjs"),p=require("../observe-slot-text-Ceb7SvYT.cjs"),v=require("../slottable-request-event-BfUUt1Mh.cjs"),d=require("../picker-0tQg3Aob.cjs");require("../action-button/index.cjs");require("../icon/index.cjs");require("../overlay/index.cjs");require("../popover/index.cjs");const y=":host{display:inline-flex}:host([quiet]){min-width:0}:host>luzmo-menu{display:none}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none}:host([dir=ltr]) ::slotted([slot=icon]),:host([dir=ltr]) .icon{margin-left:calc(-1 * (var(--luzmo-action-button-textonly-padding-left-adjusted) - var(--luzmo-action-button-padding-left-adjusted)))}:host([dir=rtl]) ::slotted([slot=icon]),:host([dir=rtl]) .icon{margin-right:calc(-1 * (var(--luzmo-action-button-textonly-padding-left-adjusted) - var(--luzmo-action-button-padding-left-adjusted)))}:host([dir]) slot[icon-only]::slotted([slot=icon]),:host([dir]) slot[icon-only] .icon{margin-inline:calc((var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only))) * -1)}luzmo-overlay:not(:defined){display:none}";var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,c=(l,t,s,i)=>{for(var e=i>1?void 0:i?g(t,s):t,r=l.length-1,a;r>=0;r--)(a=l[r])&&(e=(i?a(t,s,e):a(e))||e);return i&&e&&f(t,s,e),e};class n extends m.ObserveSlotPresence(p.ObserveSlotText(d.LuzmoPickerBase,"label"),'[slot="label-only"]'){constructor(){super(...arguments),this.selects=void 0,this.listRole="menu",this.itemRole="menuitem",this.handleSlottableRequest=t=>{this.dispatchEvent(new v.SlottableRequestEvent(t.name,t.data))}}static get styles(){return[o.r(y)]}get hasLabel(){return this.slotHasContent}get labelOnly(){return this.slotContentIsPresent}get buttonContent(){return[o.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../luzmo-icons-DletXGWU.cjs"),o=require("../base-CBCg3yyw.cjs"),b=require("../state-D8JEtYqe.cjs"),u=require("../if-defined-C9YGdo33.cjs"),m=require("../observe-slot-presence-bc9chhsi.cjs"),p=require("../observe-slot-text-Ceb7SvYT.cjs"),v=require("../slottable-request-event-BfUUt1Mh.cjs"),d=require("../picker-DWsBWdPN.cjs");require("../action-button/index.cjs");require("../icon/index.cjs");require("../overlay/index.cjs");require("../popover/index.cjs");const y=":host{display:inline-flex}:host([quiet]){min-width:0}:host>luzmo-menu{display:none}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none}:host([dir=ltr]) ::slotted([slot=icon]),:host([dir=ltr]) .icon{margin-left:calc(-1 * (var(--luzmo-action-button-textonly-padding-left-adjusted) - var(--luzmo-action-button-padding-left-adjusted)))}:host([dir=rtl]) ::slotted([slot=icon]),:host([dir=rtl]) .icon{margin-right:calc(-1 * (var(--luzmo-action-button-textonly-padding-left-adjusted) - var(--luzmo-action-button-padding-left-adjusted)))}:host([dir]) slot[icon-only]::slotted([slot=icon]),:host([dir]) slot[icon-only] .icon{margin-inline:calc((var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only))) * -1)}luzmo-overlay:not(:defined){display:none}";var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,c=(l,t,s,i)=>{for(var e=i>1?void 0:i?g(t,s):t,r=l.length-1,a;r>=0;r--)(a=l[r])&&(e=(i?a(t,s,e):a(e))||e);return i&&e&&f(t,s,e),e};class n extends m.ObserveSlotPresence(p.ObserveSlotText(d.LuzmoPickerBase,"label"),'[slot="label-only"]'){constructor(){super(...arguments),this.selects=void 0,this.listRole="menu",this.itemRole="menuitem",this.handleSlottableRequest=t=>{this.dispatchEvent(new v.SlottableRequestEvent(t.name,t.data))}}static get styles(){return[o.r(y)]}get hasLabel(){return this.slotHasContent}get labelOnly(){return this.slotContentIsPresent}get buttonContent(){return[o.x`
         ${this.labelOnly?o.x``:o.x`
               <slot
                 name="icon"

package/components/action-menu/index.js

@@ -22,7 +22,7 @@ import { o as a } from "../if-defined-DOaE2coe.js";
 import { O as p } from "../observe-slot-presence-CmVi0zTc.js";
 import { O as f } from "../observe-slot-text-BPfIQQtz.js";
 import { S as g } from "../slottable-request-event-DggLA4Rx.js";
-import { L as x, D as v } from "../picker-daUT4cUN.js";
+import { L as x, D as v } from "../picker-BmoXv1jt.js";
 import "../action-button/index.js";
 import "../icon/index.js";
 import "../overlay/index.js";

package/components/button/index.cjs

@@ -15,6 +15,6 @@
  * 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"),s=require("../pending-state-CaH1si5b.cjs"),g=require("../sized-mixin-CPxE5C96.cjs"),v=require("../button-base-XgPLmwP-.cjs"),d=require("../clear-button-Qi1pMA5S.cjs"),i=require("../close-button-BFMBEw3q.cjs"),h=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;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, 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;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default: ButtonText;--highcontrast-button-content-color-default: ButtonFace;--highcontrast-button-content-color-hover: HighlightText;--highcontrast-button-content-color-down: HighlightText;--highcontrast-button-content-color-focus: HighlightText;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-background-color-hover: Highlight;--highcontrast-button-background-color-down: Highlight;--highcontrast-button-background-color-focus: Highlight;--highcontrast-button-border-color-default: ButtonText;--highcontrast-button-border-color-hover: Highlight;--highcontrast-button-border-color-focus: Highlight;--highcontrast-button-border-color-down: Highlight}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}';var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,a=(u,o,c,e)=>{for(var n=e>1?void 0:e?f(o,c):o,l=u.length-1,b;l>=0;l--)(b=u[l])&&(n=(e?b(o,c,n):b(n))||n);return e&&n&&m(o,c,n),n};const p=["primary","secondary","negative","white","black"];class r extends g.SizedMixin(v.LuzmoButtonBase,{noDefaultSize:!0}){constructor(){super(),this.pendingLabel="Pending",this.pending=!1,this._variant="primary",this.treatment="fill",this.noWrap=!1,this.pendingStateController=new s.PendingStateController(this)}static get styles(){return[...super.styles,t.r(h)]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(o){if(o!==this.variant){switch(this.requestUpdate("variant",this.variant),o){case"white":{this.staticColor=o,this.removeAttribute("variant");return}case"black":{this.staticColor=o,this.removeAttribute("variant");return}case null:return;default:{this._variant=p.includes(o)?o:"primary";break}}this.setAttribute("variant",this.variant)}}set quiet(o){this.treatment=o?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(o){super.firstUpdated(o),this.hasAttribute("variant")||this.setAttribute("variant",this.variant),this.pending&&this.pendingStateController.hostUpdated()}renderButton(){return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-CBCg3yyw.cjs"),s=require("../pending-state-CaH1si5b.cjs"),g=require("../sized-mixin-CPxE5C96.cjs"),v=require("../button-base-XgPLmwP-.cjs"),d=require("../clear-button-Qi1pMA5S.cjs"),i=require("../close-button-BFMBEw3q.cjs"),h=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;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, 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;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default: ButtonText;--highcontrast-button-content-color-default: ButtonFace;--highcontrast-button-content-color-hover: HighlightText;--highcontrast-button-content-color-down: HighlightText;--highcontrast-button-content-color-focus: HighlightText;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-background-color-hover: Highlight;--highcontrast-button-background-color-down: Highlight;--highcontrast-button-background-color-focus: Highlight;--highcontrast-button-border-color-default: ButtonText;--highcontrast-button-border-color-hover: Highlight;--highcontrast-button-border-color-focus: Highlight;--highcontrast-button-border-color-down: Highlight}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}:host(.remove-focus-ring-safari-hack:focus-visible):after{forced-color-adjust:none;box-shadow:none}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}:host(.remove-focus-ring-safari-hack:focus-visible):after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, var(--focus-indicator-gap))));box-shadow:none}:host(.remove-focus-ring-safari-hack:focus-visible){box-shadow:none;outline:none}:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)){background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)))}';var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,a=(u,o,c,e)=>{for(var n=e>1?void 0:e?f(o,c):o,l=u.length-1,b;l>=0;l--)(b=u[l])&&(n=(e?b(o,c,n):b(n))||n);return e&&n&&m(o,c,n),n};const p=["primary","secondary","negative","white","black"];class r extends g.SizedMixin(v.LuzmoButtonBase,{noDefaultSize:!0}){constructor(){super(),this.pendingLabel="Pending",this.pending=!1,this._variant="primary",this.treatment="fill",this.noWrap=!1,this.pendingStateController=new s.PendingStateController(this)}static get styles(){return[...super.styles,t.r(h)]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(o){if(o!==this.variant){switch(this.requestUpdate("variant",this.variant),o){case"white":{this.staticColor=o,this.removeAttribute("variant");return}case"black":{this.staticColor=o,this.removeAttribute("variant");return}case null:return;default:{this._variant=p.includes(o)?o:"primary";break}}this.setAttribute("variant",this.variant)}}set quiet(o){this.treatment=o?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(o){super.firstUpdated(o),this.hasAttribute("variant")||this.setAttribute("variant",this.variant),this.pending&&this.pendingStateController.hostUpdated()}renderButton(){return t.x`
       ${this.buttonContent} ${this.pendingStateController.renderPendingState()}
     `}}a([t.n({type:String,attribute:"pending-label"})],r.prototype,"pendingLabel",2);a([t.n({type:Boolean,reflect:!0,attribute:!0})],r.prototype,"pending",2);a([t.n()],r.prototype,"variant",1);a([t.n({reflect:!0,attribute:"static-color"})],r.prototype,"staticColor",2);a([t.n({reflect:!0})],r.prototype,"treatment",2);a([t.n({type:Boolean})],r.prototype,"quiet",1);a([t.n({type:Boolean,attribute:"no-wrap",reflect:!0})],r.prototype,"noWrap",2);customElements.get("luzmo-button")||customElements.define("luzmo-button",r);customElements.get("luzmo-clear-button")||customElements.define("luzmo-clear-button",d.LuzmoClearButton);customElements.get("luzmo-close-button")||customElements.define("luzmo-close-button",i.LuzmoCloseButton);exports.LuzmoClearButton=d.LuzmoClearButton;exports.LuzmoCloseButton=i.LuzmoCloseButton;exports.LuzmoButton=r;

package/components/button/index.js

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as i, x as s, n as e } from "../base-WsynuqaS.js";
+import { r as i, x as s, n as a } from "../base-WsynuqaS.js";
 import { P as g } from "../pending-state-DTX7ggyF.js";
 import { S as m } from "../sized-mixin-D4ACoVUr.js";
 import { L as v } from "../button-base-DbkDzb71.js";
@@ -28,8 +28,8 @@ const d = () => {
   }
 };
 d();
-const z = ':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;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, 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;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default: ButtonText;--highcontrast-button-content-color-default: ButtonFace;--highcontrast-button-content-color-hover: HighlightText;--highcontrast-button-content-color-down: HighlightText;--highcontrast-button-content-color-focus: HighlightText;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-background-color-hover: Highlight;--highcontrast-button-background-color-down: Highlight;--highcontrast-button-background-color-focus: Highlight;--highcontrast-button-border-color-default: ButtonText;--highcontrast-button-border-color-hover: Highlight;--highcontrast-button-border-color-focus: Highlight;--highcontrast-button-border-color-down: Highlight}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}';
-var p = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (r, o, l, u) => {
+const z = ':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;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, 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;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default: ButtonText;--highcontrast-button-content-color-default: ButtonFace;--highcontrast-button-content-color-hover: HighlightText;--highcontrast-button-content-color-down: HighlightText;--highcontrast-button-content-color-focus: HighlightText;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-background-color-hover: Highlight;--highcontrast-button-background-color-down: Highlight;--highcontrast-button-background-color-focus: Highlight;--highcontrast-button-border-color-default: ButtonText;--highcontrast-button-border-color-hover: Highlight;--highcontrast-button-border-color-focus: Highlight;--highcontrast-button-border-color-down: Highlight}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}:host(.remove-focus-ring-safari-hack:focus-visible):after{forced-color-adjust:none;box-shadow:none}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}:host(.remove-focus-ring-safari-hack:focus-visible):after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, var(--focus-indicator-gap))));box-shadow:none}:host(.remove-focus-ring-safari-hack:focus-visible){box-shadow:none;outline:none}:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)){background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)))}';
+var p = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (r, o, l, u) => {
   for (var n = u > 1 ? void 0 : u ? k(o, l) : o, c = r.length - 1, b; c >= 0; c--)
     (b = r[c]) && (n = (u ? b(o, l, n) : b(n)) || n);
   return u && n && p(o, l, n), n;
@@ -96,26 +96,26 @@ class t extends m(v, {
     `;
   }
 }
-a([
-  e({ type: String, attribute: "pending-label" })
+e([
+  a({ type: String, attribute: "pending-label" })
 ], t.prototype, "pendingLabel", 2);
-a([
-  e({ type: Boolean, reflect: !0, attribute: !0 })
+e([
+  a({ type: Boolean, reflect: !0, attribute: !0 })
 ], t.prototype, "pending", 2);
-a([
-  e()
+e([
+  a()
 ], t.prototype, "variant", 1);
-a([
-  e({ reflect: !0, attribute: "static-color" })
+e([
+  a({ reflect: !0, attribute: "static-color" })
 ], t.prototype, "staticColor", 2);
-a([
-  e({ reflect: !0 })
+e([
+  a({ reflect: !0 })
 ], t.prototype, "treatment", 2);
-a([
-  e({ type: Boolean })
+e([
+  a({ type: Boolean })
 ], t.prototype, "quiet", 1);
-a([
-  e({ type: Boolean, attribute: "no-wrap", reflect: !0 })
+e([
+  a({ type: Boolean, attribute: "no-wrap", reflect: !0 })
 ], t.prototype, "noWrap", 2);
 customElements.get("luzmo-button") || customElements.define("luzmo-button", t);
 customElements.get("luzmo-clear-button") || customElements.define("luzmo-clear-button", h);

package/components/color-area/color-area.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
 import './../color-handle';
 import { LuzmoElement } from '../../utils/base';
-import { ColorValue } from '../../utils/reactive-controllers/color';
+import { ColorTypes } from '../../utils/reactive-controllers/color-controller';
 /**
  * @element luzmo-color-area
  * @slot gradient - a custom gradient visually outlining the available color values
@@ -18,19 +18,45 @@ export declare class LuzmoColorArea extends LuzmoElement {
     isLTR: boolean;
     private handle;
     private languageResolver;
+    /**
+     * A controller for managing color interactions within the ColorArea component.
+     *
+     * The `ColorController` is instantiated with the `manageAs` option set to `hsv`
+     * because the ColorArea component is designed to manipulate the saturation (`s`)
+     * and value (`v`) components of the HSV color model along the x and y axes,
+     * respectively. In the HSV color model:
+     *
+     * - The `hue` (h) represents the color type and is typically controlled by a separate input.
+     * - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).
+     * - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).
+     *
+     * In the ColorArea component:
+     *
+     * - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.
+     * - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.
+     *Add commentMore actions
+     * By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value
+     * as the user interacts with the ColorArea component.
+     *
+     * @private
+     * @type {ColorController}
+     * @memberof ColorArea
+     *
+     * @property {ColorArea} this - The instance of the ColorArea component.
+     * @property {Object} options - Configuration options for the ColorController.
+     * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.
+     */
     private colorController;
     get hue(): number;
     set hue(value: number);
-    get value(): ColorValue;
-    get color(): ColorValue;
-    set color(color: ColorValue);
+    get value(): ColorTypes;
+    get color(): ColorTypes;
+    set color(color: ColorTypes);
     private activeAxis;
     get x(): number;
     set x(x: number);
-    private _x;
     get y(): number;
     set y(y: number);
-    private _y;
     step: number;
     inputX: HTMLInputElement;
     inputY: HTMLInputElement;
@@ -60,6 +86,18 @@ export declare class LuzmoColorArea extends LuzmoElement {
     private handleAreaPointerdown;
     protected render(): TemplateResult;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Overrides the `updated` method to handle changes in property values.
+     *
+     * @param changed - A map of changed properties with their previous values.
+     *
+     * This method performs the following actions:
+     * - Updates the saturation (`s`) of the color if `x` has changed.
+     * - Updates the value (`v`) of the color if `y` has changed.
+     * - If the `focused` property has changed and is now true, it lazily binds
+     * the `input[type="range"]` elements in shadow roots to prevent multiple
+     * tab stops within the Color Area for certain browser settings (e.g., Webkit).
+     */
     protected updated(changed: PropertyValues): void;
     private observer?;
     connectedCallback(): void;

package/components/color-area/index.cjs

@@ -15,11 +15,11 @@
  * 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 s=require("../base-CBCg3yyw.cjs"),f=require("../query-BL-TJj7K.cjs"),b=require("../if-defined-C9YGdo33.cjs");require("../color-handle/index.cjs");const m=require("../platform-BiXhwqk3.cjs"),g=require("../color-DphK4hwx.cjs"),y=require("../language-resolution-DJzmyzZq.cjs"),w=require("../streaming-listener-B00MvALi.cjs"),x="@media (forced-colors: active){:host{--highcontrast-color-area-border-color-disabled: GrayText;--highcontrast-color-area-border-color: Canvas;--highcontrast-color-area-fill-color-disabled: Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width, 64px);min-block-size:var(--luzmo-color-area-min-height, 64px);inline-size:var(--luzmo-color-area-width, 192px);block-size:var(--luzmo-color-area-height, 192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color, var(--luzmo-color-area-border-color, var(--luzmo-border-color)));display:inline-block;position:relative}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled, var(--luzmo-color-area-disabled-background-color, var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width, 192px) - var(--luzmo-border-width)));inset-block-start:0}.handle:dir(rtl),:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s))}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width))}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}";var C=Object.defineProperty,$=Object.getOwnPropertyDescriptor,a=(p,e,t,r)=>{for(var o=r>1?void 0:r?$(e,t):e,n=p.length-1,l;n>=0;n--)(l=p[n])&&(o=(r?l(e,t,o):l(o))||o);return r&&o&&C(e,t,o),o};class i extends s.LuzmoElement{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.labelX="saturation",this.labelY="luminosity",this.isLTR=!0,this.languageResolver=new y.LanguageResolutionController(this),this.colorController=new g.ColorController(this,{extractColorFromState:()=>({h:this.hue,s:this.x,v:this.y}),applyColorToState:({s:e,v:t})=>{this._x=e,this._y=t,this.requestUpdate()}}),this.activeAxis="x",this._x=1,this._y=1,this.step=.01,this.altered=0,this.activeKeys=new Set,this._valueChanged=!1,this._pointerDown=!1}static get styles(){return[s.r(x)]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.color}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get x(){return this._x}set x(e){if(e===this.x)return;const t=this.x;this._x=e,this.inputX&&(this.inputX.value=e.toString(),this._x=this.inputX.valueAsNumber),this.requestUpdate("x",t),this.colorController.applyColorFromState()}get y(){return this._y}set y(e){if(e===this.y)return;const t=this.y;this._y=e,this.inputY&&(this.inputY.value=e.toString(),this._y=this.inputY.valueAsNumber),this.requestUpdate("y",t),this.colorController.applyColorFromState()}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(o=>!!o).length,(t.search("Arrow")===0||t.search("Page")===0||t.search("Home")===0||t.search("End")===0)&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const r=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(o=>{switch(o){case"ArrowUp":{t=r;break}case"ArrowDown":{t=r*-1;break}case"ArrowLeft":{e=this.step*(this.isLTR?-1:1);break}case"ArrowRight":{e=this.step*(this.isLTR?1:-1);break}case"PageUp":{t=r*10;break}case"PageDown":{t=r*-10;break}case"Home":{e=r*(this.isLTR?-10:10);break}case"End":{e=r*(this.isLTR?10:-10);break}}}),e!==0?(this.activeAxis="x",this.inputX.focus()):t!==0&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),this.colorController.applyColorFromState(),(e!==0||t!==0)&&(this._valueChanged=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:r}=e.target;this[r]=t,this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const[t,r]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=1-r,this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),e.pointerType==="mouse"&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,r=t.left,o=t.top,n=e.clientX,l=e.clientY,h=t.width,d=t.height,u=Math.max(0,Math.min(1,(n-r)/h)),c=Math.max(0,Math.min(1,(l-o)/d));return[this.isLTR?u:1-u,c]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},r=m.isAndroid()||m.isIOS(),n="Color Picker",l=b.o(r?void 0:"2d slider"),h=this.labelX,d=this.labelY,u=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),c=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),v=`linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`;return s.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../base-CBCg3yyw.cjs"),f=require("../query-BL-TJj7K.cjs"),b=require("../if-defined-C9YGdo33.cjs");require("../color-handle/index.cjs");const v=require("../platform-BiXhwqk3.cjs"),g=require("../color-controller-_ZwyhvaU.cjs"),y=require("../language-resolution-DJzmyzZq.cjs"),w=require("../streaming-listener-B00MvALi.cjs"),C="@media (forced-colors: active){:host{--highcontrast-color-area-border-color-disabled: GrayText;--highcontrast-color-area-border-color: Canvas;--highcontrast-color-area-fill-color-disabled: Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width, 64px);min-block-size:var(--luzmo-color-area-min-height, 64px);inline-size:var(--luzmo-color-area-width, 192px);block-size:var(--luzmo-color-area-height, 192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color, var(--luzmo-color-area-border-color, var(--luzmo-border-color)));display:inline-block;position:relative}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled, var(--luzmo-color-area-disabled-background-color, var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width, 192px) - var(--luzmo-border-width)));inset-block-start:0}.handle:dir(rtl),:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s))}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width))}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}";var x=Object.defineProperty,$=Object.getOwnPropertyDescriptor,a=(p,e,t,r)=>{for(var o=r>1?void 0:r?$(e,t):e,n=p.length-1,l;n>=0;n--)(l=p[n])&&(o=(r?l(e,t,o):l(o))||o);return r&&o&&x(e,t,o),o};class i extends s.LuzmoElement{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.labelX="saturation",this.labelY="luminosity",this.isLTR=!0,this.languageResolver=new y.LanguageResolutionController(this),this.colorController=new g.ColorController(this,{manageAs:"hsv"}),this.activeAxis="x",this.step=.01,this.altered=0,this.activeKeys=new Set,this._valueChanged=!1,this._pointerDown=!1}static get styles(){return[s.r(C)]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.colorValue}get color(){return this.colorController.colorValue}set color(e){this.colorController.color=e}get x(){return this.colorController.color.hsv.s/100}set x(e){if(e===this.x)return;const t=this.x;this.inputX?(this.inputX.value=e.toString(),this.colorController.color.set("s",this.inputX.valueAsNumber*100)):this.colorController.color.set("s",e*100),this.requestUpdate("x",t)}get y(){return this.colorController.color.hsv.v/100}set y(e){if(e===this.y)return;const t=this.y;this.inputY&&(this.inputY.value=e.toString(),this.colorController.color.set("v",this.inputY.valueAsNumber*100)),this.requestUpdate("y",t)}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(o=>!!o).length,(t.search("Arrow")===0||t.search("Page")===0||t.search("Home")===0||t.search("End")===0)&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const r=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(o=>{switch(o){case"ArrowUp":{t=r;break}case"ArrowDown":{t=r*-1;break}case"ArrowLeft":{e=this.step*(this.isLTR?-1:1);break}case"ArrowRight":{e=this.step*(this.isLTR?1:-1);break}case"PageUp":{t=r*10;break}case"PageDown":{t=r*-10;break}case"Home":{e=r*(this.isLTR?-10:10);break}case"End":{e=r*(this.isLTR?10:-10);break}}}),e!==0?(this.activeAxis="x",this.inputX.focus()):t!==0&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),(e!==0||t!==0)&&(this._valueChanged=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:r}=e.target;this[r]=t}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const[t,r]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=r,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),e.pointerType==="mouse"&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,r=t.left,o=t.top,n=e.clientX,l=e.clientY,h=t.width,d=t.height,c=Math.max(0,Math.min(1,(n-r)/h)),u=Math.max(0,Math.min(1,(l-o)/d));return[this.isLTR?c:1-c,1-u]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},r=v.isAndroid()||v.isIOS(),n="Color Picker",l=b.o(r?void 0:"2d slider"),h=this.labelX,d=this.labelY,c=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),u=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),m={background:`linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`};return s.x`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
-        style="background: ${v}"
+        style="background: ${m.background}"
       >
         <slot name="gradient"></slot>
       </div>
@@ -47,7 +47,7 @@
             aria-label=${r?h:`${h} ${n}`}
             aria-roledescription=${l}
             aria-orientation="horizontal"
-            aria-valuetext=${r?u:`${u}, ${h}${this._valueChanged?"":`, ${c}, ${d}`}`}
+            aria-valuetext=${r?c:`${c}, ${h}${this._valueChanged?"":`, ${u}, ${d}`}`}
             min="0"
             max="1"
             step=${this.step}
@@ -65,7 +65,7 @@
             aria-label=${r?d:`${d} ${n}`}
             aria-roledescription=${l}
             aria-orientation="vertical"
-            aria-valuetext=${r?c:`${c}, ${d}${this._valueChanged?"":`, ${u}, ${h}`}`}
+            aria-valuetext=${r?u:`${u}, ${d}${this._valueChanged?"":`, ${c}, ${h}`}`}
             orient="vertical"
             min="0"
             max="1"
@@ -77,4 +77,4 @@
           />
         </div>
       </fieldset>
-    `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&(this._x=this.inputX.valueAsNumber),this.y!==this.inputY.valueAsNumber&&(this._y=this.inputY.valueAsNumber),e.has("focused")&&this.focused){const t=this.inputX.parentElement,r=this.inputY.parentElement;if(!t.shadowRoot&&!r.shadowRoot){t.attachShadow({mode:"open"}),r.attachShadow({mode:"open"});const o='<div tabindex="-1"><slot></slot></div>';t.shadowRoot.innerHTML=o,r.shadowRoot.innerHTML=o}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(t=>{for(const r of t)this.boundingClientRect=r.contentRect;this.requestUpdate()})),(e=this.observer)==null||e.observe(this)}disconnectedCallback(){var e;(e=this.observer)==null||e.unobserve(this),super.disconnectedCallback()}}a([s.n({type:String,reflect:!0})],i.prototype,"dir",2);a([s.n({type:Boolean,reflect:!0})],i.prototype,"disabled",2);a([s.n({type:Boolean,reflect:!0})],i.prototype,"focused",2);a([s.n({type:String,attribute:"label-x"})],i.prototype,"labelX",2);a([s.n({type:String,attribute:"label-y"})],i.prototype,"labelY",2);a([s.n({type:Boolean,attribute:"is-ltr"})],i.prototype,"isLTR",2);a([f.e(".handle")],i.prototype,"handle",2);a([s.n({type:Number})],i.prototype,"hue",1);a([s.n({type:String})],i.prototype,"value",1);a([s.n({type:String})],i.prototype,"color",1);a([s.n({attribute:!1})],i.prototype,"activeAxis",2);a([s.n({type:Number})],i.prototype,"x",1);a([s.n({type:Number})],i.prototype,"y",1);a([s.n({type:Number})],i.prototype,"step",2);a([f.e('[name="x"]')],i.prototype,"inputX",2);a([f.e('[name="y"]')],i.prototype,"inputY",2);customElements.get("luzmo-color-area")||customElements.define("luzmo-color-area",i);exports.LuzmoColorArea=i;
+    `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&this.colorController.color.set("s",this.inputX.valueAsNumber*100),this.y!==this.inputY.valueAsNumber&&this.colorController.color.set("v",(1-this.inputY.valueAsNumber)*100),e.has("focused")&&this.focused){const t=this.inputX.parentElement,r=this.inputY.parentElement;if(!t.shadowRoot&&!r.shadowRoot){t.attachShadow({mode:"open"}),r.attachShadow({mode:"open"});const o='<div tabindex="-1"><slot></slot></div>';t.shadowRoot.innerHTML=o,r.shadowRoot.innerHTML=o}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(t=>{for(const r of t)this.boundingClientRect=r.contentRect;this.requestUpdate()})),(e=this.observer)==null||e.observe(this)}disconnectedCallback(){var e;(e=this.observer)==null||e.unobserve(this),super.disconnectedCallback()}}a([s.n({type:String,reflect:!0})],i.prototype,"dir",2);a([s.n({type:Boolean,reflect:!0})],i.prototype,"disabled",2);a([s.n({type:Boolean,reflect:!0})],i.prototype,"focused",2);a([s.n({type:String,attribute:"label-x"})],i.prototype,"labelX",2);a([s.n({type:String,attribute:"label-y"})],i.prototype,"labelY",2);a([s.n({type:Boolean,attribute:"is-ltr"})],i.prototype,"isLTR",2);a([f.e(".handle")],i.prototype,"handle",2);a([s.n({type:Number})],i.prototype,"hue",1);a([s.n({type:String})],i.prototype,"value",1);a([s.n({type:String})],i.prototype,"color",1);a([s.n({attribute:!1})],i.prototype,"activeAxis",2);a([s.n({type:Number})],i.prototype,"x",1);a([s.n({type:Number})],i.prototype,"y",1);a([s.n({type:Number})],i.prototype,"step",2);a([f.e('[name="x"]')],i.prototype,"inputX",2);a([f.e('[name="y"]')],i.prototype,"inputY",2);customElements.get("luzmo-color-area")||customElements.define("luzmo-color-area",i);exports.LuzmoColorArea=i;