@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/md-color-picker.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as r,h as i,d as s,t as o}from"./p-MWBNn6Lj.js";const a=(t,e,r)=>Math.max(e,Math.min(r,t));function n(t,e,r){const i=t/255;const s=e/255;const o=r/255;const a=Math.max(i,s,o);const n=Math.min(i,s,o);const l=a-n;let c=0;if(l!==0){switch(a){case i:c=(s-o)/l%6;break;case s:c=(o-i)/l+2;break;default:c=(i-s)/l+4}c*=60;if(c<0)c+=360}const h=a===0?0:l/a*100;const d=a*100;return{h:c,s:h,v:d}}function l(t,e,r){const i=e/100;const s=r/100;const o=s*i;const a=t/60;const n=o*(1-Math.abs(a%2-1));let l=0,c=0,h=0;if(a>=0&&a<1){l=o;c=n;h=0}else if(a<2){l=n;c=o;h=0}else if(a<3){l=0;c=o;h=n}else if(a<4){l=0;c=n;h=o}else if(a<5){l=n;c=0;h=o}else{l=o;c=0;h=n}const d=s-o;return{r:Math.round((l+d)*255),g:Math.round((c+d)*255),b:Math.round((h+d)*255)}}function c(t){const{r:e,g:r,b:i}=l(t.h,t.s,t.v);return{r:e,g:r,b:i,a:t.a}}function h(t,e,r){const i=t/255;const s=e/255;const o=r/255;const a=Math.max(i,s,o);const n=Math.min(i,s,o);const l=(a+n)/2;let c=0;let h=0;if(a!==n){const t=a-n;h=l>.5?t/(2-a-n):t/(a+n);switch(a){case i:c=(s-o)/t+(s<o?6:0);break;case s:c=(o-i)/t+2;break;default:c=(i-s)/t+4}c*=60}return{h:c,s:h*100,l:l*100}}function d(t){const{r:e,g:r,b:i}=l(t.h,t.s,t.v);return h(e,r,i)}function p(t,e,r){const i=(t%360+360)%360;const s=a(e,0,100)/100;const o=a(r,0,100)/100;const n=(1-Math.abs(2*o-1))*s;const l=n*(1-Math.abs(i/60%2-1));const c=o-n/2;let h=0;let d=0;let p=0;if(i<60){h=n;d=l}else if(i<120){h=l;d=n}else if(i<180){d=n;p=l}else if(i<240){d=l;p=n}else if(i<300){h=l;p=n}else{h=n;p=l}return{r:Math.round((h+c)*255),g:Math.round((d+c)*255),b:Math.round((p+c)*255)}}function u(t,e=false){const r=t=>a(Math.round(t),0,255).toString(16).padStart(2,"0");const i=`#${r(t.r)}${r(t.g)}${r(t.b)}`;if(!e&&t.a>=1)return i.toUpperCase();return`${i}${r(t.a*255)}`.toUpperCase()}function m(t,e=false){return u(c(t),e||t.a<1)}function f(t){if(!t)return null;const e=t.trim().replace(/^#/,"");const r=/^[0-9a-fA-F]+$/;if(!r.test(e))return null;let i=0,s=0,o=0,a=1;if(e.length===3){i=parseInt(e[0]+e[0],16);s=parseInt(e[1]+e[1],16);o=parseInt(e[2]+e[2],16)}else if(e.length===4){i=parseInt(e[0]+e[0],16);s=parseInt(e[1]+e[1],16);o=parseInt(e[2]+e[2],16);a=parseInt(e[3]+e[3],16)/255}else if(e.length===6){i=parseInt(e.slice(0,2),16);s=parseInt(e.slice(2,4),16);o=parseInt(e.slice(4,6),16)}else if(e.length===8){i=parseInt(e.slice(0,2),16);s=parseInt(e.slice(2,4),16);o=parseInt(e.slice(4,6),16);a=parseInt(e.slice(6,8),16)/255}else{return null}return{r:i,g:s,b:o,a}}function _(t){const e=t.trim().match(/^hsla?\(\s*([\d.]+)[\s,]+([\d.]+)%?[\s,]+([\d.]+)%?(?:[\s,/]+([\d.%]+))?\s*\)$/i);if(!e)return null;const r=a(parseFloat(e[1]),0,360);const i=a(parseFloat(e[2]),0,100);const s=a(parseFloat(e[3]),0,100);const o=t=>{if(t==null)return 1;if(t.endsWith("%"))return a(parseFloat(t)/100,0,1);return a(parseFloat(t),0,1)};const{r:n,g:l,b:c}=p(r,i,s);return{r:n,g:l,b:c,a:o(e[4])}}function b(t){const e=t.trim().match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.%]+))?\s*\)$/i);if(!e)return null;const r=t=>{if(t.endsWith("%"))return a(parseFloat(t)/100*255,0,255);return a(parseFloat(t),0,255)};const i=t=>{if(t==null)return 1;if(t.endsWith("%"))return a(parseFloat(t)/100,0,1);return a(parseFloat(t),0,1)};return{r:Math.round(r(e[1])),g:Math.round(r(e[2])),b:Math.round(r(e[3])),a:i(e[4])}}function v(t){if(!t)return null;const e=t.trim();if(e.startsWith("#")||/^[0-9a-fA-F]{3,8}$/.test(e)){const t=f(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}const r=e.toLowerCase();if(r.startsWith("rgb")){const t=b(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}if(r.startsWith("hsl")){const t=_(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}return null}function g(t,e){const r=c(t);if(e==="rgb"){if(t.a<1){return`rgba(${r.r}, ${r.g}, ${r.b}, ${+t.a.toFixed(2)})`}return`rgb(${r.r}, ${r.g}, ${r.b})`}if(e==="hsl"){const{h:e,s:i,l:s}=h(r.r,r.g,r.b);if(t.a<1){return`hsla(${Math.round(e)}, ${Math.round(i)}%, ${Math.round(s)}%, ${+t.a.toFixed(2)})`}return`hsl(${Math.round(e)}, ${Math.round(i)}%, ${Math.round(s)}%)`}return m(t,t.a<1)}const k=()=>`:host{--_width:var(--md-color-picker-width, 296px);--_plate-height:var(--md-color-picker-plate-height, 176px);--_radius:var(--md-color-picker-radius, var(--md-sys-shape-corner-extra-large, 28px));--_surface:var(--md-color-picker-surface-color, var(--md-sys-color-surface-container-high, #ECE6F0));--_on-surface:var(--md-color-picker-on-surface, var(--md-sys-color-on-surface, #1C1B1F));--_outline:var(--md-color-picker-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));--_outline-strong:var(--md-color-picker-outline-strong, var(--md-sys-color-outline, #79747E));--_primary:var(--md-sys-color-primary, #6750A4);--_thumb-size:var(--md-color-picker-thumb-size, 18px);--_thumb-border:var(--md-color-picker-thumb-border, #FFFFFF);--_preset-size:var(--md-color-picker-preset-size, 32px);--_popover-elevation:var(--md-color-picker-popover-elevation, var(--md-sys-elevation-3, 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3)));--_state-easing:var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));--_state-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_spring-easing:var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90));--_spring-duration:var(--md-sys-motion-spring-spatial-fast-duration, 350ms);--_emphasized-decelerate:var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));--_emphasized-accelerate:var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));--_popover-in-duration:var(--md-sys-motion-duration-medium2, 300ms);--_popover-out-duration:var(--md-sys-motion-duration-short4, 200ms);display:inline-block;box-sizing:border-box;direction:inherit;font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);color:var(--_on-surface)}:host(.md-color-picker--inline){inline-size:var(--_width)}.md-color-picker__popover{position:absolute;z-index:var(--md-sys-z-index-popup, 1000);margin-block-start:8px;inline-size:var(--_width);background:var(--_surface);color:var(--_on-surface);border-radius:var(--_radius);box-shadow:var(--_popover-elevation);padding:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box;transform-origin:top left;animation:md-color-picker-pop-in var(--_popover-in-duration) var(--_emphasized-decelerate) both}.md-color-picker__popover[data-state="closing"]{animation:md-color-picker-pop-out var(--_popover-out-duration) var(--_emphasized-accelerate) both}@keyframes md-color-picker-pop-in{from{opacity:0;transform:scale(0.8) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes md-color-picker-pop-out{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.95) translateY(-4px)}}:host([dir="rtl"]) .md-color-picker__popover,:host-context([dir="rtl"]) .md-color-picker__popover{transform-origin:top right}.md-color-picker__panel{display:flex;flex-direction:column;gap:max(4px, calc(14px + var(--md-sys-density-scale, 0) * 2px));inline-size:100%;background:var(--_surface);border-radius:var(--_radius);padding:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box}:host(.md-color-picker--popover) .md-color-picker__panel{padding:0;background:transparent}.md-color-picker__plate{position:relative;inline-size:100%;block-size:var(--_plate-height);border-radius:var(--md-sys-shape-corner-large, 16px);overflow:hidden;touch-action:none;cursor:crosshair}.md-color-picker__plate:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:2px}.md-color-picker__plate-saturation,.md-color-picker__plate-value{position:absolute;inset:0}.md-color-picker__plate-saturation{background:linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))}:host(:dir(rtl)) .md-color-picker__plate-saturation,:host([dir="rtl"]) .md-color-picker__plate-saturation,:host-context([dir="rtl"]) .md-color-picker__plate-saturation{background:linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0))}.md-color-picker__plate-value{background:linear-gradient(to top, #000000, rgba(0, 0, 0, 0))}.md-color-picker__thumb{position:absolute;inline-size:var(--_thumb-size);block-size:var(--_thumb-size);border-radius:50%;border:2px solid var(--_thumb-border);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.4),     var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3));margin-inline-start:calc(-0.5 * var(--_thumb-size));margin-block-start:calc(-0.5 * var(--_thumb-size));pointer-events:none;background-color:currentColor;transition:box-shadow var(--_state-duration) var(--_state-easing),     transform var(--_state-duration) var(--_state-easing)}.md-color-picker__plate:active .md-color-picker__thumb,.md-color-picker__hue:active .md-color-picker__thumb,.md-color-picker__alpha:active .md-color-picker__thumb{transform:scale(1.15);box-shadow:0 0 0 6px color-mix(in srgb, var(--_primary) 16%, transparent),     var(--md-sys-elevation-2, 0px 1px 2px rgba(0,0,0,0.3))}.md-color-picker__thumb--slider{inset-block-start:50%;margin-block-start:0;transform:translateY(-50%)}.md-color-picker__hue:active .md-color-picker__thumb--slider,.md-color-picker__alpha:active .md-color-picker__thumb--slider{transform:translateY(-50%) scale(1.15)}.md-color-picker__sliders{display:flex;gap:max(4px, calc(14px + var(--md-sys-density-scale, 0) * 2px));align-items:center}.md-color-picker__sliders-stack{flex:1;display:flex;flex-direction:column;gap:var(--md-sys-spacing-gap-md, 12px)}.md-color-picker__hue,.md-color-picker__alpha{position:relative;inline-size:100%;block-size:14px;border-radius:var(--md-sys-shape-corner-full, 9999px);touch-action:none;cursor:pointer;transition:box-shadow var(--_state-duration) var(--_state-easing)}.md-color-picker__hue{background:linear-gradient(     to right,     #ff0000 0%, #ffff00 17%, #00ff00 33%,     #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%   )}:host(:dir(rtl)) .md-color-picker__hue,:host([dir="rtl"]) .md-color-picker__hue,:host-context([dir="rtl"]) .md-color-picker__hue{background:linear-gradient(     to left,     #ff0000 0%, #ffff00 17%, #00ff00 33%,     #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%   )}.md-color-picker__alpha{background-image:linear-gradient(45deg, #ccc 25%, transparent 25%),     linear-gradient(-45deg, #ccc 25%, transparent 25%),     linear-gradient(45deg, transparent 75%, #ccc 75%),     linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0}.md-color-picker__alpha-track{position:absolute;inset:0;border-radius:inherit}.md-color-picker__hue::before,.md-color-picker__alpha::before{content:'';position:absolute;inset-block:calc((100% - var(--_thumb-size)) / 2);inset-inline:calc(var(--_thumb-size) / -2)}.md-color-picker__hue:focus-visible,.md-color-picker__alpha:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:4px}.md-color-picker__hue:hover,.md-color-picker__alpha:hover{box-shadow:0 0 0 4px color-mix(in srgb, var(--_on-surface) 8%, transparent)}.md-color-picker__preview{flex-shrink:0;inline-size:40px;block-size:40px;border-radius:50%;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%),     linear-gradient(-45deg, #ccc 25%, transparent 25%),     linear-gradient(45deg, transparent 75%, #ccc 75%),     linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0;border:1px solid var(--_outline);overflow:hidden;transition:transform var(--_spring-duration) var(--_spring-easing)}.md-color-picker__preview-inner{inline-size:100%;block-size:100%;transition:background-color var(--_state-duration) var(--_state-easing)}.md-color-picker__field{display:flex;flex-direction:column;gap:var(--md-sys-spacing-gap-xs, 4px);flex:1;min-inline-size:0}.md-color-picker__field label{font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-font-size, 11px);font-weight:var(--md-sys-typescale-label-small-font-weight, 500);line-height:var(--md-sys-typescale-label-small-line-height, 16px);letter-spacing:var(--md-sys-typescale-label-small-letter-spacing, 0.5px);color:var(--md-sys-color-on-surface-variant, #49454F);text-transform:uppercase}.md-color-picker__field input{inline-size:100%;padding:var(--md-sys-spacing-inset-sm, 8px) 6px;border:1px solid var(--_outline);border-radius:var(--md-sys-shape-corner-extra-small, 4px);background:var(--md-sys-color-surface-container-lowest, #FFFFFF);color:var(--_on-surface);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;box-sizing:border-box;text-align:center;transition:border-color var(--_state-duration) var(--_state-easing),     box-shadow var(--_state-duration) var(--_state-easing)}.md-color-picker__field input:hover:not(:disabled){border-color:var(--_outline-strong)}.md-color-picker__field input:focus-visible{outline:none;border-color:var(--_primary);box-shadow:0 0 0 1px var(--_primary)}.md-color-picker__field input[aria-invalid="true"]{border-color:var(--md-sys-color-error, #B3261E)}.md-color-picker__field input[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 1px var(--md-sys-color-error, #B3261E)}.md-color-picker__field input:disabled{opacity:0.5;cursor:not-allowed}.md-color-picker__field--hex input{text-align:start;font-family:var(--md-sys-typescale-mono-font, ui-monospace, 'SF Mono', Menlo, monospace);letter-spacing:0.05em}.md-color-picker__inputs{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-color-picker__presets{display:flex;flex-wrap:wrap;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-color-picker__preset{position:relative;inline-size:var(--_preset-size);block-size:var(--_preset-size);border:1px solid var(--_outline);border-radius:50%;cursor:pointer;padding:0;transition:transform var(--_spring-duration) var(--_spring-easing),     box-shadow var(--_spring-duration) var(--_spring-easing)}.md-color-picker__preset:hover:not(:disabled){transform:scale(1.15) rotate(-4deg);box-shadow:var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3))}.md-color-picker__preset:active:not(:disabled){transform:scale(1.05) rotate(0deg)}.md-color-picker__preset:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:3px}.md-color-picker__preset[aria-selected="true"]{box-shadow:0 0 0 2px var(--_surface),     0 0 0 4px var(--_primary),     var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3));transform:scale(1.1)}.md-color-picker__preset[aria-selected="true"]:hover:not(:disabled){transform:scale(1.18)}:host(.md-color-picker--disabled) .md-color-picker__plate,:host(.md-color-picker--disabled) .md-color-picker__hue,:host(.md-color-picker--disabled) .md-color-picker__alpha{pointer-events:none;opacity:0.5}@media (prefers-reduced-motion: reduce){.md-color-picker__popover{animation-duration:0.01ms !important}.md-color-picker__preset,.md-color-picker__field input,.md-color-picker__thumb,.md-color-picker__preview,.md-color-picker__hue,.md-color-picker__alpha{transition-duration:0.01ms !important}.md-color-picker__preset:hover:not(:disabled){transform:scale(1.06)}}@media (forced-colors: active){.md-color-picker__field input,.md-color-picker__preset{border:1px solid CanvasText}.md-color-picker__plate,.md-color-picker__hue,.md-color-picker__alpha{forced-color-adjust:none}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const x=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdInput=r(this,"mdInput",7);this.mdChange=r(this,"mdChange",7);this.mdOpenChange=r(this,"mdOpenChange",7);this.variant="inline";this.value="#6750A4";this.format="hex";this.alpha=false;this.showHex=true;this.showInputs=true;this.disabled=false;this.presets="";this.ariaLabelProp="Color picker";this.open=false;this.dismissOnOutsideClick=false;this.density=0;this.hsva={h:268,s:53,v:64,a:1};this.hexInput="";this.hexInvalid=false;this.hasSlottedTrigger=false;this.pointerDragKind=null;this.uid=`md-color-picker-${Math.random().toString(36).slice(2,7)}`;this.wiredTrigger=null;this.lastEmitted="";this.onSatPointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.satRect=e.getBoundingClientRect();this.pointerDragKind="sat";this.updateSatFromPoint(t.clientX,t.clientY)};this.onSatPointerMove=t=>{if(this.pointerDragKind!=="sat"||!this.satRect)return;this.updateSatFromPoint(t.clientX,t.clientY)};this.onSatPointerUp=t=>{if(this.pointerDragKind!=="sat")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onSatKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?10:1;const r=this.isRtl();let{s:i,v:s}=this.hsva;let o=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"ArrowDown":s-=e;break;case"ArrowUp":s+=e;break;case"Home":i=0;break;case"End":i=100;break;case"PageDown":s=0;break;case"PageUp":s=100;break;default:o=false}if(!o)return;t.preventDefault();this.hsva={...this.hsva,s:Math.max(0,Math.min(100,i)),v:Math.max(0,Math.min(100,s))};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)};this.onHuePointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.hueRect=e.getBoundingClientRect();this.pointerDragKind="hue";this.updateHueFromPoint(t.clientX)};this.onHuePointerMove=t=>{if(this.pointerDragKind!=="hue"||!this.hueRect)return;this.updateHueFromPoint(t.clientX)};this.onHuePointerUp=t=>{if(this.pointerDragKind!=="hue")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onHueKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?15:1;const r=this.isRtl();let{h:i}=this.hsva;let s=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"Home":i=0;break;case"End":i=360;break;default:s=false}if(!s)return;t.preventDefault();i=(i%360+360)%360;this.hsva={...this.hsva,h:i};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)};this.onAlphaPointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.alphaRect=e.getBoundingClientRect();this.pointerDragKind="alpha";this.updateAlphaFromPoint(t.clientX)};this.onAlphaPointerMove=t=>{if(this.pointerDragKind!=="alpha"||!this.alphaRect)return;this.updateAlphaFromPoint(t.clientX)};this.onAlphaPointerUp=t=>{if(this.pointerDragKind!=="alpha")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onAlphaKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?.1:.01;const r=this.isRtl();let{a:i}=this.hsva;let s=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"Home":i=0;break;case"End":i=1;break;default:s=false}if(!s)return;t.preventDefault();i=Math.max(0,Math.min(1,i));this.hsva={...this.hsva,a:i};this.hexInput=m(this.hsva,true);this.hexInvalid=false;this.emit(true)};this.onHexInput=t=>{const e=t.target.value;this.hexInput=e;const r=v(e.startsWith("#")?e:`#${e}`);if(r){this.hsva=r;this.hexInvalid=false;this.emit(false)}else{this.hexInvalid=true}};this.onHexBlur=()=>{if(this.hexInvalid){this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false}this.emit(true)};this.onRgbChange=(t,e)=>{const r=e.target.value;const i=Math.max(0,Math.min(255,parseInt(r,10)||0));const s=c(this.hsva);this.rgbaFromChannels(t==="r"?i:s.r,t==="g"?i:s.g,t==="b"?i:s.b)};this.onHslChange=(t,e)=>{const r=e.target.value;const i=parseInt(r,10)||0;const s=d(this.hsva);const o=t==="h"?Math.max(0,Math.min(360,i)):s.h;const a=t==="s"?Math.max(0,Math.min(100,i)):s.s;const n=t==="l"?Math.max(0,Math.min(100,i)):s.l;const{r:l,g:c,b:h}=p(o,a,n);this.rgbaFromChannels(l,c,h)};this.onAlphaInputChange=t=>{const e=t.target.value;const r=Math.max(0,Math.min(1,parseFloat(e)||0));this.hsva={...this.hsva,a:r};this.hexInput=m(this.hsva,true);this.emit(true)};this.onPresetClick=t=>{if(this.disabled)return;this.applyValue(t,true);this.emit(true)};this.onPresetKeyDown=(t,e)=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();this.onPresetClick(e)}};this.toggleOpen=()=>{if(this.disabled)return;this.open=!this.open}}componentWillLoad(){this.applyValue(this.value,false);this.computeSlottedTrigger()}componentDidLoad(){this.syncOutsideClickListener();this.wireSlottedTrigger();const t=this.el.shadowRoot?.querySelector('slot[name="trigger"]');t?.addEventListener("slotchange",(()=>{this.computeSlottedTrigger();this.wireSlottedTrigger()}))}computeSlottedTrigger(){this.hasSlottedTrigger=this.el.querySelector('[slot="trigger"]')!==null;if(!this.hasSlottedTrigger&&this.variant==="popover"&&typeof console!=="undefined"){console.warn('[md-color-picker] variant="popover" needs a trigger: slot one into '+'`trigger` (e.g. <md-button slot="trigger">…</md-button>). Without it '+"there is nothing to open the panel.")}}wireSlottedTrigger(){const t=this.el.querySelector('[slot="trigger"]');if(!t||t===this.wiredTrigger){this.syncSlottedTriggerAria();return}this.wiredTrigger?.removeEventListener("click",this.toggleOpen);t.addEventListener("click",this.toggleOpen);this.wiredTrigger=t;this.syncSlottedTriggerAria()}syncSlottedTriggerAria(){const t=this.wiredTrigger;if(!t)return;t.setAttribute("aria-haspopup","dialog");t.setAttribute("aria-expanded",String(this.open))}onValueChange(t){if(t===this.lastEmitted)return;this.applyValue(t,false)}isRtl(){return typeof getComputedStyle==="function"&&getComputedStyle(this.el).direction==="rtl"}horizontalRatio(t,e){const r=e.width;if(r<=0)return 0;return this.isRtl()?(e.right-t)/r:(t-e.left)/r}horizontalGradientTo(){return this.isRtl()?"left":"right"}applyValue(t,e){const r=v(t);if(r){this.hsva=r;this.hexInput=m(r,this.alpha&&r.a<1);this.hexInvalid=false;if(e)this.emit()}else{this.hexInvalid=true}}emit(t=false){const e=g(this.hsva,this.format);if(e!==this.value){this.lastEmitted=e;this.value=e;this.mdInput.emit({value:e});if(t)this.mdChange.emit({value:e})}else if(t){this.mdChange.emit({value:e})}}updateSatFromPoint(t,e){if(!this.satRect)return;const r=this.horizontalRatio(t,this.satRect);const i=e-this.satRect.top;const s=Math.max(0,Math.min(100,r*100));const o=Math.max(0,Math.min(100,100-i/this.satRect.height*100));this.hsva={...this.hsva,s,v:o};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(false)}updateHueFromPoint(t){if(!this.hueRect)return;const e=Math.max(0,Math.min(1,this.horizontalRatio(t,this.hueRect)));const r=e*360;this.hsva={...this.hsva,h:r};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(false)}updateAlphaFromPoint(t){if(!this.alphaRect)return;const e=Math.max(0,Math.min(1,this.horizontalRatio(t,this.alphaRect)));this.hsva={...this.hsva,a:e};this.hexInput=m(this.hsva,true);this.hexInvalid=false;this.emit(false)}rgbaFromChannels(t,e,r){const i=`#${[t,e,r].map((t=>t.toString(16).padStart(2,"0"))).join("")}`;const s=v(i);if(s){this.hsva={...s,a:this.hsva.a};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)}}get parsedPresets(){const t=Array.isArray(this.presets)?this.presets:String(this.presets??"").split(",");return t.map((t=>String(t).trim())).filter(Boolean)}async show(){if(this.variant!=="popover"||this.disabled)return;this.open=true}async close(){if(this.variant!=="popover")return;this.open=false}onOpenChange(t){this.mdOpenChange.emit({open:t});this.syncOutsideClickListener();this.syncSlottedTriggerAria()}onVariantChange(){this.syncOutsideClickListener()}onDismissOnOutsideClickChange(){this.syncOutsideClickListener()}onDisabledChange(){this.syncOutsideClickListener()}disconnectedCallback(){this.removeOutsideClickHandler();this.wiredTrigger?.removeEventListener("click",this.toggleOpen);this.wiredTrigger=null}syncOutsideClickListener(){this.removeOutsideClickHandler();if(this.variant!=="popover"||!this.open||!this.dismissOnOutsideClick||this.disabled||typeof document==="undefined"){return}requestAnimationFrame((()=>{if(this.variant!=="popover"||!this.open||!this.dismissOnOutsideClick||this.disabled){return}this.attachOutsideClickHandler()}))}attachOutsideClickHandler(){this.outsideClickHandler=t=>{if(this.disabled||!this.open)return;const e=t.composedPath?t.composedPath():[];if(e.includes(this.el))return;const r=t.target;if(r&&this.el.contains(r))return;this.open=false};document.addEventListener("mousedown",this.outsideClickHandler,true)}removeOutsideClickHandler(){if(this.outsideClickHandler&&typeof document!=="undefined"){document.removeEventListener("mousedown",this.outsideClickHandler,true)}this.outsideClickHandler=undefined}onGlobalKeyDown(t){if(this.variant==="popover"&&this.open&&t.key==="Escape"){t.preventDefault();this.open=false}}renderSaturationPlate(){const t=this.hsva.h;const e=this.hsva.s;const r=this.hsva.v;const s=c({h:t,s:100,v:100,a:1});const o=`rgb(${s.r}, ${s.g}, ${s.b})`;return i("div",{class:"md-color-picker__plate",part:"plate",role:"application",tabindex:this.disabled?-1:0,"aria-label":"Saturation and brightness",style:{background:o},onPointerDown:this.onSatPointerDown,onPointerMove:this.onSatPointerMove,onPointerUp:this.onSatPointerUp,onPointerCancel:this.onSatPointerUp,onKeyDown:this.onSatKeyDown},i("div",{class:"md-color-picker__plate-saturation","aria-hidden":"true"}),i("div",{class:"md-color-picker__plate-value","aria-hidden":"true"}),i("div",{class:"md-color-picker__thumb",part:"thumb",style:{insetInlineStart:`${e}%`,insetBlockStart:`${100-r}%`,backgroundColor:m(this.hsva,false)}}))}renderHueSlider(){const t=this.hsva.h;const e=t/360;return i("div",{class:"md-color-picker__hue",part:"hue",role:"slider","aria-label":"Hue","aria-valuemin":"0","aria-valuemax":"360","aria-valuenow":Math.round(t),"aria-orientation":"horizontal","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onPointerDown:this.onHuePointerDown,onPointerMove:this.onHuePointerMove,onPointerUp:this.onHuePointerUp,onPointerCancel:this.onHuePointerUp,onKeyDown:this.onHueKeyDown},i("div",{class:"md-color-picker__thumb md-color-picker__thumb--slider",style:{insetInlineStart:`${e*100}%`,backgroundColor:m({h:t,s:100,v:100,a:1},false)}}))}renderAlphaSlider(){if(!this.alpha)return null;const t=this.hsva.a;const e=c({...this.hsva,a:1});const r=`linear-gradient(to ${this.horizontalGradientTo()}, rgba(${e.r}, ${e.g}, ${e.b}, 0), rgba(${e.r}, ${e.g}, ${e.b}, 1))`;return i("div",{class:"md-color-picker__alpha",part:"alpha",role:"slider","aria-label":"Opacity","aria-valuemin":"0","aria-valuemax":"1","aria-valuenow":+t.toFixed(2),"aria-orientation":"horizontal","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onPointerDown:this.onAlphaPointerDown,onPointerMove:this.onAlphaPointerMove,onPointerUp:this.onAlphaPointerUp,onPointerCancel:this.onAlphaPointerUp,onKeyDown:this.onAlphaKeyDown},i("div",{class:"md-color-picker__alpha-track",style:{backgroundImage:r}}),i("div",{class:"md-color-picker__thumb md-color-picker__thumb--slider",style:{insetInlineStart:`${t*100}%`,backgroundColor:m(this.hsva,true)}}))}renderHexInput(){if(!this.showHex)return null;return i("div",{class:"md-color-picker__field md-color-picker__field--hex",part:"field-hex"},i("label",{part:"label",htmlFor:`${this.uid}-hex`},"Hex"),i("input",{id:`${this.uid}-hex`,type:"text",value:this.hexInput,spellcheck:false,autoComplete:"off","aria-invalid":this.hexInvalid?"true":undefined,disabled:this.disabled,onInput:this.onHexInput,onBlur:this.onHexBlur,onKeyDown:t=>{if(t.key==="Enter"){t.target.blur()}}}))}renderAlphaField(){if(!this.alpha)return null;return i("div",{class:"md-color-picker__field",part:"field-a"},i("label",{htmlFor:`${this.uid}-a`},"A"),i("input",{id:`${this.uid}-a`,type:"number",min:"0",max:"1",step:"0.01",value:+this.hsva.a.toFixed(2),disabled:this.disabled,onChange:this.onAlphaInputChange}))}renderRgbInputs(){const t=c(this.hsva);return i("div",{class:"md-color-picker__inputs",part:"inputs"},i("div",{class:"md-color-picker__field",part:"field-r"},i("label",{htmlFor:`${this.uid}-r`},"R"),i("input",{id:`${this.uid}-r`,type:"number",min:"0",max:"255",step:"1",value:t.r,disabled:this.disabled,onChange:t=>this.onRgbChange("r",t)})),i("div",{class:"md-color-picker__field",part:"field-g"},i("label",{htmlFor:`${this.uid}-g`},"G"),i("input",{id:`${this.uid}-g`,type:"number",min:"0",max:"255",step:"1",value:t.g,disabled:this.disabled,onChange:t=>this.onRgbChange("g",t)})),i("div",{class:"md-color-picker__field",part:"field-b"},i("label",{htmlFor:`${this.uid}-b`},"B"),i("input",{id:`${this.uid}-b`,type:"number",min:"0",max:"255",step:"1",value:t.b,disabled:this.disabled,onChange:t=>this.onRgbChange("b",t)})),this.renderAlphaField())}renderHslInputs(){const t=d(this.hsva);return i("div",{class:"md-color-picker__inputs",part:"inputs"},i("div",{class:"md-color-picker__field",part:"field-h"},i("label",{htmlFor:`${this.uid}-h`},"H"),i("input",{id:`${this.uid}-h`,type:"number",min:"0",max:"360",step:"1",value:Math.round(t.h),disabled:this.disabled,onChange:t=>this.onHslChange("h",t)})),i("div",{class:"md-color-picker__field",part:"field-s"},i("label",{htmlFor:`${this.uid}-s`},"S"),i("input",{id:`${this.uid}-s`,type:"number",min:"0",max:"100",step:"1",value:Math.round(t.s),disabled:this.disabled,onChange:t=>this.onHslChange("s",t)})),i("div",{class:"md-color-picker__field",part:"field-l"},i("label",{htmlFor:`${this.uid}-l`},"L"),i("input",{id:`${this.uid}-l`,type:"number",min:"0",max:"100",step:"1",value:Math.round(t.l),disabled:this.disabled,onChange:t=>this.onHslChange("l",t)})),this.renderAlphaField())}renderChannelInputs(){if(!this.showInputs)return null;if(this.format==="hsl")return this.renderHslInputs();return this.renderRgbInputs()}renderPresets(){const t=this.parsedPresets;if(t.length===0)return null;return i("div",{class:"md-color-picker__presets",part:"presets",role:"listbox","aria-label":"Color presets"},t.map((t=>i("button",{key:t,type:"button",class:"md-color-picker__preset",part:"preset",role:"option","aria-label":t,"aria-selected":m(this.hsva,false).toLowerCase()===t.toLowerCase()?"true":"false",style:{backgroundColor:t},disabled:this.disabled,onClick:()=>this.onPresetClick(t),onKeyDown:e=>this.onPresetKeyDown(e,t)}))))}renderPanel(){return i("div",{class:"md-color-picker__panel",part:"panel"},this.renderSaturationPlate(),i("div",{class:"md-color-picker__sliders",part:"sliders"},i("div",{class:"md-color-picker__sliders-stack"},this.renderHueSlider(),this.renderAlphaSlider()),i("div",{class:"md-color-picker__preview",part:"preview",role:"img","aria-label":`Current colour ${g(this.hsva,this.format)}`},i("div",{class:"md-color-picker__preview-inner",style:{backgroundColor:m(this.hsva,true)}}))),this.renderHexInput(),this.renderChannelInputs(),this.renderPresets())}render(){m(this.hsva,true);if(this.variant==="popover"){return i(s,{class:{"md-color-picker":true,"md-color-picker--popover":true,"md-color-picker--open":this.open,"md-color-picker--disabled":this.disabled},"aria-label":this.ariaLabelProp},i("slot",{name:"trigger"}),this.open&&i("div",{class:"md-color-picker__popover",part:"popover",role:"dialog","aria-label":this.ariaLabelProp},this.renderPanel()))}return i(s,{class:{"md-color-picker":true,"md-color-picker--inline":true,"md-color-picker--disabled":this.disabled},role:"group","aria-label":this.ariaLabelProp},this.renderPanel())}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],open:[{onOpenChange:0}],variant:[{onVariantChange:0}],dismissOnOutsideClick:[{onDismissOnOutsideClickChange:0}],disabled:[{onDisabledChange:0}]}}static get style(){return k()}},[257,"md-color-picker",{variant:[513],value:[1537],format:[513],alpha:[516],showHex:[4,"show-hex"],showInputs:[4,"show-inputs"],disabled:[516],presets:[1],ariaLabelProp:[1,"aria-label"],open:[1540],dismissOnOutsideClick:[4,"dismiss-on-outside-click"],density:[514],hsva:[32],hexInput:[32],hexInvalid:[32],hasSlottedTrigger:[32],show:[64],close:[64]},[[8,"keydown","onGlobalKeyDown"]],{value:[{onValueChange:0}],open:[{onOpenChange:0}],variant:[{onVariantChange:0}],dismissOnOutsideClick:[{onDismissOnOutsideClickChange:0}],disabled:[{onDisabledChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["md-color-picker"];t.forEach((t=>{switch(t){case"md-color-picker":if(!customElements.get(o(t))){customElements.define(o(t),x)}break}}))}y();const w=x;const M=y;export{w as MdColorPicker,M as defineCustomElement};
+import{p as t,H as e,c as r,h as i,d as s,t as o}from"./p-BR6gfOQH.js";const a=(t,e,r)=>Math.max(e,Math.min(r,t));function n(t,e,r){const i=t/255;const s=e/255;const o=r/255;const a=Math.max(i,s,o);const n=Math.min(i,s,o);const l=a-n;let c=0;if(l!==0){switch(a){case i:c=(s-o)/l%6;break;case s:c=(o-i)/l+2;break;default:c=(i-s)/l+4}c*=60;if(c<0)c+=360}const h=a===0?0:l/a*100;const d=a*100;return{h:c,s:h,v:d}}function l(t,e,r){const i=e/100;const s=r/100;const o=s*i;const a=t/60;const n=o*(1-Math.abs(a%2-1));let l=0,c=0,h=0;if(a>=0&&a<1){l=o;c=n;h=0}else if(a<2){l=n;c=o;h=0}else if(a<3){l=0;c=o;h=n}else if(a<4){l=0;c=n;h=o}else if(a<5){l=n;c=0;h=o}else{l=o;c=0;h=n}const d=s-o;return{r:Math.round((l+d)*255),g:Math.round((c+d)*255),b:Math.round((h+d)*255)}}function c(t){const{r:e,g:r,b:i}=l(t.h,t.s,t.v);return{r:e,g:r,b:i,a:t.a}}function h(t,e,r){const i=t/255;const s=e/255;const o=r/255;const a=Math.max(i,s,o);const n=Math.min(i,s,o);const l=(a+n)/2;let c=0;let h=0;if(a!==n){const t=a-n;h=l>.5?t/(2-a-n):t/(a+n);switch(a){case i:c=(s-o)/t+(s<o?6:0);break;case s:c=(o-i)/t+2;break;default:c=(i-s)/t+4}c*=60}return{h:c,s:h*100,l:l*100}}function d(t){const{r:e,g:r,b:i}=l(t.h,t.s,t.v);return h(e,r,i)}function p(t,e,r){const i=(t%360+360)%360;const s=a(e,0,100)/100;const o=a(r,0,100)/100;const n=(1-Math.abs(2*o-1))*s;const l=n*(1-Math.abs(i/60%2-1));const c=o-n/2;let h=0;let d=0;let p=0;if(i<60){h=n;d=l}else if(i<120){h=l;d=n}else if(i<180){d=n;p=l}else if(i<240){d=l;p=n}else if(i<300){h=l;p=n}else{h=n;p=l}return{r:Math.round((h+c)*255),g:Math.round((d+c)*255),b:Math.round((p+c)*255)}}function u(t,e=false){const r=t=>a(Math.round(t),0,255).toString(16).padStart(2,"0");const i=`#${r(t.r)}${r(t.g)}${r(t.b)}`;if(!e&&t.a>=1)return i.toUpperCase();return`${i}${r(t.a*255)}`.toUpperCase()}function m(t,e=false){return u(c(t),e||t.a<1)}function f(t){if(!t)return null;const e=t.trim().replace(/^#/,"");const r=/^[0-9a-fA-F]+$/;if(!r.test(e))return null;let i=0,s=0,o=0,a=1;if(e.length===3){i=parseInt(e[0]+e[0],16);s=parseInt(e[1]+e[1],16);o=parseInt(e[2]+e[2],16)}else if(e.length===4){i=parseInt(e[0]+e[0],16);s=parseInt(e[1]+e[1],16);o=parseInt(e[2]+e[2],16);a=parseInt(e[3]+e[3],16)/255}else if(e.length===6){i=parseInt(e.slice(0,2),16);s=parseInt(e.slice(2,4),16);o=parseInt(e.slice(4,6),16)}else if(e.length===8){i=parseInt(e.slice(0,2),16);s=parseInt(e.slice(2,4),16);o=parseInt(e.slice(4,6),16);a=parseInt(e.slice(6,8),16)/255}else{return null}return{r:i,g:s,b:o,a}}function _(t){const e=t.trim().match(/^hsla?\(\s*([\d.]+)[\s,]+([\d.]+)%?[\s,]+([\d.]+)%?(?:[\s,/]+([\d.%]+))?\s*\)$/i);if(!e)return null;const r=a(parseFloat(e[1]),0,360);const i=a(parseFloat(e[2]),0,100);const s=a(parseFloat(e[3]),0,100);const o=t=>{if(t==null)return 1;if(t.endsWith("%"))return a(parseFloat(t)/100,0,1);return a(parseFloat(t),0,1)};const{r:n,g:l,b:c}=p(r,i,s);return{r:n,g:l,b:c,a:o(e[4])}}function b(t){const e=t.trim().match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.%]+))?\s*\)$/i);if(!e)return null;const r=t=>{if(t.endsWith("%"))return a(parseFloat(t)/100*255,0,255);return a(parseFloat(t),0,255)};const i=t=>{if(t==null)return 1;if(t.endsWith("%"))return a(parseFloat(t)/100,0,1);return a(parseFloat(t),0,1)};return{r:Math.round(r(e[1])),g:Math.round(r(e[2])),b:Math.round(r(e[3])),a:i(e[4])}}function v(t){if(!t)return null;const e=t.trim();if(e.startsWith("#")||/^[0-9a-fA-F]{3,8}$/.test(e)){const t=f(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}const r=e.toLowerCase();if(r.startsWith("rgb")){const t=b(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}if(r.startsWith("hsl")){const t=_(e);if(!t)return null;const{h:r,s:i,v:s}=n(t.r,t.g,t.b);return{h:r,s:i,v:s,a:t.a}}return null}function g(t,e){const r=c(t);if(e==="rgb"){if(t.a<1){return`rgba(${r.r}, ${r.g}, ${r.b}, ${+t.a.toFixed(2)})`}return`rgb(${r.r}, ${r.g}, ${r.b})`}if(e==="hsl"){const{h:e,s:i,l:s}=h(r.r,r.g,r.b);if(t.a<1){return`hsla(${Math.round(e)}, ${Math.round(i)}%, ${Math.round(s)}%, ${+t.a.toFixed(2)})`}return`hsl(${Math.round(e)}, ${Math.round(i)}%, ${Math.round(s)}%)`}return m(t,t.a<1)}const k=()=>`:host{--_width:var(--md-color-picker-width, 296px);--_plate-height:var(--md-color-picker-plate-height, 176px);--_radius:var(--md-color-picker-radius, var(--md-sys-shape-corner-extra-large, 28px));--_surface:var(--md-color-picker-surface-color, var(--md-sys-color-surface-container-high, #ECE6F0));--_on-surface:var(--md-color-picker-on-surface, var(--md-sys-color-on-surface, #1C1B1F));--_outline:var(--md-color-picker-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));--_outline-strong:var(--md-color-picker-outline-strong, var(--md-sys-color-outline, #79747E));--_primary:var(--md-sys-color-primary, #6750A4);--_thumb-size:var(--md-color-picker-thumb-size, 18px);--_thumb-border:var(--md-color-picker-thumb-border, #FFFFFF);--_preset-size:var(--md-color-picker-preset-size, 32px);--_popover-elevation:var(--md-color-picker-popover-elevation, var(--md-sys-elevation-3, 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3)));--_state-easing:var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));--_state-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_spring-easing:var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90));--_spring-duration:var(--md-sys-motion-spring-spatial-fast-duration, 350ms);--_emphasized-decelerate:var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));--_emphasized-accelerate:var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));--_popover-in-duration:var(--md-sys-motion-duration-medium2, 300ms);--_popover-out-duration:var(--md-sys-motion-duration-short4, 200ms);display:inline-block;box-sizing:border-box;direction:inherit;font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);color:var(--_on-surface)}:host(.md-color-picker--inline){inline-size:var(--_width)}.md-color-picker__popover{position:absolute;z-index:var(--md-sys-z-index-popup, 1000);margin-block-start:8px;inline-size:var(--_width);background:var(--_surface);color:var(--_on-surface);border-radius:var(--_radius);box-shadow:var(--_popover-elevation);padding:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box;transform-origin:top left;animation:md-color-picker-pop-in var(--_popover-in-duration) var(--_emphasized-decelerate) both}.md-color-picker__popover[data-state="closing"]{animation:md-color-picker-pop-out var(--_popover-out-duration) var(--_emphasized-accelerate) both}@keyframes md-color-picker-pop-in{from{opacity:0;transform:scale(0.8) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes md-color-picker-pop-out{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.95) translateY(-4px)}}:host([dir="rtl"]) .md-color-picker__popover,:host-context([dir="rtl"]) .md-color-picker__popover{transform-origin:top right}.md-color-picker__panel{display:flex;flex-direction:column;gap:max(4px, calc(14px + var(--md-sys-density-scale, 0) * 2px));inline-size:100%;background:var(--_surface);border-radius:var(--_radius);padding:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box}:host(.md-color-picker--popover) .md-color-picker__panel{padding:0;background:transparent}.md-color-picker__plate{position:relative;inline-size:100%;block-size:var(--_plate-height);border-radius:var(--md-sys-shape-corner-large, 16px);overflow:hidden;touch-action:none;cursor:crosshair}.md-color-picker__plate:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:2px}.md-color-picker__plate-saturation,.md-color-picker__plate-value{position:absolute;inset:0}.md-color-picker__plate-saturation{background:linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))}:host(:dir(rtl)) .md-color-picker__plate-saturation,:host([dir="rtl"]) .md-color-picker__plate-saturation,:host-context([dir="rtl"]) .md-color-picker__plate-saturation{background:linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0))}.md-color-picker__plate-value{background:linear-gradient(to top, #000000, rgba(0, 0, 0, 0))}.md-color-picker__thumb{position:absolute;inline-size:var(--_thumb-size);block-size:var(--_thumb-size);border-radius:50%;border:2px solid var(--_thumb-border);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.4),     var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3));margin-inline-start:calc(-0.5 * var(--_thumb-size));margin-block-start:calc(-0.5 * var(--_thumb-size));pointer-events:none;background-color:currentColor;transition:box-shadow var(--_state-duration) var(--_state-easing),     transform var(--_state-duration) var(--_state-easing)}.md-color-picker__plate:active .md-color-picker__thumb,.md-color-picker__hue:active .md-color-picker__thumb,.md-color-picker__alpha:active .md-color-picker__thumb{transform:scale(1.15);box-shadow:0 0 0 6px color-mix(in srgb, var(--_primary) 16%, transparent),     var(--md-sys-elevation-2, 0px 1px 2px rgba(0,0,0,0.3))}.md-color-picker__thumb--slider{inset-block-start:50%;margin-block-start:0;transform:translateY(-50%)}.md-color-picker__hue:active .md-color-picker__thumb--slider,.md-color-picker__alpha:active .md-color-picker__thumb--slider{transform:translateY(-50%) scale(1.15)}.md-color-picker__sliders{display:flex;gap:max(4px, calc(14px + var(--md-sys-density-scale, 0) * 2px));align-items:center}.md-color-picker__sliders-stack{flex:1;display:flex;flex-direction:column;gap:var(--md-sys-spacing-gap-md, 12px)}.md-color-picker__hue,.md-color-picker__alpha{position:relative;inline-size:100%;block-size:14px;border-radius:var(--md-sys-shape-corner-full, 9999px);touch-action:none;cursor:pointer;transition:box-shadow var(--_state-duration) var(--_state-easing)}.md-color-picker__hue{background:linear-gradient(     to right,     #ff0000 0%, #ffff00 17%, #00ff00 33%,     #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%   )}:host(:dir(rtl)) .md-color-picker__hue,:host([dir="rtl"]) .md-color-picker__hue,:host-context([dir="rtl"]) .md-color-picker__hue{background:linear-gradient(     to left,     #ff0000 0%, #ffff00 17%, #00ff00 33%,     #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%   )}.md-color-picker__alpha{background-image:linear-gradient(45deg, #ccc 25%, transparent 25%),     linear-gradient(-45deg, #ccc 25%, transparent 25%),     linear-gradient(45deg, transparent 75%, #ccc 75%),     linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0}.md-color-picker__alpha-track{position:absolute;inset:0;border-radius:inherit}.md-color-picker__hue::before,.md-color-picker__alpha::before{content:'';position:absolute;inset-block:calc((100% - var(--_thumb-size)) / 2);inset-inline:calc(var(--_thumb-size) / -2)}.md-color-picker__hue:focus-visible,.md-color-picker__alpha:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:4px}.md-color-picker__hue:hover,.md-color-picker__alpha:hover{box-shadow:0 0 0 4px color-mix(in srgb, var(--_on-surface) 8%, transparent)}.md-color-picker__preview{flex-shrink:0;inline-size:40px;block-size:40px;border-radius:50%;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%),     linear-gradient(-45deg, #ccc 25%, transparent 25%),     linear-gradient(45deg, transparent 75%, #ccc 75%),     linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0;border:1px solid var(--_outline);overflow:hidden;transition:transform var(--_spring-duration) var(--_spring-easing)}.md-color-picker__preview-inner{inline-size:100%;block-size:100%;transition:background-color var(--_state-duration) var(--_state-easing)}.md-color-picker__field{display:flex;flex-direction:column;gap:var(--md-sys-spacing-gap-xs, 4px);flex:1;min-inline-size:0}.md-color-picker__field label{font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-font-size, 11px);font-weight:var(--md-sys-typescale-label-small-font-weight, 500);line-height:var(--md-sys-typescale-label-small-line-height, 16px);letter-spacing:var(--md-sys-typescale-label-small-letter-spacing, 0.5px);color:var(--md-sys-color-on-surface-variant, #49454F);text-transform:uppercase}.md-color-picker__field input{inline-size:100%;padding:var(--md-sys-spacing-inset-sm, 8px) 6px;border:1px solid var(--_outline);border-radius:var(--md-sys-shape-corner-extra-small, 4px);background:var(--md-sys-color-surface-container-lowest, #FFFFFF);color:var(--_on-surface);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;box-sizing:border-box;text-align:center;transition:border-color var(--_state-duration) var(--_state-easing),     box-shadow var(--_state-duration) var(--_state-easing)}.md-color-picker__field input:hover:not(:disabled){border-color:var(--_outline-strong)}.md-color-picker__field input:focus-visible{outline:none;border-color:var(--_primary);box-shadow:0 0 0 1px var(--_primary)}.md-color-picker__field input[aria-invalid="true"]{border-color:var(--md-sys-color-error, #B3261E)}.md-color-picker__field input[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 1px var(--md-sys-color-error, #B3261E)}.md-color-picker__field input:disabled{opacity:0.5;cursor:not-allowed}.md-color-picker__field--hex input{text-align:start;font-family:var(--md-sys-typescale-mono-font, ui-monospace, 'SF Mono', Menlo, monospace);letter-spacing:0.05em}.md-color-picker__inputs{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-color-picker__presets{display:flex;flex-wrap:wrap;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-color-picker__preset{position:relative;inline-size:var(--_preset-size);block-size:var(--_preset-size);border:1px solid var(--_outline);border-radius:50%;cursor:pointer;padding:0;transition:transform var(--_spring-duration) var(--_spring-easing),     box-shadow var(--_spring-duration) var(--_spring-easing)}.md-color-picker__preset:hover:not(:disabled){transform:scale(1.15) rotate(-4deg);box-shadow:var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3))}.md-color-picker__preset:active:not(:disabled){transform:scale(1.05) rotate(0deg)}.md-color-picker__preset:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:3px}.md-color-picker__preset[aria-selected="true"]{box-shadow:0 0 0 2px var(--_surface),     0 0 0 4px var(--_primary),     var(--md-sys-elevation-1, 0px 1px 2px rgba(0,0,0,0.3));transform:scale(1.1)}.md-color-picker__preset[aria-selected="true"]:hover:not(:disabled){transform:scale(1.18)}:host(.md-color-picker--disabled) .md-color-picker__plate,:host(.md-color-picker--disabled) .md-color-picker__hue,:host(.md-color-picker--disabled) .md-color-picker__alpha{pointer-events:none;opacity:0.5}@media (prefers-reduced-motion: reduce){.md-color-picker__popover{animation-duration:0.01ms !important}.md-color-picker__preset,.md-color-picker__field input,.md-color-picker__thumb,.md-color-picker__preview,.md-color-picker__hue,.md-color-picker__alpha{transition-duration:0.01ms !important}.md-color-picker__preset:hover:not(:disabled){transform:scale(1.06)}}@media (forced-colors: active){.md-color-picker__field input,.md-color-picker__preset{border:1px solid CanvasText}.md-color-picker__plate,.md-color-picker__hue,.md-color-picker__alpha{forced-color-adjust:none}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const x=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdInput=r(this,"mdInput",7);this.mdChange=r(this,"mdChange",7);this.mdOpenChange=r(this,"mdOpenChange",7);this.variant="inline";this.value="#6750A4";this.format="hex";this.alpha=false;this.showHex=true;this.showInputs=true;this.disabled=false;this.presets="";this.ariaLabelProp="Color picker";this.open=false;this.dismissOnOutsideClick=false;this.density=0;this.hsva={h:268,s:53,v:64,a:1};this.hexInput="";this.hexInvalid=false;this.hasSlottedTrigger=false;this.pointerDragKind=null;this.uid=`md-color-picker-${Math.random().toString(36).slice(2,7)}`;this.wiredTrigger=null;this.lastEmitted="";this.onSatPointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.satRect=e.getBoundingClientRect();this.pointerDragKind="sat";this.updateSatFromPoint(t.clientX,t.clientY)};this.onSatPointerMove=t=>{if(this.pointerDragKind!=="sat"||!this.satRect)return;this.updateSatFromPoint(t.clientX,t.clientY)};this.onSatPointerUp=t=>{if(this.pointerDragKind!=="sat")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onSatKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?10:1;const r=this.isRtl();let{s:i,v:s}=this.hsva;let o=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"ArrowDown":s-=e;break;case"ArrowUp":s+=e;break;case"Home":i=0;break;case"End":i=100;break;case"PageDown":s=0;break;case"PageUp":s=100;break;default:o=false}if(!o)return;t.preventDefault();this.hsva={...this.hsva,s:Math.max(0,Math.min(100,i)),v:Math.max(0,Math.min(100,s))};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)};this.onHuePointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.hueRect=e.getBoundingClientRect();this.pointerDragKind="hue";this.updateHueFromPoint(t.clientX)};this.onHuePointerMove=t=>{if(this.pointerDragKind!=="hue"||!this.hueRect)return;this.updateHueFromPoint(t.clientX)};this.onHuePointerUp=t=>{if(this.pointerDragKind!=="hue")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onHueKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?15:1;const r=this.isRtl();let{h:i}=this.hsva;let s=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"Home":i=0;break;case"End":i=360;break;default:s=false}if(!s)return;t.preventDefault();i=(i%360+360)%360;this.hsva={...this.hsva,h:i};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)};this.onAlphaPointerDown=t=>{if(this.disabled)return;const e=t.currentTarget;e.setPointerCapture(t.pointerId);this.alphaRect=e.getBoundingClientRect();this.pointerDragKind="alpha";this.updateAlphaFromPoint(t.clientX)};this.onAlphaPointerMove=t=>{if(this.pointerDragKind!=="alpha"||!this.alphaRect)return;this.updateAlphaFromPoint(t.clientX)};this.onAlphaPointerUp=t=>{if(this.pointerDragKind!=="alpha")return;const e=t.currentTarget;e.releasePointerCapture?.(t.pointerId);this.pointerDragKind=null;this.emit(true)};this.onAlphaKeyDown=t=>{if(this.disabled)return;const e=t.shiftKey?.1:.01;const r=this.isRtl();let{a:i}=this.hsva;let s=true;switch(t.key){case"ArrowLeft":i+=r?e:-e;break;case"ArrowRight":i+=r?-e:e;break;case"Home":i=0;break;case"End":i=1;break;default:s=false}if(!s)return;t.preventDefault();i=Math.max(0,Math.min(1,i));this.hsva={...this.hsva,a:i};this.hexInput=m(this.hsva,true);this.hexInvalid=false;this.emit(true)};this.onHexInput=t=>{const e=t.target.value;this.hexInput=e;const r=v(e.startsWith("#")?e:`#${e}`);if(r){this.hsva=r;this.hexInvalid=false;this.emit(false)}else{this.hexInvalid=true}};this.onHexBlur=()=>{if(this.hexInvalid){this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false}this.emit(true)};this.onRgbChange=(t,e)=>{const r=e.target.value;const i=Math.max(0,Math.min(255,parseInt(r,10)||0));const s=c(this.hsva);this.rgbaFromChannels(t==="r"?i:s.r,t==="g"?i:s.g,t==="b"?i:s.b)};this.onHslChange=(t,e)=>{const r=e.target.value;const i=parseInt(r,10)||0;const s=d(this.hsva);const o=t==="h"?Math.max(0,Math.min(360,i)):s.h;const a=t==="s"?Math.max(0,Math.min(100,i)):s.s;const n=t==="l"?Math.max(0,Math.min(100,i)):s.l;const{r:l,g:c,b:h}=p(o,a,n);this.rgbaFromChannels(l,c,h)};this.onAlphaInputChange=t=>{const e=t.target.value;const r=Math.max(0,Math.min(1,parseFloat(e)||0));this.hsva={...this.hsva,a:r};this.hexInput=m(this.hsva,true);this.emit(true)};this.onPresetClick=t=>{if(this.disabled)return;this.applyValue(t,true);this.emit(true)};this.onPresetKeyDown=(t,e)=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();this.onPresetClick(e)}};this.toggleOpen=()=>{if(this.disabled)return;this.open=!this.open}}componentWillLoad(){this.applyValue(this.value,false);this.computeSlottedTrigger()}componentDidLoad(){this.syncOutsideClickListener();this.wireSlottedTrigger();const t=this.el.shadowRoot?.querySelector('slot[name="trigger"]');t?.addEventListener("slotchange",(()=>{this.computeSlottedTrigger();this.wireSlottedTrigger()}))}computeSlottedTrigger(){this.hasSlottedTrigger=this.el.querySelector('[slot="trigger"]')!==null;if(!this.hasSlottedTrigger&&this.variant==="popover"&&typeof console!=="undefined"){console.warn('[md-color-picker] variant="popover" needs a trigger: slot one into '+'`trigger` (e.g. <md-button slot="trigger">…</md-button>). Without it '+"there is nothing to open the panel.")}}wireSlottedTrigger(){const t=this.el.querySelector('[slot="trigger"]');if(!t||t===this.wiredTrigger){this.syncSlottedTriggerAria();return}this.wiredTrigger?.removeEventListener("click",this.toggleOpen);t.addEventListener("click",this.toggleOpen);this.wiredTrigger=t;this.syncSlottedTriggerAria()}syncSlottedTriggerAria(){const t=this.wiredTrigger;if(!t)return;t.setAttribute("aria-haspopup","dialog");t.setAttribute("aria-expanded",String(this.open))}onValueChange(t){if(t===this.lastEmitted)return;this.applyValue(t,false)}isRtl(){return typeof getComputedStyle==="function"&&getComputedStyle(this.el).direction==="rtl"}horizontalRatio(t,e){const r=e.width;if(r<=0)return 0;return this.isRtl()?(e.right-t)/r:(t-e.left)/r}horizontalGradientTo(){return this.isRtl()?"left":"right"}applyValue(t,e){const r=v(t);if(r){this.hsva=r;this.hexInput=m(r,this.alpha&&r.a<1);this.hexInvalid=false;if(e)this.emit()}else{this.hexInvalid=true}}emit(t=false){const e=g(this.hsva,this.format);if(e!==this.value){this.lastEmitted=e;this.value=e;this.mdInput.emit({value:e});if(t)this.mdChange.emit({value:e})}else if(t){this.mdChange.emit({value:e})}}updateSatFromPoint(t,e){if(!this.satRect)return;const r=this.horizontalRatio(t,this.satRect);const i=e-this.satRect.top;const s=Math.max(0,Math.min(100,r*100));const o=Math.max(0,Math.min(100,100-i/this.satRect.height*100));this.hsva={...this.hsva,s,v:o};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(false)}updateHueFromPoint(t){if(!this.hueRect)return;const e=Math.max(0,Math.min(1,this.horizontalRatio(t,this.hueRect)));const r=e*360;this.hsva={...this.hsva,h:r};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(false)}updateAlphaFromPoint(t){if(!this.alphaRect)return;const e=Math.max(0,Math.min(1,this.horizontalRatio(t,this.alphaRect)));this.hsva={...this.hsva,a:e};this.hexInput=m(this.hsva,true);this.hexInvalid=false;this.emit(false)}rgbaFromChannels(t,e,r){const i=`#${[t,e,r].map((t=>t.toString(16).padStart(2,"0"))).join("")}`;const s=v(i);if(s){this.hsva={...s,a:this.hsva.a};this.hexInput=m(this.hsva,this.alpha&&this.hsva.a<1);this.hexInvalid=false;this.emit(true)}}get parsedPresets(){const t=Array.isArray(this.presets)?this.presets:String(this.presets??"").split(",");return t.map((t=>String(t).trim())).filter(Boolean)}async show(){if(this.variant!=="popover"||this.disabled)return;this.open=true}async close(){if(this.variant!=="popover")return;this.open=false}onOpenChange(t){this.mdOpenChange.emit({open:t});this.syncOutsideClickListener();this.syncSlottedTriggerAria()}onVariantChange(){this.syncOutsideClickListener()}onDismissOnOutsideClickChange(){this.syncOutsideClickListener()}onDisabledChange(){this.syncOutsideClickListener()}disconnectedCallback(){this.removeOutsideClickHandler();this.wiredTrigger?.removeEventListener("click",this.toggleOpen);this.wiredTrigger=null}syncOutsideClickListener(){this.removeOutsideClickHandler();if(this.variant!=="popover"||!this.open||!this.dismissOnOutsideClick||this.disabled||typeof document==="undefined"){return}requestAnimationFrame((()=>{if(this.variant!=="popover"||!this.open||!this.dismissOnOutsideClick||this.disabled){return}this.attachOutsideClickHandler()}))}attachOutsideClickHandler(){this.outsideClickHandler=t=>{if(this.disabled||!this.open)return;const e=t.composedPath?t.composedPath():[];if(e.includes(this.el))return;const r=t.target;if(r&&this.el.contains(r))return;this.open=false};document.addEventListener("mousedown",this.outsideClickHandler,true)}removeOutsideClickHandler(){if(this.outsideClickHandler&&typeof document!=="undefined"){document.removeEventListener("mousedown",this.outsideClickHandler,true)}this.outsideClickHandler=undefined}onGlobalKeyDown(t){if(this.variant==="popover"&&this.open&&t.key==="Escape"){t.preventDefault();this.open=false}}renderSaturationPlate(){const t=this.hsva.h;const e=this.hsva.s;const r=this.hsva.v;const s=c({h:t,s:100,v:100,a:1});const o=`rgb(${s.r}, ${s.g}, ${s.b})`;return i("div",{class:"md-color-picker__plate",part:"plate",role:"application",tabindex:this.disabled?-1:0,"aria-label":"Saturation and brightness",style:{background:o},onPointerDown:this.onSatPointerDown,onPointerMove:this.onSatPointerMove,onPointerUp:this.onSatPointerUp,onPointerCancel:this.onSatPointerUp,onKeyDown:this.onSatKeyDown},i("div",{class:"md-color-picker__plate-saturation","aria-hidden":"true"}),i("div",{class:"md-color-picker__plate-value","aria-hidden":"true"}),i("div",{class:"md-color-picker__thumb",part:"thumb",style:{insetInlineStart:`${e}%`,insetBlockStart:`${100-r}%`,backgroundColor:m(this.hsva,false)}}))}renderHueSlider(){const t=this.hsva.h;const e=t/360;return i("div",{class:"md-color-picker__hue",part:"hue",role:"slider","aria-label":"Hue","aria-valuemin":"0","aria-valuemax":"360","aria-valuenow":Math.round(t),"aria-orientation":"horizontal","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onPointerDown:this.onHuePointerDown,onPointerMove:this.onHuePointerMove,onPointerUp:this.onHuePointerUp,onPointerCancel:this.onHuePointerUp,onKeyDown:this.onHueKeyDown},i("div",{class:"md-color-picker__thumb md-color-picker__thumb--slider",style:{insetInlineStart:`${e*100}%`,backgroundColor:m({h:t,s:100,v:100,a:1},false)}}))}renderAlphaSlider(){if(!this.alpha)return null;const t=this.hsva.a;const e=c({...this.hsva,a:1});const r=`linear-gradient(to ${this.horizontalGradientTo()}, rgba(${e.r}, ${e.g}, ${e.b}, 0), rgba(${e.r}, ${e.g}, ${e.b}, 1))`;return i("div",{class:"md-color-picker__alpha",part:"alpha",role:"slider","aria-label":"Opacity","aria-valuemin":"0","aria-valuemax":"1","aria-valuenow":+t.toFixed(2),"aria-orientation":"horizontal","aria-disabled":this.disabled?"true":undefined,tabindex:this.disabled?-1:0,onPointerDown:this.onAlphaPointerDown,onPointerMove:this.onAlphaPointerMove,onPointerUp:this.onAlphaPointerUp,onPointerCancel:this.onAlphaPointerUp,onKeyDown:this.onAlphaKeyDown},i("div",{class:"md-color-picker__alpha-track",style:{backgroundImage:r}}),i("div",{class:"md-color-picker__thumb md-color-picker__thumb--slider",style:{insetInlineStart:`${t*100}%`,backgroundColor:m(this.hsva,true)}}))}renderHexInput(){if(!this.showHex)return null;return i("div",{class:"md-color-picker__field md-color-picker__field--hex",part:"field-hex"},i("label",{part:"label",htmlFor:`${this.uid}-hex`},"Hex"),i("input",{id:`${this.uid}-hex`,type:"text",value:this.hexInput,spellcheck:false,autoComplete:"off","aria-invalid":this.hexInvalid?"true":undefined,disabled:this.disabled,onInput:this.onHexInput,onBlur:this.onHexBlur,onKeyDown:t=>{if(t.key==="Enter"){t.target.blur()}}}))}renderAlphaField(){if(!this.alpha)return null;return i("div",{class:"md-color-picker__field",part:"field-a"},i("label",{htmlFor:`${this.uid}-a`},"A"),i("input",{id:`${this.uid}-a`,type:"number",min:"0",max:"1",step:"0.01",value:+this.hsva.a.toFixed(2),disabled:this.disabled,onChange:this.onAlphaInputChange}))}renderRgbInputs(){const t=c(this.hsva);return i("div",{class:"md-color-picker__inputs",part:"inputs"},i("div",{class:"md-color-picker__field",part:"field-r"},i("label",{htmlFor:`${this.uid}-r`},"R"),i("input",{id:`${this.uid}-r`,type:"number",min:"0",max:"255",step:"1",value:t.r,disabled:this.disabled,onChange:t=>this.onRgbChange("r",t)})),i("div",{class:"md-color-picker__field",part:"field-g"},i("label",{htmlFor:`${this.uid}-g`},"G"),i("input",{id:`${this.uid}-g`,type:"number",min:"0",max:"255",step:"1",value:t.g,disabled:this.disabled,onChange:t=>this.onRgbChange("g",t)})),i("div",{class:"md-color-picker__field",part:"field-b"},i("label",{htmlFor:`${this.uid}-b`},"B"),i("input",{id:`${this.uid}-b`,type:"number",min:"0",max:"255",step:"1",value:t.b,disabled:this.disabled,onChange:t=>this.onRgbChange("b",t)})),this.renderAlphaField())}renderHslInputs(){const t=d(this.hsva);return i("div",{class:"md-color-picker__inputs",part:"inputs"},i("div",{class:"md-color-picker__field",part:"field-h"},i("label",{htmlFor:`${this.uid}-h`},"H"),i("input",{id:`${this.uid}-h`,type:"number",min:"0",max:"360",step:"1",value:Math.round(t.h),disabled:this.disabled,onChange:t=>this.onHslChange("h",t)})),i("div",{class:"md-color-picker__field",part:"field-s"},i("label",{htmlFor:`${this.uid}-s`},"S"),i("input",{id:`${this.uid}-s`,type:"number",min:"0",max:"100",step:"1",value:Math.round(t.s),disabled:this.disabled,onChange:t=>this.onHslChange("s",t)})),i("div",{class:"md-color-picker__field",part:"field-l"},i("label",{htmlFor:`${this.uid}-l`},"L"),i("input",{id:`${this.uid}-l`,type:"number",min:"0",max:"100",step:"1",value:Math.round(t.l),disabled:this.disabled,onChange:t=>this.onHslChange("l",t)})),this.renderAlphaField())}renderChannelInputs(){if(!this.showInputs)return null;if(this.format==="hsl")return this.renderHslInputs();return this.renderRgbInputs()}renderPresets(){const t=this.parsedPresets;if(t.length===0)return null;return i("div",{class:"md-color-picker__presets",part:"presets",role:"listbox","aria-label":"Color presets"},t.map((t=>i("button",{key:t,type:"button",class:"md-color-picker__preset",part:"preset",role:"option","aria-label":t,"aria-selected":m(this.hsva,false).toLowerCase()===t.toLowerCase()?"true":"false",style:{backgroundColor:t},disabled:this.disabled,onClick:()=>this.onPresetClick(t),onKeyDown:e=>this.onPresetKeyDown(e,t)}))))}renderPanel(){return i("div",{class:"md-color-picker__panel",part:"panel"},this.renderSaturationPlate(),i("div",{class:"md-color-picker__sliders",part:"sliders"},i("div",{class:"md-color-picker__sliders-stack"},this.renderHueSlider(),this.renderAlphaSlider()),i("div",{class:"md-color-picker__preview",part:"preview",role:"img","aria-label":`Current colour ${g(this.hsva,this.format)}`},i("div",{class:"md-color-picker__preview-inner",style:{backgroundColor:m(this.hsva,true)}}))),this.renderHexInput(),this.renderChannelInputs(),this.renderPresets())}render(){m(this.hsva,true);if(this.variant==="popover"){return i(s,{class:{"md-color-picker":true,"md-color-picker--popover":true,"md-color-picker--open":this.open,"md-color-picker--disabled":this.disabled},"aria-label":this.ariaLabelProp},i("slot",{name:"trigger"}),this.open&&i("div",{class:"md-color-picker__popover",part:"popover",role:"dialog","aria-label":this.ariaLabelProp},this.renderPanel()))}return i(s,{class:{"md-color-picker":true,"md-color-picker--inline":true,"md-color-picker--disabled":this.disabled},role:"group","aria-label":this.ariaLabelProp},this.renderPanel())}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],open:[{onOpenChange:0}],variant:[{onVariantChange:0}],dismissOnOutsideClick:[{onDismissOnOutsideClickChange:0}],disabled:[{onDisabledChange:0}]}}static get style(){return k()}},[257,"md-color-picker",{variant:[513],value:[1537],format:[513],alpha:[516],showHex:[4,"show-hex"],showInputs:[4,"show-inputs"],disabled:[516],presets:[1],ariaLabelProp:[1,"aria-label"],open:[1540],dismissOnOutsideClick:[4,"dismiss-on-outside-click"],density:[514],hsva:[32],hexInput:[32],hexInvalid:[32],hasSlottedTrigger:[32],show:[64],close:[64]},[[8,"keydown","onGlobalKeyDown"]],{value:[{onValueChange:0}],open:[{onOpenChange:0}],variant:[{onVariantChange:0}],dismissOnOutsideClick:[{onDismissOnOutsideClickChange:0}],disabled:[{onDisabledChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["md-color-picker"];t.forEach((t=>{switch(t){case"md-color-picker":if(!customElements.get(o(t))){customElements.define(o(t),x)}break}}))}y();const w=x;const M=y;export{w as MdColorPicker,M as defineCustomElement};
 //# sourceMappingURL=md-color-picker.js.map