@luzmo/lucero 0.0.3 → 0.0.4

package/lib/color-DphK4hwx.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const c=require("./index-DCKCHDTt.cjs"),_=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,f=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,S=/(^hs[v|l]a?\()\d{1,3}/,g=(p,s)=>s?p.toHexString():p.toHex();class H{constructor(s,{applyColorToState:i,extractColorFromState:e,maintains:r}){this.maintains="hue",this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(t,o)=>o?t.toRgbString():t.toRgb(),prgb:(t,o)=>o?t.toPercentageRgbString():t.toPercentageRgb(),hex8:(t,o)=>o?t.toHex8String():t.toHex8(),name:t=>t.toName()||t.toRgbString(),hsl:(t,o)=>{if(this.maintains==="hue"){if(o)return t.toHslString().replace(S,`$1${this.hue}`);const{s:n,l:u,a:v}=t.toHsl();return{h:this.hue,s:n,l:u,a:v}}if(o)return t.toHslString().replace(f,`$1${this.hue}$2${this.saturation}`);const{s:h,l:a,a:l}=t.toHsl();return{h:this.hue,s:h,l:a,a:l}},hsv:(t,o)=>{if(this.maintains==="hue"){if(o)return t.toHsvString().replace(S,`$1${this.hue}`);const{s:n,v:u,a:v}=t.toHsv();return{h:this.hue,s:n,v:u,a:v}}if(o)return t.toHsvString().replace(f,`$1${this.hue}$2${this.saturation}`);const{s:h,v:a,a:l}=t.toHsv();return{h:this.hue,s:h,v:a,a:l}},hex:g,hex3:g,hex4:g,hex6:g},this._color=new c.TinyColor({h:0,s:1,v:1}),this._previousColor=new c.TinyColor({h:0,s:1,v:1}),this._format={format:"",isString:!1},this.host=s,this.applyColorToState=i,this.extractColorFromState=e,this.maintains=r||this.maintains}setColorProcess(s,i,e,r){this.maintains==="hue"?this.setColorMaintainHue(s,i,e,r):this.maintains==="saturation"&&this.setColorMaintainSaturation(s,i,e,r)}setColorMaintainHue(s,i,e,r){const{h:t,s:o,v:h,a}=this._color.toHsv();let l;if(r&&e.startsWith("hs")){const n=_.exec(i);if(n!==null){const[,u]=n;l=Number(u)}}else if(!r&&e.startsWith("hs")){const n=s.originalInput;l=Object.values(n)[0]}this.hue=l||t,this.opacity=a??1,this.applyColorToState({h:t,s:o,v:h,a})}setColorMaintainSaturation(s,i,e,r){const{a:t}=this._color.toHsv();if(r&&e.startsWith("hs")){const o=_.exec(i);if(o!==null){const[,h,a]=o;this.hue=Number(h),this.saturation=Number(a)}}else if(!r&&e.startsWith("hs")){const o=s.originalInput,h=Object.values(o);this.hue=h[0],this.saturation=h[1]}else{const{h:o}=s.toHsv();this.hue=o}this.opacity=t??1,this.applyColorToState(s.toHsv())}applyColorFromState(){this._color=new c.TinyColor(this.extractColorFromState(this))}get hue(){return this._hue}set hue(s){const i=Math.min(360,Math.max(0,s));if(i===this.hue)return;const e=this.hue,{s:r,v:t,a:o}=this._color.toHsv();this._color=new c.TinyColor({h:i,s:r,v:t,a:o}),this._hue=i,this.host.requestUpdate("hue",e)}get opacity(){return this._opacity}set opacity(s){const i=Math.min(1,Math.max(0,s));if(i===this.opacity)return;const e=this.opacity,{h:r,s:t,v:o}=this._color.toHsv();this._color=new c.TinyColor({h:r,s:t,v:o,a:i}),this._opacity=i,this.host.requestUpdate("opacity",e)}get value(){return this.color}get color(){return this.getColorProcesses[this._format.format||"hex"](this._color,this._format.isString)}set color(s){if(s===this.color)return;const i=this._color;this._color=new c.TinyColor(s);const e=this._color.format;let r=typeof s=="string"||s instanceof String;e.startsWith("hex")&&(r=s.startsWith("#")),this._format={format:e,isString:r},this.setColorProcess(this._color,s,e,r),this.host.requestUpdate("color",i)}getColor(s){const i={hsl:"toHsl"};return this._color[i[s]]()}setColor(s){this._color=s;const i=typeof this._color.originalInput=="string"||this._color.originalInput instanceof String;this.setColorProcess(this._color,s,this._color.format,i)}getHslString(){return this._color.toHslString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this.setColor(this._previousColor)}}exports.ColorController=H;

package/lib/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 m=require("lit"),a=require("../base-BCmA9Wxv.cjs"),f=require("../query-BL-TJj7K.cjs"),b=require("../if-defined-Cv6xanXh.cjs");require("../color-handle/index.cjs");const v=require("../platform-CQzYNWKq.cjs"),w=require("../color-DphK4hwx.cjs"),g=require("../streaming-listener-Bw4jE33f.cjs"),C="@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,$=Object.getOwnPropertyDescriptor,s=(p,e,t,r)=>{for(var o=r>1?void 0:r?$(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 a.LuzmoElement{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.labelX="saturation",this.labelY="luminosity",this.isLTR=!0,this.languageResolver=new g.LanguageResolutionController(this),this.colorController=new w.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[m.unsafeCSS(C)]}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=v.isAndroid()||v.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),y=`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 m.html`
+      <div
+        @pointerdown=${this.handleAreaPointerdown}
+        class="gradient"
+        style="background: ${y}"
+      >
+        <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);`}
+        ${g.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()}}s([a.n({type:String,reflect:!0})],i.prototype,"dir",2);s([a.n({type:Boolean,reflect:!0})],i.prototype,"disabled",2);s([a.n({type:Boolean,reflect:!0})],i.prototype,"focused",2);s([a.n({type:String,attribute:"label-x"})],i.prototype,"labelX",2);s([a.n({type:String,attribute:"label-y"})],i.prototype,"labelY",2);s([a.n({type:Boolean,attribute:"is-ltr"})],i.prototype,"isLTR",2);s([f.e(".handle")],i.prototype,"handle",2);s([a.n({type:Number})],i.prototype,"hue",1);s([a.n({type:String})],i.prototype,"value",1);s([a.n({type:String})],i.prototype,"color",1);s([a.n({attribute:!1})],i.prototype,"activeAxis",2);s([a.n({type:Number})],i.prototype,"x",1);s([a.n({type:Number})],i.prototype,"y",1);s([a.n({type:Number})],i.prototype,"step",2);s([f.e('[name="x"]')],i.prototype,"inputX",2);s([f.e('[name="y"]')],i.prototype,"inputY",2);customElements.get("luzmo-color-area")||customElements.define("luzmo-color-area",i);exports.LuzmoColorArea=i;

package/lib/color-area/index.js

@@ -0,0 +1,373 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { unsafeCSS as z, html as v } from "lit";
+import { L as y, n as s } from "../base-nYalvNMy.js";
+import { e as b } from "../query-D_KR_GUc.js";
+import { o as m } from "../if-defined-CYpcjGCb.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-DLo0wkMc.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 S = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (u, e, o, t) => {
+  for (var r = t > 1 ? void 0 : t ? _(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 && S(e, o, r), r;
+};
+class i extends y {
+  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 [z(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 v`
+      <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/lib/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 r=require("lit"),a=require("../base-BCmA9Wxv.cjs"),h=require("../text-field-C6Aa7XOb.cjs"),u=require("../index-DCKCHDTt.cjs");var c=Object.defineProperty,d=(i,e,l,v)=>{for(var t=void 0,o=i.length-1,n;o>=0;o--)(n=i[o])&&(t=n(e,l,t)||t);return t&&c(e,l,t),t};class s extends h.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 l=this._value;this._value=e,this.requestUpdate("value",l)}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?r.html`
+          <luzmo-color-handle
+            size="m"
+            color=${this.getColorValue()}
+          ></luzmo-color-handle>
+        `:r.html``}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),r.html` ${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}}d([a.n({type:Boolean,attribute:"view-color"})],s.prototype,"viewColor");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",s);exports.LuzmoColorField=s;

package/lib/color-field/index.js

@@ -0,0 +1,81 @@
+/*! * 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 { html as i } from "lit";
+import { n as a } from "../base-nYalvNMy.js";
+import { L as s } from "../text-field-DPk332j9.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/lib/color-handle/index.cjs

@@ -0,0 +1,24 @@
+/*! * 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"});require("../color-loupe-BICpNqFs.cjs");const l=require("../base-BCmA9Wxv.cjs"),c=require("lit"),u=':host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),block-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),border-width var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-inline var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-block var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out)}:host{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);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size, 16px);block-size:var(--luzmo-color-handle-size, 16px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);border-width:var(--luzmo-color-handle-border-width, 2px);border-color:var(--luzmo-color-handle-border-color, rgb(255, 255, 255));box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width, 1px) var(--luzmo-color-handle-outer-border-color, rgba(0, 0, 0, .42));transition:all var(--luzmo-color-handle-animation-duration, 0) var(--luzmo-color-handle-animation-easing, ease-in-out);border-style:solid}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size, 24px);block-size:var(--luzmo-color-handle-hitarea-size, 24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius, 100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size, 32px);block-size:var(--luzmo-color-handle-focused-size, 32px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) * -1);outline:none}:host([disabled]){pointer-events:none;border-color:var(--highcontrast-color-handle-border-color-disabled, var(--luzmo-color-handle-border-color-disabled, var(--luzmo-font-color-disabled)));background:var(--highcontrast-color-handle-fill-color-disabled, var(--luzmo-color-handle-fill-color-disabled, var(--luzmo-font-color-disabled)));box-shadow:none}:host([disabled]) .inner{display:none}.inner{inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width, var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color, rgba(0, 0, 0, .42));background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors: active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled: GrayText;--highcontrast-color-handle-fill-color-disabled: Canvas}}';var h=Object.defineProperty,a=(t,o,s,m)=>{for(var r=void 0,n=t.length-1,d;n>=0;n--)(d=t[n])&&(r=d(o,s,r)||r);return r&&h(o,s,r),r};const i=class i extends l.LuzmoElement{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.open=!1,this.color="rgba(255, 0, 0, 0.5)"}handlePointerdown(o){o.pointerType==="touch"&&(this.open=!0),this.setPointerCapture(o.pointerId)}handlePointerup(o){this.open=!1,this.releasePointerCapture(o.pointerId)}render(){return c.html`
+      <div class="inner" style="background-color: ${this.color}"></div>
+      <luzmo-color-loupe
+        color=${this.color}
+        ?open=${this.open&&!this.disabled}
+      ></luzmo-color-loupe>
+    `}firstUpdated(o){super.firstUpdated(o),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerup",this.handlePointerup),this.addEventListener("pointercancel",this.handlePointerup)}};i.styles=c.unsafeCSS(u);let e=i;a([l.n({type:Boolean,reflect:!0})],e.prototype,"disabled");a([l.n({type:Boolean,reflect:!0})],e.prototype,"focused");a([l.n({type:Boolean,reflect:!0})],e.prototype,"open");a([l.n({type:String})],e.prototype,"color");customElements.get("luzmo-color-handle")||customElements.define("luzmo-color-handle",e);exports.LuzmoColorHandle=e;