@luzmo/lucero 0.0.3 → 0.0.6

package/components/color-area/index.cjs

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

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

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

package/components/color-area/index.js

@@ -0,0 +1,372 @@
+/*! * 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 v, x as y, n as s } from "../base-CxUap9HL.js";
+import { e as b } from "../query-D_KR_GUc.js";
+import { o as m } from "../if-defined-XzWkhMhg.js";
+import "../color-handle/index.js";
+import { i as x, a as w } from "../platform-DQYMG7JI.js";
+import { C } from "../color-Bg3tYsAQ.js";
+import { L as $, s as k } from "../streaming-listener-BbmNyKWO.js";
+const g = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const u = document.createElement("style");
+    u.setAttribute("data-luzmo-vars", ""), u.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(u);
+  }
+};
+g();
+const R = "@media (forced-colors: active){:host{--highcontrast-color-area-border-color-disabled: GrayText;--highcontrast-color-area-border-color: Canvas;--highcontrast-color-area-fill-color-disabled: Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width, 64px);min-block-size:var(--luzmo-color-area-min-height, 64px);inline-size:var(--luzmo-color-area-width, 192px);block-size:var(--luzmo-color-area-height, 192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color, var(--luzmo-color-area-border-color, var(--luzmo-border-color)));display:inline-block;position:relative}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled, var(--luzmo-color-area-disabled-background-color, var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width, 192px) - var(--luzmo-border-width)));inset-block-start:0}.handle:dir(rtl),:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s))}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width))}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}";
+var _ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (u, e, o, t) => {
+  for (var r = t > 1 ? void 0 : t ? A(e, o) : e, a = u.length - 1, n; a >= 0; a--)
+    (n = u[a]) && (r = (t ? n(e, o, r) : n(r)) || r);
+  return t && r && _(e, o, r), r;
+};
+class i extends z {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new $(this), this.colorController = new C(this, {
+      extractColorFromState: () => ({
+        h: this.hue,
+        s: this.x,
+        v: this.y
+      }),
+      applyColorToState: ({ s: e, v: o }) => {
+        this._x = e, this._y = o, this.requestUpdate();
+      }
+    }), this.activeAxis = "x", this._x = 1, this._y = 1, this.step = 0.01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
+  }
+  static get styles() {
+    return [v(R)];
+  }
+  get hue() {
+    return this.colorController.hue;
+  }
+  set hue(e) {
+    this.colorController.hue = e;
+  }
+  get value() {
+    return this.colorController.color;
+  }
+  get color() {
+    return this.colorController.color;
+  }
+  set color(e) {
+    this.colorController.color = e;
+  }
+  get x() {
+    return this._x;
+  }
+  set x(e) {
+    if (e === this.x)
+      return;
+    const o = this.x;
+    this._x = e, this.inputX && (this.inputX.value = e.toString(), this._x = this.inputX.valueAsNumber), this.requestUpdate("x", o), this.colorController.applyColorFromState();
+  }
+  get y() {
+    return this._y;
+  }
+  set y(e) {
+    if (e === this.y)
+      return;
+    const o = this.y;
+    this._y = e, this.inputY && (this.inputY.value = e.toString(), this._y = this.inputY.valueAsNumber), this.requestUpdate("y", o), this.colorController.applyColorFromState();
+  }
+  focus(e = {}) {
+    super.focus(e), this.forwardFocus();
+  }
+  forwardFocus() {
+    this.activeAxis === "x" ? this.inputX.focus() : this.inputY.focus();
+  }
+  handleFocus() {
+    this.focused = !0, this._valueChanged = !1;
+  }
+  handleBlur() {
+    this._pointerDown || (this.altered = 0, this.focused = !1, this._valueChanged = !1);
+  }
+  handleKeydown(e) {
+    const { code: o } = e;
+    this.focused = !0, this.altered = [e.shiftKey, e.ctrlKey, e.altKey].filter(
+      (r) => !!r
+    ).length, (o.search("Arrow") === 0 || o.search("Page") === 0 || o.search("Home") === 0 || o.search("End") === 0) && (e.preventDefault(), this.activeKeys.add(o), this.handleKeypress());
+  }
+  handleKeypress() {
+    let e = 0, o = 0;
+    const t = Math.max(this.step, this.altered * 5 * this.step);
+    this.activeKeys.forEach((r) => {
+      switch (r) {
+        case "ArrowUp": {
+          o = t;
+          break;
+        }
+        case "ArrowDown": {
+          o = t * -1;
+          break;
+        }
+        case "ArrowLeft": {
+          e = this.step * (this.isLTR ? -1 : 1);
+          break;
+        }
+        case "ArrowRight": {
+          e = this.step * (this.isLTR ? 1 : -1);
+          break;
+        }
+        case "PageUp": {
+          o = t * 10;
+          break;
+        }
+        case "PageDown": {
+          o = t * -10;
+          break;
+        }
+        case "Home": {
+          e = t * (this.isLTR ? -10 : 10);
+          break;
+        }
+        case "End": {
+          e = t * (this.isLTR ? 10 : -10);
+          break;
+        }
+      }
+    }), e !== 0 ? (this.activeAxis = "x", this.inputX.focus()) : o !== 0 && (this.activeAxis = "y", this.inputY.focus()), this.x = Math.min(1, Math.max(this.x + e, 0)), this.y = Math.min(1, Math.max(this.y + o, 0)), this.colorController.savePreviousColor(), this.colorController.applyColorFromState(), (e !== 0 || o !== 0) && (this._valueChanged = !0, this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || this.colorController.restorePreviousColor());
+  }
+  handleKeyup(e) {
+    e.preventDefault();
+    const { code: o } = e;
+    this.activeKeys.delete(o);
+  }
+  handleInput(e) {
+    const { valueAsNumber: o, name: t } = e.target;
+    this[t] = o, this.colorController.applyColorFromState();
+  }
+  handleChange(e) {
+    this.handleInput(e), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  handlePointerdown(e) {
+    if (e.button !== 0) {
+      e.preventDefault();
+      return;
+    }
+    this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), e.target.setPointerCapture(e.pointerId), e.pointerType === "mouse" && (this.focused = !0);
+  }
+  handlePointermove(e) {
+    const [o, t] = this.calculateHandlePosition(e);
+    this._valueChanged = !1, this.x = o, this.y = 1 - t, this.colorController.applyColorFromState(), this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  handlePointerup(e) {
+    e.preventDefault(), this._pointerDown = !1, e.target.releasePointerCapture(e.pointerId);
+    const o = this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+    this.inputX.focus(), e.pointerType === "mouse" && (this.focused = !1), o || this.colorController.restorePreviousColor();
+  }
+  /**
+   * Returns the value under the cursor
+   * @param: PointerEvent on slider
+   * @return: Slider value that correlates to the position under the pointer
+   */
+  calculateHandlePosition(e) {
+    if (!this.boundingClientRect)
+      return [this.x, this.y];
+    const o = this.boundingClientRect, t = o.left, r = o.top, a = e.clientX, n = e.clientY, c = o.width, d = o.height, h = Math.max(0, Math.min(1, (a - t) / c)), p = Math.max(0, Math.min(1, (n - r) / d));
+    return [this.isLTR ? h : 1 - h, p];
+  }
+  handleAreaPointerdown(e) {
+    e.button === 0 && (e.stopPropagation(), e.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", e)), this.handlePointermove(e));
+  }
+  render() {
+    const { width: e = 0, height: o = 0 } = this.boundingClientRect || {}, t = x() || w(), a = "Color Picker", n = m(t ? void 0 : "2d slider"), c = this.labelX, d = this.labelY, h = new Intl.NumberFormat(this.languageResolver.language, {
+      style: "percent",
+      unitDisplay: "narrow"
+    }).format(this.x), p = new Intl.NumberFormat(this.languageResolver.language, {
+      style: "percent",
+      unitDisplay: "narrow"
+    }).format(this.y), f = `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`;
+    return y`
+      <div
+        @pointerdown=${this.handleAreaPointerdown}
+        class="gradient"
+        style="background: ${f}"
+      >
+        <slot name="gradient"></slot>
+      </div>
+
+      <luzmo-color-handle
+        tabindex=${m(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.colorController.getHslString()}
+        ?disabled=${this.disabled}
+        style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * e}px, ${o - this.y * o}px);`}
+        ${k({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
+      ></luzmo-color-handle>
+
+      <fieldset
+        class="fieldset"
+        aria-label=${m(t ? a : void 0)}
+      >
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="x"
+            aria-label=${t ? c : `${c} ${a}`}
+            aria-roledescription=${n}
+            aria-orientation="horizontal"
+            aria-valuetext=${t ? h : `${h}, ${c}${this._valueChanged ? "" : `, ${p}, ${d}`}`}
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.x)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="y"
+            aria-label=${t ? d : `${d} ${a}`}
+            aria-roledescription=${n}
+            aria-orientation="vertical"
+            aria-valuetext=${t ? p : `${p}, ${d}${this._valueChanged ? "" : `, ${h}, ${c}`}`}
+            orient="vertical"
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.y)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+      </fieldset>
+    `;
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur), this.addEventListener("keyup", this.handleKeyup), this.addEventListener("keydown", this.handleKeydown);
+  }
+  updated(e) {
+    if (super.updated(e), this.x !== this.inputX.valueAsNumber && (this._x = this.inputX.valueAsNumber), this.y !== this.inputY.valueAsNumber && (this._y = this.inputY.valueAsNumber), e.has("focused") && this.focused) {
+      const o = this.inputX.parentElement, t = this.inputY.parentElement;
+      if (!o.shadowRoot && !t.shadowRoot) {
+        o.attachShadow({ mode: "open" }), t.attachShadow({ mode: "open" });
+        const r = '<div tabindex="-1"><slot></slot></div>';
+        o.shadowRoot.innerHTML = r, t.shadowRoot.innerHTML = r;
+      }
+    }
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), !this.observer && window.ResizeObserver && (this.observer = new window.ResizeObserver((o) => {
+      for (const t of o)
+        this.boundingClientRect = t.contentRect;
+      this.requestUpdate();
+    })), (e = this.observer) == null || e.observe(this);
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this.observer) == null || e.unobserve(this), super.disconnectedCallback();
+  }
+}
+l([
+  s({ type: String, reflect: !0 })
+], i.prototype, "dir", 2);
+l([
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+l([
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "focused", 2);
+l([
+  s({ type: String, attribute: "label-x" })
+], i.prototype, "labelX", 2);
+l([
+  s({ type: String, attribute: "label-y" })
+], i.prototype, "labelY", 2);
+l([
+  s({ type: Boolean, attribute: "is-ltr" })
+], i.prototype, "isLTR", 2);
+l([
+  b(".handle")
+], i.prototype, "handle", 2);
+l([
+  s({ type: Number })
+], i.prototype, "hue", 1);
+l([
+  s({ type: String })
+], i.prototype, "value", 1);
+l([
+  s({ type: String })
+], i.prototype, "color", 1);
+l([
+  s({ attribute: !1 })
+], i.prototype, "activeAxis", 2);
+l([
+  s({ type: Number })
+], i.prototype, "x", 1);
+l([
+  s({ type: Number })
+], i.prototype, "y", 1);
+l([
+  s({ type: Number })
+], i.prototype, "step", 2);
+l([
+  b('[name="x"]')
+], i.prototype, "inputX", 2);
+l([
+  b('[name="y"]')
+], i.prototype, "inputY", 2);
+customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", i);
+export {
+  i as LuzmoColorArea
+};

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

@@ -0,0 +1,20 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoTextFieldBase } from './../text-field/text-field';
+/**
+ * @element luzmo-color-field
+ * @fires input - The value of the color-field has changed.
+ * @fires change - An alteration to the value of the color-field has been committed by the user.
+ */
+export declare class LuzmoColorField extends LuzmoTextFieldBase {
+    static get styles(): CSSResultArray;
+    viewColor: boolean;
+    set value(value: string);
+    get value(): string;
+    protected _value: string;
+    private cachedColor;
+    getColorValue(): string;
+    private renderColorHandle;
+    protected render(): TemplateResult;
+    private cachedTinyColor;
+    checkValidity(): boolean;
+}

package/components/color-field/index.cjs

@@ -0,0 +1,23 @@
+/*! * 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"),a=require("../text-field-BU7yxiOR.cjs"),u=require("../index-DCKCHDTt.cjs");var h=Object.defineProperty,c=(l,e,t,d)=>{for(var o=void 0,r=l.length-1,n;r>=0;r--)(n=l[r])&&(o=n(e,t,o)||o);return o&&h(e,t,o),o};class s extends a.LuzmoTextFieldBase{constructor(){super(...arguments),this.viewColor=!1,this._value="",this.cachedColor=null,this.cachedTinyColor=null}static get styles(){return[...super.styles]}set value(e){if(e===this.value)return;const t=this._value;this._value=e,this.requestUpdate("value",t)}get value(){return this._value}getColorValue(){if(!this.value)return"";if(!this.cachedColor||this.cachedColor!==this.value){const e=new u.TinyColor(this.value);this.cachedColor=e.isValid?e.toRgbString():""}return this.cachedColor}renderColorHandle(){return this.viewColor?i.x`
+          <luzmo-color-handle
+            size="m"
+            color=${this.getColorValue()}
+          ></luzmo-color-handle>
+        `:i.x``}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),i.x` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();return this.value&&((!this.cachedTinyColor||this.cachedTinyColor.originalInput!==this.value)&&(this.cachedTinyColor=new u.TinyColor(this.value)),this.valid=e=this.cachedTinyColor.isValid,this.invalid=!e),e}}c([i.n({type:Boolean,attribute:"view-color"})],s.prototype,"viewColor");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",s);exports.LuzmoColorField=s;

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

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

package/components/color-field/index.js

@@ -0,0 +1,80 @@
+/*! * 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 { x as i, n as a } from "../base-CxUap9HL.js";
+import { a as s } from "../text-field-05QNK_Lj.js";
+import { T as c } from "../index-C1chwzNp.js";
+const n = () => {
+  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);
+  }
+};
+n();
+var d = Object.defineProperty, z = (l, o, e, f) => {
+  for (var r = void 0, u = l.length - 1, t; u >= 0; u--)
+    (t = l[u]) && (r = t(o, e, r) || r);
+  return r && d(o, e, r), r;
+};
+class m extends s {
+  constructor() {
+    super(...arguments), this.viewColor = !1, this._value = "", this.cachedColor = null, this.cachedTinyColor = null;
+  }
+  static get styles() {
+    return [...super.styles];
+  }
+  set value(o) {
+    if (o === this.value)
+      return;
+    const e = this._value;
+    this._value = o, this.requestUpdate("value", e);
+  }
+  get value() {
+    return this._value;
+  }
+  getColorValue() {
+    if (!this.value)
+      return "";
+    if (!this.cachedColor || this.cachedColor !== this.value) {
+      const o = new c(this.value);
+      this.cachedColor = o.isValid ? o.toRgbString() : "";
+    }
+    return this.cachedColor;
+  }
+  renderColorHandle() {
+    return this.viewColor ? i`
+          <luzmo-color-handle
+            size="m"
+            color=${this.getColorValue()}
+          ></luzmo-color-handle>
+        ` : i``;
+  }
+  render() {
+    return this.viewColor && import("../color-handle/index.js"), i` ${super.render()} ${this.renderColorHandle()} `;
+  }
+  checkValidity() {
+    let o = super.checkValidity();
+    return this.value && ((!this.cachedTinyColor || this.cachedTinyColor.originalInput !== this.value) && (this.cachedTinyColor = new c(this.value)), this.valid = o = this.cachedTinyColor.isValid, this.invalid = !o), o;
+  }
+}
+z([
+  a({ type: Boolean, attribute: "view-color" })
+], m.prototype, "viewColor");
+customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", m);
+export {
+  m as LuzmoColorField
+};

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

@@ -0,0 +1,13 @@
+import './../color-loupe/color-loupe';
+import { LuzmoElement } from '../../utils/base';
+export declare class LuzmoColorHandle extends LuzmoElement {
+    static styles: import("lit").CSSResult;
+    disabled: boolean;
+    focused: boolean;
+    open: boolean;
+    color: string;
+    private handlePointerdown;
+    private handlePointerup;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected firstUpdated(changedProperties: Map<string, any>): void;
+}