@luzmo/lucero 0.0.3 → 0.0.6

package/components/checkbox-mixin-BRluTF9s.js

@@ -0,0 +1,70 @@
+/*! * 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 { n as h, x as a } from "./base-CxUap9HL.js";
+import { e as p } from "./query-D_KR_GUc.js";
+import { o as d } from "./if-defined-XzWkhMhg.js";
+var l = Object.defineProperty, c = (n, e, r, o) => {
+  for (var t = void 0, i = n.length - 1, s; i >= 0; i--)
+    (s = n[i]) && (t = s(e, r, t) || t);
+  return t && l(e, r, t), t;
+};
+function k(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 o = new CustomEvent("change", {
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0,
+        detail: this.checked
+      });
+      this.dispatchEvent(o) || (this.checked = !this.inputElement.checked, this.inputElement.checked = this.checked);
+    }
+    render() {
+      return a`
+        <input
+          id="input"
+          name=${d(this.name || void 0)}
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.readonly}
+          @change=${this.handleChange}
+        />
+      `;
+    }
+  }
+  return c([
+    h({ type: Boolean, reflect: !0 })
+  ], e.prototype, "checked"), c([
+    h({ type: String, reflect: !0 })
+  ], e.prototype, "name"), c([
+    h({ type: Boolean, reflect: !0 })
+  ], e.prototype, "readonly"), c([
+    p("#input")
+  ], e.prototype, "inputElement"), e;
+}
+export {
+  k as c
+};

package/components/checkbox-mixin-iB-0ivgo.cjs

@@ -0,0 +1,27 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const c=require("./base-rtxi7uaR.cjs"),d=require("./query-BL-TJj7K.cjs"),o=require("./if-defined-C-8FyBSN.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`
+        <input
+          id="input"
+          name=${o.o(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;

package/components/clear-button-CyLF5dx_.js

@@ -0,0 +1,53 @@
+/*! * 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 { luzmoIcon as e, luzmoClear12 as u, luzmoClear16 as i, luzmoClear14 as s } from "@luzmo/icons";
+import { r as b, x as a, n as d } from "./base-CxUap9HL.js";
+import { S as v } from "./sized-mixin-DcJTTohI.js";
+import { B as g } from "./button-base-CgrTYVgq.js";
+const h = ":host{font-size:var(--luzmo-clear-button-icon-size, var(--clear-button-icon-size));cursor:pointer;background-color:initial;background-color:var(--luzmo-clear-button-background-color, transparent);padding:var(--luzmo-clear-button-padding, var(--clear-button-padding));color:var(--luzmo-clear-button-icon-color, var(--clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover: hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover, var(--luzmo-clear-button-icon-color-hover, var(--clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--luzmo-clear-button-background-color-hover, var(--clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--luzmo-clear-button-icon-color-down, var(--clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--luzmo-clear-button-background-color-down, var(--clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within{color:var(--luzmo-clear-button-icon-color-key-focus, var(--clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--luzmo-clear-button-background-color-key-focus, var(--clear-button-background-color-key-focus))}:host([disabled]){--clear-button-icon-color: var( --luzmo-clear-button-icon-color-disabled, var(--disabled-content-color) );--clear-button-background-color: var( --luzmo-clear-button-background-color-disabled, transparent )}.fill{background-color:var(--luzmo-clear-button-background-color, var(--clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors: active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover: Highlight}}:host{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent;--clear-button-icon-size: var(--luzmo-font-size);--clear-button-padding: 0px;--clear-button-icon-color: var(--luzmo-font-color);--clear-button-icon-color-hover: var(--luzmo-font-color-hover);--clear-button-icon-color-down: var(--luzmo-font-color-down);--clear-button-icon-color-key-focus: var(--luzmo-font-color-focus)}:host([size=s]){--clear-button-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--clear-button-icon-size: var(--luzmo-font-size-l)}:host([size=xl]){--clear-button-icon-size: var(--luzmo-font-size-xl)}:host .luzmo-ClearButton--quiet{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent}:host([variant=overBackground]){--clear-button-icon-color: rgb(255, 255, 255);--clear-button-icon-color-hover: rgb(255, 255, 255);--clear-button-icon-color-down: rgb(255, 255, 255);--clear-button-icon-color-key-focus: rgb(255, 255, 255);--clear-button-background-color: transparent;--clear-button-background-color-hover: rgba(255, 255, 255, .25);--clear-button-background-color-down: rgba(255, 255, 255, .4);--clear-button-background-color-key-focus: rgba(255, 255, 255, .25)}:host([disabled]){--clear-button-icon-color: var(--luzmo-disabled-color);--clear-button-icon-color-hover: var(--luzmo-disabled-color);--clear-button-icon-color-down: var(--luzmo-disabled-color);--clear-button-background-color: transparent}:host{box-sizing:border-box}";
+var f = Object.defineProperty, z = (o, t, n, p) => {
+  for (var r = void 0, c = o.length - 1, l; c >= 0; c--)
+    (l = o[c]) && (r = l(t, n, r) || r);
+  return r && f(t, n, r), r;
+};
+const m = (o) => {
+  const t = o === "s" ? u : ["xl", "l"].includes(o) ? i : s;
+  return a` <div class="icon" slot="icon">${e(t)}</div> `;
+};
+class k extends v(g, {
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.variant = "";
+  }
+  static get styles() {
+    return [...super.styles, b(h)];
+  }
+  get buttonContent() {
+    return [m(this.size)];
+  }
+  render() {
+    return a` <div class="fill">${super.render()}</div> `;
+  }
+}
+z([
+  d({ reflect: !0 })
+], k.prototype, "variant");
+export {
+  k as L
+};

package/components/clear-button-DFXE6MLx.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.
+ * */
+"use strict";const c=require("@luzmo/icons"),n=require("./base-rtxi7uaR.cjs"),i=require("./sized-mixin-BAI6NiE2.cjs"),s=require("./button-base-DjqSZyn2.cjs"),b=":host{font-size:var(--luzmo-clear-button-icon-size, var(--clear-button-icon-size));cursor:pointer;background-color:initial;background-color:var(--luzmo-clear-button-background-color, transparent);padding:var(--luzmo-clear-button-padding, var(--clear-button-padding));color:var(--luzmo-clear-button-icon-color, var(--clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover: hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover, var(--luzmo-clear-button-icon-color-hover, var(--clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--luzmo-clear-button-background-color-hover, var(--clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--luzmo-clear-button-icon-color-down, var(--clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--luzmo-clear-button-background-color-down, var(--clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within{color:var(--luzmo-clear-button-icon-color-key-focus, var(--clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--luzmo-clear-button-background-color-key-focus, var(--clear-button-background-color-key-focus))}:host([disabled]){--clear-button-icon-color: var( --luzmo-clear-button-icon-color-disabled, var(--disabled-content-color) );--clear-button-background-color: var( --luzmo-clear-button-background-color-disabled, transparent )}.fill{background-color:var(--luzmo-clear-button-background-color, var(--clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors: active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover: Highlight}}:host{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent;--clear-button-icon-size: var(--luzmo-font-size);--clear-button-padding: 0px;--clear-button-icon-color: var(--luzmo-font-color);--clear-button-icon-color-hover: var(--luzmo-font-color-hover);--clear-button-icon-color-down: var(--luzmo-font-color-down);--clear-button-icon-color-key-focus: var(--luzmo-font-color-focus)}:host([size=s]){--clear-button-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--clear-button-icon-size: var(--luzmo-font-size-l)}:host([size=xl]){--clear-button-icon-size: var(--luzmo-font-size-xl)}:host .luzmo-ClearButton--quiet{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent}:host([variant=overBackground]){--clear-button-icon-color: rgb(255, 255, 255);--clear-button-icon-color-hover: rgb(255, 255, 255);--clear-button-icon-color-down: rgb(255, 255, 255);--clear-button-icon-color-key-focus: rgb(255, 255, 255);--clear-button-background-color: transparent;--clear-button-background-color-hover: rgba(255, 255, 255, .25);--clear-button-background-color-down: rgba(255, 255, 255, .4);--clear-button-background-color-key-focus: rgba(255, 255, 255, .25)}:host([disabled]){--clear-button-icon-color: var(--luzmo-disabled-color);--clear-button-icon-color-hover: var(--luzmo-disabled-color);--clear-button-icon-color-down: var(--luzmo-disabled-color);--clear-button-background-color: transparent}:host{box-sizing:border-box}";var d=Object.defineProperty,v=(o,t,a,h)=>{for(var r=void 0,l=o.length-1,e;l>=0;l--)(e=o[l])&&(r=e(t,a,r)||r);return r&&d(t,a,r),r};const g=o=>{const t=o==="s"?c.luzmoClear12:["xl","l"].includes(o)?c.luzmoClear16:c.luzmoClear14;return n.x` <div class="icon" slot="icon">${c.luzmoIcon(t)}</div> `};class u extends i.SizedMixin(s.ButtonBase,{noDefaultSize:!0}){constructor(){super(...arguments),this.variant=""}static get styles(){return[...super.styles,n.r(b)]}get buttonContent(){return[g(this.size)]}render(){return n.x` <div class="fill">${super.render()}</div> `}}v([n.n({reflect:!0})],u.prototype,"variant");exports.LuzmoClearButton=u;

package/components/close-button-CcD-aVqh.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.
+ * */
+"use strict";const n=require("@luzmo/icons"),l=require("./base-rtxi7uaR.cjs"),u=require("./sized-mixin-BAI6NiE2.cjs");require("./icon/index.cjs");const b=require("./button-base-DjqSZyn2.cjs"),d=':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;border-style:solid;margin:0;-webkit-text-decoration:none;text-decoration:none;overflow:visible}:host(:focus){outline:none}: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);border-width:0;border-color:#0000;flex-direction:row;margin-block-start:var(--luzmo-close-button-margin-top);padding:0;display:inline-flex;position:relative}: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-thickness, var(--close-button-focus-indicator-thickness)) 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]: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]: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-color-disabled);--close-button-focus-indicator-thickness: 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: rgba(255, 255, 255, .2);--close-button-static-background-color-down: rgba(255, 255, 255, .4);--close-button-static-background-color-focus: rgba(255, 255, 255, .2);--close-button-icon-color-default: rgb(255, 255, 255);--close-button-icon-color-disabled: rgba(255, 255, 255, .2);--close-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=black]){--close-button-static-background-color-default: transparent;--close-button-static-background-color-hover: rgba(0, 0, 0, .2);--close-button-static-background-color-down: rgba(0, 0, 0, .4);--close-button-static-background-color-focus: rgba(0, 0, 0, .2);--close-button-icon-color-default: rgb(0, 0, 0);--close-button-icon-color-disabled: rgba(0, 0, 0, .2);--close-button-focus-indicator-color: rgb(0, 0, 0)}: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)}';var h=Object.defineProperty,e=(o,c,s,g)=>{for(var t=void 0,r=o.length-1,i;r>=0;r--)(i=o[r])&&(t=i(c,s,t)||t);return t&&h(c,s,t),t};const v=o=>{const c=o==="s"?n.luzmoClose12:o==="l"?n.luzmoClose16:n.luzmoClose14;return l.x` <div class="icon" slot="icon">${n.luzmoIcon(c)}</div> `};class a extends u.SizedMixin(b.ButtonBase,{noDefaultSize:!0}){constructor(){super(...arguments),this.variant=""}static get styles(){return[...super.styles,l.r(d)]}get buttonContent(){return[v(this.size)]}}e([l.n({reflect:!0})],a.prototype,"variant");e([l.n({reflect:!0,attribute:"static-color"})],a.prototype,"staticColor");exports.LuzmoCloseButton=a;

package/components/close-button-CzpdWCWI.js

@@ -0,0 +1,51 @@
+/*! * 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 { luzmoIcon as e, luzmoClose12 as u, luzmoClose16 as b, luzmoClose14 as d } from "@luzmo/icons";
+import { r as h, x as v, n as r } from "./base-CxUap9HL.js";
+import { S as g } from "./sized-mixin-DcJTTohI.js";
+import "./icon/index.js";
+import { B as f } from "./button-base-CgrTYVgq.js";
+const m = ':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;border-style:solid;margin:0;-webkit-text-decoration:none;text-decoration:none;overflow:visible}:host(:focus){outline:none}: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);border-width:0;border-color:#0000;flex-direction:row;margin-block-start:var(--luzmo-close-button-margin-top);padding:0;display:inline-flex;position:relative}: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-thickness, var(--close-button-focus-indicator-thickness)) 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]: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]: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-color-disabled);--close-button-focus-indicator-thickness: 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: rgba(255, 255, 255, .2);--close-button-static-background-color-down: rgba(255, 255, 255, .4);--close-button-static-background-color-focus: rgba(255, 255, 255, .2);--close-button-icon-color-default: rgb(255, 255, 255);--close-button-icon-color-disabled: rgba(255, 255, 255, .2);--close-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=black]){--close-button-static-background-color-default: transparent;--close-button-static-background-color-hover: rgba(0, 0, 0, .2);--close-button-static-background-color-down: rgba(0, 0, 0, .4);--close-button-static-background-color-focus: rgba(0, 0, 0, .2);--close-button-icon-color-default: rgb(0, 0, 0);--close-button-icon-color-disabled: rgba(0, 0, 0, .2);--close-button-focus-indicator-color: rgb(0, 0, 0)}: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)}';
+var z = Object.defineProperty, s = (o, c, l, w) => {
+  for (var t = void 0, n = o.length - 1, a; n >= 0; n--)
+    (a = o[n]) && (t = a(c, l, t) || t);
+  return t && z(c, l, t), t;
+};
+const k = (o) => v` <div class="icon" slot="icon">${e(o === "s" ? u : o === "l" ? b : d)}</div> `;
+class i extends g(f, {
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.variant = "";
+  }
+  static get styles() {
+    return [...super.styles, h(m)];
+  }
+  get buttonContent() {
+    return [k(this.size)];
+  }
+}
+s([
+  r({ reflect: !0 })
+], i.prototype, "variant");
+s([
+  r({ reflect: !0, attribute: "static-color" })
+], i.prototype, "staticColor");
+export {
+  i as L
+};

package/components/color-Bg3tYsAQ.js

@@ -0,0 +1,178 @@
+/*! * 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 c } from "./index-C1chwzNp.js";
+const _ = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, S = /(^hs[v|l]a?\()\d{1,3}/, g = (p, s) => s ? p.toHexString() : p.toHex();
+class C {
+  constructor(s, {
+    applyColorToState: i,
+    extractColorFromState: e,
+    maintains: h
+  }) {
+    this.maintains = "hue", this._hue = 0, this._opacity = 1, this.getColorProcesses = {
+      rgb: (t, o) => o ? t.toRgbString() : t.toRgb(),
+      prgb: (t, o) => o ? t.toPercentageRgbString() : t.toPercentageRgb(),
+      hex8: (t, o) => o ? t.toHex8String() : t.toHex8(),
+      name: (t) => t.toName() || t.toRgbString(),
+      hsl: (t, o) => {
+        if (this.maintains === "hue") {
+          if (o)
+            return t.toHslString().replace(S, `$1${this.hue}`);
+          const { s: a, l: u, a: v } = t.toHsl();
+          return { h: this.hue, s: a, l: u, a: v };
+        }
+        if (o)
+          return t.toHslString().replace(
+            f,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        const { s: r, l: n, a: l } = t.toHsl();
+        return { h: this.hue, s: r, l: n, a: l };
+      },
+      hsv: (t, o) => {
+        if (this.maintains === "hue") {
+          if (o)
+            return t.toHsvString().replace(S, `$1${this.hue}`);
+          const { s: a, v: u, a: v } = t.toHsv();
+          return { h: this.hue, s: a, v: u, a: v };
+        }
+        if (o)
+          return t.toHsvString().replace(
+            f,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        const { s: r, v: n, a: l } = t.toHsv();
+        return { h: this.hue, s: r, v: n, a: l };
+      },
+      hex: g,
+      hex3: g,
+      hex4: g,
+      hex6: g
+    }, this._color = new c({ h: 0, s: 1, v: 1 }), this._previousColor = new c({ h: 0, s: 1, v: 1 }), this._format = {
+      format: "",
+      isString: !1
+    }, this.host = s, this.applyColorToState = i, this.extractColorFromState = e, this.maintains = h || this.maintains;
+  }
+  setColorProcess(s, i, e, h) {
+    this.maintains === "hue" ? this.setColorMaintainHue(s, i, e, h) : this.maintains === "saturation" && this.setColorMaintainSaturation(
+      s,
+      i,
+      e,
+      h
+    );
+  }
+  setColorMaintainHue(s, i, e, h) {
+    const { h: t, s: o, v: r, a: n } = this._color.toHsv();
+    let l;
+    if (h && e.startsWith("hs")) {
+      const a = _.exec(i);
+      if (a !== null) {
+        const [, u] = a;
+        l = Number(u);
+      }
+    } else if (!h && e.startsWith("hs")) {
+      const a = s.originalInput;
+      l = Object.values(a)[0];
+    }
+    this.hue = l || t, this.opacity = n ?? 1, this.applyColorToState({ h: t, s: o, v: r, a: n });
+  }
+  setColorMaintainSaturation(s, i, e, h) {
+    const { a: t } = this._color.toHsv();
+    if (h && e.startsWith("hs")) {
+      const o = _.exec(i);
+      if (o !== null) {
+        const [, r, n] = o;
+        this.hue = Number(r), this.saturation = Number(n);
+      }
+    } else if (!h && e.startsWith("hs")) {
+      const o = s.originalInput, r = Object.values(o);
+      this.hue = r[0], this.saturation = r[1];
+    } else {
+      const { h: o } = s.toHsv();
+      this.hue = o;
+    }
+    this.opacity = t ?? 1, this.applyColorToState(s.toHsv());
+  }
+  applyColorFromState() {
+    this._color = new c(this.extractColorFromState(this));
+  }
+  get hue() {
+    return this._hue;
+  }
+  set hue(s) {
+    const i = Math.min(360, Math.max(0, s));
+    if (i === this.hue)
+      return;
+    const e = this.hue, { s: h, v: t, a: o } = this._color.toHsv();
+    this._color = new c({ h: i, s: h, v: t, a: o }), this._hue = i, this.host.requestUpdate("hue", e);
+  }
+  get opacity() {
+    return this._opacity;
+  }
+  set opacity(s) {
+    const i = Math.min(1, Math.max(0, s));
+    if (i === this.opacity)
+      return;
+    const e = this.opacity, { h, s: t, v: o } = this._color.toHsv();
+    this._color = new c({ h, s: t, v: o, a: i }), this._opacity = i, this.host.requestUpdate("opacity", e);
+  }
+  /* c8 ignore next 3 */
+  get value() {
+    return this.color;
+  }
+  get color() {
+    return this.getColorProcesses[this._format.format || "hex"](
+      this._color,
+      this._format.isString
+    );
+  }
+  set color(s) {
+    if (s === this.color)
+      return;
+    const i = this._color;
+    this._color = new c(s);
+    const e = this._color.format;
+    let h = typeof s == "string" || s instanceof String;
+    e.startsWith("hex") && (h = s.startsWith("#")), this._format = {
+      format: e,
+      isString: h
+    }, this.setColorProcess(this._color, s, e, h), this.host.requestUpdate("color", i);
+  }
+  getColor(s) {
+    const i = {
+      hsl: "toHsl"
+    };
+    return this._color[i[s]]();
+  }
+  setColor(s) {
+    this._color = s;
+    const i = typeof this._color.originalInput == "string" || this._color.originalInput instanceof String;
+    this.setColorProcess(this._color, s, this._color.format, i);
+  }
+  getHslString() {
+    return this._color.toHslString();
+  }
+  savePreviousColor() {
+    this._previousColor = this._color.clone();
+  }
+  restorePreviousColor() {
+    this.setColor(this._previousColor);
+  }
+}
+export {
+  C
+};

package/components/color-DphK4hwx.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.
+ * */
+"use strict";const c=require("./index-DCKCHDTt.cjs"),_=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,f=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,S=/(^hs[v|l]a?\()\d{1,3}/,g=(p,s)=>s?p.toHexString():p.toHex();class H{constructor(s,{applyColorToState:i,extractColorFromState:e,maintains:r}){this.maintains="hue",this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(t,o)=>o?t.toRgbString():t.toRgb(),prgb:(t,o)=>o?t.toPercentageRgbString():t.toPercentageRgb(),hex8:(t,o)=>o?t.toHex8String():t.toHex8(),name:t=>t.toName()||t.toRgbString(),hsl:(t,o)=>{if(this.maintains==="hue"){if(o)return t.toHslString().replace(S,`$1${this.hue}`);const{s:n,l:u,a:v}=t.toHsl();return{h:this.hue,s:n,l:u,a:v}}if(o)return t.toHslString().replace(f,`$1${this.hue}$2${this.saturation}`);const{s:h,l:a,a:l}=t.toHsl();return{h:this.hue,s:h,l:a,a:l}},hsv:(t,o)=>{if(this.maintains==="hue"){if(o)return t.toHsvString().replace(S,`$1${this.hue}`);const{s:n,v:u,a:v}=t.toHsv();return{h:this.hue,s:n,v:u,a:v}}if(o)return t.toHsvString().replace(f,`$1${this.hue}$2${this.saturation}`);const{s:h,v:a,a:l}=t.toHsv();return{h:this.hue,s:h,v:a,a:l}},hex:g,hex3:g,hex4:g,hex6:g},this._color=new c.TinyColor({h:0,s:1,v:1}),this._previousColor=new c.TinyColor({h:0,s:1,v:1}),this._format={format:"",isString:!1},this.host=s,this.applyColorToState=i,this.extractColorFromState=e,this.maintains=r||this.maintains}setColorProcess(s,i,e,r){this.maintains==="hue"?this.setColorMaintainHue(s,i,e,r):this.maintains==="saturation"&&this.setColorMaintainSaturation(s,i,e,r)}setColorMaintainHue(s,i,e,r){const{h:t,s:o,v:h,a}=this._color.toHsv();let l;if(r&&e.startsWith("hs")){const n=_.exec(i);if(n!==null){const[,u]=n;l=Number(u)}}else if(!r&&e.startsWith("hs")){const n=s.originalInput;l=Object.values(n)[0]}this.hue=l||t,this.opacity=a??1,this.applyColorToState({h:t,s:o,v:h,a})}setColorMaintainSaturation(s,i,e,r){const{a:t}=this._color.toHsv();if(r&&e.startsWith("hs")){const o=_.exec(i);if(o!==null){const[,h,a]=o;this.hue=Number(h),this.saturation=Number(a)}}else if(!r&&e.startsWith("hs")){const o=s.originalInput,h=Object.values(o);this.hue=h[0],this.saturation=h[1]}else{const{h:o}=s.toHsv();this.hue=o}this.opacity=t??1,this.applyColorToState(s.toHsv())}applyColorFromState(){this._color=new c.TinyColor(this.extractColorFromState(this))}get hue(){return this._hue}set hue(s){const i=Math.min(360,Math.max(0,s));if(i===this.hue)return;const e=this.hue,{s:r,v:t,a:o}=this._color.toHsv();this._color=new c.TinyColor({h:i,s:r,v:t,a:o}),this._hue=i,this.host.requestUpdate("hue",e)}get opacity(){return this._opacity}set opacity(s){const i=Math.min(1,Math.max(0,s));if(i===this.opacity)return;const e=this.opacity,{h:r,s:t,v:o}=this._color.toHsv();this._color=new c.TinyColor({h:r,s:t,v:o,a:i}),this._opacity=i,this.host.requestUpdate("opacity",e)}get value(){return this.color}get color(){return this.getColorProcesses[this._format.format||"hex"](this._color,this._format.isString)}set color(s){if(s===this.color)return;const i=this._color;this._color=new c.TinyColor(s);const e=this._color.format;let r=typeof s=="string"||s instanceof String;e.startsWith("hex")&&(r=s.startsWith("#")),this._format={format:e,isString:r},this.setColorProcess(this._color,s,e,r),this.host.requestUpdate("color",i)}getColor(s){const i={hsl:"toHsl"};return this._color[i[s]]()}setColor(s){this._color=s;const i=typeof this._color.originalInput=="string"||this._color.originalInput instanceof String;this.setColorProcess(this._color,s,this._color.format,i)}getHslString(){return this._color.toHslString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this.setColor(this._previousColor)}}exports.ColorController=H;

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

@@ -0,0 +1,67 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import './../color-handle';
+import { LuzmoElement } from '../../utils/base';
+import { ColorValue } from '../../utils/reactive-controllers/color';
+/**
+ * @element luzmo-color-area
+ * @slot gradient - a custom gradient visually outlining the available color values
+ * @fires input - The value of the Color Area has changed.
+ * @fires change - An alteration to the value of the Color Area has been committed by the user.
+ */
+export declare class LuzmoColorArea extends LuzmoElement {
+    static get styles(): CSSResultArray;
+    dir: 'ltr' | 'rtl';
+    disabled: boolean;
+    focused: boolean;
+    labelX: string;
+    labelY: string;
+    isLTR: boolean;
+    private handle;
+    private languageResolver;
+    private colorController;
+    get hue(): number;
+    set hue(value: number);
+    get value(): ColorValue;
+    get color(): ColorValue;
+    set color(color: ColorValue);
+    private activeAxis;
+    get x(): number;
+    set x(x: number);
+    private _x;
+    get y(): number;
+    set y(y: number);
+    private _y;
+    step: number;
+    inputX: HTMLInputElement;
+    inputY: HTMLInputElement;
+    private altered;
+    private activeKeys;
+    private _valueChanged;
+    focus(focusOptions?: FocusOptions): void;
+    private forwardFocus;
+    private handleFocus;
+    handleBlur(): void;
+    private handleKeydown;
+    private handleKeypress;
+    private handleKeyup;
+    private handleInput;
+    private handleChange;
+    private boundingClientRect;
+    _pointerDown: boolean;
+    private handlePointerdown;
+    private handlePointermove;
+    private handlePointerup;
+    /**
+     * Returns the value under the cursor
+     * @param: PointerEvent on slider
+     * @return: Slider value that correlates to the position under the pointer
+     */
+    private calculateHandlePosition;
+    private handleAreaPointerdown;
+    protected render(): TemplateResult;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}