@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/checkbox-DFwDrIdY.cjs

@@ -0,0 +1,25 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`),n=require(`./checkbox-mixin-D4HeLrMj.cjs`);let r=require(`lit`),i=require(`lit/decorators.js`),a=require(`@luzmo/icons`);var o=`:host{color:var(--highcontrast-checkbox-content-color-default,var(--luzmo-checkbox-content-color-default,var(--luzmo-font-color-down)));min-block-size:var(--luzmo-checkbox-height,var(--checkbox-height,32px));vertical-align:top;max-inline-size:100%;font-family:var(--luzmo-checkbox-font-family,var(--luzmo-font-family));align-items:flex-start;display:inline-flex;position:relative}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down,var(--luzmo-checkbox-control-color-down,var(--luzmo-font-color-down)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down,var(--luzmo-checkbox-control-selected-color-down,var(--luzmo-font-color-down)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down,var(--luzmo-checkbox-content-color-down,var(--luzmo-font-color-down)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-invalid-color-default,var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover,var(--luzmo-checkbox-invalid-color-hover,var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-control-selected-color-default,var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default,var(--luzmo-checkbox-control-selected-color-default,var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-control-selected-color-default,var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default,var(--luzmo-checkbox-checkmark-color,var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-content-color-default,var(--luzmo-font-color-down)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--luzmo-checkbox-control-selected-color-default,var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width,calc(var(--checkbox-control-size,14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus,var(--luzmo-checkbox-control-selected-color-focus,var(--luzmo-font-color-focus)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-invalid-color-default,var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width,calc(var(--checkbox-control-size,14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--luzmo-checkbox-emphasized-color-default,var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus,var(--luzmo-checkbox-emphasized-color-focus,var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-invalid-color-focus,var(--luzmo-negative-color)))}@media (hover:hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--luzmo-checkbox-control-color-hover,var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--luzmo-checkbox-control-selected-color-hover,var(--luzmo-font-color-down)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover,var(--luzmo-checkbox-content-color-hover,var(--luzmo-font-color-hover)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover,var(--luzmo-checkbox-invalid-color-hover,var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-control-selected-color-default,var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--luzmo-checkbox-control-selected-color-hover,var(--luzmo-font-color-hover)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-invalid-color-hover,var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover,var(--luzmo-checkbox-content-color-hover,var(--luzmo-font-color-hover)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover,var(--luzmo-checkbox-invalid-color-hover,var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--luzmo-checkbox-emphasized-color-hover,var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--luzmo-checkbox-emphasized-color-down,var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--luzmo-checkbox-control-invalid-color-down,var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus,var(--luzmo-checkbox-control-color-focus,var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size,var(--checkbox-font-size,14px));transition:color var(--luzmo-checkbox-animation-duration,var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height,1.3);margin-block-start:var(--luzmo-checkbox-top-to-text,var(--checkbox-top-to-text,6px));margin-inline-start:var(--luzmo-checkbox-text-to-control,var(--checkbox-text-to-control,10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk,1.5)}#input{color:var(--luzmo-checkbox-control-color-default,var(--luzmo-font-color));box-sizing:border-box;opacity:.0001;z-index:1;cursor:pointer;block-size:100%;inline-size:100%;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--luzmo-checkbox-control-selected-color-default,var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color,var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width,calc(var(--checkbox-control-size,14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus,var(--luzmo-checkbox-control-color-focus,var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width,var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color,var(--luzmo-checkbox-focus-indicator-color,var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap,2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus,var(--luzmo-checkbox-content-color-focus,var(--luzmo-font-color-focus)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus,var(--luzmo-checkbox-control-selected-color-focus,var(--luzmo-font-color-down)))}#box{--luzmo-checkbox-spacing:calc(var(--luzmo-checkbox-height,var(--checkbox-height,32px)) - var(--luzmo-checkbox-control-size,var(--checkbox-control-size,14px)));flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;margin-block-start:calc(var(--luzmo-checkbox-spacing) / 2 - var(--checkbox-offset-for-baseline,0px));margin-block-end:calc(var(--luzmo-checkbox-spacing) / 2 + var(--checkbox-offset-for-baseline,0px));display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size,var(--checkbox-control-size,14px));block-size:var(--luzmo-checkbox-control-size,var(--checkbox-control-size,14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default,var(--luzmo-checkbox-control-color-default,var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-border-radius,2px);border-width:var(--luzmo-checkbox-border-width,var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration,var(--luzmo-animation-duration)) ease-in-out, box-shadow var(--luzmo-checkbox-animation-duration,var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-border-radius,2px) + var(--luzmo-checkbox-focus-indicator-gap,2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap,2px);transition:box-shadow var(--luzmo-checkbox-animation-duration,var(--luzmo-animation-duration)) ease-out, margin var(--luzmo-checkbox-animation-duration,var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default,var(--luzmo-checkbox-checkmark-color,var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration,var(--luzmo-animation-duration)) ease-in-out, transform var(--luzmo-checkbox-animation-duration,var(--luzmo-animation-duration)) ease-in-out;width:var(--textbox-control-size,14px);font-size:var(--checkbox-icon-size);justify-content:center;align-items:center;display:flex;transform:scale(0)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default,var(--luzmo-checkbox-control-color-disabled,var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default,var(--luzmo-checkbox-checkmark-color,var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default,var(--luzmo-checkbox-content-color-disabled,var(--luzmo-disabled-color)))}@media (forced-colors:active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color,var(--luzmo-checkbox-focus-indicator-color,var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap,var(--luzmo-checkbox-focus-indicator-gap,2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width,var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color,var(--luzmo-checkbox-focus-indicator-color,var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default:CanvasText;--highcontrast-checkbox-content-color-hover:CanvasText;--highcontrast-checkbox-content-color-down:CanvasText;--highcontrast-checkbox-content-color-focus:CanvasText;--highcontrast-checkbox-background-color-default:Canvas;--highcontrast-checkbox-color-default:ButtonText;--highcontrast-checkbox-color-hover:ButtonText;--highcontrast-checkbox-color-focus:Highlight;--highcontrast-checkbox-highlight-color-default:Highlight;--highcontrast-checkbox-highlight-color-hover:Highlight;--highcontrast-checkbox-highlight-color-down:Highlight;--highcontrast-checkbox-highlight-color-focus:Highlight;--highcontrast-checkbox-disabled-color-default:GrayText;--highcontrast-checkbox-focus-indicator-color:CanvasText}}:host([size=s]){--checkbox-font-size:var(--luzmo-checkbox-size-s-font-size,12px);--checkbox-height:var(--luzmo-checkbox-size-s-height,24px);--checkbox-control-size:var(--luzmo-checkbox-size-s-control-size,12px);--checkbox-top-to-text:var(--luzmo-checkbox-size-s-top-to-text,4px);--checkbox-text-to-control:var(--luzmo-checkbox-size-s-text-to-control,9px);--checkbox-icon-size:var(--luzmo-checkbox-size-s-icon-size,9px);--checkbox-offset-for-baseline:var(--luzmo-checkbox-size-s-offset-for-baseline,1px)}:host{--checkbox-font-size:var(--luzmo-checkbox-size-m-font-size,14px);--checkbox-height:var(--luzmo-checkbox-size-m-height,32px);--checkbox-control-size:var(--luzmo-checkbox-size-m-control-size,14px);--checkbox-top-to-text:var(--luzmo-checkbox-size-m-top-to-text,6px);--checkbox-text-to-control:var(--luzmo-checkbox-size-m-text-to-control,10px);--checkbox-icon-size:var(--luzmo-checkbox-size-m-icon-size,10px);--checkbox-offset-for-baseline:var(--luzmo-checkbox-size-m-offset-for-baseline,1px)}:host([size=l]){--checkbox-font-size:var(--luzmo-checkbox-size-l-font-size,16px);--checkbox-height:var(--luzmo-checkbox-size-l-height,40px);--checkbox-control-size:var(--luzmo-checkbox-size-l-control-size,16px);--checkbox-top-to-text:var(--luzmo-checkbox-size-l-top-to-text,9px);--checkbox-text-to-control:var(--luzmo-checkbox-size-l-text-to-control,11px);--checkbox-icon-size:var(--luzmo-checkbox-size-l-icon-size,11px);--checkbox-offset-for-baseline:var(--luzmo-checkbox-size-l-offset-for-baseline,1px)}:host([size=xl]){--checkbox-font-size:var(--luzmo-checkbox-size-xl-font-size,18px);--checkbox-height:var(--luzmo-checkbox-size-xl-height,48px);--checkbox-control-size:var(--luzmo-checkbox-size-xl-control-size,18px);--checkbox-top-to-text:var(--luzmo-checkbox-size-xl-top-to-text,12px);--checkbox-text-to-control:var(--luzmo-checkbox-size-xl-text-to-control,13px);--checkbox-icon-size:var(--luzmo-checkbox-size-xl-icon-size,12px);--checkbox-offset-for-baseline:var(--luzmo-checkbox-size-xl-offset-for-baseline,1px)}:host{vertical-align:top;display:inline-flex}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}`,s=()=>r.html`<div id="checkmark">${(0,a.luzmoIcon)(a.luzmoCheck)}</div>`,c=()=>r.html`<div id="partialCheckmark">${(0,a.luzmoIcon)(a.luzmoDash)}</div>`,l=class extends t.n(n.t(e.n),{noDefaultSize:!0}){constructor(...e){super(...e),this.disabled=!1,this.indeterminate=!1,this.autofocus=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0,this._cachedTabIndex=null}static{this.shadowRootOptions={...e.n.shadowRootOptions,delegatesFocus:!0}}connectedCallback(){super.connectedCallback(),this.hasAttribute(`autofocus`)&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[(0,r.unsafeCSS)(o)]}click(){this.disabled||this.inputElement?.click()}handleChange(){this.indeterminate=!1,super.handleChange()}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&(this.disabled?(this._cachedTabIndex===null&&(this._cachedTabIndex=this.tabIndex),this.tabIndex=-1):this._cachedTabIndex!==null&&(this.tabIndex=this._cachedTabIndex,this._cachedTabIndex=null))}render(){return r.html`
+      ${super.render()}
+      <span id="box">
+        ${this.checked?s():r.html``}
+        ${this.indeterminate?c():r.html``}
+      </span>
+      <label id="label" for="input"><slot></slot></label>
+    `}updated(e){super.updated(e),e.has(`disabled`)&&(this.inputElement.disabled=this.disabled),e.has(`indeterminate`)&&(this.inputElement.indeterminate=this.indeterminate),e.has(`invalid`)&&(this.invalid?this.inputElement.setAttribute(`aria-invalid`,`true`):this.inputElement.removeAttribute(`aria-invalid`))}};e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`disabled`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`indeterminate`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`autofocus`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`invalid`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`emphasized`,void 0),e.t([(0,i.property)({reflect:!0,type:Number,attribute:`tabindex`})],l.prototype,`tabIndex`,void 0),customElements.get(`luzmo-checkbox`)||customElements.define(`luzmo-checkbox`,l),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});

package/components/checkbox-mixin-C5sLMo5L.js

@@ -0,0 +1,67 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-aGxJUVxg.js";
+import { html as t } from "lit";
+import { property as n, query as r } from "lit/decorators.js";
+import { ifDefined as i } from "lit/directives/if-defined.js";
+//#region src/components/checkbox/checkbox-mixin.ts
+function a(a) {
+	class o extends a {
+		constructor(...e) {
+			super(...e), this.checked = !1, this.readonly = !1;
+		}
+		handleChange() {
+			if (this.readonly) {
+				this.inputElement.checked = this.checked;
+				return;
+			}
+			this.checked = this.inputElement.checked;
+			let e = new CustomEvent("change", {
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0,
+				detail: this.checked
+			});
+			this.dispatchEvent(e) || (this.checked = !this.inputElement.checked, this.inputElement.checked = this.checked);
+		}
+		render() {
+			return t`
+        <input
+          id="input"
+          name=${i(this.name || void 0)}
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.readonly}
+          @change=${this.handleChange}
+        />
+      `;
+		}
+	}
+	return e([n({
+		type: Boolean,
+		reflect: !0
+	})], o.prototype, "checked", void 0), e([n({
+		type: String,
+		reflect: !0
+	})], o.prototype, "name", void 0), e([n({
+		type: Boolean,
+		reflect: !0
+	})], o.prototype, "readonly", void 0), e([r("#input")], o.prototype, "inputElement", void 0), o;
+}
+//#endregion
+export { a as t };

package/components/{checkbox-mixin-BDN0dBtS.cjs → checkbox-mixin-D4HeLrMj.cjs}

@@ -15,13 +15,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";const c=require("./base-CBCg3yyw.cjs"),d=require("./query-BL-TJj7K.cjs"),o=require("./if-defined-C9YGdo33.cjs");var l=Object.defineProperty,i=(n,e,r,s)=>{for(var t=void 0,h=n.length-1,a;h>=0;h--)(a=n[h])&&(t=a(e,r,t)||t);return t&&l(e,r,t),t};function u(n){class e extends n{constructor(){super(...arguments),this.checked=!1,this.readonly=!1}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;const s=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:this.checked});this.dispatchEvent(s)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return c.x`
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`);let t=require(`lit`),n=require(`lit/decorators.js`),r=require(`lit/directives/if-defined.js`);function i(i){class a extends i{constructor(...e){super(...e),this.checked=!1,this.readonly=!1}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;let e=new CustomEvent(`change`,{bubbles:!0,cancelable:!0,composed:!0,detail:this.checked});this.dispatchEvent(e)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return t.html`
         <input
           id="input"
-          name=${o.o(this.name||void 0)}
+          name=${(0,r.ifDefined)(this.name||void 0)}
           type="checkbox"
           .checked=${this.checked}
           ?disabled=${this.readonly}
           @change=${this.handleChange}
         />
-      `}}return i([c.n({type:Boolean,reflect:!0})],e.prototype,"checked"),i([c.n({type:String,reflect:!0})],e.prototype,"name"),i([c.n({type:Boolean,reflect:!0})],e.prototype,"readonly"),i([d.e("#input")],e.prototype,"inputElement"),e}exports.checkboxMixin=u;
+      `}}return e.t([(0,n.property)({type:Boolean,reflect:!0})],a.prototype,`checked`,void 0),e.t([(0,n.property)({type:String,reflect:!0})],a.prototype,`name`,void 0),e.t([(0,n.property)({type:Boolean,reflect:!0})],a.prototype,`readonly`,void 0),e.t([(0,n.query)(`#input`)],a.prototype,`inputElement`,void 0),a}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});

package/components/chunk-D-qHiVGv.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/components/close-button-BeXYep8K.js

@@ -0,0 +1,42 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-aGxJUVxg.js";
+import { n as t } from "./sized-mixin-DaBoZkVS.js";
+import "./icon-CwBAE1eU.js";
+import { t as n } from "./button-base-SHgEJgk2.js";
+import { html as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { luzmoClose as o, luzmoClose12 as s, luzmoClose14 as c, luzmoIcon as l } from "@luzmo/icons";
+//#region src/components/button/close-button.module.scss?inline
+var u = ":host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family,var(--luzmo-sans-font-family-stack,var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height,var(--luzmo-line-height,1.3));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, border-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, box-shadow var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out;margin:0;-webkit-text-decoration:none;text-decoration:none;overflow:visible;border-style:solid!important}:host(:focus){outline:none}:host([disabled]),:host([disabled]){cursor:default}:host a{-webkit-user-select:none;user-select:none;-webkit-appearance:none}@media (forced-colors:active){:host{--highcontrast-close-button-icon-color-disabled:GrayText;--highcontrast-close-button-icon-color-down:Highlight;--highcontrast-close-button-icon-color-hover:Highlight;--highcontrast-close-button-icon-color-focus:Highlight;--highcontrast-close-button-background-color-default:ButtonFace;--highcontrast-close-button-focus-indicator-color:ButtonText}:host(:focus-visible):after{forced-color-adjust:none;margin:var(--luzmo-close-button-focus-indicator-gap,var(--close-button-focus-indicator-gap));transition:opacity var(--luzmo-close-button-animation-duration,var(--close-button-animation-duration)) ease-out, margin var(--luzmo-close-button-animation-duraction,var(--close-button-animation-duration)) ease-out}:host([static-color=black]){--highcontrast-close-button-static-background-color-default:ButtonFace;--highcontrast-close-button-icon-color-default:Highlight;--highcontrast-close-button-icon-color-disabled:GrayText}:host([static-color=white]){--highcontrast-close-button-static-background-color-default:ButtonFace;--highcontrast-close-button-icon-color-default:Highlight;--highcontrast-close-button-icon-color-disabled:Highlight}}:host{block-size:var(--luzmo-close-button-height,var(--close-button-size));inline-size:var(--luzmo-close-button-width,var(--close-button-size));font-size:var(--luzmo-close-button-icon-size,var(--close-button-icon-size));color:inherit;border-radius:var(--luzmo-close-button-border-radius,var(--close-button-size));transition:border-color var(--luzmo-close-button-animation-duration,var(--close-button-animation-duration)) ease-in-out;margin-inline:var(--luzmo-close-button-margin-inline);justify-content:center;align-items:center;align-self:var(--luzmo-close-button-align-self);flex-direction:row;margin-block-start:var(--luzmo-close-button-margin-top);padding:0;display:inline-flex;position:relative;border-width:0!important;border-color:#0000!important}:host:after{pointer-events:none;content:\"\";margin:calc(var(--luzmo-close-button-focus-indicator-gap,var(--close-button-focus-indicator-gap)) * -1);border-radius:calc(var(--luzmo-close-button-size,var(--close-button-size)) + var(--luzmo-close-button-focus-indicator-gap,var(--close-button-focus-indicator-gap)));transition:box-shadow var(--luzmo-close-button-animation-duration,var(--close-button-animation-duration)) ease-in-out;position:absolute;inset-block:0;inset-inline:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-close-button-focus-indicator-width,var(--close-button-focus-indicator-width)) var(--highcontrast-close-button-focus-indicator-color,var(--luzmo-close-button-focus-indicator-color,var(--close-button-focus-indicator-color)))}:host(:not([disabled])){background-color:var(--highcontrast-close-button-background-color-default,var(--luzmo-close-button-background-color-default,var(--close-button-background-color-default)))}:host(:not([disabled]):is(:active,[active])){background-color:var(--luzmo-close-button-background-color-down,var(--close-button-background-color-down))}:host(:not([disabled]):is(:active,[active])) .icon{color:var(--highcontrast-close-button-icon-color-down,var(--luzmo-close-button-icon-color-down,var(--close-button-icon-color-down)))}:host([focused]:not([disabled])),:host(:not([disabled]):focus-visible){background-color:var(--luzmo-close-button-background-color-focus,var(--close-button-background-color-focus))}:host([focused]:not([disabled])) .icon,:host(:not([disabled]):focus-visible) .icon{color:var(--highcontrast-close-button-icon-color-focus,var(--luzmo-close-button-icon-color-focus,var(--close-button-icon-color-focus)))}:host(:not([disabled])) .icon{color:var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default))}:host([focused]:not([disabled])) .icon,:host(:not([disabled]):focus) .icon{color:var(--highcontrast-close-button-icon-color-focus,var(--luzmo-close-button-icon-color-focus,var(--close-button-icon-color-focus)))}:host([disabled]){background-color:var(--luzmo-close-button-background-color-default,var(--close-button-background-color-default))}:host([disabled]) .icon{color:var(--highcontrast-close-button-icon-color-disabled,var(--luzmo-close-button-icon-color-disabled,var(--close-button-icon-color-disabled)))}:host([static-color=black]:not([disabled])),:host([static-color=white]:not([disabled])){background-color:var(--highcontrast-close-button-static-background-color-default,var(--luzmo-close-button-static-background-color-default,var(--close-button-static-background-color-default)))}@media (hover:hover){:host(:not([disabled]):hover){--luzmo-icon-color:var(--luzmo-close-button-icon-color-hover,var(--close-button-icon-color-hover));background-color:var(--luzmo-close-button-background-color-hover,var(--close-button-background-color-hover))}:host(:not([disabled]):hover) .icon{color:var(--highcontrast-close-button-icon-color-hover,var(--luzmo-close-button-icon-color-hover,var(--close-button-icon-color-hover)))}:host([static-color=black]:not([disabled]):hover),:host([static-color=white]:not([disabled]):hover){background-color:var(--highcontrast-close-button-static-background-color-hover,var(--luzmo-close-button-static-background-color-hover,var(--close-button-static-background-color-hover)))}:host([static-color=black]:not([disabled]):hover) .icon,:host([static-color=white]:not([disabled]):hover) .icon{color:var(--highcontrast-close-button-icon-color-default,var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default)))}}:host([static-color=black]:not([disabled]):is(:active,[active])),:host([static-color=white]:not([disabled]):is(:active,[active])){background-color:var(--highcontrast-close-button-static-background-color-down,var(--luzmo-close-button-static-background-color-down,var(--close-button-static-background-color-down)))}:host([static-color=black]:not([disabled]):is(:active,[active])) .icon,:host([static-color=white]:not([disabled]):is(:active,[active])) .icon{color:var(--highcontrast-close-button-icon-color-default,var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default)))}:host([static-color=black][focused]:not([disabled])),:host([static-color=black]:not([disabled]):focus-visible),:host([static-color=white][focused]:not([disabled])),:host([static-color=white]:not([disabled]):focus-visible){background-color:var(--highcontrast-close-button-static-background-color-focus,var(--luzmo-close-button-static-background-color-focus,var(--close-button-static-background-color-focus)))}:host([static-color=black][focused]:not([disabled])) .icon,:host([static-color=black][focused]:not([disabled])) .icon,:host([static-color=black]:not([disabled]):focus) .icon,:host([static-color=black]:not([disabled]):focus-visible) .icon,:host([static-color=white][focused]:not([disabled])) .icon,:host([static-color=white][focused]:not([disabled])) .icon,:host([static-color=white]:not([disabled]):focus) .icon,:host([static-color=white]:not([disabled]):focus-visible) .icon{color:var(--highcontrast-close-button-icon-color-default,var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default)))}:host([static-color=black]:not([disabled])) .icon,:host([static-color=white]:not([disabled])) .icon{color:var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default))}:host([static-color=black][disabled]) .icon,:host([static-color=white][disabled]) .icon{color:var(--highcontrast-close-button-icon-disabled,var(--luzmo-close-button-icon-color-disabled,var(--close-button-icon-color-disabled)))}.icon{margin:0}:host{--close-button-background-color-default:transparent;--close-button-background-color-hover:var(--luzmo-background-color-hover);--close-button-background-color-down:var(--luzmo-background-color-down);--close-button-background-color-focus:var(--luzmo-background-color-focus);--close-button-icon-color-default:var(--luzmo-font-color);--close-button-icon-color-hover:var(--luzmo-font-color-hover);--close-button-icon-color-down:var(--luzmo-font-color-down);--close-button-icon-color-focus:var(--luzmo-font-color-focus);--close-button-icon-color-disabled:var(--luzmo-disabled-color);--close-button-focus-indicator-width:var(--luzmo-indicator-width);--close-button-focus-indicator-gap:var(--luzmo-indicator-gap);--close-button-focus-indicator-color:var(--luzmo-indicator-color);--close-button-animation-duration:var(--luzmo-animation-duration);--close-button-size:var(--luzmo-component-height)}:host([static-color=white]){--close-button-static-background-color-default:transparent;--close-button-static-background-color-hover:#fff3;--close-button-static-background-color-down:#fff6;--close-button-static-background-color-focus:#fff3;--close-button-icon-color-default:#fff;--close-button-icon-color-disabled:#fff3;--close-button-focus-indicator-color:#fff}:host([static-color=black]){--close-button-static-background-color-default:transparent;--close-button-static-background-color-hover:#0003;--close-button-static-background-color-down:#0006;--close-button-static-background-color-focus:#0003;--close-button-icon-color-default:#000;--close-button-icon-color-disabled:#0003;--close-button-focus-indicator-color:#000}:host([size=s]){--close-button-size:var(--luzmo-component-height-s);--close-button-icon-size:var(--luzmo-font-size-s)}:host{--close-button-size:var(--luzmo-component-height);--close-button-icon-size:var(--luzmo-font-size)}:host([size=l]){--close-button-size:var(--luzmo-component-height-l);--close-button-icon-size:var(--luzmo-font-size-l)}:host([size=xl]){--close-button-size:var(--luzmo-component-height-xl);--close-button-icon-size:var(--luzmo-font-size-xl)}", d = (e) => r` <div class="icon" slot="icon">${l(e === "s" ? s : e === "l" ? o : c)}</div> `, f = class extends t(n, { noDefaultSize: !0 }) {
+	constructor(...e) {
+		super(...e), this.variant = "";
+	}
+	static get styles() {
+		return [...super.styles, i(u)];
+	}
+	get buttonContent() {
+		return [d(this.size)];
+	}
+};
+e([a({ reflect: !0 })], f.prototype, "variant", void 0), e([a({
+	reflect: !0,
+	attribute: "static-color"
+})], f.prototype, "staticColor", void 0);
+//#endregion
+export { f as t };

package/components/close-button-BzapEpcF.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`);require(`./icon-B7hKwn_q.cjs`);const n=require(`./button-base-BYV3Lp3P.cjs`);let r=require(`lit`),i=require(`lit/decorators.js`),a=require(`@luzmo/icons`);var o=`:host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family,var(--luzmo-sans-font-family-stack,var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height,var(--luzmo-line-height,1.3));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, border-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, box-shadow var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out;margin:0;-webkit-text-decoration:none;text-decoration:none;overflow:visible;border-style:solid!important}:host(:focus){outline:none}:host([disabled]),:host([disabled]){cursor:default}:host a{-webkit-user-select:none;user-select:none;-webkit-appearance:none}@media (forced-colors:active){:host{--highcontrast-close-button-icon-color-disabled:GrayText;--highcontrast-close-button-icon-color-down:Highlight;--highcontrast-close-button-icon-color-hover:Highlight;--highcontrast-close-button-icon-color-focus:Highlight;--highcontrast-close-button-background-color-default:ButtonFace;--highcontrast-close-button-focus-indicator-color:ButtonText}:host(:focus-visible):after{forced-color-adjust:none;margin:var(--luzmo-close-button-focus-indicator-gap,var(--close-button-focus-indicator-gap));transition:opacity var(--luzmo-close-button-animation-duration,var(--close-button-animation-duration)) ease-out, margin var(--luzmo-close-button-animation-duraction,var(--close-button-animation-duration)) ease-out}:host([static-color=black]){--highcontrast-close-button-static-background-color-default:ButtonFace;--highcontrast-close-button-icon-color-default:Highlight;--highcontrast-close-button-icon-color-disabled:GrayText}:host([static-color=white]){--highcontrast-close-button-static-background-color-default:ButtonFace;--highcontrast-close-button-icon-color-default:Highlight;--highcontrast-close-button-icon-color-disabled:Highlight}}:host{block-size:var(--luzmo-close-button-height,var(--close-button-size));inline-size:var(--luzmo-close-button-width,var(--close-button-size));font-size:var(--luzmo-close-button-icon-size,var(--close-button-icon-size));color:inherit;border-radius:var(--luzmo-close-button-border-radius,var(--close-button-size));transition:border-color var(--luzmo-close-button-animation-duration,var(--close-button-animation-duration)) ease-in-out;margin-inline:var(--luzmo-close-button-margin-inline);justify-content:center;align-items:center;align-self:var(--luzmo-close-button-align-self);flex-direction:row;margin-block-start:var(--luzmo-close-button-margin-top);padding:0;display:inline-flex;position:relative;border-width:0!important;border-color:#0000!important}:host:after{pointer-events:none;content:"";margin:calc(var(--luzmo-close-button-focus-indicator-gap,var(--close-button-focus-indicator-gap)) * -1);border-radius:calc(var(--luzmo-close-button-size,var(--close-button-size)) + var(--luzmo-close-button-focus-indicator-gap,var(--close-button-focus-indicator-gap)));transition:box-shadow var(--luzmo-close-button-animation-duration,var(--close-button-animation-duration)) ease-in-out;position:absolute;inset-block:0;inset-inline:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-close-button-focus-indicator-width,var(--close-button-focus-indicator-width)) var(--highcontrast-close-button-focus-indicator-color,var(--luzmo-close-button-focus-indicator-color,var(--close-button-focus-indicator-color)))}:host(:not([disabled])){background-color:var(--highcontrast-close-button-background-color-default,var(--luzmo-close-button-background-color-default,var(--close-button-background-color-default)))}:host(:not([disabled]):is(:active,[active])){background-color:var(--luzmo-close-button-background-color-down,var(--close-button-background-color-down))}:host(:not([disabled]):is(:active,[active])) .icon{color:var(--highcontrast-close-button-icon-color-down,var(--luzmo-close-button-icon-color-down,var(--close-button-icon-color-down)))}:host([focused]:not([disabled])),:host(:not([disabled]):focus-visible){background-color:var(--luzmo-close-button-background-color-focus,var(--close-button-background-color-focus))}:host([focused]:not([disabled])) .icon,:host(:not([disabled]):focus-visible) .icon{color:var(--highcontrast-close-button-icon-color-focus,var(--luzmo-close-button-icon-color-focus,var(--close-button-icon-color-focus)))}:host(:not([disabled])) .icon{color:var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default))}:host([focused]:not([disabled])) .icon,:host(:not([disabled]):focus) .icon{color:var(--highcontrast-close-button-icon-color-focus,var(--luzmo-close-button-icon-color-focus,var(--close-button-icon-color-focus)))}:host([disabled]){background-color:var(--luzmo-close-button-background-color-default,var(--close-button-background-color-default))}:host([disabled]) .icon{color:var(--highcontrast-close-button-icon-color-disabled,var(--luzmo-close-button-icon-color-disabled,var(--close-button-icon-color-disabled)))}:host([static-color=black]:not([disabled])),:host([static-color=white]:not([disabled])){background-color:var(--highcontrast-close-button-static-background-color-default,var(--luzmo-close-button-static-background-color-default,var(--close-button-static-background-color-default)))}@media (hover:hover){:host(:not([disabled]):hover){--luzmo-icon-color:var(--luzmo-close-button-icon-color-hover,var(--close-button-icon-color-hover));background-color:var(--luzmo-close-button-background-color-hover,var(--close-button-background-color-hover))}:host(:not([disabled]):hover) .icon{color:var(--highcontrast-close-button-icon-color-hover,var(--luzmo-close-button-icon-color-hover,var(--close-button-icon-color-hover)))}:host([static-color=black]:not([disabled]):hover),:host([static-color=white]:not([disabled]):hover){background-color:var(--highcontrast-close-button-static-background-color-hover,var(--luzmo-close-button-static-background-color-hover,var(--close-button-static-background-color-hover)))}:host([static-color=black]:not([disabled]):hover) .icon,:host([static-color=white]:not([disabled]):hover) .icon{color:var(--highcontrast-close-button-icon-color-default,var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default)))}}:host([static-color=black]:not([disabled]):is(:active,[active])),:host([static-color=white]:not([disabled]):is(:active,[active])){background-color:var(--highcontrast-close-button-static-background-color-down,var(--luzmo-close-button-static-background-color-down,var(--close-button-static-background-color-down)))}:host([static-color=black]:not([disabled]):is(:active,[active])) .icon,:host([static-color=white]:not([disabled]):is(:active,[active])) .icon{color:var(--highcontrast-close-button-icon-color-default,var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default)))}:host([static-color=black][focused]:not([disabled])),:host([static-color=black]:not([disabled]):focus-visible),:host([static-color=white][focused]:not([disabled])),:host([static-color=white]:not([disabled]):focus-visible){background-color:var(--highcontrast-close-button-static-background-color-focus,var(--luzmo-close-button-static-background-color-focus,var(--close-button-static-background-color-focus)))}:host([static-color=black][focused]:not([disabled])) .icon,:host([static-color=black][focused]:not([disabled])) .icon,:host([static-color=black]:not([disabled]):focus) .icon,:host([static-color=black]:not([disabled]):focus-visible) .icon,:host([static-color=white][focused]:not([disabled])) .icon,:host([static-color=white][focused]:not([disabled])) .icon,:host([static-color=white]:not([disabled]):focus) .icon,:host([static-color=white]:not([disabled]):focus-visible) .icon{color:var(--highcontrast-close-button-icon-color-default,var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default)))}:host([static-color=black]:not([disabled])) .icon,:host([static-color=white]:not([disabled])) .icon{color:var(--luzmo-close-button-icon-color-default,var(--close-button-icon-color-default))}:host([static-color=black][disabled]) .icon,:host([static-color=white][disabled]) .icon{color:var(--highcontrast-close-button-icon-disabled,var(--luzmo-close-button-icon-color-disabled,var(--close-button-icon-color-disabled)))}.icon{margin:0}:host{--close-button-background-color-default:transparent;--close-button-background-color-hover:var(--luzmo-background-color-hover);--close-button-background-color-down:var(--luzmo-background-color-down);--close-button-background-color-focus:var(--luzmo-background-color-focus);--close-button-icon-color-default:var(--luzmo-font-color);--close-button-icon-color-hover:var(--luzmo-font-color-hover);--close-button-icon-color-down:var(--luzmo-font-color-down);--close-button-icon-color-focus:var(--luzmo-font-color-focus);--close-button-icon-color-disabled:var(--luzmo-disabled-color);--close-button-focus-indicator-width:var(--luzmo-indicator-width);--close-button-focus-indicator-gap:var(--luzmo-indicator-gap);--close-button-focus-indicator-color:var(--luzmo-indicator-color);--close-button-animation-duration:var(--luzmo-animation-duration);--close-button-size:var(--luzmo-component-height)}:host([static-color=white]){--close-button-static-background-color-default:transparent;--close-button-static-background-color-hover:#fff3;--close-button-static-background-color-down:#fff6;--close-button-static-background-color-focus:#fff3;--close-button-icon-color-default:#fff;--close-button-icon-color-disabled:#fff3;--close-button-focus-indicator-color:#fff}:host([static-color=black]){--close-button-static-background-color-default:transparent;--close-button-static-background-color-hover:#0003;--close-button-static-background-color-down:#0006;--close-button-static-background-color-focus:#0003;--close-button-icon-color-default:#000;--close-button-icon-color-disabled:#0003;--close-button-focus-indicator-color:#000}:host([size=s]){--close-button-size:var(--luzmo-component-height-s);--close-button-icon-size:var(--luzmo-font-size-s)}:host{--close-button-size:var(--luzmo-component-height);--close-button-icon-size:var(--luzmo-font-size)}:host([size=l]){--close-button-size:var(--luzmo-component-height-l);--close-button-icon-size:var(--luzmo-font-size-l)}:host([size=xl]){--close-button-size:var(--luzmo-component-height-xl);--close-button-icon-size:var(--luzmo-font-size-xl)}`,s=e=>r.html` <div class="icon" slot="icon">${(0,a.luzmoIcon)(e===`s`?a.luzmoClose12:e===`l`?a.luzmoClose:a.luzmoClose14)}</div> `,c=class extends t.n(n.t,{noDefaultSize:!0}){constructor(...e){super(...e),this.variant=``}static get styles(){return[...super.styles,(0,r.unsafeCSS)(o)]}get buttonContent(){return[s(this.size)]}};e.t([(0,i.property)({reflect:!0})],c.prototype,`variant`,void 0),e.t([(0,i.property)({reflect:!0,attribute:`static-color`})],c.prototype,`staticColor`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});

package/components/color-area/index.cjs

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