@luzmo/lucero 0.0.3 → 0.0.4

package/lib/color-picker/index.cjs

@@ -0,0 +1,48 @@
+/*! * 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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-BCmA9Wxv.cjs"),c=require("../sized-mixin-BSYHt8nT.cjs"),s=require("lit"),d=require("../state-DReJ3hB6.cjs"),h=require("../query-BL-TJj7K.cjs");require("../overlay/index.cjs");const m=require("../slottable-request-event-BfUUt1Mh.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");require("../color-menu/index.cjs");const v="luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";var g=Object.defineProperty,t=(p,r,n,z)=>{for(var l=void 0,i=p.length-1,u;i>=0;i--)(u=p[i])&&(l=u(r,n,l)||l);return l&&g(r,n,l),l};const a=class a extends c.SizedMixin(o.LuzmoElement){constructor(){super(...arguments),this.color="rgb(255, 0, 0)",this.open=!1,this.disabled=!1,this.placement="left-start",this.rounding="full",this.swatches=[],this.noAlphaChannel=!1,this._renderMenu=!1}overlayCloseEvent(r){this.open=!1}overlayOpenEvent(r){this.open=!0}handleColorChange(r){this.color=this.menuElement.color,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}firstUpdated(r){this.overlayElement.addEventListener("slottable-request",n=>{this._renderMenu=n.data!==m.removeSlottableRequest})}updated(r){r.has("open")&&this.open===!0&&(this._renderMenu=!0)}renderColorMenu(){return s.html`
+      <luzmo-color-menu
+        .size=${this.size}
+        .color=${this.color}
+        .noAlphaChannel=${this.noAlphaChannel}
+        .swatches=${this.swatches}
+        @change=${this.handleColorChange}
+      ></luzmo-color-menu>
+    `}render(){return s.html`
+      <luzmo-swatch
+        id="trigger"
+        .shape=${this.shape}
+        .rounding=${this.rounding}
+        .size=${this.size}
+        .color=${this.color}
+        .selected=${this.open&&!this.disabled}
+        ?disabled=${this.disabled}
+        @luzmo-closed=${this.overlayCloseEvent}
+        @luzmo-opened=${this.overlayOpenEvent}
+      ></luzmo-swatch>
+      <luzmo-overlay
+        trigger=${this.disabled?"":"trigger@click"}
+        type="auto"
+        .placement=${this.placement}
+        type="page"
+      >
+        <luzmo-popover style="position:relative">
+          ${this._renderMenu?this.renderColorMenu():s.html``}
+        </luzmo-popover>
+      </luzmo-overlay>
+    `}};a.styles=s.unsafeCSS(v);let e=a;t([o.n({type:String,reflect:!0})],e.prototype,"color");t([o.n({type:Boolean,reflect:!0})],e.prototype,"open");t([o.n({type:Boolean,reflect:!0})],e.prototype,"disabled");t([o.n({type:String,reflect:!0})],e.prototype,"placement");t([o.n({type:String,reflect:!0})],e.prototype,"rounding");t([o.n({type:String,reflect:!0})],e.prototype,"shape");t([o.n({type:Array,reflect:!0})],e.prototype,"swatches");t([o.n({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],e.prototype,"noAlphaChannel");t([h.e("luzmo-color-menu")],e.prototype,"menuElement");t([h.e("luzmo-overlay")],e.prototype,"overlayElement");t([d.r()],e.prototype,"_renderMenu");customElements.get("luzmo-color-picker")||customElements.define("luzmo-color-picker",e);exports.LuzmoColorPicker=e;

package/lib/color-picker/index.js

@@ -0,0 +1,142 @@
+/*! * 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 { L as z, n as l } from "../base-nYalvNMy.js";
+import { S as d } from "../sized-mixin-Dl0KoEcV.js";
+import { unsafeCSS as h, html as a } from "lit";
+import { r as g } from "../state-BAO-13Bs.js";
+import { e as c } from "../query-D_KR_GUc.js";
+import "../overlay/index.js";
+import { r as f } from "../slottable-request-event-DggLA4Rx.js";
+import "../popover/index.js";
+import "../swatch/index.js";
+import "../color-menu/index.js";
+const p = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const t = document.createElement("style");
+    t.setAttribute("data-luzmo-vars", ""), t.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(t);
+  }
+};
+p();
+const b = "luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";
+var v = Object.defineProperty, e = (t, r, i, x) => {
+  for (var n = void 0, u = t.length - 1, s; u >= 0; u--)
+    (s = t[u]) && (n = s(r, i, n) || n);
+  return n && v(r, i, n), n;
+};
+const m = class m extends d(z) {
+  constructor() {
+    super(...arguments), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
+  }
+  overlayCloseEvent(r) {
+    this.open = !1;
+  }
+  overlayOpenEvent(r) {
+    this.open = !0;
+  }
+  handleColorChange(r) {
+    this.color = this.menuElement.color, this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  firstUpdated(r) {
+    this.overlayElement.addEventListener("slottable-request", (i) => {
+      this._renderMenu = i.data !== f;
+    });
+  }
+  updated(r) {
+    r.has("open") && this.open === !0 && (this._renderMenu = !0);
+  }
+  renderColorMenu() {
+    return a`
+      <luzmo-color-menu
+        .size=${this.size}
+        .color=${this.color}
+        .noAlphaChannel=${this.noAlphaChannel}
+        .swatches=${this.swatches}
+        @change=${this.handleColorChange}
+      ></luzmo-color-menu>
+    `;
+  }
+  render() {
+    return a`
+      <luzmo-swatch
+        id="trigger"
+        .shape=${this.shape}
+        .rounding=${this.rounding}
+        .size=${this.size}
+        .color=${this.color}
+        .selected=${this.open && !this.disabled}
+        ?disabled=${this.disabled}
+        @luzmo-closed=${this.overlayCloseEvent}
+        @luzmo-opened=${this.overlayOpenEvent}
+      ></luzmo-swatch>
+      <luzmo-overlay
+        trigger=${this.disabled ? "" : "trigger@click"}
+        type="auto"
+        .placement=${this.placement}
+        type="page"
+      >
+        <luzmo-popover style="position:relative">
+          ${this._renderMenu ? this.renderColorMenu() : a``}
+        </luzmo-popover>
+      </luzmo-overlay>
+    `;
+  }
+};
+m.styles = h(b);
+let o = m;
+e([
+  l({ type: String, reflect: !0 })
+], o.prototype, "color");
+e([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "open");
+e([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+e([
+  l({ type: String, reflect: !0 })
+], o.prototype, "placement");
+e([
+  l({ type: String, reflect: !0 })
+], o.prototype, "rounding");
+e([
+  l({ type: String, reflect: !0 })
+], o.prototype, "shape");
+e([
+  l({ type: Array, reflect: !0 })
+], o.prototype, "swatches");
+e([
+  l({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
+], o.prototype, "noAlphaChannel");
+e([
+  c("luzmo-color-menu")
+], o.prototype, "menuElement");
+e([
+  c("luzmo-overlay")
+], o.prototype, "overlayElement");
+e([
+  g()
+], o.prototype, "_renderMenu");
+customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", o);
+export {
+  o as LuzmoColorPicker
+};

package/lib/color-slider/index.cjs

@@ -0,0 +1,57 @@
+/*! * 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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("lit"),l=require("../base-BCmA9Wxv.cjs"),b=require("../query-BL-TJj7K.cjs"),d=require("../if-defined-Cv6xanXh.cjs"),m=require("../style-map-BjBGQ_u3.cjs");require("../color-handle/index.cjs");const g=require("../focusable-Dv_6CFaY.cjs"),v=require("../color-DphK4hwx.cjs"),p=require("../streaming-listener-Bw4jE33f.cjs"),h=require("../index-DCKCHDTt.cjs"),f='.opacity-checkerboard{position:absolute;block-size:100%;inline-size:100%;background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-color-loupe-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-color-loupe-checkerboard-position, left top)/calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2)}:host{--luzmo-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors: active){:host{--highcontrast-color-slider-border-color: CanvasText;--highcontrast-color-slider-border-color-disabled: GrayText;--highcontrast-color-slider-background-color-disabled: Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius: var( --luzmo-color-slider-handle-hitarea-border-radius, 0px );min-inline-size:var(--luzmo-color-slider-minimum-length, 80px);inline-size:var(--luzmo-color-slider-length, 192px);block-size:var(--luzmo-color-slider-control-track-width, 24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height, var(--luzmo-color-slider-minimum-length, 80px));block-size:var(--luzmo-color-slider-vertical-height, var(--luzmo-color-slider-length, 192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width, var(--luzmo-color-slider-control-track-height, 24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color, var(--luzmo-color-slider-border-color, var(--luzmo-border-color)) )}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width, var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s));position:absolute;top:0;right:0;bottom:0;left:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color-disabled, var(--luzmo-color-slider-border-color-disabled, var(--luzmo-dimmed-color)) );background:var(--highcontrast-color-slider-background-color-disabled, var(--luzmo-color-slider-background-color-disabled, var(--luzmo-dimmed-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.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}';var y=Object.defineProperty,z=Object.getOwnPropertyDescriptor,i=(c,e,t,o)=>{for(var s=o>1?void 0:o?z(e,t):e,a=c.length-1,n;a>=0;a--)(n=c[a])&&(s=(o?n(e,t,s):n(s))||s);return o&&s&&y(e,t,s),s};class r extends g.Focusable{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.label="hue",this.vertical=!1,this.languageResolver=new p.LanguageResolutionController(this),this.colorController=new v.ColorController(this,{applyColorToState:()=>{if(this.mode==="opacity"){const e=new h.TinyColor(this.colorController.color);this.sliderHandlePosition=100*e.getAlpha()}else this.sliderHandlePosition=100*(this.colorController.hue/360)},extractColorFromState:e=>this.mode==="opacity"?{...e.getColor("hsl"),a:this.value}:{...e.getColor("hsl"),h:this.value},maintains:"saturation"}),this.sliderHandlePosition=0,this.step=1,this.isLTR=!0,this._altered=0,this._pointerDown=!1}static get styles(){return[u.unsafeCSS(f)]}get value(){return this.mode==="opacity"?this.colorController.opacity:this.colorController.hue}set value(e){this.mode==="opacity"?this.colorController.opacity=e:this.colorController.hue=e}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get altered(){return this._altered}set altered(e){this._altered=e,this.step=Math.max(1,this.altered*10)}get focusElement(){return this.input}handleKeydown(e){const{key:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(n=>!!n).length;let o=0;switch(t){case"ArrowUp":{o=this.step;break}case"ArrowDown":{o=-this.step;break}case"ArrowLeft":{o=this.step*(this.isLTR?-1:1);break}case"ArrowRight":{o=this.step*(this.isLTR?1:-1);break}default:return}e.preventDefault();const a=100/(this.mode==="opacity"?100:360);this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+o*a)),this.value=this.mode==="opacity"?Math.min(1,Math.max(0,this.value+o/100)):Math.min(360,Math.max(0,this.value+o)),this.colorController.applyColorFromState(),o!==0&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleInput(e){const{valueAsNumber:t}=e.target;this.value=t,this.sliderHandlePosition=100*(this.mode==="opacity"?this.value:this.value/360),this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.input.focus()}handleFocus(){this.focused=!0}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1)}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){this.sliderHandlePosition=this.calculateHandlePosition(e),this.value=(this.mode==="opacity"?1:360)*(this.sliderHandlePosition/100),this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor(),this.focus(),e.pointerType==="mouse"&&(this.focused=!1)}calculateHandlePosition(e){if(!this.boundingClientRect)return this.sliderHandlePosition;const t=this.boundingClientRect,o=this.vertical?t.top:t.left,s=this.vertical?e.clientY:e.clientX,a=this.vertical?t.height:t.width,n=Math.max(0,Math.min(1,(s-o)/a));return this.vertical||!this.isLTR?100-100*n:100*n}handleGradientPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}get handlePositionStyles(){return`${this.vertical?"inset-block-end":"inset-inline-start"}: ${this.sliderHandlePosition}%`}get getColorSliderStyle(){const e=this.vertical?"top":"right";if(this.mode==="opacity"){const t=new h.TinyColor(this.colorController.color).setAlpha(1).toRgbString();return{background:`linear-gradient(to ${e}, transparent, ${t})`}}return{background:`linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`}}render(){return u.html`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${m.o(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${d.o(this.focused?void 0:"0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.mode==="opacity"?this.color:"hsl("+this.value+", 100%, 50%)"}
+        ?disabled=${this.disabled}
+        style=${this.handlePositionStyles}
+        ${p.streamingListener({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
+      ></luzmo-color-handle>
+      <input
+        type="range"
+        class="slider"
+        min="0"
+        max=${this.mode==="opacity"?"100":"360"}
+        aria-orientation=${d.o(this.vertical?"vertical":void 0)}
+        orient=${d.o(this.vertical?"vertical":void 0)}
+        step=${this.step}
+        aria-label=${this.label}
+        .value=${String(this.mode==="opacity"?this.value*100:this.value)}
+        aria-valuetext=${`${new Intl.NumberFormat(this.languageResolver.language,{maximumFractionDigits:0,minimumIntegerDigits:1,style:"unit",unit:this.mode==="opacity"?"percent":"degree",unitDisplay:"narrow"}).format(this.mode==="opacity"?this.value*100:this.value)}`}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
+      />
+    `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur)}updated(e){e.has("mode")&&(this.handle.style.insetInlineStart="",this.handle.style.insetBlockEnd="",this.mode==="opacity"&&(this.colorController.color=new h.TinyColor(this.colorController.color).toRgbString(),this.handle.style.insetInlineStart=100*this.colorController.opacity+"%"))}}i([l.n({type:String,reflect:!0})],r.prototype,"dir",2);i([l.n({type:String,reflect:!0})],r.prototype,"mode",2);i([l.n({type:Boolean,reflect:!0})],r.prototype,"disabled",2);i([l.n({type:Boolean,reflect:!0})],r.prototype,"focused",2);i([b.e(".handle")],r.prototype,"handle",2);i([l.n({type:String})],r.prototype,"label",2);i([l.n({type:Boolean,reflect:!0})],r.prototype,"vertical",2);i([l.n({type:Number})],r.prototype,"value",1);i([l.n({type:Number,reflect:!0})],r.prototype,"sliderHandlePosition",2);i([l.n({type:String})],r.prototype,"color",1);i([l.n({type:Number})],r.prototype,"step",2);i([l.n({type:Boolean,attribute:"is-ltr"})],r.prototype,"isLTR",2);i([b.e("input")],r.prototype,"input",2);customElements.get("luzmo-color-slider")||customElements.define("luzmo-color-slider",r);exports.LuzmoColorSlider=r;

package/lib/color-slider/index.js

@@ -0,0 +1,318 @@
+/*! * 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 { unsafeCSS as p, html as b } from "lit";
+import { n as i } from "../base-nYalvNMy.js";
+import { e as h } from "../query-D_KR_GUc.js";
+import { o as d } from "../if-defined-CYpcjGCb.js";
+import { o as g } from "../style-map-BqvQDFJt.js";
+import "../color-handle/index.js";
+import { F as z } from "../focusable-DbUg-3Vp.js";
+import { C as f } from "../color-Bg3tYsAQ.js";
+import { L as v, s as y } from "../streaming-listener-DLo0wkMc.js";
+import { T as u } from "../index-C1chwzNp.js";
+const m = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const a = document.createElement("style");
+    a.setAttribute("data-luzmo-vars", ""), a.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(a);
+  }
+};
+m();
+const x = '.opacity-checkerboard{position:absolute;block-size:100%;inline-size:100%;background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-color-loupe-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-color-loupe-checkerboard-position, left top)/calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2)}:host{--luzmo-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors: active){:host{--highcontrast-color-slider-border-color: CanvasText;--highcontrast-color-slider-border-color-disabled: GrayText;--highcontrast-color-slider-background-color-disabled: Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius: var( --luzmo-color-slider-handle-hitarea-border-radius, 0px );min-inline-size:var(--luzmo-color-slider-minimum-length, 80px);inline-size:var(--luzmo-color-slider-length, 192px);block-size:var(--luzmo-color-slider-control-track-width, 24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height, var(--luzmo-color-slider-minimum-length, 80px));block-size:var(--luzmo-color-slider-vertical-height, var(--luzmo-color-slider-length, 192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width, var(--luzmo-color-slider-control-track-height, 24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color, var(--luzmo-color-slider-border-color, var(--luzmo-border-color)) )}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width, var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s));position:absolute;top:0;right:0;bottom:0;left:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color-disabled, var(--luzmo-color-slider-border-color-disabled, var(--luzmo-dimmed-color)) );background:var(--highcontrast-color-slider-background-color-disabled, var(--luzmo-color-slider-background-color-disabled, var(--luzmo-dimmed-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.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}';
+var w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (a, o, e, r) => {
+  for (var s = r > 1 ? void 0 : r ? k(o, e) : o, c = a.length - 1, n; c >= 0; c--)
+    (n = a[c]) && (s = (r ? n(o, e, s) : n(s)) || s);
+  return r && s && w(o, e, s), s;
+};
+class t extends z {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new v(this), this.colorController = new f(this, {
+      /* c8 ignore next 3 */
+      applyColorToState: () => {
+        if (this.mode === "opacity") {
+          const o = new u(this.colorController.color);
+          this.sliderHandlePosition = 100 * o.getAlpha();
+        } else
+          this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
+      },
+      extractColorFromState: (o) => this.mode === "opacity" ? {
+        ...o.getColor("hsl"),
+        a: this.value
+      } : {
+        ...o.getColor("hsl"),
+        h: this.value
+      },
+      maintains: "saturation"
+    }), this.sliderHandlePosition = 0, this.step = 1, this.isLTR = !0, this._altered = 0, this._pointerDown = !1;
+  }
+  static get styles() {
+    return [p(x)];
+  }
+  get value() {
+    return this.mode === "opacity" ? this.colorController.opacity : this.colorController.hue;
+  }
+  set value(o) {
+    this.mode === "opacity" ? this.colorController.opacity = o : this.colorController.hue = o;
+  }
+  get color() {
+    return this.colorController.color;
+  }
+  set color(o) {
+    this.colorController.color = o;
+  }
+  get altered() {
+    return this._altered;
+  }
+  set altered(o) {
+    this._altered = o, this.step = Math.max(1, this.altered * 10);
+  }
+  get focusElement() {
+    return this.input;
+  }
+  handleKeydown(o) {
+    const { key: e } = o;
+    this.focused = !0, this.altered = [o.shiftKey, o.ctrlKey, o.altKey].filter(
+      (n) => !!n
+    ).length;
+    let r = 0;
+    switch (e) {
+      case "ArrowUp": {
+        r = this.step;
+        break;
+      }
+      case "ArrowDown": {
+        r = -this.step;
+        break;
+      }
+      case "ArrowLeft": {
+        r = this.step * (this.isLTR ? -1 : 1);
+        break;
+      }
+      case "ArrowRight": {
+        r = this.step * (this.isLTR ? 1 : -1);
+        break;
+      }
+      default:
+        return;
+    }
+    o.preventDefault();
+    const c = 100 / (this.mode === "opacity" ? 100 : 360);
+    this.sliderHandlePosition = Math.min(
+      100,
+      Math.max(0, this.sliderHandlePosition + r * c)
+    ), this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + r / 100)) : Math.min(360, Math.max(0, this.value + r)), this.colorController.applyColorFromState(), r !== 0 && (this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  handleInput(o) {
+    const { valueAsNumber: e } = o.target;
+    this.value = e, this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360), this.colorController.applyColorFromState();
+  }
+  handleChange(o) {
+    this.handleInput(o), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  focus(o = {}) {
+    super.focus(o), this.forwardFocus();
+  }
+  forwardFocus() {
+    this.input.focus();
+  }
+  handleFocus() {
+    this.focused = !0;
+  }
+  handleBlur() {
+    this._pointerDown || (this.altered = 0, this.focused = !1);
+  }
+  handlePointerdown(o) {
+    if (o.button !== 0) {
+      o.preventDefault();
+      return;
+    }
+    this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), o.target.setPointerCapture(o.pointerId), o.pointerType === "mouse" && (this.focused = !0);
+  }
+  handlePointermove(o) {
+    this.sliderHandlePosition = this.calculateHandlePosition(o), this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100), this.colorController.applyColorFromState(), this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  handlePointerup(o) {
+    this._pointerDown = !1, o.target.releasePointerCapture(o.pointerId), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || this.colorController.restorePreviousColor(), this.focus(), o.pointerType === "mouse" && (this.focused = !1);
+  }
+  /**
+   * Returns the value under the cursor
+   * @param: PointerEvent on slider
+   * @return: Slider value that correlates to the position under the pointer
+   */
+  calculateHandlePosition(o) {
+    if (!this.boundingClientRect)
+      return this.sliderHandlePosition;
+    const e = this.boundingClientRect, r = this.vertical ? e.top : e.left, s = this.vertical ? o.clientY : o.clientX, c = this.vertical ? e.height : e.width, n = Math.max(0, Math.min(1, (s - r) / c));
+    return this.vertical || !this.isLTR ? 100 - 100 * n : 100 * n;
+  }
+  handleGradientPointerdown(o) {
+    o.button === 0 && (o.stopPropagation(), o.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", o)), this.handlePointermove(o));
+  }
+  get handlePositionStyles() {
+    return `${this.vertical ? "inset-block-end" : "inset-inline-start"}: ${this.sliderHandlePosition}%`;
+  }
+  get getColorSliderStyle() {
+    const o = this.vertical ? "top" : "right";
+    if (this.mode === "opacity") {
+      const e = new u(this.colorController.color).setAlpha(1).toRgbString();
+      return {
+        background: `linear-gradient(to ${o}, transparent, ${e})`
+      };
+    }
+    return {
+      background: `linear-gradient(to ${o}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`
+    };
+  }
+  render() {
+    return b`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${g(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${d(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
+        ?disabled=${this.disabled}
+        style=${this.handlePositionStyles}
+        ${y({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
+      ></luzmo-color-handle>
+      <input
+        type="range"
+        class="slider"
+        min="0"
+        max=${this.mode === "opacity" ? "100" : "360"}
+        aria-orientation=${d(this.vertical ? "vertical" : void 0)}
+        orient=${d(this.vertical ? "vertical" : void 0)}
+        step=${this.step}
+        aria-label=${this.label}
+        .value=${String(
+      this.mode === "opacity" ? this.value * 100 : this.value
+    )}
+        aria-valuetext=${`${new Intl.NumberFormat(
+      this.languageResolver.language,
+      {
+        maximumFractionDigits: 0,
+        minimumIntegerDigits: 1,
+        style: "unit",
+        unit: this.mode === "opacity" ? "percent" : "degree",
+        unitDisplay: "narrow"
+      }
+    ).format(this.mode === "opacity" ? this.value * 100 : this.value)}`}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
+      />
+    `;
+  }
+  firstUpdated(o) {
+    super.firstUpdated(o), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur);
+  }
+  updated(o) {
+    o.has("mode") && (this.handle.style.insetInlineStart = "", this.handle.style.insetBlockEnd = "", this.mode === "opacity" && (this.colorController.color = new u(
+      this.colorController.color
+    ).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
+  }
+}
+l([
+  i({ type: String, reflect: !0 })
+], t.prototype, "dir", 2);
+l([
+  i({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+l([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+l([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "focused", 2);
+l([
+  h(".handle")
+], t.prototype, "handle", 2);
+l([
+  i({ type: String })
+], t.prototype, "label", 2);
+l([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "vertical", 2);
+l([
+  i({ type: Number })
+], t.prototype, "value", 1);
+l([
+  i({ type: Number, reflect: !0 })
+], t.prototype, "sliderHandlePosition", 2);
+l([
+  i({ type: String })
+], t.prototype, "color", 1);
+l([
+  i({ type: Number })
+], t.prototype, "step", 2);
+l([
+  i({ type: Boolean, attribute: "is-ltr" })
+], t.prototype, "isLTR", 2);
+l([
+  h("input")
+], t.prototype, "input", 2);
+customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", t);
+export {
+  t as LuzmoColorSlider
+};

package/lib/condition-attribute-with-id-DrQYZzFS.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";function o(t,i,r){const e=t.getAttribute(i);let s=e?e.split(/\s+/):[];s=s.filter(n=>!r.includes(n)),s.length>0?t.setAttribute(i,s.join(" ")):t.removeAttribute(i)}function d(t,i,r){const e=Array.isArray(r)?r:[r],s=t.getAttribute(i),n=s?s.split(/\s+/):[];return e.every(c=>n.includes(c))?()=>{}:(n.push(...e),t.setAttribute(i,n.join(" ")),()=>o(t,i,e))}exports.conditionAttributeWithId=d;exports.conditionAttributeWithoutId=o;

package/lib/condition-attribute-with-id-Dv4lSRbe.js

@@ -0,0 +1,31 @@
+/*! * 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.
+ * */
+function c(t, s, r) {
+  const e = t.getAttribute(s);
+  let i = e ? e.split(/\s+/) : [];
+  i = i.filter((n) => !r.includes(n)), i.length > 0 ? t.setAttribute(s, i.join(" ")) : t.removeAttribute(s);
+}
+function u(t, s, r) {
+  const e = Array.isArray(r) ? r : [r], i = t.getAttribute(s), n = i ? i.split(/\s+/) : [];
+  return e.every((o) => n.includes(o)) ? () => {
+  } : (n.push(...e), t.setAttribute(s, n.join(" ")), () => c(t, s, e));
+}
+export {
+  c as a,
+  u as c
+};