@vonage/vivid 5.2.0 → 5.4.0

package/color-picker/index.cjs

@@ -0,0 +1,127 @@
+"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} 
+			id="text-field"
+			class="${t}"
+			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")}
+		>
+			<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()}"
+				slot="action-items" 
+				${v.ref("_buttonEl")}>
+				<${e} name="edit-line"></${e}>
+			</button>
+			<slot
+				slot="${r=>r._helperTextSlottedContent?.length?"helper-text":void 0}"
+				name="helper-text"
+				${A.slotted("_helperTextSlottedContent")}
+			></slot>
+			<slot
+				slot='${r=>r._contextualHelpSlottedContent?.length?"contextual-help":void 0}'
+				name='contextual-help'
+				${A.slotted("_contextualHelpSlottedContent")}
+			></slot>
+		</${o}>
+	`}function Ae(o,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()}">
+				<${e} slot="icon" name="close-line"></${e}>
+			</${o}>
+		</div>
+	`}function Le(o,e){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")}
+			></${l.html.partial(X)}>
+			<div class="hex-input-wrapper">
+				<${l.html.partial(W)}
+					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}>
+				</${o}>
+			</div>
+		</div>
+	`}function qe(o,e){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="palette"
+				role="grid"
+				aria-rowcount="${t=>Math.ceil(t.allSwatches.length/t._getRowLength())}"
+				aria-colcount="${t=>t._getRowLength()}"
+				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}>
+				`)}
+			</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}
+				:open="${i=>i.open}"
+				:anchor="${i=>i._buttonEl}"
+				placement="top"
+				offset="10" 
+				${v.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))}
+				</div>
+			</${r}>
+		</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();