@vonage/vivid 5.4.0 → 5.5.0

package/color-picker/index.cjs

@@ -1,86 +1,101 @@
-"use strict";const l=require("../bundled/vivid-element.cjs"),j=require("../bundled/definition9.cjs"),G=require("../bundled/definition2.cjs"),J=require("../bundled/mixins.cjs"),U=require("../bundled/delegates-aria.cjs"),h=require("../bundled/base-color-picker.cjs"),se=require("../bundled/with-contextual-help.cjs"),ie=require("../bundled/with-error-text.cjs"),ae=require("../bundled/with-success-text.cjs"),Y=require("../bundled/definition10.cjs"),Q=require("../bundled/definition3.cjs"),v=require("../bundled/ref.cjs"),Z=require("../bundled/when.cjs"),A=require("../bundled/slotted.cjs"),le=require("../bundled/repeat.cjs"),L=require("../bundled/class-names.cjs"),ne=".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host{display:inline-block}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold)}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-title{display:block;margin-block-end:8px}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input){width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}",f=(o,e=0,t=1)=>o>t?t:o<e?e:o,n=(o,e=0,t=Math.pow(10,e))=>Math.round(t*o)/t,ce=o=>ve(S(o)),S=o=>(o[0]==="#"&&(o=o.substring(1)),o.length<6?{r:parseInt(o[0]+o[0],16),g:parseInt(o[1]+o[1],16),b:parseInt(o[2]+o[2],16),a:o.length===4?n(parseInt(o[3]+o[3],16)/255,2):1}:{r:parseInt(o.substring(0,2),16),g:parseInt(o.substring(2,4),16),b:parseInt(o.substring(4,6),16),a:o.length===8?n(parseInt(o.substring(6,8),16)/255,2):1}),de=o=>ue(he(o)),pe=({h:o,s:e,v:t,a:r})=>{const s=(200-e)*t/100;return{h:n(o),s:n(s>0&&s<200?e*t/100/(s<=100?s:200-s)*100:0),l:n(s/2),a:n(r,2)}},E=o=>{const{h:e,s:t,l:r}=pe(o);return`hsl(${e}, ${t}%, ${r}%)`},he=({h:o,s:e,v:t,a:r})=>{o=o/360*6,e=e/100,t=t/100;const s=Math.floor(o),i=t*(1-e),a=t*(1-(o-s)*e),m=t*(1-(1-o+s)*e),C=s%6;return{r:n([t,a,i,i,m,t][C]*255),g:n([m,t,t,a,i,i][C]*255),b:n([i,i,m,t,t,a][C]*255),a:n(r,2)}},b=o=>{const e=o.toString(16);return e.length<2?"0"+e:e},ue=({r:o,g:e,b:t,a:r})=>{const s=r<1?b(n(r*255)):"";return"#"+b(o)+b(e)+b(t)+s},ve=({r:o,g:e,b:t,a:r})=>{const s=Math.max(o,e,t),i=s-Math.min(o,e,t),a=i?s===o?(e-t)/i:s===e?2+(t-o)/i:4+(o-e)/i:0;return{h:n(60*(a<0?a+6:a)),s:n(s?i/s*100:0),v:n(s/255*100),a:r}},ee=(o,e)=>{if(o===e)return!0;for(const t in o)if(o[t]!==e[t])return!1;return!0},fe=(o,e)=>o.toLowerCase()===e.toLowerCase()?!0:ee(S(o),S(e)),q={},z=o=>{let e=q[o];return e||(e=document.createElement("template"),e.innerHTML=o,q[o]=e),e},I=(o,e,t)=>{o.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:t}))};let d=!1;const H=o=>"touches"in o,be=o=>d&&!H(o)?!1:(d||(d=H(o)),!0),M=(o,e)=>{const t=H(e)?e.touches[0]:e,r=o.el.getBoundingClientRect();I(o.el,"move",o.getMove({x:f((t.pageX-(r.left+window.pageXOffset))/r.width),y:f((t.pageY-(r.top+window.pageYOffset))/r.height)}))},xe=(o,e)=>{const t=e.keyCode;t>40||o.xy&&t<37||t<33||(e.preventDefault(),I(o.el,"move",o.getMove({x:t===39?.01:t===37?-.01:t===34?.05:t===33?-.05:t===35?1:t===36?-1:0,y:t===40?.01:t===38?-.01:0},!0)))};class te{constructor(e,t,r,s){const i=z(`<div role="slider" tabindex="0" part="${t}" ${r}><div part="${t}-pointer"></div></div>`);e.appendChild(i.content.cloneNode(!0));const a=e.querySelector(`[part=${t}]`);a.addEventListener("mousedown",this),a.addEventListener("touchstart",this),a.addEventListener("keydown",this),this.el=a,this.xy=s,this.nodes=[a.firstChild,a]}set dragging(e){const t=e?document.addEventListener:document.removeEventListener;t(d?"touchmove":"mousemove",this),t(d?"touchend":"mouseup",this)}handleEvent(e){switch(e.type){case"mousedown":case"touchstart":if(e.preventDefault(),!be(e)||!d&&e.button!=0)return;this.el.focus(),M(this,e),this.dragging=!0;break;case"mousemove":case"touchmove":e.preventDefault(),M(this,e);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":xe(this,e);break}}style(e){e.forEach((t,r)=>{for(const s in t)this.nodes[r].style.setProperty(s,t[s])})}}class ge extends te{constructor(e){super(e,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:e}){this.h=e,this.style([{left:`${e/360*100}%`,color:E({h:e,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${n(e)}`)}getMove(e,t){return{h:t?f(this.h+e.x*360,0,360):360*e.x}}}class me extends te{constructor(e){super(e,"saturation",'aria-label="Color"',!0)}update(e){this.hsva=e,this.style([{top:`${100-e.v}%`,left:`${e.s}%`,color:E(e)},{"background-color":E({h:e.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${n(e.s)}%, Brightness ${n(e.v)}%`)}getMove(e,t){return{s:t?f(this.hsva.s+e.x*100,0,100):e.x*100,v:t?f(this.hsva.v-e.y*100,0,100):Math.round(100-e.y*100)}}}const Ce=':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',ye="[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}",$e="[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}",x=Symbol("same"),y=Symbol("color"),N=Symbol("hsva"),$=Symbol("update"),F=Symbol("parts"),O=Symbol("css"),R=Symbol("sliders");let ke=class extends HTMLElement{static get observedAttributes(){return["color"]}get[O](){return[Ce,ye,$e]}get[R](){return[me,ge]}get color(){return this[y]}set color(e){if(!this[x](e)){const t=this.colorModel.toHsva(e);this[$](t),this[y]=e}}constructor(){super();const e=z(`<style>${this[O].join("")}</style>`),t=this.attachShadow({mode:"open"});t.appendChild(e.content.cloneNode(!0)),t.addEventListener("move",this),this[F]=this[R].map(r=>new r(t))}connectedCallback(){if(this.hasOwnProperty("color")){const e=this.color;delete this.color,this.color=e}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(e,t,r){const s=this.colorModel.fromAttr(r);this[x](s)||(this.color=s)}handleEvent(e){const t=this[N],r={...t,...e.detail};this[$](r);let s;!ee(r,t)&&!this[x](s=this.colorModel.fromHsva(r))&&(this[y]=s,I(this,"color-changed",{value:s}))}[x](e){return this.color&&this.colorModel.equal(e,this.color)}[$](e){this[N]=e,this[F].forEach(t=>t.update(e))}};const we={defaultColor:"#000",toHsva:ce,fromHsva:({h:o,s:e,v:t})=>de({h:o,s:e,v:t,a:1}),equal:fe,fromAttr:o=>o};class _e extends ke{get colorModel(){return we}}class oe extends _e{}customElements.define("hex-color-picker",oe);const Se=/^#?([0-9A-F]{3,8})$/i,k=(o,e)=>{const t=Se.exec(o),r=t?t[1].length:0;return r===3||r===6||!!e&&r===4||!!e&&r===8},Ee=z('<slot><input part="input" spellcheck="false"></slot>'),V=(o,e)=>o.replace(/([^0-9A-F]+)/gi,"").substring(0,e?8:6),B=Symbol("alpha"),g=Symbol("color"),D=Symbol("saved"),w=Symbol("input"),_=Symbol("init"),K=Symbol("prefix"),u=Symbol("update");class He extends HTMLElement{static get observedAttributes(){return["alpha","color","prefixed"]}get color(){return this[g]}set color(e){this[g]=e,this[u](e)}get alpha(){return this[B]}set alpha(e){this[B]=e,this.toggleAttribute("alpha",e);const t=this.color;t&&!k(t,e)&&(this.color=t.startsWith("#")?t.substring(0,t.length===5?4:7):t.substring(0,t.length===4?3:6))}get prefixed(){return this[K]}set prefixed(e){this[K]=e,this.toggleAttribute("prefixed",e),this[u](this.color)}constructor(){super();const e=this.attachShadow({mode:"open"});e.appendChild(Ee.content.cloneNode(!0)),e.firstElementChild.addEventListener("slotchange",()=>this[_](e))}connectedCallback(){if(this[_](this.shadowRoot),this.hasOwnProperty("alpha")){const e=this.alpha;delete this.alpha,this.alpha=e}else this.alpha=this.hasAttribute("alpha");if(this.hasOwnProperty("prefixed")){const e=this.prefixed;delete this.prefixed,this.prefixed=e}else this.prefixed=this.hasAttribute("prefixed");if(this.hasOwnProperty("color")){const e=this.color;delete this.color,this.color=e}else this.color==null?this.color=this.getAttribute("color")||"":this[g]&&this[u](this[g])}handleEvent(e){const t=e.target,{value:r}=t;switch(e.type){case"input":const s=V(r,this.alpha);this[D]=this.color,(k(s,this.alpha)||r==="")&&(this.color=s,this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,detail:{value:s?"#"+s:""}})));break;case"blur":r&&!k(r,this.alpha)&&(this.color=this[D])}}attributeChangedCallback(e,t,r){e==="color"&&this.color!==r&&(this.color=r);const s=r!=null;e==="alpha"&&this.alpha!==s&&(this.alpha=s),e==="prefixed"&&this.prefixed!==s&&(this.prefixed=s)}[_](e){let t=this.querySelector("input");if(!t){let r;for(;r=this.firstChild;)r.remove();t=e.querySelector("input")}t.addEventListener("input",this),t.addEventListener("blur",this),this[w]=t,this[u](this.color)}[u](e){this[w]&&(this[w].value=e==null||e==""?"":(this.prefixed?"#":"")+V(e,this.alpha))}}class re extends He{}customElements.define("hex-input",re);var Pe=Object.defineProperty,p=(o,e,t,r)=>{for(var s=void 0,i=o.length-1,a;i>=0;i--)(a=o[i])&&(s=a(e,t,s)||s);return s&&Pe(e,t,s),s};const P="vvd-hex-picker",T="vvd-hex-input";class Te extends oe{static{this.displayName="VvdHexPicker"}}class ze extends re{static{this.displayName="VvdHexInput"}}customElements.get(P)||customElements.define(P,Te);customElements.get(T)||customElements.define(T,ze);const X=P,W=T;class c extends se.WithContextualHelp(J.WithFeedback(ie.WithErrorText(ae.WithSuccessText(U.DelegatesAria(h.BaseColorPicker(l.VividElement)))))){constructor(){super(...arguments),this.disableSavedColors=!1,this.savedColors=[],this.maxSwatches=6,this.copyIconName="copy-2-line",this.#e=null,this._copyValueToClipboard=async e=>{try{await navigator.clipboard.writeText(e),this._setTemporaryCopyIcon("check-circle-line")}catch{alert(this.locale?.colorPicker?.copyErrorText),this._setTemporaryCopyIcon("error-line")}},this.#t=e=>{this._isInPath(e,this._buttonEl)||this._isInPath(e,this._popupEl)||(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}static{this.HEX_COLOR_PATTERN=/^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}handleChange(){this.$emit("change")}savedColorsKeyChanged(){this.savedColors=this._loadSavedColors()}get _savedColorsStorageKey(){return this.savedColorsKey?this.savedColorsKey:`vvd-saved-colors:${this.tagName.toLowerCase()}`}_handleColorSaving(){this._saveCurrentColor()}get _maxSwatchesNormalized(){return Number.isFinite(this.maxSwatches)?Math.max(0,Math.floor(this.maxSwatches)):0}maxSwatchesChanged(){const e=this._maxSwatchesNormalized;this.savedColors?.length>e&&(this.savedColors=this.savedColors.slice(0,e),this._setSavedColors(this.savedColors))}_onPickerColorChanged(e){typeof e.detail?.value=="string"&&(this.value=e.detail?.value)}valueChanged(e,t){this._vcHexPickerEl&&typeof t=="string"&&(this._vcHexPickerEl.color=t),this._vcHexInputEl&&typeof t=="string"&&(this._vcHexInputEl.color=t)}_onTextFieldInput(e){const t=e.currentTarget;this.value=t.value}get _buttonColor(){return this._canvasColor||this._refreshCanvasColor(),this.value&&h.isValidHexColor(this.value)?this.value:"var(--vvd-color-canvas-text)"}_onButtonClick(){this.open=!this.open}_handleCloseRequest(){this.open=!1}_isInPath(e,t){if(!t)return!1;const r=e.composedPath?.();return!!(r&&r.includes(t))}#e;_setTemporaryCopyIcon(e,t=2e3){this.copyIconName=e,this.#e&&clearTimeout(this.#e),this.#e=setTimeout(()=>{this.copyIconName="copy-2-line",this.#e=null},t)}connectedCallback(){super.connectedCallback(),this._refreshCanvasColor(),this.savedColors=this._loadSavedColors(),document.addEventListener("mousedown",this.#t,!0),document.addEventListener("keydown",this.#o)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("mousedown",this.#t,!0),document.removeEventListener("keydown",this.#o)}#t;#o;_saveCurrentColor(){const e=this.value;if(typeof e!="string"||!h.isValidHexColor(e))return;const t=Array.isArray(this.savedColors)?[...this.savedColors]:[],r=t.findIndex(s=>s?.value===e);r!==-1&&t.splice(r,1),t.unshift({value:e}),this.savedColors=t.slice(0,this._maxSwatchesNormalized),this._setSavedColors(this.savedColors)}_loadSavedColors(){try{const e=localStorage.getItem(this._savedColorsStorageKey);if(!e)return[];const t=JSON.parse(e);return Array.isArray(t)?t.filter(r=>r&&typeof r.value=="string"&&h.isValidHexColor(r.value)).map(r=>({value:r.value,label:typeof r.label=="string"?r.label:void 0})):[]}catch{return[]}}_setSavedColors(e){try{localStorage.setItem(this._savedColorsStorageKey,JSON.stringify(e))}catch{}}get allSwatches(){const e=Array.isArray(this.swatches)?this.swatches:[],t=Array.isArray(this.savedColors)?this.savedColors:[],r=new Set,s=[],i=a=>{!a||typeof a.value!="string"||!h.isValidHexColor(a.value)||r.has(a.value)||(r.add(a.value),s.push(a))};return this.disableSavedColors||t.forEach(i),e.forEach(i),s.slice(0,this._maxSwatchesNormalized)}}p([l.attr],c.prototype,"placeholder");p([l.attr({attribute:"saved-colors-key"})],c.prototype,"savedColorsKey");p([l.attr({mode:"boolean",attribute:"disable-saved-colors"})],c.prototype,"disableSavedColors");p([l.observable],c.prototype,"savedColors");p([l.attr({attribute:"max-swatches",mode:"fromView",converter:l.nullableNumberConverter})],c.prototype,"maxSwatches");p([l.observable],c.prototype,"copyIconName");function Ie(o,e){const t=r=>L.classNames("control");return l.html`
-		<${o} 
+"use strict";const l=require("../bundled/vivid-element.cjs"),G=require("../bundled/definition9.cjs"),J=require("../bundled/definition2.cjs"),U=require("../bundled/mixins.cjs"),Y=require("../bundled/delegates-aria.cjs"),ie=require("../bundled/index.cjs"),u=require("../bundled/base-color-picker.cjs"),ae=require("../bundled/with-contextual-help.cjs"),le=require("../bundled/with-error-text.cjs"),ne=require("../bundled/with-success-text.cjs"),ce=require("../bundled/trapped-focus.cjs"),Q=require("../bundled/definition10.cjs"),Z=require("../bundled/definition3.cjs"),ee=require("../bundled/definition11.cjs"),f=require("../bundled/ref.cjs"),S=require("../bundled/when.cjs"),A=require("../bundled/slotted.cjs"),de=require("../bundled/repeat.cjs"),q=require("../bundled/class-names.cjs"),pe=".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host{display:inline-block;--_low-ink-color: var(--vvd-color-neutral-600)}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input),vvd-hex-input>input{width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}",b=(r,e=0,o=1)=>r>o?o:r<e?e:r,n=(r,e=0,o=Math.pow(10,e))=>Math.round(o*r)/o,he=r=>ge(E(r)),E=r=>(r[0]==="#"&&(r=r.substring(1)),r.length<6?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:r.length===4?n(parseInt(r[3]+r[3],16)/255,2):1}:{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16),a:r.length===8?n(parseInt(r.substring(6,8),16)/255,2):1}),ue=r=>be(fe(r)),ve=({h:r,s:e,v:o,a:t})=>{const s=(200-e)*o/100;return{h:n(r),s:n(s>0&&s<200?e*o/100/(s<=100?s:200-s)*100:0),l:n(s/2),a:n(t,2)}},P=r=>{const{h:e,s:o,l:t}=ve(r);return`hsl(${e}, ${o}%, ${t}%)`},fe=({h:r,s:e,v:o,a:t})=>{r=r/360*6,e=e/100,o=o/100;const s=Math.floor(r),a=o*(1-e),i=o*(1-(r-s)*e),d=o*(1-(1-r+s)*e),y=s%6;return{r:n([o,i,a,a,d,o][y]*255),g:n([d,o,o,i,a,a][y]*255),b:n([a,a,d,o,o,i][y]*255),a:n(t,2)}},g=r=>{const e=r.toString(16);return e.length<2?"0"+e:e},be=({r,g:e,b:o,a:t})=>{const s=t<1?g(n(t*255)):"";return"#"+g(r)+g(e)+g(o)+s},ge=({r,g:e,b:o,a:t})=>{const s=Math.max(r,e,o),a=s-Math.min(r,e,o),i=a?s===r?(e-o)/a:s===e?2+(o-r)/a:4+(r-e)/a:0;return{h:n(60*(i<0?i+6:i)),s:n(s?a/s*100:0),v:n(s/255*100),a:t}},te=(r,e)=>{if(r===e)return!0;for(const o in r)if(r[o]!==e[o])return!1;return!0},xe=(r,e)=>r.toLowerCase()===e.toLowerCase()?!0:te(E(r),E(e)),M={},z=r=>{let e=M[r];return e||(e=document.createElement("template"),e.innerHTML=r,M[r]=e),e},L=(r,e,o)=>{r.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o}))};let h=!1;const H=r=>"touches"in r,me=r=>h&&!H(r)?!1:(h||(h=H(r)),!0),N=(r,e)=>{const o=H(e)?e.touches[0]:e,t=r.el.getBoundingClientRect();L(r.el,"move",r.getMove({x:b((o.pageX-(t.left+window.pageXOffset))/t.width),y:b((o.pageY-(t.top+window.pageYOffset))/t.height)}))},ye=(r,e)=>{const o=e.keyCode;o>40||r.xy&&o<37||o<33||(e.preventDefault(),L(r.el,"move",r.getMove({x:o===39?.01:o===37?-.01:o===34?.05:o===33?-.05:o===35?1:o===36?-1:0,y:o===40?.01:o===38?-.01:0},!0)))};class oe{constructor(e,o,t,s){const a=z(`<div role="slider" tabindex="0" part="${o}" ${t}><div part="${o}-pointer"></div></div>`);e.appendChild(a.content.cloneNode(!0));const i=e.querySelector(`[part=${o}]`);i.addEventListener("mousedown",this),i.addEventListener("touchstart",this),i.addEventListener("keydown",this),this.el=i,this.xy=s,this.nodes=[i.firstChild,i]}set dragging(e){const o=e?document.addEventListener:document.removeEventListener;o(h?"touchmove":"mousemove",this),o(h?"touchend":"mouseup",this)}handleEvent(e){switch(e.type){case"mousedown":case"touchstart":if(e.preventDefault(),!me(e)||!h&&e.button!=0)return;this.el.focus(),N(this,e),this.dragging=!0;break;case"mousemove":case"touchmove":e.preventDefault(),N(this,e);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":ye(this,e);break}}style(e){e.forEach((o,t)=>{for(const s in o)this.nodes[t].style.setProperty(s,o[s])})}}class Ce extends oe{constructor(e){super(e,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:e}){this.h=e,this.style([{left:`${e/360*100}%`,color:P({h:e,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${n(e)}`)}getMove(e,o){return{h:o?b(this.h+e.x*360,0,360):360*e.x}}}class $e extends oe{constructor(e){super(e,"saturation",'aria-label="Color"',!0)}update(e){this.hsva=e,this.style([{top:`${100-e.v}%`,left:`${e.s}%`,color:P(e)},{"background-color":P({h:e.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${n(e.s)}%, Brightness ${n(e.v)}%`)}getMove(e,o){return{s:o?b(this.hsva.s+e.x*100,0,100):e.x*100,v:o?b(this.hsva.v-e.y*100,0,100):Math.round(100-e.y*100)}}}const we=':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',ke="[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}",_e="[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}",x=Symbol("same"),C=Symbol("color"),F=Symbol("hsva"),$=Symbol("update"),D=Symbol("parts"),B=Symbol("css"),O=Symbol("sliders");let Se=class extends HTMLElement{static get observedAttributes(){return["color"]}get[B](){return[we,ke,_e]}get[O](){return[$e,Ce]}get color(){return this[C]}set color(e){if(!this[x](e)){const o=this.colorModel.toHsva(e);this[$](o),this[C]=e}}constructor(){super();const e=z(`<style>${this[B].join("")}</style>`),o=this.attachShadow({mode:"open"});o.appendChild(e.content.cloneNode(!0)),o.addEventListener("move",this),this[D]=this[O].map(t=>new t(o))}connectedCallback(){if(this.hasOwnProperty("color")){const e=this.color;delete this.color,this.color=e}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(e,o,t){const s=this.colorModel.fromAttr(t);this[x](s)||(this.color=s)}handleEvent(e){const o=this[F],t={...o,...e.detail};this[$](t);let s;!te(t,o)&&!this[x](s=this.colorModel.fromHsva(t))&&(this[C]=s,L(this,"color-changed",{value:s}))}[x](e){return this.color&&this.colorModel.equal(e,this.color)}[$](e){this[F]=e,this[D].forEach(o=>o.update(e))}};const Ee={defaultColor:"#000",toHsva:he,fromHsva:({h:r,s:e,v:o})=>ue({h:r,s:e,v:o,a:1}),equal:xe,fromAttr:r=>r};class Pe extends Se{get colorModel(){return Ee}}class re extends Pe{}customElements.define("hex-color-picker",re);const He=/^#?([0-9A-F]{3,8})$/i,w=(r,e)=>{const o=He.exec(r),t=o?o[1].length:0;return t===3||t===6||!!e&&t===4||!!e&&t===8},Te=z('<slot><input part="input" spellcheck="false"></slot>'),V=(r,e)=>r.replace(/([^0-9A-F]+)/gi,"").substring(0,e?8:6),R=Symbol("alpha"),m=Symbol("color"),K=Symbol("saved"),k=Symbol("input"),_=Symbol("init"),W=Symbol("prefix"),v=Symbol("update");class Ie extends HTMLElement{static get observedAttributes(){return["alpha","color","prefixed"]}get color(){return this[m]}set color(e){this[m]=e,this[v](e)}get alpha(){return this[R]}set alpha(e){this[R]=e,this.toggleAttribute("alpha",e);const o=this.color;o&&!w(o,e)&&(this.color=o.startsWith("#")?o.substring(0,o.length===5?4:7):o.substring(0,o.length===4?3:6))}get prefixed(){return this[W]}set prefixed(e){this[W]=e,this.toggleAttribute("prefixed",e),this[v](this.color)}constructor(){super();const e=this.attachShadow({mode:"open"});e.appendChild(Te.content.cloneNode(!0)),e.firstElementChild.addEventListener("slotchange",()=>this[_](e))}connectedCallback(){if(this[_](this.shadowRoot),this.hasOwnProperty("alpha")){const e=this.alpha;delete this.alpha,this.alpha=e}else this.alpha=this.hasAttribute("alpha");if(this.hasOwnProperty("prefixed")){const e=this.prefixed;delete this.prefixed,this.prefixed=e}else this.prefixed=this.hasAttribute("prefixed");if(this.hasOwnProperty("color")){const e=this.color;delete this.color,this.color=e}else this.color==null?this.color=this.getAttribute("color")||"":this[m]&&this[v](this[m])}handleEvent(e){const o=e.target,{value:t}=o;switch(e.type){case"input":const s=V(t,this.alpha);this[K]=this.color,(w(s,this.alpha)||t==="")&&(this.color=s,this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,detail:{value:s?"#"+s:""}})));break;case"blur":t&&!w(t,this.alpha)&&(this.color=this[K])}}attributeChangedCallback(e,o,t){e==="color"&&this.color!==t&&(this.color=t);const s=t!=null;e==="alpha"&&this.alpha!==s&&(this.alpha=s),e==="prefixed"&&this.prefixed!==s&&(this.prefixed=s)}[_](e){let o=this.querySelector("input");if(!o){let t;for(;t=this.firstChild;)t.remove();o=e.querySelector("input")}o.addEventListener("input",this),o.addEventListener("blur",this),this[k]=o,this[v](this.color)}[v](e){this[k]&&(this[k].value=e==null||e==""?"":(this.prefixed?"#":"")+V(e,this.alpha))}}class se extends Ie{}customElements.define("hex-input",se);var ze=Object.defineProperty,p=(r,e,o,t)=>{for(var s=void 0,a=r.length-1,i;a>=0;a--)(i=r[a])&&(s=i(e,o,s)||s);return s&&ze(e,o,s),s};const T="vvd-hex-picker",I="vvd-hex-input";class Le extends re{static{this.displayName="VvdHexPicker"}}class Ae extends se{static{this.displayName="VvdHexInput"}}customElements.get(T)||customElements.define(T,Le);customElements.get(I)||customElements.define(I,Ae);const X=T,j=I;class c extends ae.WithContextualHelp(U.WithFeedback(le.WithErrorText(ne.WithSuccessText(Y.DelegatesAria(ce.TrappedFocus(u.BaseColorPicker(l.VividElement))))))){constructor(){super(...arguments),this.disableSavedColors=!1,this.savedColors=[],this.maxSwatches=6,this.#t=e=>{this._isInPath(e,this._buttonEl)||this._isInPath(e,this._popupEl)||(this.open=!1)},this.copyIconName="copy-2-line",this.#e=null,this._copyValueToClipboard=async e=>{try{await navigator.clipboard.writeText(e),this._setTemporaryCopyIcon("check-circle-line"),this._ariaLiveDescription=this.locale.colorPicker.copySuccessMessage(e)}catch{alert(this.locale.colorPicker.copyErrorText),this._setTemporaryCopyIcon("error-line"),this._ariaLiveDescription=this.locale.colorPicker.copyErrorText}},this._ariaLiveDescription=""}static{this.HEX_COLOR_PATTERN=/^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}handleChange(){this.$emit("change")}openChanged(e,o){o&&this.isConnected&&requestAnimationFrame(()=>{this._refreshCanvasColor()})}savedColorsKeyChanged(){this.savedColors=this._loadSavedColors()}get _savedColorsStorageKey(){return this.savedColorsKey?this.savedColorsKey:`vvd-saved-colors:${this.tagName.toLowerCase()}`}_handleColorSaving(){this._saveCurrentColor()}_saveCurrentColor(){const e=this.value;if(typeof e!="string"||!u.isValidHexColor(e))return;const o=Array.isArray(this.savedColors)?[...this.savedColors]:[],t=o.findIndex(s=>s?.value===e);t!==-1&&o.splice(t,1),o.unshift({value:e}),this.savedColors=o.slice(0,this._maxSwatchesNormalized),this._setSavedColors(this.savedColors)}_loadSavedColors(){try{const e=localStorage.getItem(this._savedColorsStorageKey);if(!e)return[];const o=JSON.parse(e);return Array.isArray(o)?o.filter(t=>t&&typeof t.value=="string"&&u.isValidHexColor(t.value)).map(t=>({value:t.value,label:typeof t.label=="string"?t.label:void 0})):[]}catch{return[]}}_setSavedColors(e){try{localStorage.setItem(this._savedColorsStorageKey,JSON.stringify(e))}catch{}}get allSwatches(){const e=Array.isArray(this.swatches)?this.swatches:[],o=Array.isArray(this.savedColors)?this.savedColors:[],t=new Set,s=[],a=i=>{!i||typeof i.value!="string"||!u.isValidHexColor(i.value)||t.has(i.value)||(t.add(i.value),s.push(i))};return this.disableSavedColors||o.forEach(a),e.forEach(a),s.slice(0,this._maxSwatchesNormalized)}get _maxSwatchesNormalized(){return Number.isFinite(this.maxSwatches)?Math.max(0,Math.floor(this.maxSwatches)):0}maxSwatchesChanged(){const e=this._maxSwatchesNormalized;this.savedColors?.length>e&&(this.savedColors=this.savedColors.slice(0,e),this._setSavedColors(this.savedColors))}_onPickerColorChanged(e){typeof e.detail?.value=="string"&&(this.value=e.detail?.value)}valueChanged(e,o){this._vcHexPickerEl&&typeof o=="string"&&(this._vcHexPickerEl.color=o),this._vcHexInputEl&&typeof o=="string"&&(this._vcHexInputEl.color=o)}_onTextFieldInput(e){const o=e.currentTarget;this.value=o.value}get _buttonColor(){return this._canvasColor||this._refreshCanvasColor(),this.value&&u.isValidHexColor(this.value)?this.value:"var(--vvd-color-canvas-text)"}_onButtonClick(){this.open=!this.open}_handleCloseRequest(){this.open=!1}_isInPath(e,o){if(!o)return!1;const t=e.composedPath?.();return!!(t&&t.includes(o))}#t;connectedCallback(){super.connectedCallback(),this.savedColors=this._loadSavedColors(),document.addEventListener("mousedown",this.#t,!0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("mousedown",this.#t,!0)}#e;_setTemporaryCopyIcon(e,o=2e3){this.copyIconName=e,this.#e&&clearTimeout(this.#e),this.#e=setTimeout(()=>{this.copyIconName="copy-2-line",this.#e=null},o)}_onBaseKeydown(e){return this.open&&ie.handleEscapeKeyAndStopPropogation(e)?(this.open=!1,!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_focusableElsWithinDialog(){return this._popupEl.querySelectorAll('button:not([role="gridcell"]), [data-vvd-component="button"], vwc-button:not([role="gridcell"])')}_handleCellKeydown(e,o,t,s){if(e.key==="Tab"){e.preventDefault();const a=this._focusableElsWithinDialog(),i=Array.prototype.indexOf.call(a,e.currentTarget),d=e.shiftKey?(i-1+a.length)%a.length:(i+1)%a.length;return a[d]?.focus(),!1}return super._handleCellKeydown(e,o,t,s)}_handleSwatchSelection(e){this.value!==e&&(this._ariaLiveDescription=this.locale.colorPicker.selectionSuccessMessage(e)),super._handleSwatchSelection(e)}}p([l.attr],c.prototype,"placeholder");p([l.attr({attribute:"saved-colors-key"})],c.prototype,"savedColorsKey");p([l.attr({mode:"boolean",attribute:"disable-saved-colors"})],c.prototype,"disableSavedColors");p([l.observable],c.prototype,"savedColors");p([l.attr({attribute:"max-swatches",mode:"fromView",converter:l.nullableNumberConverter})],c.prototype,"maxSwatches");p([l.observable],c.prototype,"copyIconName");p([l.observable],c.prototype,"_ariaLiveDescription");function qe(r,e){const o=t=>q.classNames("control");return l.html`
+		<${r} 
 			id="text-field"
-			class="${t}"
+			class="${o}"
 			pattern="${c.HEX_COLOR_PATTERN.source}"
 			maxlength="7"
-			label="${r=>r.label}"
-			:value="${r=>r.value}"
-			placeholder="${r=>r.placeholder}"
-			helper-text="${r=>r.helperText}"
-			error-text="${r=>r.errorValidationMessage}"
-			success-text="${r=>r.successText}"
-			?disabled="${r=>r.disabled}"
-			?required="${r=>r.required}"
-			@input='${(r,s)=>r._onTextFieldInput(s.event)}'
-			@change="${r=>r.handleChange()}"
-			@blur="${r=>{r.$emit("blur",void 0,{bubbles:!1})}}"
-			@focus="${r=>{r.$emit("focus",void 0,{bubbles:!1})}}"
-			${U.delegateAria()}
-			${v.ref("_textFieldEl")}
+			label="${t=>t.label}"
+			:value="${t=>t.value}"
+			placeholder="${t=>t.placeholder}"
+			helper-text="${t=>t.helperText}"
+			error-text="${t=>t.errorValidationMessage}"
+			success-text="${t=>t.successText}"
+			?disabled="${t=>t.disabled}"
+			?required="${t=>t.required}"
+			@input='${(t,s)=>t._onTextFieldInput(s.event)}'
+			@change="${t=>t.handleChange()}"
+			@blur="${t=>{t.$emit("blur",void 0,{bubbles:!1})}}"
+			@focus="${t=>{t.$emit("focus",void 0,{bubbles:!1})}}"
+			${Y.delegateAria()}
+			${f.ref("_textFieldEl")}
 		>
 			<button 
-				aria-label="${r=>r.locale.colorPicker.pickerButtonLabel}"
-				class="button ${r=>L.classNames(r._applyContrastClass(r._buttonColor)?"contrast":"",r.disabled?"disabled":"")}" 
-				style="--button-color: ${r=>r._buttonColor};" 
-				?disabled="${r=>r.disabled}"
-				@click="${r=>r._onButtonClick()}"
+				aria-label="${t=>t.locale.colorPicker.pickerButtonLabel}"
+				aria-expanded="${t=>t.open}"
+  			aria-haspopup="dialog"
+				class="button ${t=>q.classNames(t._applyContrastClass(t._buttonColor)?"contrast":"",t.disabled?"disabled":"")}" 
+				style="--button-color: ${t=>t._buttonColor};" 
+				?disabled="${t=>t.disabled}"
+				@click="${t=>t._onButtonClick()}"
 				slot="action-items" 
-				${v.ref("_buttonEl")}>
+				${f.ref("_buttonEl")}>
 				<${e} name="edit-line"></${e}>
 			</button>
 			<slot
-				slot="${r=>r._helperTextSlottedContent?.length?"helper-text":void 0}"
+				slot="${t=>t._helperTextSlottedContent?.length?"helper-text":void 0}"
 				name="helper-text"
 				${A.slotted("_helperTextSlottedContent")}
 			></slot>
 			<slot
-				slot='${r=>r._contextualHelpSlottedContent?.length?"contextual-help":void 0}'
+				slot='${t=>t._contextualHelpSlottedContent?.length?"contextual-help":void 0}'
 				name='contextual-help'
 				${A.slotted("_contextualHelpSlottedContent")}
 			></slot>
-		</${o}>
-	`}function Ae(o,e){return l.html`
+		</${r}>
+	`}function Me(r,e){return l.html`
 		<div class="header">
-			<span class="header-title" id="color-picker-title">
-				<slot name="popup-text">${t=>t.locale.colorPicker.popupLabel}</slot>
-			</span>
-			<${o} size="condensed" 
-				aria-label="${t=>t.locale.colorPicker.closeButtonLabel}" 
-				@click="${t=>t._handleCloseRequest()}">
+			<h2 class="header-title" id="color-picker-title">
+				<slot name="popup-text">${o=>o.locale.colorPicker.popupLabel}</slot>
+			</h2>
+			<${r} size="condensed" 
+				aria-label="${o=>o.locale.colorPicker.closeButtonLabel}" 
+				@click="${o=>o._handleCloseRequest()}">
 				<${e} slot="icon" name="close-line"></${e}>
-			</${o}>
+			</${r}>
 		</div>
-	`}function Le(o,e){return l.html`
+	`}function Ne(r,e,o){return l.html`
 		<div class="body">
 			<${l.html.partial(X)}
 				part="hex-picker"
 				color="${t=>t.value}"
-				@color-changed="${(t,r)=>t._onPickerColorChanged(r.event)}"
-				${v.ref("_vcHexPickerEl")}
+				@color-changed="${(t,s)=>t._onPickerColorChanged(s.event)}"
+				${f.ref("_vcHexPickerEl")}
 			></${l.html.partial(X)}>
 			<div class="hex-input-wrapper">
-				<${l.html.partial(W)}
+				<${l.html.partial(j)}
 					part="hex-input"
 					prefixed
 					color="${t=>t.value}"
-					@color-changed="${(t,r)=>t._onPickerColorChanged(r.event)}"
-					${v.ref("_vcHexInputEl")}
-				></${l.html.partial(W)}>
-				<${o} size="normal" 
-					aria-label="${t=>t.locale.colorPicker.copyButtonLabel}" 
-					@click="${t=>t._copyValueToClipboard(t.value)}">
-					<${e} slot="icon" name="${t=>t.copyIconName}"></${e}>
+					@color-changed="${(t,s)=>t._onPickerColorChanged(s.event)}"
+					${f.ref("_vcHexInputEl")}
+				>
+					<input name="hex-code-input" aria-label="${t=>t.locale.colorPicker.hexInputLabel}" 
+						placeholder="${t=>t.placeholder}"
+    				@blur="${(t,s)=>s.event.stopImmediatePropagation()}"
+						part="input">
+				</${l.html.partial(j)}>
+				<${o} placement="top" 
+					text="${t=>t.locale.colorPicker.copyButtonLabel}" 
+					exportparts="vvd-theme-alternate">
+					<${r} 
+						slot="anchor" size="normal" 
+						aria-label="${t=>t.locale.colorPicker.copyButtonLabel}" 
+						@click="${t=>t._copyValueToClipboard(t.value)}">
+						<${e} slot="icon" name="${t=>t.copyIconName}"></${e}>
+					</${r}>
 				</${o}>
 			</div>
 		</div>
-	`}function qe(o,e){return l.html`
+	`}function Fe(r,e,o){return l.html`
 		<div class="footer">
-			<span class="footer-title" id="color-picker-footer-title"
-				><slot name="swatches-text"
-					>${t=>t.locale.colorPicker.swatchesLabel}</slot
-				></span
-			>
+			<div class="footer-header">
+				<span class="footer-title" id="color-picker-footer-title"
+					><slot name="swatches-text"
+						>${t=>t.locale.colorPicker.swatchesLabel}</slot
+					></span
+				>
+				${S.when(t=>!t.disableSavedColors,De())}
+			</div>
 			<div
 				class="palette"
 				role="grid"
@@ -89,39 +104,53 @@
 				style="--swatches-per-row: ${t=>t._getRowLength()};"
 				aria-labelledby="color-picker-footer-title"
 			>
-				${le.repeat(t=>t.allSwatches,t=>t._renderColorSwatch(e),{positioning:!0})}
-				${Z.when(t=>!t.disableSavedColors,l.html`
-					<${o}
-						appearance="outlined"
-						size="super-condensed"
-						role="gridcell"
-						tabindex="${t=>t.allSwatches.length?"-1":"0"}"
-						aria-label="${t=>t.locale.colorPicker.saveButtonLabel}"
-						@click="${t=>t._saveCurrentColor()}"
-						@keydown="${(t,r)=>t._handleCellKeydown(r.event,t.value,t.allSwatches.length,!0)}">
-					>
-						<${e} slot="icon" name="plus-line"></${e}>
-					</${o}>
-				`)}
+				${de.repeat(t=>t.allSwatches,t=>t._renderColorSwatch(e,o),{positioning:!0})}
+				${S.when(t=>!t.disableSavedColors,l.html`
+						<${o} placement="top" 
+							text="${t=>t.locale.colorPicker.saveButtonLabel}" 
+							exportparts="vvd-theme-alternate">
+							<${r}
+								slot="anchor"
+								appearance="outlined"
+								size="super-condensed"
+								role="gridcell"
+								tabindex="${t=>t.allSwatches.length?"-1":"0"}"
+								aria-label="${t=>t.locale.colorPicker.saveButtonLabel}"
+								@click="${t=>t._saveCurrentColor()}"
+								@keydown="${(t,s)=>t._handleCellKeydown(s.event,t.value,t.allSwatches.length,!0)}">
+								<${e} slot="icon" name="plus-line"></${e}>
+							</${r}>
+						</${o}>
+					`)}
 			</div>
 		</div>
-	`}const Me=o=>{const e=o.tagFor(Y.TextField),t=o.tagFor(G.Icon),r=o.tagFor(j.Popup),s=o.tagFor(Q.Button);return l.html`
-		<div class="base">
-			${Ie(e,t)}
-			<${r}
+	`}function De(){return l.html`
+		<span
+			id="swatches-count"
+			class="swatches-count"
+			aria-label="${r=>r.locale.colorPicker.maxSwatchesMessage(r.allSwatches.length,r.maxSwatches)}"
+			>${r=>`${r.allSwatches.length}/${r.maxSwatches}`}</span
+		>
+	`}const Be=r=>{const e=r.tagFor(Q.TextField),o=r.tagFor(J.Icon),t=r.tagFor(G.Popup),s=r.tagFor(Z.Button),a=r.tagFor(ee.Tooltip);return l.html`
+		<div class="base" @keydown="${(i,{event:d})=>i._onBaseKeydown(d)}">
+			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
+				${i=>i._ariaLiveDescription}
+			</span>
+			${qe(e,o)}
+			<${t}
 				:open="${i=>i.open}"
 				:anchor="${i=>i._buttonEl}"
 				placement="top"
 				offset="10" 
-				${v.ref("_popupEl")}>
+				${f.ref("_popupEl")}>
 				<div class="dialog" 
 					role="dialog" 
 					aria-modal="true" 
 					aria-labelledby="color-picker-title">
-					${Ae(s,t)}
-					${Le(s,t)}
-					${Z.when(i=>!i.disableSavedColors||i.allSwatches.length>0,qe(s,t))}
+					${Me(s,o)}
+					${Ne(s,o,a)}
+					${S.when(i=>!i.disableSavedColors||i.allSwatches.length>0,Fe(s,o,a))}
 				</div>
-			</${r}>
+			</${t}>
 		</div>
-	`},Ne=l.defineVividComponent("color-picker",c,Me,[j.popupDefinition,G.iconDefinition,Y.textFieldDefinition,Q.buttonDefinition,J.feedbackMessageDefinition],{styles:ne}),Fe=l.createRegisterFunction(Ne);Fe();
+	`},Oe=l.defineVividComponent("color-picker",c,Be,[G.popupDefinition,J.iconDefinition,Q.textFieldDefinition,Z.buttonDefinition,ee.tooltipDefinition,U.feedbackMessageDefinition],{styles:pe}),Ve=l.createRegisterFunction(Oe);Ve();