@luzmo/lucero 0.0.11 → 0.0.13

package/components/swatch/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 b=require("@luzmo/icons"),u=require("lit"),r=require("../base-DzbGOAPo.cjs"),g=require("../if-defined-Cv6xanXh.cjs"),p=require("../when-CDZyJPvd.cjs"),v=require("../focusable-zn6qaMtV.cjs"),f=require("../sized-mixin-BEemErtP.cjs"),m=require("../mutation-controller-DkOMCW-c.cjs"),z=require("../query-assigned-elements-DsKsfk7G.cjs"),x=require("../roving-tabindex-By_fCy_e.cjs"),y='@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-color-negative);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';var k=Object.defineProperty,S=Object.getOwnPropertyDescriptor,c=(h,e,t,o)=>{for(var s=o>1?void 0:o?S(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&k(e,t,s),s};class l extends f.SizedMixin(v.Focusable,{validSizes:["xxs","xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.color="",this.label="",this.mixedValue=!1,this.nothing=!1,this.role="button",this.selected=!1,this.readonly=!1,this.renderDisabled=()=>u.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@luzmo/icons"),r=require("../base-B7Pfl2if.cjs"),w=require("../if-defined-B56xGmAg.cjs"),b=require("../when-CDZyJPvd.cjs"),g=require("../focusable-DGWL1v1p.cjs"),p=require("../sized-mixin-D9LkrMjb.cjs"),v=require("../mutation-controller-DkOMCW-c.cjs"),m=require("../query-assigned-elements-DsKsfk7G.cjs"),z=require("../roving-tabindex-By_fCy_e.cjs"),x='@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-color-negative);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';var y=Object.defineProperty,k=Object.getOwnPropertyDescriptor,c=(h,e,t,o)=>{for(var s=o>1?void 0:o?k(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&y(e,t,s),s};class l extends p.SizedMixin(g.Focusable,{validSizes:["xxs","xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.color="",this.label="",this.mixedValue=!1,this.nothing=!1,this.role="button",this.selected=!1,this.readonly=!1,this.renderDisabled=()=>r.x`
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="disabled-icon"
@@ -32,18 +32,18 @@
         fill="var(--swatch-disabled-icon-stroke-color)"
       />
     </svg>
-  `,this.renderMixedValue=()=>b.luzmoIcon(b.luzmoDash)}static get styles(){return[u.unsafeCSS(y)]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}get focusElement(){return this}toggle(e){this.readonly||(this.selected=e??!this.selected)}handleClick(){if(this.disabled||this.mixedValue)return;this.toggle(),this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||this.toggle()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":{e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break}}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":{this.click();break}}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":{this.removeEventListener("keyup",this.handleKeyup),this.click();break}}}render(){return u.html`
+  `,this.renderMixedValue=()=>u.luzmoIcon(u.luzmoDash)}static get styles(){return[r.r(x)]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}get focusElement(){return this}toggle(e){this.readonly||(this.selected=e??!this.selected)}handleClick(){if(this.disabled||this.mixedValue)return;this.toggle(),this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||this.toggle()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":{e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break}}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":{this.click();break}}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":{this.removeEventListener("keyup",this.handleKeyup),this.click();break}}}render(){return r.x`
       <div
         class="opacity-checkerboard fill"
-        style=${g.o(this.color?`--picked-color: ${this.color}`:void 0)}
+        style=${w.o(this.color?`--picked-color: ${this.color}`:void 0)}
       >
         <slot name="image"></slot>
-        ${p.n(this.disabled,this.renderDisabled)}
-        ${p.n(this.mixedValue,this.renderMixedValue)}
+        ${b.n(this.disabled,this.renderDisabled)}
+        ${b.n(this.mixedValue,this.renderMixedValue)}
       </div>
-    `}willUpdate(e){var t;if(this.getAttribute("role")||this.setAttribute("role","button"),(e.has("selected")||e.has("role"))&&!this.readonly){const o=this.role==="button"?"aria-pressed":"aria-checked",s=this.role==="button"?"aria-checked":"aria-pressed";e.has("role")&&this.removeAttribute(s),this.setAttribute(o,this.selected?"true":"false")}(e.has("label")||e.has("color")||e.has("mixedValue"))&&(this.label!==this.color&&((t=this.label)!=null&&t.length)?this.setAttribute("aria-label",this.label):this.color?this.setAttribute("aria-label",this.color):this.mixedValue?this.setAttribute("aria-label","Mixed"):this.removeAttribute("aria-label"))}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}}c([r.n({reflect:!0})],l.prototype,"border",2);c([r.n()],l.prototype,"color",2);c([r.n()],l.prototype,"label",2);c([r.n({type:Boolean,reflect:!0,attribute:"mixed-value"})],l.prototype,"mixedValue",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"nothing",2);c([r.n({reflect:!0})],l.prototype,"role",2);c([r.n({reflect:!0})],l.prototype,"rounding",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"selected",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"readonly",2);c([r.n({reflect:!0})],l.prototype,"shape",2);c([r.n()],l.prototype,"value",1);const C=":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular, var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact, var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious, var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact: 2px;--swatch-group-spacing-regular: 4px;--swatch-group-spacing-spacious: 8px}";var A=Object.defineProperty,E=Object.getOwnPropertyDescriptor,d=(h,e,t,o)=>{for(var s=o>1?void 0:o?E(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&A(e,t,s),s};class n extends f.SizedMixin(r.LuzmoElement,{validSizes:["xs","s","m","l"],noDefaultSize:!0}){constructor(){super(),this._selected=[],this.selectedSet=new Set,this.rovingTabindexController=new x.RovingTabindexController(this,{focusInIndex:e=>{let t=-1;const o=e.findIndex((s,i)=>(!e[t]&&!s.disabled&&(t=i),s.selected&&!s.disabled));return e[o]?o:t},elements:()=>this.swatches,isFocusableElement:e=>!e.disabled}),this.manageChange=async()=>{const e=new Set;this.selectedSet=new Set(this.selected),await Promise.all(this.swatches.map(t=>t.updateComplete)),this.swatches.forEach(t=>{e.add(t.value),t.selected&&this.selectedSet.add(t.value)}),this.selectedSet.forEach(t=>{e.has(t)||this.selectedSet.delete(t)}),this._selected=[...this.selectedSet],this.rovingTabindexController.clearElementCache()},new m.s(this,{config:{attributes:!0,childList:!0,subtree:!0},callback:()=>{this.manageChange()}})}static get styles(){return[u.unsafeCSS(C)]}get selected(){return this._selected}set selected(e){if(e===this.selected)return;const t=this.selected;this._selected=e,this.requestUpdate("selected",t)}focus(e){this.rovingTabindexController.focus(e)}handleChange(e){e.stopPropagation();const t=this.selected;if(!this.selects){e.preventDefault();return}if(this.selects==="single"){const{target:s}=e;if(s.tabIndex=0,s.selected=!0,this.selectedSet.has(s.value))return;this.selectedSet.clear(),this.selectedSet.add(s.value),this.rovingTabindexController.elements.forEach(i=>{i!==s&&(i.selected=!1)})}else if(this.selects==="multiple"){const{target:s}=e;s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value)}this._selected=[...this.selectedSet],this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||(this._selected=t,e.preventDefault())}getPassthroughSwatchActions(e){const t={};e.has("selects")&&(this.selects||e.get("selects")!==void 0)&&(t.selects=this.selects),e.has("border")&&(this.border||e.get("border")!==void 0)&&(t.border=this.border),e.has("rounding")&&(this.rounding||e.get("rounding")!==void 0)&&(t.rounding=this.rounding),e.has("size")&&(this.size!=="m"||e.get("size")!==void 0)&&(t.size=this.size),e.has("shape")&&(this.shape||e.get("shape")!==void 0)&&(t.shape=this.shape);const o=[];return Object.keys(t).length>0&&o.push(s=>{"border"in t&&(s.border=t.border),"rounding"in t&&(s.rounding=t.rounding),"shape"in t&&(s.shape=t.shape),"size"in t&&(s.size=t.size)}),o}getSelectionSwatchActions(e){const t=[];if(!e.has("selects"))return t;this.selects?this.setAttribute("role",this.selects==="single"?"radiogroup":"group"):this.removeAttribute("role");const o={single:"radio",multiple:"checkbox"},s=this.selects?o[this.selects]:"button";return t.push(i=>{i.setAttribute("role",s)}),t}render(){return u.html`
+    `}willUpdate(e){var t;if(this.getAttribute("role")||this.setAttribute("role","button"),(e.has("selected")||e.has("role"))&&!this.readonly){const o=this.role==="button"?"aria-pressed":"aria-checked",s=this.role==="button"?"aria-checked":"aria-pressed";e.has("role")&&this.removeAttribute(s),this.setAttribute(o,this.selected?"true":"false")}(e.has("label")||e.has("color")||e.has("mixedValue"))&&(this.label!==this.color&&((t=this.label)!=null&&t.length)?this.setAttribute("aria-label",this.label):this.color?this.setAttribute("aria-label",this.color):this.mixedValue?this.setAttribute("aria-label","Mixed"):this.removeAttribute("aria-label"))}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}}c([r.n({reflect:!0})],l.prototype,"border",2);c([r.n()],l.prototype,"color",2);c([r.n()],l.prototype,"label",2);c([r.n({type:Boolean,reflect:!0,attribute:"mixed-value"})],l.prototype,"mixedValue",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"nothing",2);c([r.n({reflect:!0})],l.prototype,"role",2);c([r.n({reflect:!0})],l.prototype,"rounding",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"selected",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"readonly",2);c([r.n({reflect:!0})],l.prototype,"shape",2);c([r.n()],l.prototype,"value",1);const S=":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular, var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact, var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious, var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact: 2px;--swatch-group-spacing-regular: 4px;--swatch-group-spacing-spacious: 8px}";var C=Object.defineProperty,A=Object.getOwnPropertyDescriptor,d=(h,e,t,o)=>{for(var s=o>1?void 0:o?A(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&C(e,t,s),s};class n extends p.SizedMixin(r.LuzmoElement,{validSizes:["xs","s","m","l"],noDefaultSize:!0}){constructor(){super(),this._selected=[],this.selectedSet=new Set,this.rovingTabindexController=new z.RovingTabindexController(this,{focusInIndex:e=>{let t=-1;const o=e.findIndex((s,i)=>(!e[t]&&!s.disabled&&(t=i),s.selected&&!s.disabled));return e[o]?o:t},elements:()=>this.swatches,isFocusableElement:e=>!e.disabled}),this.manageChange=async()=>{const e=new Set;this.selectedSet=new Set(this.selected),await Promise.all(this.swatches.map(t=>t.updateComplete)),this.swatches.forEach(t=>{e.add(t.value),t.selected&&this.selectedSet.add(t.value)}),this.selectedSet.forEach(t=>{e.has(t)||this.selectedSet.delete(t)}),this._selected=[...this.selectedSet],this.rovingTabindexController.clearElementCache()},new v.s(this,{config:{attributes:!0,childList:!0,subtree:!0},callback:()=>{this.manageChange()}})}static get styles(){return[r.r(S)]}get selected(){return this._selected}set selected(e){if(e===this.selected)return;const t=this.selected;this._selected=e,this.requestUpdate("selected",t)}focus(e){this.rovingTabindexController.focus(e)}handleChange(e){e.stopPropagation();const t=this.selected;if(!this.selects){e.preventDefault();return}if(this.selects==="single"){const{target:s}=e;if(s.tabIndex=0,s.selected=!0,this.selectedSet.has(s.value))return;this.selectedSet.clear(),this.selectedSet.add(s.value),this.rovingTabindexController.elements.forEach(i=>{i!==s&&(i.selected=!1)})}else if(this.selects==="multiple"){const{target:s}=e;s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value)}this._selected=[...this.selectedSet],this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||(this._selected=t,e.preventDefault())}getPassthroughSwatchActions(e){const t={};e.has("selects")&&(this.selects||e.get("selects")!==void 0)&&(t.selects=this.selects),e.has("border")&&(this.border||e.get("border")!==void 0)&&(t.border=this.border),e.has("rounding")&&(this.rounding||e.get("rounding")!==void 0)&&(t.rounding=this.rounding),e.has("size")&&(this.size!=="m"||e.get("size")!==void 0)&&(t.size=this.size),e.has("shape")&&(this.shape||e.get("shape")!==void 0)&&(t.shape=this.shape);const o=[];return Object.keys(t).length>0&&o.push(s=>{"border"in t&&(s.border=t.border),"rounding"in t&&(s.rounding=t.rounding),"shape"in t&&(s.shape=t.shape),"size"in t&&(s.size=t.size)}),o}getSelectionSwatchActions(e){const t=[];if(!e.has("selects"))return t;this.selects?this.setAttribute("role",this.selects==="single"?"radiogroup":"group"):this.removeAttribute("role");const o={single:"radio",multiple:"checkbox"},s=this.selects?o[this.selects]:"button";return t.push(i=>{i.setAttribute("role",s)}),t}render(){return r.x`
       <slot
         @change=${this.handleChange}
         @slotchange=${this.manageChange}
       ></slot>
-    `}willUpdate(e){const t=[...this.getPassthroughSwatchActions(e),...this.getSelectionSwatchActions(e)];let o=new Set(this.selected);const s=new Set;e.has("selected")&&t.push(a=>{s.add(a.value),a.selected=!!(o.has(a.value)||!this.hasUpdated&&a.selected)});const i=()=>{o=new Set(this.selected),this.swatches.forEach(a=>{t.forEach(w=>{w(a)})}),e.has("selected")&&(this._selected=[...o.values()].filter(a=>s.has(a)))};this.hasUpdated?i():this.renderRoot.addEventListener("slotchange",()=>{requestAnimationFrame(i)},{once:!0})}}d([r.n({reflect:!0})],n.prototype,"border",2);d([r.n({reflect:!0})],n.prototype,"density",2);d([r.n({reflect:!0})],n.prototype,"rounding",2);d([r.n({type:Array})],n.prototype,"selected",1);d([r.n()],n.prototype,"selects",2);d([r.n({reflect:!0})],n.prototype,"shape",2);d([z.o({flatten:!0})],n.prototype,"swatches",2);customElements.get("luzmo-swatch")||customElements.define("luzmo-swatch",l);customElements.get("luzmo-swatch-group")||customElements.define("luzmo-swatch-group",n);exports.LuzmoSwatch=l;exports.LuzmoSwatchGroup=n;
+    `}willUpdate(e){const t=[...this.getPassthroughSwatchActions(e),...this.getSelectionSwatchActions(e)];let o=new Set(this.selected);const s=new Set;e.has("selected")&&t.push(a=>{s.add(a.value),a.selected=!!(o.has(a.value)||!this.hasUpdated&&a.selected)});const i=()=>{o=new Set(this.selected),this.swatches.forEach(a=>{t.forEach(f=>{f(a)})}),e.has("selected")&&(this._selected=[...o.values()].filter(a=>s.has(a)))};this.hasUpdated?i():this.renderRoot.addEventListener("slotchange",()=>{requestAnimationFrame(i)},{once:!0})}}d([r.n({reflect:!0})],n.prototype,"border",2);d([r.n({reflect:!0})],n.prototype,"density",2);d([r.n({reflect:!0})],n.prototype,"rounding",2);d([r.n({type:Array})],n.prototype,"selected",1);d([r.n()],n.prototype,"selects",2);d([r.n({reflect:!0})],n.prototype,"shape",2);d([m.o({flatten:!0})],n.prototype,"swatches",2);customElements.get("luzmo-swatch")||customElements.define("luzmo-swatch",l);customElements.get("luzmo-swatch-group")||customElements.define("luzmo-swatch-group",n);exports.LuzmoSwatch=l;exports.LuzmoSwatchGroup=n;

package/components/swatch/index.js

@@ -16,12 +16,11 @@
  * SOFTWARE.
  * */
 import { luzmoIcon as z, luzmoDash as v } from "@luzmo/icons";
-import { html as u, unsafeCSS as m } from "lit";
-import { n as l, a as w } from "../base-DNrOP9L3.js";
-import { o as x } from "../if-defined-CYpcjGCb.js";
+import { x as u, r as m, n as l, a as w } from "../base-CawdqE7p.js";
+import { o as x } from "../if-defined-BSAr_4u4.js";
 import { n as b } from "../when-CDK1Tt5Y.js";
-import { F as y } from "../focusable-zT9NFFYs.js";
-import { S as p } from "../sized-mixin-PyCYpyQq.js";
+import { F as y } from "../focusable-cj2QhwDT.js";
+import { S as p } from "../sized-mixin-BxMraZLS.js";
 import { s as k } from "../mutation-controller-DH7YOCyj.js";
 import { o as S } from "../query-assigned-elements-DjfhL1cl.js";
 import { R as C } from "../roving-tabindex-DOg4z6ZU.js";

package/components/switch/index.cjs

@@ -15,8 +15,8 @@
  * 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 i=require("lit"),h=require("../base-DzbGOAPo.cjs"),n=require("../sized-mixin-BEemErtP.cjs"),u=require("../focusable-zn6qaMtV.cjs"),w=require("../checkbox-mixin-DaXMsrtV.cjs");class b extends w.checkboxMixin(u.Focusable){get focusElement(){return this.inputElement}}const s=':host{--switch-focus-indicator-width: var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width));min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-color-selected);--switch-handle-border-color-hover: var(--luzmo-color-selected-hover);--switch-handle-border-color-down: var(--luzmo-color-selected-down);--switch-handle-border-color-focus: var(--luzmo-color-selected-focus);--switch-handle-border-color-selected-default: var(--luzmo-color-selected-hover);--switch-handle-border-color-selected-hover: var(--luzmo-color-selected-down);--switch-handle-border-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-handle-border-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-color-selected-hard);--switch-label-color-hover: var(--luzmo-color-selected-hard-hover);--switch-label-color-down: var(--luzmo-color-selected-hard-down);--switch-label-color-focus: var(--luzmo-color-selected-hard-focus);--switch-label-color-disabled: var(--luzmo-color-disabled);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-color-disabled);--switch-background-color-selected-default: var(--luzmo-color-selected-hover);--switch-background-color-selected-hover: var(--luzmo-color-selected-down);--switch-background-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-background-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-color-disabled);--switch-spacing-top-to-control: calc((var(--switch-min-height) - var(--switch-control-height)) / 2)}:host([disabled]){--switch-label-color-default: var(--luzmo-color-disabled)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';var v=Object.defineProperty,d=(c,o,l,g)=>{for(var r=void 0,e=c.length-1,a;e>=0;e--)(a=c[e])&&(r=a(o,l,r)||r);return r&&v(o,l,r),r};class t extends n.SizedMixin(b){constructor(){super(...arguments),this.emphasized=!1,this.thumb="overflow"}static get styles(){return window.hasOwnProperty("ShadyDOM")?[i.unsafeCSS(s)]:[i.unsafeCSS(s)]}render(){return i.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../base-B7Pfl2if.cjs"),d=require("../sized-mixin-D9LkrMjb.cjs"),n=require("../focusable-DGWL1v1p.cjs"),u=require("../checkbox-mixin-DUhXwD46.cjs");class w extends u.checkboxMixin(n.Focusable){get focusElement(){return this.inputElement}}const s=':host{--switch-focus-indicator-width: var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width));min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-color-selected);--switch-handle-border-color-hover: var(--luzmo-color-selected-hover);--switch-handle-border-color-down: var(--luzmo-color-selected-down);--switch-handle-border-color-focus: var(--luzmo-color-selected-focus);--switch-handle-border-color-selected-default: var(--luzmo-color-selected-hover);--switch-handle-border-color-selected-hover: var(--luzmo-color-selected-down);--switch-handle-border-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-handle-border-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-color-selected-hard);--switch-label-color-hover: var(--luzmo-color-selected-hard-hover);--switch-label-color-down: var(--luzmo-color-selected-hard-down);--switch-label-color-focus: var(--luzmo-color-selected-hard-focus);--switch-label-color-disabled: var(--luzmo-color-disabled);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-color-disabled);--switch-background-color-selected-default: var(--luzmo-color-selected-hover);--switch-background-color-selected-hover: var(--luzmo-color-selected-down);--switch-background-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-background-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-color-disabled);--switch-spacing-top-to-control: calc((var(--switch-min-height) - var(--switch-control-height)) / 2)}:host([disabled]){--switch-label-color-default: var(--luzmo-color-disabled)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';var b=Object.defineProperty,h=(t,o,l,v)=>{for(var r=void 0,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=a(o,l,r)||r);return r&&b(o,l,r),r};class e extends d.SizedMixin(w){constructor(){super(...arguments),this.emphasized=!1,this.thumb="overflow"}static get styles(){return window.hasOwnProperty("ShadyDOM")?[c.r(s)]:[c.r(s)]}render(){return c.x`
       ${super.render()}
       <span id="switch"></span>
       <label id="label" for="input"><slot></slot></label>
-    `}firstUpdated(o){super.firstUpdated(o),this.inputElement.setAttribute("role","switch")}updated(o){o.has("checked")&&this.inputElement.setAttribute("aria-checked",this.checked?"true":"false")}}d([h.n({type:Boolean,reflect:!0})],t.prototype,"emphasized");d([h.n({type:String,reflect:!0})],t.prototype,"thumb");customElements.get("luzmo-switch")||customElements.define("luzmo-switch",t);exports.LuzmoSwitch=t;
+    `}firstUpdated(o){super.firstUpdated(o),this.inputElement.setAttribute("role","switch")}updated(o){o.has("checked")&&this.inputElement.setAttribute("aria-checked",this.checked?"true":"false")}}h([c.n({type:Boolean,reflect:!0})],e.prototype,"emphasized");h([c.n({type:String,reflect:!0})],e.prototype,"thumb");customElements.get("luzmo-switch")||customElements.define("luzmo-switch",e);exports.LuzmoSwitch=e;

package/components/switch/index.js

@@ -15,11 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { unsafeCSS as a, html as u } from "lit";
-import { n as h } from "../base-DNrOP9L3.js";
-import { S as b } from "../sized-mixin-PyCYpyQq.js";
-import { F as w } from "../focusable-zT9NFFYs.js";
-import { c as m } from "../checkbox-mixin-DXUIwtea.js";
+import { r as a, x as u, n as h } from "../base-CawdqE7p.js";
+import { S as b } from "../sized-mixin-BxMraZLS.js";
+import { F as w } from "../focusable-cj2QhwDT.js";
+import { c as m } from "../checkbox-mixin-BFGTmw17.js";
 const n = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");

package/components/tags/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 l=require("lit"),n=require("../base-DzbGOAPo.cjs"),b=require("../sized-mixin-BEemErtP.cjs");require("../clear-button-pnT9_M8M.cjs");const z=require("../query-assigned-nodes-BcKWmGzy.cjs"),f=require("../focus-visible-B0P9aY_G.cjs"),p=require("../roving-tabindex-By_fCy_e.cjs"),k=':host{border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-corner-radius, var(--tag-corner-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-corner-radius, var(--tag-corner-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-corner-radius: var(--luzmo-border-radius-s);--tag-size-medium-corner-radius: var(--luzmo-border-radius);--tag-size-large-corner-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-color-negative);--tag-border-color-invalid-hover: var(--luzmo-color-negative-hover);--tag-border-color-invalid-active: var(--luzmo-color-negative-down);--tag-border-color-invalid-focus: var(--luzmo-color-negative-focus);--tag-content-color-invalid: var(--luzmo-color-negative);--tag-content-color-invalid-hover: var(--luzmo-color-negative-hover);--tag-content-color-invalid-active: var(--luzmo-color-negative-down);--tag-content-color-invalid-focus: var(--luzmo-color-negative-focus);--tag-border-color-invalid-selected: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-hover: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-focus: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-active: var(--luzmo-color-negative-down);--tag-background-color-invalid-selected: var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-active: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-focus: var( --luzmo-background-color-down );--tag-content-color-invalid-selected: var(--luzmo-color-negative-down);--tag-border-color-emphasized: var(--luzmo-primary);--tag-border-color-emphasized-hover: var(--luzmo-primary-hover);--tag-border-color-emphasized-active: var(--luzmo-primary-down);--tag-border-color-emphasized-focus: var(--luzmo-primary-focus);--tag-background-color-emphasized: var(--luzmo-primary);--tag-background-color-emphasized-hover: var(--luzmo-primary-hover);--tag-background-color-emphasized-active: var(--luzmo-primary-down);--tag-background-color-emphasized-focus: var(--luzmo-primary-focus);--tag-content-color-emphasized: white;--tag-content-color-disabled: var(--luzmo-color-disabled);--tag-icon-spacing-inline-end: var(--luzmo-spacing-3);--tag-icon-size: var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end: var(--luzmo-spacing-3);--tag-font-size: var(--luzmo-font-size)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-font-size-s);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-font-size-l);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size-100)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';var w=Object.defineProperty,u=(c,o,a,s)=>{for(var r=void 0,t=c.length-1,e;t>=0;t--)(e=c[t])&&(r=e(o,a,r)||r);return r&&w(o,a,r),r};class i extends b.SizedMixin(n.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.deletable=!1,this.disabled=!1,this.readonly=!1,this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.handleKeydown=o=>{if(!this.deletable||this.disabled)return;const{code:a}=o;switch(a){case"Backspace":case"Space":case"Delete":{this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(k)]}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||this.remove()}render(){return l.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-B7Pfl2if.cjs"),h=require("../sized-mixin-D9LkrMjb.cjs");require("../clear-button-KdrF2jaV.cjs");const m=require("../query-assigned-nodes-BcKWmGzy.cjs"),z=require("../focus-visible-B0P9aY_G.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),p=':host{border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-corner-radius, var(--tag-corner-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-corner-radius, var(--tag-corner-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-corner-radius: var(--luzmo-border-radius-s);--tag-size-medium-corner-radius: var(--luzmo-border-radius);--tag-size-large-corner-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-color-negative);--tag-border-color-invalid-hover: var(--luzmo-color-negative-hover);--tag-border-color-invalid-active: var(--luzmo-color-negative-down);--tag-border-color-invalid-focus: var(--luzmo-color-negative-focus);--tag-content-color-invalid: var(--luzmo-color-negative);--tag-content-color-invalid-hover: var(--luzmo-color-negative-hover);--tag-content-color-invalid-active: var(--luzmo-color-negative-down);--tag-content-color-invalid-focus: var(--luzmo-color-negative-focus);--tag-border-color-invalid-selected: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-hover: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-focus: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-active: var(--luzmo-color-negative-down);--tag-background-color-invalid-selected: var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-active: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-focus: var( --luzmo-background-color-down );--tag-content-color-invalid-selected: var(--luzmo-color-negative-down);--tag-border-color-emphasized: var(--luzmo-primary);--tag-border-color-emphasized-hover: var(--luzmo-primary-hover);--tag-border-color-emphasized-active: var(--luzmo-primary-down);--tag-border-color-emphasized-focus: var(--luzmo-primary-focus);--tag-background-color-emphasized: var(--luzmo-primary);--tag-background-color-emphasized-hover: var(--luzmo-primary-hover);--tag-background-color-emphasized-active: var(--luzmo-primary-down);--tag-background-color-emphasized-focus: var(--luzmo-primary-focus);--tag-content-color-emphasized: white;--tag-content-color-disabled: var(--luzmo-color-disabled);--tag-icon-spacing-inline-end: var(--luzmo-spacing-3);--tag-icon-size: var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end: var(--luzmo-spacing-3);--tag-font-size: var(--luzmo-font-size)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-font-size-s);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-font-size-l);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size-100)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';var k=Object.defineProperty,v=(l,o,a,n)=>{for(var r=void 0,e=l.length-1,c;e>=0;e--)(c=l[e])&&(r=c(o,a,r)||r);return r&&k(o,a,r),r};class i extends h.SizedMixin(t.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.deletable=!1,this.disabled=!1,this.readonly=!1,this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.handleKeydown=o=>{if(!this.deletable||this.disabled)return;const{code:a}=o;switch(a){case"Backspace":case"Space":case"Delete":{this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[t.r(p)]}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||this.remove()}render(){return t.x`
       <slot name="avatar"></slot>
       <slot name="icon"></slot>
       <span class="label"><slot></slot></span>
-      ${this.deletable?l.html`
+      ${this.deletable?t.x`
             <luzmo-clear-button
               class="clear-button"
               ?disabled=${this.disabled}
@@ -28,5 +28,5 @@
               tabindex="-1"
               @click=${this.delete}
             ></luzmo-clear-button>
-          `:l.nothing}
-    `}firstUpdated(o){super.firstUpdated(o),this.hasAttribute("role")||this.setAttribute("role","listitem"),this.deletable&&this.setAttribute("tabindex","0")}updated(o){super.updated(o),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}u([n.n({type:Boolean,reflect:!0})],i.prototype,"deletable");u([n.n({type:Boolean,reflect:!0})],i.prototype,"disabled");u([n.n({type:Boolean,reflect:!0})],i.prototype,"readonly");const x=":host{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--luzmo-tag-group-item-margin-block, var(--tag-group-item-margin-block));margin-inline:var(--luzmo-tag-group-item-margin-inline, var(--tag-group-item-margin-inline))}:host{--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host{--luzmo-clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}:host([size=s]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host([size=l]){--luzmo-tag-group-item-margin-block: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--luzmo-tag-group-item-margin-inline: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xl]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-3);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-3)}:host{--clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}";var y=Object.defineProperty,T=(c,o,a,s)=>{for(var r=void 0,t=c.length-1,e;t>=0;t--)(e=c[t])&&(r=e(o,a,r)||r);return r&&y(o,a,r),r};class h extends f.FocusVisiblePolyfillMixin(b.SizedMixin(n.LuzmoElement)){constructor(){super(),this.rovingTabindexController=new p.RovingTabindexController(this,{focusInIndex:o=>o.findIndex(a=>!a.disabled&&a.deletable),elements:()=>this.tags,isFocusableElement:o=>!o.disabled&&o.deletable}),this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleKeydown=o=>{const{code:a}=o;if(a!=="PageUp"&&a!=="PageDown")return;const s=(v,m)=>v[(v.length+m)%v.length],r=[...this.getRootNode().querySelectorAll("luzmo-tags")];if(r.length<2)return;o.preventDefault();const t=r.indexOf(this),e=a==="PageUp"?-1:1;let d=t+e,g=s(r,d);for(;g.tags.length===0;)d+=e,g=s(r,d);g.focus()},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(x)]}get tags(){return this.defaultNodes.filter(o=>o instanceof i)}focus(){this.rovingTabindexController.focus()}handleSlotchange(){this.rovingTabindexController.clearElementCache()}render(){return l.html` <slot @slotchange=${this.handleSlotchange}></slot> `}firstUpdated(){this.hasAttribute("role")||this.setAttribute("role","list"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Tags")}}T([z.n()],h.prototype,"defaultNodes");customElements.get("luzmo-tag")||customElements.define("luzmo-tag",i);customElements.get("luzmo-tags")||customElements.define("luzmo-tags",h);exports.LuzmoTag=i;exports.LuzmoTags=h;
+          `:t.E}
+    `}firstUpdated(o){super.firstUpdated(o),this.hasAttribute("role")||this.setAttribute("role","listitem"),this.deletable&&this.setAttribute("tabindex","0")}updated(o){super.updated(o),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}v([t.n({type:Boolean,reflect:!0})],i.prototype,"deletable");v([t.n({type:Boolean,reflect:!0})],i.prototype,"disabled");v([t.n({type:Boolean,reflect:!0})],i.prototype,"readonly");const w=":host{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--luzmo-tag-group-item-margin-block, var(--tag-group-item-margin-block));margin-inline:var(--luzmo-tag-group-item-margin-inline, var(--tag-group-item-margin-inline))}:host{--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host{--luzmo-clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}:host([size=s]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host([size=l]){--luzmo-tag-group-item-margin-block: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--luzmo-tag-group-item-margin-inline: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xl]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-3);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-3)}:host{--clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}";var x=Object.defineProperty,y=(l,o,a,n)=>{for(var r=void 0,e=l.length-1,c;e>=0;e--)(c=l[e])&&(r=c(o,a,r)||r);return r&&x(o,a,r),r};class u extends z.FocusVisiblePolyfillMixin(h.SizedMixin(t.LuzmoElement)){constructor(){super(),this.rovingTabindexController=new f.RovingTabindexController(this,{focusInIndex:o=>o.findIndex(a=>!a.disabled&&a.deletable),elements:()=>this.tags,isFocusableElement:o=>!o.disabled&&o.deletable}),this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleKeydown=o=>{const{code:a}=o;if(a!=="PageUp"&&a!=="PageDown")return;const n=(g,b)=>g[(g.length+b)%g.length],r=[...this.getRootNode().querySelectorAll("luzmo-tags")];if(r.length<2)return;o.preventDefault();const e=r.indexOf(this),c=a==="PageUp"?-1:1;let s=e+c,d=n(r,s);for(;d.tags.length===0;)s+=c,d=n(r,s);d.focus()},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[t.r(w)]}get tags(){return this.defaultNodes.filter(o=>o instanceof i)}focus(){this.rovingTabindexController.focus()}handleSlotchange(){this.rovingTabindexController.clearElementCache()}render(){return t.x` <slot @slotchange=${this.handleSlotchange}></slot> `}firstUpdated(){this.hasAttribute("role")||this.setAttribute("role","list"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Tags")}}y([m.n()],u.prototype,"defaultNodes");customElements.get("luzmo-tag")||customElements.define("luzmo-tag",i);customElements.get("luzmo-tags")||customElements.define("luzmo-tags",u);exports.LuzmoTag=i;exports.LuzmoTags=u;

package/components/tags/index.js

@@ -15,10 +15,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { unsafeCSS as h, nothing as k, html as g } from "lit";
-import { a as m, n as u } from "../base-DNrOP9L3.js";
-import { S as b } from "../sized-mixin-PyCYpyQq.js";
-import "../clear-button-Dh2Mq0cc.js";
+import { a as h, r as m, E as k, x as g, n as u } from "../base-CawdqE7p.js";
+import { S as b } from "../sized-mixin-BxMraZLS.js";
+import "../clear-button-DgZmX5RX.js";
 import { n as x } from "../query-assigned-nodes-C76XVPWY.js";
 import { F as w } from "../focus-visible-DBlJGoEW.js";
 import { R as y } from "../roving-tabindex-DOg4z6ZU.js";
@@ -35,7 +34,7 @@ var T = Object.defineProperty, v = (e, o, a, i) => {
     (l = e[t]) && (r = l(o, a, r) || r);
   return r && T(o, a, r), r;
 };
-class c extends b(m, {
+class c extends b(h, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -61,7 +60,7 @@ class c extends b(m, {
     }, this.addEventListener("focusin", this.handleFocusin);
   }
   static get styles() {
-    return [h(H)];
+    return [m(H)];
   }
   delete() {
     this.readonly || !this.dispatchEvent(
@@ -105,14 +104,14 @@ v([
 v([
   u({ type: Boolean, reflect: !0 })
 ], c.prototype, "readonly");
-const F = ":host{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--luzmo-tag-group-item-margin-block, var(--tag-group-item-margin-block));margin-inline:var(--luzmo-tag-group-item-margin-inline, var(--tag-group-item-margin-inline))}:host{--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host{--luzmo-clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}:host([size=s]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host([size=l]){--luzmo-tag-group-item-margin-block: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--luzmo-tag-group-item-margin-inline: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xl]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-3);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-3)}:host{--clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}";
-var B = Object.defineProperty, E = (e, o, a, i) => {
+const E = ":host{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--luzmo-tag-group-item-margin-block, var(--tag-group-item-margin-block));margin-inline:var(--luzmo-tag-group-item-margin-inline, var(--tag-group-item-margin-inline))}:host{--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host{--luzmo-clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}:host([size=s]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host([size=l]){--luzmo-tag-group-item-margin-block: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--luzmo-tag-group-item-margin-inline: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xl]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-3);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-3)}:host{--clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}";
+var F = Object.defineProperty, B = (e, o, a, i) => {
   for (var r = void 0, t = e.length - 1, l; t >= 0; t--)
     (l = e[t]) && (r = l(o, a, r) || r);
-  return r && B(o, a, r), r;
+  return r && F(o, a, r), r;
 };
 class z extends w(
-  b(m)
+  b(h)
 ) {
   constructor() {
     super(), this.rovingTabindexController = new y(this, {
@@ -143,7 +142,7 @@ class z extends w(
     }, this.addEventListener("focusin", this.handleFocusin);
   }
   static get styles() {
-    return [h(F)];
+    return [m(E)];
   }
   get tags() {
     return this.defaultNodes.filter(
@@ -163,7 +162,7 @@ class z extends w(
     this.hasAttribute("role") || this.setAttribute("role", "list"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Tags");
   }
 }
-E([
+B([
   x()
 ], z.prototype, "defaultNodes");
 customElements.get("luzmo-tag") || customElements.define("luzmo-tag", c);

package/components/text-field/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 p=require("../text-field-CtUKbEQN.cjs"),e=require("lit"),x=require("@luzmo/icons"),r=require("../base-DzbGOAPo.cjs"),s=require("../sized-mixin-BEemErtP.cjs"),u="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-size:var(var(--luzmo-helptext-font-size, var(--helptext-font-size)), 12px);min-block-size:var(var(--luzmo-helptext-min-height, var(--helptext-min-height)), 24px);display:flex}.icon{block-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);inline-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);flex-shrink:0;margin-inline-end:var(var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual)), 7px);padding-block-start:var(var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon)), 3px);padding-block-end:var(var(--luzmo-helptext-bottom-to-workflow-icon, --helptext-bottom-to-workflow-icon), 3px)}.text{line-height:var(var(--luzmo-helptext-line-height, var(--helptext-line-height), 1.3));padding-block-start:var(var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text)), 4px);padding-block-end:var(var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text)), 5px)}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk)), 1.4)}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-color-negative));--helptext-icon-color-default: var(var(--luzmo-color-negative))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var v=Object.defineProperty,c=(l,a,i,d)=>{for(var t=void 0,n=l.length-1,h;n>=0;n--)(h=l[n])&&(t=h(a,i,t)||t);return t&&v(a,i,t),t};class o extends s.SizedMixin(r.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[e.unsafeCSS(u)]}render(){return e.html`
-      ${this.variant==="negative"&&this.icon?e.html` ${x.luzmoIcon(x.luzmoClose14)} `:e.nothing}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../text-field-5_ev9way.cjs"),t=require("../base-B7Pfl2if.cjs"),x=require("@luzmo/icons"),c=require("../sized-mixin-D9LkrMjb.cjs"),s="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-size:var(var(--luzmo-helptext-font-size, var(--helptext-font-size)), 12px);min-block-size:var(var(--luzmo-helptext-min-height, var(--helptext-min-height)), 24px);display:flex}.icon{block-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);inline-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);flex-shrink:0;margin-inline-end:var(var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual)), 7px);padding-block-start:var(var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon)), 3px);padding-block-end:var(var(--luzmo-helptext-bottom-to-workflow-icon, --helptext-bottom-to-workflow-icon), 3px)}.text{line-height:var(var(--luzmo-helptext-line-height, var(--helptext-line-height), 1.3));padding-block-start:var(var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text)), 4px);padding-block-end:var(var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text)), 5px)}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk)), 1.4)}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-color-negative));--helptext-icon-color-default: var(var(--luzmo-color-negative))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var u=Object.defineProperty,p=(l,n,a,v)=>{for(var e=void 0,r=l.length-1,i;r>=0;r--)(i=l[r])&&(e=i(n,a,e)||e);return e&&u(n,a,e),e};class o extends c.SizedMixin(t.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[t.r(s)]}render(){return t.x`
+      ${this.variant==="negative"&&this.icon?t.x` ${x.luzmoIcon(x.luzmoClose14)} `:t.E}
       <div class="text"><slot></slot></div>
-    `}}c([r.n({type:Boolean,reflect:!0})],o.prototype,"icon");c([r.n({reflect:!0})],o.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",p.LuzmoTextField);customElements.get("luzmo-help-text")||customElements.define("luzmo-help-text",o);exports.LuzmoTextField=p.LuzmoTextField;exports.LuzmoHelpText=o;
+    `}}p([t.n({type:Boolean,reflect:!0})],o.prototype,"icon");p([t.n({reflect:!0})],o.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",h.LuzmoTextField);customElements.get("luzmo-help-text")||customElements.define("luzmo-help-text",o);exports.LuzmoTextField=h.LuzmoTextField;exports.LuzmoHelpText=o;

package/components/text-field/index.js

@@ -15,11 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { L as m } from "../text-field-7ITo3Lac.js";
-import { unsafeCSS as p, nothing as x, html as i } from "lit";
-import { luzmoIcon as s, luzmoClose14 as z } from "@luzmo/icons";
-import { a as d, n as c } from "../base-DNrOP9L3.js";
-import { S as f } from "../sized-mixin-PyCYpyQq.js";
+import { L as m } from "../text-field-CvKSS59x.js";
+import { a as p, r as x, E as s, x as i, n as c } from "../base-CawdqE7p.js";
+import { luzmoIcon as z, luzmoClose14 as d } from "@luzmo/icons";
+import { S as f } from "../sized-mixin-BxMraZLS.js";
 const h = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");
@@ -33,18 +32,18 @@ var g = Object.defineProperty, u = (o, r, n, b) => {
     (a = o[e]) && (t = a(r, n, t) || t);
   return t && g(r, n, t), t;
 };
-class l extends f(d, {
+class l extends f(p, {
   noDefaultSize: !0
 }) {
   constructor() {
     super(...arguments), this.icon = !1, this.variant = "neutral";
   }
   static get styles() {
-    return [p(v)];
+    return [x(v)];
   }
   render() {
     return i`
-      ${this.variant === "negative" && this.icon ? i` ${s(z)} ` : x}
+      ${this.variant === "negative" && this.icon ? i` ${z(d)} ` : s}
       <div class="text"><slot></slot></div>
     `;
   }