@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/color-picker-CSWiU-X5.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.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`),n=require(`./slottable-request-event-gAcEQan2.cjs`);require(`./overlay-CMd2Dnpv.cjs`),require(`./popover/index.cjs`),require(`./swatch-G70JUe6I.cjs`),require(`./color-menu-DwbTxeqv.cjs`);let r=require(`lit`),i=require(`lit/decorators.js`);var a=`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([read-only]) luzmo-swatch{cursor:default;pointer-events:none}: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)}`,o=class extends t.n(e.n){constructor(...e){super(...e),this.color=`rgb(255, 0, 0)`,this.open=!1,this.disabled=!1,this.readOnly=!1,this.placement=`left-start`,this.rounding=`full`,this.swatches=[],this.noAlphaChannel=!1,this._renderMenu=!1}static{this.styles=(0,r.unsafeCSS)(a)}overlayCloseEvent(){this.open=!1}overlayOpenEvent(){this.open=!0}handleColorChange(){let e=this.menuElement.color;this.color=typeof e==`string`?e:String(e),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}firstUpdated(){this.overlayElement.addEventListener(`slottable-request`,e=>{this._renderMenu=e.data!==n.n})}updated(e){e.has(`open`)&&this.open===!0&&(this._renderMenu=!0)}renderColorMenu(){return r.html`
+      <luzmo-color-menu
+        .size=${this.size}
+        .color=${this.color}
+        .noAlphaChannel=${this.noAlphaChannel}
+        .swatches=${this.swatches}
+        @change=${this.handleColorChange}
+      ></luzmo-color-menu>
+    `}render(){return r.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}
+        ?read-only=${this.readOnly}
+        @luzmo-closed=${this.overlayCloseEvent}
+        @luzmo-opened=${this.overlayOpenEvent}
+      ></luzmo-swatch>
+      <luzmo-overlay
+        trigger=${this.disabled||this.readOnly?``:`trigger@click`}
+        .placement=${this.placement}
+        type="auto"
+      >
+        <luzmo-popover style="position:relative">
+          ${this._renderMenu?this.renderColorMenu():r.html``}
+        </luzmo-popover>
+      </luzmo-overlay>
+    `}};e.t([(0,i.property)({type:String,reflect:!0})],o.prototype,`color`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`open`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`disabled`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0,attribute:`read-only`})],o.prototype,`readOnly`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],o.prototype,`placement`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],o.prototype,`rounding`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],o.prototype,`shape`,void 0),e.t([(0,i.property)({type:Array,reflect:!0})],o.prototype,`swatches`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0,attribute:`no-alpha-channel`})],o.prototype,`noAlphaChannel`,void 0),e.t([(0,i.query)(`luzmo-color-menu`)],o.prototype,`menuElement`,void 0),e.t([(0,i.query)(`luzmo-overlay`)],o.prototype,`overlayElement`,void 0),e.t([(0,i.state)()],o.prototype,`_renderMenu`,void 0),customElements.get(`luzmo-color-picker`)||customElements.define(`luzmo-color-picker`,o),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/components/color-picker-DqjfTvYf.js

@@ -0,0 +1,126 @@
+/*! * 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 e, t } from "./decorate-aGxJUVxg.js";
+import { n } from "./sized-mixin-DaBoZkVS.js";
+import { n as r } from "./slottable-request-event-DZ2Z_BLk.js";
+import "./overlay-CwR_36OV.js";
+import "./popover/index.js";
+import "./swatch-BLuV-hlF.js";
+import "./color-menu-Lxc9PTzl.js";
+import { html as i, unsafeCSS as a } from "lit";
+import { property as o, query as s, state as c } from "lit/decorators.js";
+//#region src/components/color-picker/color-picker.module.scss?inline
+var l = "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([read-only]) luzmo-swatch{cursor:default;pointer-events:none}: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)}", u = class extends n(e) {
+	constructor(...e) {
+		super(...e), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.readOnly = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
+	}
+	static {
+		this.styles = a(l);
+	}
+	overlayCloseEvent() {
+		this.open = !1;
+	}
+	overlayOpenEvent() {
+		this.open = !0;
+	}
+	handleColorChange() {
+		let e = this.menuElement.color;
+		this.color = typeof e == "string" ? e : String(e), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	firstUpdated() {
+		this.overlayElement.addEventListener("slottable-request", (e) => {
+			this._renderMenu = e.data !== r;
+		});
+	}
+	updated(e) {
+		e.has("open") && this.open === !0 && (this._renderMenu = !0);
+	}
+	renderColorMenu() {
+		return i`
+      <luzmo-color-menu
+        .size=${this.size}
+        .color=${this.color}
+        .noAlphaChannel=${this.noAlphaChannel}
+        .swatches=${this.swatches}
+        @change=${this.handleColorChange}
+      ></luzmo-color-menu>
+    `;
+	}
+	render() {
+		return i`
+      <luzmo-swatch
+        id="trigger"
+        .shape=${this.shape}
+        .rounding=${this.rounding}
+        .size=${this.size}
+        .color=${this.color}
+        .selected=${this.open && !this.disabled}
+        ?disabled=${this.disabled}
+        ?read-only=${this.readOnly}
+        @luzmo-closed=${this.overlayCloseEvent}
+        @luzmo-opened=${this.overlayOpenEvent}
+      ></luzmo-swatch>
+      <luzmo-overlay
+        trigger=${this.disabled || this.readOnly ? "" : "trigger@click"}
+        .placement=${this.placement}
+        type="auto"
+      >
+        <luzmo-popover style="position:relative">
+          ${this._renderMenu ? this.renderColorMenu() : i``}
+        </luzmo-popover>
+      </luzmo-overlay>
+    `;
+	}
+};
+//#endregion
+//#region src/components/color-picker/index.ts
+t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "color", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "open", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "read-only"
+})], u.prototype, "readOnly", void 0), t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "placement", void 0), t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "rounding", void 0), t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "shape", void 0), t([o({
+	type: Array,
+	reflect: !0
+})], u.prototype, "swatches", void 0), t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "no-alpha-channel"
+})], u.prototype, "noAlphaChannel", void 0), t([s("luzmo-color-menu")], u.prototype, "menuElement", void 0), t([s("luzmo-overlay")], u.prototype, "overlayElement", void 0), t([c()], u.prototype, "_renderMenu", void 0), customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", u);
+//#endregion
+export { u as t };

package/components/color-slider/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-BwxgAdzi.cjs");exports.LuzmoColorSlider=e.LuzmoColorSlider;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../color-slider-DxjJ72ue.cjs`);exports.LuzmoColorSlider=e.t;

package/components/color-slider/index.js

@@ -15,14 +15,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { L as u } from "../index-HjQa8tew.js";
-const l = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.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-disabled-color);--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-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #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(o);
-  }
-};
-l();
-export {
-  u as LuzmoColorSlider
-};
+(() => {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let e = document.createElement("style");
+		e.setAttribute("data-luzmo-vars", ""), e.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: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--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-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-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 45%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-informative-color: #1670dd;--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--luzmo-disabled-color: #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: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
+	}
+})();
+import { t as e } from "../color-slider-ihAIFt5p.js";
+export { e as LuzmoColorSlider };

package/components/color-slider-DxjJ72ue.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.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./focusable-CupEoHmn.cjs`),n=require(`./language-resolution-BYemISJC.cjs`);require(`./color-handle-Cka48yPY.cjs`);const r=require(`./streaming-listener-BnDW38lt.cjs`);let i=require(`lit`),a=require(`lit/decorators.js`),o=require(`lit/directives/if-defined.js`),s=require(`lit/directives/style-map.js`),c=require(`@ctrl/tinycolor`);var l=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,u=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,d=/(^hs[v|l]a?\()\d{1,3}/,f=(e,t)=>t?e.toHexString():e.toHex(),p=class{setColorProcess(e,t,n,r){this.maintains===`hue`?this.setColorMaintainHue(e,t,n,r):this.maintains===`saturation`&&this.setColorMaintainSaturation(e,t,n,r)}setColorMaintainHue(e,t,n,r){let{h:i,s:a,v:o,a:s}=this._color.toHsv(),c;if(r&&n.startsWith(`hs`)){let e=l.exec(t);if(e!==null){let[,t]=e;c=Number(t)}}else if(!r&&n.startsWith(`hs`)){let t=e.originalInput;c=Object.values(t)[0]}this.hue=c||i,this.opacity=s??1,this.applyColorToState({h:i,s:a,v:o,a:s})}setColorMaintainSaturation(e,t,n,r){let{a:i}=this._color.toHsv();if(r&&n.startsWith(`hs`)){let e=l.exec(t);if(e!==null){let[,t,n]=e;this.hue=Number(t),this.saturation=Number(n)}}else if(!r&&n.startsWith(`hs`)){let t=e.originalInput,n=Object.values(t);this.hue=n[0],this.saturation=n[1]}else{let{h:t}=e.toHsv();this.hue=t}this.opacity=i??1,this.applyColorToState(e.toHsv())}constructor(e,{applyColorToState:t,extractColorFromState:n,maintains:r}){this.maintains=`hue`,this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(e,t)=>t?e.toRgbString():e.toRgb(),prgb:(e,t)=>t?e.toPercentageRgbString():e.toPercentageRgb(),hex8:(e,t)=>t?e.toHex8String():e.toHex8(),name:e=>e.toName()||e.toRgbString(),hsl:(e,t)=>{if(this.maintains===`hue`){if(t)return e.toHslString().replace(d,`$1${this.hue}`);let{s:n,l:r,a:i}=e.toHsl();return{h:this.hue,s:n,l:r,a:i}}if(t)return e.toHslString().replace(u,`$1${this.hue}$2${this.saturation}`);let{s:n,l:r,a:i}=e.toHsl();return{h:this.hue,s:n,l:r,a:i}},hsv:(e,t)=>{if(this.maintains===`hue`){if(t)return e.toHsvString().replace(d,`$1${this.hue}`);let{s:n,v:r,a:i}=e.toHsv();return{h:this.hue,s:n,v:r,a:i}}if(t)return e.toHsvString().replace(u,`$1${this.hue}$2${this.saturation}`);let{s:n,v:r,a:i}=e.toHsv();return{h:this.hue,s:n,v:r,a:i}},hex:f,hex3:f,hex4:f,hex6:f},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=e,this.applyColorToState=t,this.extractColorFromState=n,this.maintains=r||this.maintains}applyColorFromState(){this._color=new c.TinyColor(this.extractColorFromState(this))}get hue(){return this._hue}set hue(e){let t=Math.min(360,Math.max(0,e));if(t===this.hue)return;let n=this.hue,{s:r,v:i,a}=this._color.toHsv();this._color=new c.TinyColor({h:t,s:r,v:i,a}),this._hue=t,this.host.requestUpdate(`hue`,n)}get opacity(){return this._opacity}set opacity(e){let t=Math.min(1,Math.max(0,e));if(t===this.opacity)return;let n=this.opacity,{h:r,s:i,v:a}=this._color.toHsv();this._color=new c.TinyColor({h:r,s:i,v:a,a:t}),this._opacity=t,this.host.requestUpdate(`opacity`,n)}get value(){return this.color}get color(){return this.getColorProcesses[this._format.format||`hex`](this._color,this._format.isString)}set color(e){if(e===this.color)return;let t=this._color;this._color=new c.TinyColor(e);let n=this._color.format,r=typeof e==`string`||e instanceof String;n.startsWith(`hex`)&&(r=e.startsWith(`#`)),this._format={format:n,isString:r},this.setColorProcess(this._color,e,n,r),this.host.requestUpdate(`color`,t)}getColor(e){return this._color[{hsl:`toHsl`}[e]]()}setColor(e){this._color=e;let t=typeof this._color.originalInput==`string`||this._color.originalInput instanceof String;this.setColorProcess(this._color,e,this._color.format,t)}getHslString(){return this._color.toHslString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this.setColor(this._previousColor)}},m=`.opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 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);block-size:100%;inline-size:100%;position:absolute}:host{--luzmo-color-slider-gradient-fallback:red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{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;inset: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{border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.gradient:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){transform:scaleX(-1)}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}`,h=class extends t.t{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.label=`hue`,this.vertical=!1,this.languageResolver=new n.t(this),this.colorController=new p(this,{applyColorToState:()=>{if(this.mode===`opacity`){let e=new c.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[(0,i.unsafeCSS)(m)]}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){let{key:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(e=>!!e).length;let n=0;switch(t){case`ArrowUp`:n=this.step;break;case`ArrowDown`:n=-this.step;break;case`ArrowLeft`:n=this.step*(this.isLTR?-1:1);break;case`ArrowRight`:n=this.step*(this.isLTR?1:-1);break;default:return}e.preventDefault();let r=100/(this.mode===`opacity`?100:360);this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+n*r)),this.value=this.mode===`opacity`?Math.min(1,Math.max(0,this.value+n/100)):Math.min(360,Math.max(0,this.value+n)),this.colorController.applyColorFromState(),n!==0&&(this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})))}handleInput(e){let{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;let t=this.boundingClientRect,n=this.vertical?t.top:t.left,r=this.vertical?e.clientY:e.clientX,i=this.vertical?t.height:t.width,a=Math.max(0,Math.min(1,(r-n)/i));return this.vertical||!this.isLTR?100-100*a:100*a}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(){let e=this.vertical?`top`:`right`;return this.mode===`opacity`?{background:`linear-gradient(to ${e}, transparent, ${new c.TinyColor(this.colorController.color).setAlpha(1).toRgbString()})`}:{background:`linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`}}render(){return i.html`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${(0,s.styleMap)(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${(0,o.ifDefined)(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}
+        ${r.t({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=${(0,o.ifDefined)(this.vertical?`vertical`:void 0)}
+        orient=${(0,o.ifDefined)(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 c.TinyColor(this.colorController.color).toRgbString(),this.handle.style.insetInlineStart=100*this.colorController.opacity+`%`))}};e.t([(0,a.property)({type:String,reflect:!0})],h.prototype,`dir`,void 0),e.t([(0,a.property)({type:String,reflect:!0})],h.prototype,`mode`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0})],h.prototype,`disabled`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0})],h.prototype,`focused`,void 0),e.t([(0,a.query)(`.handle`)],h.prototype,`handle`,void 0),e.t([(0,a.property)({type:String})],h.prototype,`label`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0})],h.prototype,`vertical`,void 0),e.t([(0,a.property)({type:Number})],h.prototype,`value`,null),e.t([(0,a.property)({type:Number,reflect:!0})],h.prototype,`sliderHandlePosition`,void 0),e.t([(0,a.property)({type:String})],h.prototype,`color`,null),e.t([(0,a.property)({type:Number})],h.prototype,`step`,void 0),e.t([(0,a.property)({type:Boolean,attribute:`is-ltr`})],h.prototype,`isLTR`,void 0),e.t([(0,a.query)(`input`)],h.prototype,`input`,void 0),customElements.get(`luzmo-color-slider`)||customElements.define(`luzmo-color-slider`,h),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});