@luzmo/lucero 0.0.3 → 0.0.6

package/components/color-menu/index.js

@@ -0,0 +1,203 @@
+/*! * 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 p, luzmoAngleUp as z, luzmoAngleDown as f } from "@luzmo/icons";
+import { L as v, r as b, x as s, n as h } from "../base-CxUap9HL.js";
+import { r as x } from "../state-D8vot9IB.js";
+import { e as n } from "../query-D_KR_GUc.js";
+import { S as w } from "../sized-mixin-DcJTTohI.js";
+import "../color-area/index.js";
+import "../color-field/index.js";
+import "../color-handle/index.js";
+import "../color-slider/index.js";
+import "../divider/index.js";
+import "../popover/index.js";
+import "../swatch/index.js";
+import { T as a } from "../index-C1chwzNp.js";
+const g = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const i = document.createElement("style");
+    i.setAttribute("data-luzmo-vars", ""), i.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(i);
+  }
+};
+g();
+const C = '@charset "UTF-8";:host{width:var(--luzmo-color-menu-width, var(--color-menu-width))}.hue-opacity-text-swatches-container{display:flex;gap:var(--luzmo-color-menu-color-controls-vertical-gap, var(--color-menu-color-controls-vertical-gap));flex-direction:column;padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding, var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding, var(--color-menu-hue-opacity-text-swatches-horizontal-padding))}.swatch-sliders-container{display:flex;gap:var(--luzmo-color-menu-swatch-to-sliders-space, var(--color-menu-swatch-to-sliders-space))}.swatch-example-container{display:flex;align-items:center}.field-container{display:flex;align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space, var(--color-menu-format-field-to-format-space))}.format-container{text-transform:uppercase;position:relative;background:none;border:none;outline:none;height:var(--luzmo-color-menu-format-height, var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size, var(--color-menu-format-font-size));display:flex;align-items:center;color:var(--luzmo-color-menu-format-font-color, var(--color-menu-format-font-color));gap:var(--luzmo-color-menu-format-name-to-icon, var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding, var(--color-menu-format-horizontal-padding))}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover, var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border:var(--luzmo-color-menu-format-indicator-width, var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color, var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius, var(--luzmo-border-radius-s))}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down, var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{display:flex;align-items:center;height:calc(var(--color-menu-format-font-size) / 1.5)}.slider-container{display:flex;flex-direction:column;justify-content:center;gap:var(--luzmo-color-menu-slider-gap, var(--color-menu-slider-gap))}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height, var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luzmo-color-menu-swatches-gap, var(--color-menu-swatches-gap))}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{display:flex;align-items:center;justify-content:center}:host{--luzmo-text-field-icon-size-valid: 0px;--luzmo-text-field-icon-spacing-inline-end-valid: 1px;--luzmo-text-field-text-align: center}:host{--color-menu-width: 290px;--luzmo-text-field-width: 220px;--luzmo-color-slider-control-track-width: 8px;--color-menu-height: 140px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height);--color-menu-format-font-size: var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-3);--color-menu-format-font-color: var(--luzmo-font-color);--color-menu-format-font-color-hover: var(--luzmo-font-color-hover);--color-menu-format-font-color-down: var(--luzmo-font-color-down);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size: 22px}:host([size=s]){--color-menu-width: 260px;--luzmo-text-field-width: 200px;--luzmo-color-slider-control-track-width: 8px;--color-menu-hue-opacity-text-swatches-horizontal-padding: var( --luzmo-spacing-5 );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-4 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-4);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-s);--color-menu-format-font-size: var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-2);--color-menu-swatches-gap: var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size: 20px}:host([size=l]){--color-menu-width: 350px;--luzmo-text-field-width: 240px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-format-height: var(--luzmo-component-height-l);--color-menu-format-font-size: var(--luzmo-font-size);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size: 24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size: 56px}:host([size=xl]){--color-menu-width: 380px;--luzmo-text-field-width: 280px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-color-controls-vertical-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-swatch-to-sliders-space: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-xl);--color-menu-format-font-size: var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-3);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size: 26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size: 64px}';
+var y = Object.defineProperty, t = (i, o, r, e) => {
+  for (var c = void 0, m = i.length - 1, d; m >= 0; m--)
+    (d = i[m]) && (c = d(o, r, c) || c);
+  return c && y(o, r, c), c;
+};
+const u = class u extends w(v) {
+  constructor() {
+    super(...arguments), this.color = "rgb(255, 0, 0)", this.noAlphaChannel = !1, this._alpha = 1, this._rgbColor = "rgb(255, 0, 0)", this._rgbaColor = "rgb(255, 0, 0, 1)", this._previousColor = "rgb(255, 0, 0)";
+  }
+  setColor(o) {
+    var e;
+    const r = new a((e = o == null ? void 0 : o.target) == null ? void 0 : e.color);
+    this._format = r.format === "name" ? "rgb" : r.format, this._rgbaColor = r.toRgbString(), this._alpha = this.noAlphaChannel ? 1 : r.getAlpha(), this._rgbColor = r.setAlpha(1).toRgbString(), this.hueSliderElement.color = this._rgbColor, this.areaElement.color = this._rgbColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.swatchElement.color = this._rgbaColor, this.colorFieldElement.value = this.formatTextField(r), this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  }
+  handleAreaChange(o) {
+    o.stopPropagation(), o.preventDefault(), this._rgbColor = this.areaElement.color;
+    const r = new a(this._rgbColor);
+    this._rgbaColor = r.setAlpha(this._alpha).toRgbString(), this.colorFieldElement.value = this._rgbaColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.colorFieldElement.value = this.formatTextField(r), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  }
+  handleHueSliderChange(o) {
+    o.stopPropagation(), o.preventDefault();
+    const r = new a(this._rgbColor).toHsl();
+    r.h = this.hueSliderElement.value;
+    const e = new a(r);
+    this._rgbColor = e.toRgbString(), this._rgbaColor = e.setAlpha(this._alpha).toRgbString(), this.areaElement.color = this._rgbColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.colorFieldElement.value = this.formatTextField(e), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  }
+  handleOpacitySliderChange(o) {
+    o.stopPropagation(), o.preventDefault(), this._alpha = this.opacitySliderElement.sliderHandlePosition / 100;
+    const r = new a(this._rgbColor).setAlpha(this._alpha);
+    this._rgbaColor = r.toRgbString(), this.colorFieldElement.value = this.formatTextField(r), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  }
+  handleFieldChange(o) {
+    if (o.stopPropagation(), o.preventDefault(), this.colorFieldElement.checkValidity()) {
+      const r = new a(this.colorFieldElement.value);
+      this._format = r.format, this._rgbaColor = r.toRgbString(), this._alpha = r.getAlpha(), this._rgbColor = r.setAlpha(1).toRgbString(), this.noAlphaChannel && (this._rgbaColor = this._rgbColor, this._alpha = 1), this.hueSliderElement.color = this._rgbColor, this.areaElement.color = this._rgbColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+    }
+  }
+  formatTextField(o) {
+    return this._format === "hsl" ? o.toHslString() : this._format === "hex" ? this.noAlphaChannel ? o.toHexString() : o.toHex8String() : (this._format === "name" && (this._format = "rgb"), o.toRgbString());
+  }
+  cycleFormat() {
+    const o = ["rgb", "hsl", "hex"];
+    this._format = o[(o.indexOf(this._format) + 1) % o.length];
+    const r = new a(this.color), e = this.formatTextField(r);
+    this.colorFieldElement.value = e;
+  }
+  updated(o) {
+    if (o.has("color") && this.color !== this._previousColor) {
+      this._previousColor = this.color;
+      const r = new a(this.color);
+      this._alpha = r.getAlpha(), this._rgbColor = r.setAlpha(1).toRgbString(), this._rgbaColor = r.setAlpha(this._alpha).toRgbString(), this.areaElement.color = this._rgbColor, this.hueSliderElement.color = this._rgbColor, this.colorFieldElement.value = this._rgbaColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.swatchElement.color = this._rgbaColor, this._format = "rgb";
+    }
+    o.has("noAlphaChannel") && !this.noAlphaChannel && (this.opacitySliderElement.color = this._rgbaColor);
+  }
+  renderOpacitySlider() {
+    return s`
+      <luzmo-color-slider
+        id="luzmo-opacity-slider"
+        mode="opacity"
+        @input=${this.handleOpacitySliderChange}
+      >
+      </luzmo-color-slider>
+    `;
+  }
+  render() {
+    var o;
+    return s`
+      <div>
+        <luzmo-color-area
+          .size=${this.size}
+          @input=${this.handleAreaChange}
+        ></luzmo-color-area>
+        <div class="hue-opacity-text-swatches-container">
+          <div class="swatch-sliders-container">
+            <div class="swatch-example-container">
+              <luzmo-swatch
+                rounding="full"
+                .size=${this.noAlphaChannel && ["s", "m"].includes(this.size) ? "s" : "l"}
+                readonly
+              ></luzmo-swatch>
+            </div>
+            <div class="slider-container" style="flex-grow: 1;">
+              <luzmo-color-slider
+                id="luzmo-hue-slider"
+                @input=${this.handleHueSliderChange}
+              >
+              </luzmo-color-slider>
+              ${this.noAlphaChannel ? "" : this.renderOpacitySlider()}
+            </div>
+          </div>
+          <div class="field-container">
+            <luzmo-color-field
+              .size=${this.size}
+              @input=${this.handleFieldChange}
+            >
+            </luzmo-color-field>
+            <button
+              class="format-container"
+              aria-label="Color format"
+              @click=${this.cycleFormat}
+              tabindex="0"
+            >
+              <div class="format-label">${this._format}</div>
+              <div class="change-format-icon">
+                <div class="angle-icon">${p(z)}</div>
+                <div class="angle-icon">${p(f)}</div>
+              </div>
+            </button>
+          </div>
+          ${((o = this.swatches) == null ? void 0 : o.length) > 0 ? s`
+                <luzmo-divider></luzmo-divider>
+                <div class="swatches-container">
+                  ${this.swatches.map(
+      (r) => s`
+                      <div class="swatch-choice">
+                        <luzmo-swatch
+                          @click=${this.setColor}
+                          .color=${r}
+                          .size=${this.size}
+                          readonly
+                        >
+                        </luzmo-swatch>
+                      </div>
+                    `
+    )}
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+u.styles = b(C);
+let l = u;
+t([
+  h({ type: String, reflect: !0 })
+], l.prototype, "color");
+t([
+  h({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
+], l.prototype, "noAlphaChannel");
+t([
+  h({ type: Array, reflect: !0 })
+], l.prototype, "swatches");
+t([
+  n("luzmo-color-area")
+], l.prototype, "areaElement");
+t([
+  n("#luzmo-hue-slider")
+], l.prototype, "hueSliderElement");
+t([
+  n("#luzmo-opacity-slider")
+], l.prototype, "opacitySliderElement");
+t([
+  n("luzmo-color-field")
+], l.prototype, "colorFieldElement");
+t([
+  n("luzmo-swatch")
+], l.prototype, "swatchElement");
+t([
+  x()
+], l.prototype, "_format");
+customElements.get("luzmo-color-menu") || customElements.define("luzmo-color-menu", l);
+export {
+  l as LuzmoColorMenu
+};

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

@@ -0,0 +1,39 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import { ColorValue } from '../../utils/reactive-controllers/color';
+import '../color-menu';
+import '../overlay';
+import '../popover';
+import '../swatch';
+import { SwatchRounding, SwatchShape } from './../swatch/swatch';
+declare const LuzmoColorPicker_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-color-slider
+ * @fires input - The value of the Color Slider has changed.
+ * @fires change - An alteration to the value of the Color Slider has been committed by the user.
+ */
+export declare class LuzmoColorPicker extends LuzmoColorPicker_base {
+    static styles: import("lit").CSSResult;
+    color?: ColorValue;
+    open: boolean;
+    disabled: boolean;
+    placement: string;
+    rounding?: SwatchRounding;
+    shape: SwatchShape;
+    swatches: string[];
+    noAlphaChannel: boolean;
+    private menuElement;
+    private overlayElement;
+    private _renderMenu;
+    private overlayCloseEvent;
+    private overlayOpenEvent;
+    private handleColorChange;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private renderColorMenu;
+    protected render(): TemplateResult;
+}
+export {};

package/components/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 t=require("../base-rtxi7uaR.cjs"),c=require("../state-WWHLNMRG.cjs"),u=require("../query-BL-TJj7K.cjs"),h=require("../sized-mixin-BAI6NiE2.cjs");require("../color-menu/index.cjs");require("../overlay/index.cjs");const d=require("../slottable-request-event-BfUUt1Mh.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");const m="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,o=(i,r,a,g)=>{for(var l=void 0,n=i.length-1,p;n>=0;n--)(p=i[n])&&(l=p(r,a,l)||l);return l&&v(r,a,l),l};const s=class s extends h.SizedMixin(t.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(){this.open=!1}overlayOpenEvent(){this.open=!0}handleColorChange(){this.color=this.menuElement.color,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}firstUpdated(){this.overlayElement.addEventListener("slottable-request",r=>{this._renderMenu=r.data!==d.removeSlottableRequest})}updated(r){r.has("open")&&this.open===!0&&(this._renderMenu=!0)}renderColorMenu(){return t.x`
+      <luzmo-color-menu
+        .size=${this.size}
+        .color=${this.color}
+        .noAlphaChannel=${this.noAlphaChannel}
+        .swatches=${this.swatches}
+        @change=${this.handleColorChange}
+      ></luzmo-color-menu>
+    `}render(){return t.x`
+      <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():t.x``}
+        </luzmo-popover>
+      </luzmo-overlay>
+    `}};s.styles=t.r(m);let e=s;o([t.n({type:String,reflect:!0})],e.prototype,"color");o([t.n({type:Boolean,reflect:!0})],e.prototype,"open");o([t.n({type:Boolean,reflect:!0})],e.prototype,"disabled");o([t.n({type:String,reflect:!0})],e.prototype,"placement");o([t.n({type:String,reflect:!0})],e.prototype,"rounding");o([t.n({type:String,reflect:!0})],e.prototype,"shape");o([t.n({type:Array,reflect:!0})],e.prototype,"swatches");o([t.n({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],e.prototype,"noAlphaChannel");o([u.e("luzmo-color-menu")],e.prototype,"menuElement");o([u.e("luzmo-overlay")],e.prototype,"overlayElement");o([c.r()],e.prototype,"_renderMenu");customElements.get("luzmo-color-picker")||customElements.define("luzmo-color-picker",e);exports.LuzmoColorPicker=e;

package/components/color-picker/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoColorPicker } from './color-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-color-picker': LuzmoColorPicker;
+    }
+}
+export { LuzmoColorPicker } from './color-picker';

package/components/color-picker/index.js

@@ -0,0 +1,141 @@
+/*! * 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, r as d, x as u, n as r } from "../base-CxUap9HL.js";
+import { r as h } from "../state-D8vot9IB.js";
+import { e as c } from "../query-D_KR_GUc.js";
+import { S as g } from "../sized-mixin-DcJTTohI.js";
+import "../color-menu/index.js";
+import "../overlay/index.js";
+import { r as f } from "../slottable-request-event-DggLA4Rx.js";
+import "../popover/index.js";
+import "../swatch/index.js";
+const p = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const l = document.createElement("style");
+    l.setAttribute("data-luzmo-vars", ""), l.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(l);
+  }
+};
+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 = (l, t, s, x) => {
+  for (var n = void 0, i = l.length - 1, m; i >= 0; i--)
+    (m = l[i]) && (n = m(t, s, n) || n);
+  return n && v(t, s, n), n;
+};
+const a = class a extends g(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() {
+    this.open = !1;
+  }
+  overlayOpenEvent() {
+    this.open = !0;
+  }
+  handleColorChange() {
+    this.color = this.menuElement.color, this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  firstUpdated() {
+    this.overlayElement.addEventListener("slottable-request", (t) => {
+      this._renderMenu = t.data !== f;
+    });
+  }
+  updated(t) {
+    t.has("open") && this.open === !0 && (this._renderMenu = !0);
+  }
+  renderColorMenu() {
+    return u`
+      <luzmo-color-menu
+        .size=${this.size}
+        .color=${this.color}
+        .noAlphaChannel=${this.noAlphaChannel}
+        .swatches=${this.swatches}
+        @change=${this.handleColorChange}
+      ></luzmo-color-menu>
+    `;
+  }
+  render() {
+    return u`
+      <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() : u``}
+        </luzmo-popover>
+      </luzmo-overlay>
+    `;
+  }
+};
+a.styles = d(b);
+let o = a;
+e([
+  r({ type: String, reflect: !0 })
+], o.prototype, "color");
+e([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "open");
+e([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+e([
+  r({ type: String, reflect: !0 })
+], o.prototype, "placement");
+e([
+  r({ type: String, reflect: !0 })
+], o.prototype, "rounding");
+e([
+  r({ type: String, reflect: !0 })
+], o.prototype, "shape");
+e([
+  r({ type: Array, reflect: !0 })
+], o.prototype, "swatches");
+e([
+  r({ 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([
+  h()
+], o.prototype, "_renderMenu");
+customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", o);
+export {
+  o as LuzmoColorPicker
+};

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

@@ -0,0 +1,57 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import './../color-handle';
+import { Focusable } from '../../utils/focusable';
+import { ColorValue } from '../../utils/reactive-controllers/color';
+/**
+ * @element luzmo-color-slider
+ * @fires input - The value of the Color Slider has changed.
+ * @fires change - An alteration to the value of the Color Slider has been committed by the user.
+ */
+export declare class LuzmoColorSlider extends Focusable {
+    static get styles(): CSSResultArray;
+    dir: 'ltr' | 'rtl';
+    mode: 'hue' | 'opacity';
+    disabled: boolean;
+    focused: boolean;
+    private handle;
+    label: string;
+    vertical: boolean;
+    private languageResolver;
+    private colorController;
+    get value(): number;
+    set value(value: number);
+    sliderHandlePosition: number;
+    get color(): ColorValue;
+    set color(color: ColorValue);
+    step: number;
+    isLTR: boolean;
+    private get altered();
+    private set altered(value);
+    private _altered;
+    input: HTMLInputElement;
+    get focusElement(): HTMLInputElement;
+    private handleKeydown;
+    private handleInput;
+    private handleChange;
+    focus(focusOptions?: FocusOptions): void;
+    private forwardFocus;
+    private handleFocus;
+    private handleBlur;
+    private boundingClientRect;
+    private _pointerDown;
+    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 handleGradientPointerdown;
+    private get handlePositionStyles();
+    private get getColorSliderStyle();
+    protected render(): TemplateResult;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+}

package/components/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 i=require("../base-rtxi7uaR.cjs"),p=require("../query-BL-TJj7K.cjs"),d=require("../if-defined-C-8FyBSN.cjs"),b=require("../style-map-DH0jkl7s.cjs");require("../color-handle/index.cjs");const m=require("../focusable-DyyBr-J-.cjs"),g=require("../color-DphK4hwx.cjs"),u=require("../streaming-listener-C2A7ZJZP.cjs"),h=require("../index-DCKCHDTt.cjs"),v='.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 f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var s=o>1?void 0:o?y(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&&f(e,t,s),s};class r extends m.Focusable{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.label="hue",this.vertical=!1,this.languageResolver=new u.LanguageResolutionController(this),this.colorController=new g.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[i.r(v)]}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 i.x`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${b.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}
+        ${u.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+"%"))}}l([i.n({type:String,reflect:!0})],r.prototype,"dir",2);l([i.n({type:String,reflect:!0})],r.prototype,"mode",2);l([i.n({type:Boolean,reflect:!0})],r.prototype,"disabled",2);l([i.n({type:Boolean,reflect:!0})],r.prototype,"focused",2);l([p.e(".handle")],r.prototype,"handle",2);l([i.n({type:String})],r.prototype,"label",2);l([i.n({type:Boolean,reflect:!0})],r.prototype,"vertical",2);l([i.n({type:Number})],r.prototype,"value",1);l([i.n({type:Number,reflect:!0})],r.prototype,"sliderHandlePosition",2);l([i.n({type:String})],r.prototype,"color",1);l([i.n({type:Number})],r.prototype,"step",2);l([i.n({type:Boolean,attribute:"is-ltr"})],r.prototype,"isLTR",2);l([p.e("input")],r.prototype,"input",2);customElements.get("luzmo-color-slider")||customElements.define("luzmo-color-slider",r);exports.LuzmoColorSlider=r;

package/components/color-slider/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoColorSlider } from './color-slider';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-color-slider': LuzmoColorSlider;
+    }
+}
+export { LuzmoColorSlider } from './color-slider';