@vonage/vivid 5.24.0 → 5.25.0

package/color-picker/index.cjs

@@ -1,8 +1,8 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/definition3.cjs`),c=require(`../bundled/delegates-aria.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition8.cjs`),d=require(`../bundled/definition9.cjs`),f=require(`../bundled/dialog.cjs`),p=require(`../bundled/mixins.cjs`),m=require(`../bundled/with-contextual-help.cjs`),ee=require(`../bundled/with-error-text.cjs`),te=require(`../bundled/with-success-text.cjs`),h=require(`../bundled/definition12.cjs`),ne=require(`../bundled/trapped-focus.cjs`),g=require(`../bundled/base-color-picker.cjs`);var re=`.palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{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);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:none;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{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.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(--focus-stroke-color,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(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.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{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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){border-radius:8px;flex:0 0 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{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`,_=(e,t=0,n=1)=>e>n?n:e<t?t:e,v=(e,t=0,n=10**t)=>Math.round(n*e)/n;360/(Math.PI*2);var ie=e=>le(y(e)),y=e=>(e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?v(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?v(parseInt(e.substring(6,8),16)/255,2):1}),ae=e=>ce(se(e)),oe=({h:e,s:t,v:n,a:r})=>{let i=(200-t)*n/100;return{h:v(e),s:v(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:v(i/2),a:v(r,2)}},b=e=>{let{h:t,s:n,l:r}=oe(e);return`hsl(${t}, ${n}%, ${r}%)`},se=({h:e,s:t,v:n,a:r})=>{e=e/360*6,t/=100,n/=100;let i=Math.floor(e),a=n*(1-t),o=n*(1-(e-i)*t),s=n*(1-(1-e+i)*t),c=i%6;return{r:v([n,o,a,a,s,n][c]*255),g:v([s,n,n,o,a,a][c]*255),b:v([a,a,s,n,n,o][c]*255),a:v(r,2)}},x=e=>{let t=e.toString(16);return t.length<2?`0`+t:t},ce=({r:e,g:t,b:n,a:r})=>{let i=r<1?x(v(r*255)):``;return`#`+x(e)+x(t)+x(n)+i},le=({r:e,g:t,b:n,a:r})=>{let i=Math.max(e,t,n),a=i-Math.min(e,t,n),o=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:v(60*(o<0?o+6:o)),s:v(i?a/i*100:0),v:v(i/255*100),a:r}},S=(e,t)=>{if(e===t)return!0;for(let n in e)if(e[n]!==t[n])return!1;return!0},ue=(e,t)=>e.toLowerCase()===t.toLowerCase()?!0:S(y(e),y(t)),C={},w=e=>{let t=C[e];return t||(t=document.createElement(`template`),t.innerHTML=e,C[e]=t),t},T=(e,t,n)=>{e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}))},E=!1,D=e=>`touches`in e,de=e=>E&&!D(e)?!1:(E||=D(e),!0),O=(e,t)=>{let n=D(t)?t.touches[0]:t,r=e.el.getBoundingClientRect();T(e.el,`move`,e.getMove({x:_((n.pageX-(r.left+window.pageXOffset))/r.width),y:_((n.pageY-(r.top+window.pageYOffset))/r.height)}))},fe=(e,t)=>{let n=t.keyCode;n>40||e.xy&&n<37||n<33||(t.preventDefault(),T(e.el,`move`,e.getMove({x:n===39?.01:n===37?-.01:n===34?.05:n===33?-.05:n===35?1:n===36?-1:0,y:n===40?.01:n===38?-.01:0},!0)))},k=class{constructor(e,t,n,r){let i=w(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);e.appendChild(i.content.cloneNode(!0));let a=e.querySelector(`[part=${t}]`);a.addEventListener(`mousedown`,this),a.addEventListener(`touchstart`,this),a.addEventListener(`keydown`,this),this.el=a,this.xy=r,this.nodes=[a.firstChild,a]}set dragging(e){let t=e?document.addEventListener:document.removeEventListener;t(E?`touchmove`:`mousemove`,this),t(E?`touchend`:`mouseup`,this)}handleEvent(e){switch(e.type){case`mousedown`:case`touchstart`:if(e.preventDefault(),!de(e)||!E&&e.button!=0)return;this.el.focus(),O(this,e),this.dragging=!0;break;case`mousemove`:case`touchmove`:e.preventDefault(),O(this,e);break;case`mouseup`:case`touchend`:this.dragging=!1;break;case`keydown`:fe(this,e);break}}style(e){e.forEach((e,t)=>{for(let n in e)this.nodes[t].style.setProperty(n,e[n])})}},pe=class extends k{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:b({h:e,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuenow`,`${v(e)}`)}getMove(e,t){return{h:t?_(this.h+e.x*360,0,360):360*e.x}}},me=class extends k{constructor(e){super(e,`saturation`,`aria-label="Color"`,!0)}update(e){this.hsva=e,this.style([{top:`${100-e.v}%`,left:`${e.s}%`,color:b(e)},{"background-color":b({h:e.h,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuetext`,`Saturation ${v(e.s)}%, Brightness ${v(e.v)}%`)}getMove(e,t){return{s:t?_(this.hsva.s+e.x*100,0,100):e.x*100,v:t?_(this.hsva.v-e.y*100,0,100):Math.round(100-e.y*100)}}},he=`: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)}`,ge=`[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}`,A=Symbol(`same`),j=Symbol(`color`),M=Symbol(`hsva`),N=Symbol(`update`),P=Symbol(`parts`),F=Symbol(`css`),I=Symbol(`sliders`),ve=class extends HTMLElement{static get observedAttributes(){return[`color`]}get[F](){return[he,ge,_e]}get[I](){return[me,pe]}get color(){return this[j]}set color(e){if(!this[A](e)){let t=this.colorModel.toHsva(e);this[N](t),this[j]=e}}constructor(){super();let e=w(`<style>${this[F].join(``)}</style>`),t=this.attachShadow({mode:`open`});t.appendChild(e.content.cloneNode(!0)),t.addEventListener(`move`,this),this[P]=this[I].map(e=>new e(t))}connectedCallback(){if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color||=this.colorModel.defaultColor}attributeChangedCallback(e,t,n){let r=this.colorModel.fromAttr(n);this[A](r)||(this.color=r)}handleEvent(e){let t=this[M],n={...t,...e.detail};this[N](n);let r;!S(n,t)&&!this[A](r=this.colorModel.fromHsva(n))&&(this[j]=r,T(this,`color-changed`,{value:r}))}[A](e){return this.color&&this.colorModel.equal(e,this.color)}[N](e){this[M]=e,this[P].forEach(t=>t.update(e))}},ye={defaultColor:`#000`,toHsva:ie,fromHsva:({h:e,s:t,v:n})=>ae({h:e,s:t,v:n,a:1}),equal:ue,fromAttr:e=>e},be=class extends ve{get colorModel(){return ye}},L=class extends be{};customElements.define(`hex-color-picker`,L);var xe=/^#?([0-9A-F]{3,8})$/i,R=(e,t)=>{let n=xe.exec(e),r=n?n[1].length:0;return r===3||r===6||!!t&&r===4||!!t&&r===8},Se=w(`<slot><input part="input" spellcheck="false"></slot>`),z=(e,t)=>e.replace(/([^0-9A-F]+)/gi,``).substring(0,t?8:6),B=Symbol(`alpha`),V=Symbol(`color`),H=Symbol(`saved`),U=Symbol(`input`),W=Symbol(`init`),G=Symbol(`prefix`),K=Symbol(`update`),Ce=class extends HTMLElement{static get observedAttributes(){return[`alpha`,`color`,`prefixed`]}get color(){return this[V]}set color(e){this[V]=e,this[K](e)}get alpha(){return this[B]}set alpha(e){this[B]=e,this.toggleAttribute(`alpha`,e);let t=this.color;t&&!R(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[G]}set prefixed(e){this[G]=e,this.toggleAttribute(`prefixed`,e),this[K](this.color)}constructor(){super();let e=this.attachShadow({mode:`open`});e.appendChild(Se.content.cloneNode(!0)),e.firstElementChild.addEventListener(`slotchange`,()=>this[W](e))}connectedCallback(){if(this[W](this.shadowRoot),this.hasOwnProperty(`alpha`)){let e=this.alpha;delete this.alpha,this.alpha=e}else this.alpha=this.hasAttribute(`alpha`);if(this.hasOwnProperty(`prefixed`)){let e=this.prefixed;delete this.prefixed,this.prefixed=e}else this.prefixed=this.hasAttribute(`prefixed`);if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color==null?this.color=this.getAttribute(`color`)||``:this[V]&&this[K](this[V])}handleEvent(e){let{value:t}=e.target;switch(e.type){case`input`:let e=z(t,this.alpha);this[H]=this.color,(R(e,this.alpha)||t===``)&&(this.color=e,this.dispatchEvent(new CustomEvent(`color-changed`,{bubbles:!0,detail:{value:e?`#`+e:``}})));break;case`blur`:t&&!R(t,this.alpha)&&(this.color=this[H])}}attributeChangedCallback(e,t,n){e===`color`&&this.color!==n&&(this.color=n);let r=n!=null;e===`alpha`&&this.alpha!==r&&(this.alpha=r),e===`prefixed`&&this.prefixed!==r&&(this.prefixed=r)}[W](e){let t=this.querySelector(`input`);if(!t){let n;for(;n=this.firstChild;)n.remove();t=e.querySelector(`input`)}t.addEventListener(`input`,this),t.addEventListener(`blur`,this),this[U]=t,this[K](this.color)}[K](e){this[U]&&(this[U].value=e==null||e==``?``:(this.prefixed?`#`:``)+z(e,this.alpha))}},q=class extends Ce{};customElements.define(`hex-input`,q);var J=`vvd-hex-picker`,Y=`vvd-hex-input`,X=class extends L{static{this.displayName=`VvdHexPicker`}},we=class extends q{static{this.displayName=`VvdHexInput`}};customElements.get(J)||customElements.define(J,X),customElements.get(Y)||customElements.define(Y,we);var Z=J,Q=Y,$=class extends m.t(p.t(ee.t(te.t(c.t(ne.t(g.t(e.t))))))){constructor(...e){super(...e),this.disableSavedColors=!1,this.savedColors=[],this.maxSwatches=6,this.#e=e=>{this._isInPath(e,this._buttonEl)||this._isInPath(e,this._popupEl)||(this.open=!1)},this.copyIconName=`copy-2-line`,this.#t=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,t){t&&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(){let e=this.value;if(typeof e!=`string`||!g.n(e))return;let t=Array.isArray(this.savedColors)?[...this.savedColors]:[],n=t.findIndex(t=>t.value===e);n!==-1&&t.splice(n,1),t.unshift({value:e}),this.savedColors=t.slice(0,this._maxSwatchesNormalized),this._setSavedColors(this.savedColors)}_loadSavedColors(){try{let e=localStorage.getItem(this._savedColorsStorageKey);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&typeof e.value==`string`&&g.n(e.value)).map(e=>({value:e.value,label:typeof e.label==`string`?e.label:void 0})):[]}catch{return[]}}_setSavedColors(e){try{localStorage.setItem(this._savedColorsStorageKey,JSON.stringify(e))}catch{}}get allSwatches(){let e=Array.isArray(this.swatches)?this.swatches:[],t=Array.isArray(this.savedColors)?this.savedColors:[],n=new Set,r=[],i=e=>{!e||typeof e.value!=`string`||!g.n(e.value)||n.has(e.value)||(n.add(e.value),r.push(e))};return this.disableSavedColors||t.forEach(i),e.forEach(i),r.slice(0,this._maxSwatchesNormalized)}get _maxSwatchesNormalized(){return Number.isFinite(this.maxSwatches)?Math.max(0,Math.floor(this.maxSwatches)):0}maxSwatchesChanged(){let 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){let t=e.currentTarget;this.value=t.value}get _buttonColor(){return this._canvasColor||this._refreshCanvasColor(),this.value&&g.n(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;let n=e.composedPath?.();return!!(n&&n.includes(t))}#e;connectedCallback(){super.connectedCallback(),this.savedColors=this._loadSavedColors(),document.addEventListener(`mousedown`,this.#e,!0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`mousedown`,this.#e,!0)}#t;_setTemporaryCopyIcon(e,t=2e3){this.copyIconName=e,this.#t&&clearTimeout(this.#t),this.#t=setTimeout(()=>{this.copyIconName=`copy-2-line`,this.#t=null},t)}_onBaseKeydown(e){return this.open&&f.t(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,t,n,r){if(e.key===`Tab`){e.preventDefault();let t=this._focusableElsWithinDialog(),n=Array.prototype.indexOf.call(t,e.currentTarget);return t[e.shiftKey?(n-1+t.length)%t.length:(n+1)%t.length]?.focus(),!1}return super._handleCellKeydown(e,t,n,r)}_handleSwatchSelection(e){this.value!==e&&(this._ariaLiveDescription=this.locale.colorPicker.selectionSuccessMessage(e)),super._handleSwatchSelection(e)}};a.t([e.m],$.prototype,`placeholder`,void 0),a.t([e.m({attribute:`saved-colors-key`})],$.prototype,`savedColorsKey`,void 0),a.t([e.m({mode:`boolean`,attribute:`disable-saved-colors`})],$.prototype,`disableSavedColors`,void 0),a.t([e.A],$.prototype,`savedColors`,void 0),a.t([e.m({attribute:`max-swatches`,mode:`fromView`,converter:e.h})],$.prototype,`maxSwatches`,void 0),a.t([e.A],$.prototype,`copyIconName`,void 0),a.t([e.A],$.prototype,`_ariaLiveDescription`,void 0);function Te(t,i){return e.p`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/definition3.cjs`),c=require(`../bundled/icon.cjs`),l=require(`../bundled/delegates-aria.cjs`),u=require(`../bundled/definition6.cjs`),d=require(`../bundled/definition8.cjs`),f=require(`../bundled/definition9.cjs`),p=require(`../bundled/dialog.cjs`),m=require(`../bundled/mixins.cjs`),ee=require(`../bundled/with-contextual-help.cjs`),te=require(`../bundled/with-error-text.cjs`),ne=require(`../bundled/with-success-text.cjs`),h=require(`../bundled/definition12.cjs`),re=require(`../bundled/trapped-focus.cjs`),g=require(`../bundled/base-color-picker.cjs`);var ie=`.palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{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);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:none;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{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.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(--focus-stroke-color,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(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.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{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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){border-radius:8px;flex:0 0 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{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`,_=(e,t=0,n=1)=>e>n?n:e<t?t:e,v=(e,t=0,n=10**t)=>Math.round(n*e)/n;360/(Math.PI*2);var ae=e=>ue(y(e)),y=e=>(e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?v(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?v(parseInt(e.substring(6,8),16)/255,2):1}),oe=e=>le(ce(e)),se=({h:e,s:t,v:n,a:r})=>{let i=(200-t)*n/100;return{h:v(e),s:v(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:v(i/2),a:v(r,2)}},b=e=>{let{h:t,s:n,l:r}=se(e);return`hsl(${t}, ${n}%, ${r}%)`},ce=({h:e,s:t,v:n,a:r})=>{e=e/360*6,t/=100,n/=100;let i=Math.floor(e),a=n*(1-t),o=n*(1-(e-i)*t),s=n*(1-(1-e+i)*t),c=i%6;return{r:v([n,o,a,a,s,n][c]*255),g:v([s,n,n,o,a,a][c]*255),b:v([a,a,s,n,n,o][c]*255),a:v(r,2)}},x=e=>{let t=e.toString(16);return t.length<2?`0`+t:t},le=({r:e,g:t,b:n,a:r})=>{let i=r<1?x(v(r*255)):``;return`#`+x(e)+x(t)+x(n)+i},ue=({r:e,g:t,b:n,a:r})=>{let i=Math.max(e,t,n),a=i-Math.min(e,t,n),o=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:v(60*(o<0?o+6:o)),s:v(i?a/i*100:0),v:v(i/255*100),a:r}},S=(e,t)=>{if(e===t)return!0;for(let n in e)if(e[n]!==t[n])return!1;return!0},de=(e,t)=>e.toLowerCase()===t.toLowerCase()?!0:S(y(e),y(t)),C={},w=e=>{let t=C[e];return t||(t=document.createElement(`template`),t.innerHTML=e,C[e]=t),t},T=(e,t,n)=>{e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}))},E=!1,D=e=>`touches`in e,fe=e=>E&&!D(e)?!1:(E||=D(e),!0),O=(e,t)=>{let n=D(t)?t.touches[0]:t,r=e.el.getBoundingClientRect();T(e.el,`move`,e.getMove({x:_((n.pageX-(r.left+window.pageXOffset))/r.width),y:_((n.pageY-(r.top+window.pageYOffset))/r.height)}))},pe=(e,t)=>{let n=t.keyCode;n>40||e.xy&&n<37||n<33||(t.preventDefault(),T(e.el,`move`,e.getMove({x:n===39?.01:n===37?-.01:n===34?.05:n===33?-.05:n===35?1:n===36?-1:0,y:n===40?.01:n===38?-.01:0},!0)))},k=class{constructor(e,t,n,r){let i=w(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);e.appendChild(i.content.cloneNode(!0));let a=e.querySelector(`[part=${t}]`);a.addEventListener(`mousedown`,this),a.addEventListener(`touchstart`,this),a.addEventListener(`keydown`,this),this.el=a,this.xy=r,this.nodes=[a.firstChild,a]}set dragging(e){let t=e?document.addEventListener:document.removeEventListener;t(E?`touchmove`:`mousemove`,this),t(E?`touchend`:`mouseup`,this)}handleEvent(e){switch(e.type){case`mousedown`:case`touchstart`:if(e.preventDefault(),!fe(e)||!E&&e.button!=0)return;this.el.focus(),O(this,e),this.dragging=!0;break;case`mousemove`:case`touchmove`:e.preventDefault(),O(this,e);break;case`mouseup`:case`touchend`:this.dragging=!1;break;case`keydown`:pe(this,e);break}}style(e){e.forEach((e,t)=>{for(let n in e)this.nodes[t].style.setProperty(n,e[n])})}},me=class extends k{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:b({h:e,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuenow`,`${v(e)}`)}getMove(e,t){return{h:t?_(this.h+e.x*360,0,360):360*e.x}}},he=class extends k{constructor(e){super(e,`saturation`,`aria-label="Color"`,!0)}update(e){this.hsva=e,this.style([{top:`${100-e.v}%`,left:`${e.s}%`,color:b(e)},{"background-color":b({h:e.h,s:100,v:100,a:1})}]),this.el.setAttribute(`aria-valuetext`,`Saturation ${v(e.s)}%, Brightness ${v(e.v)}%`)}getMove(e,t){return{s:t?_(this.hsva.s+e.x*100,0,100):e.x*100,v:t?_(this.hsva.v-e.y*100,0,100):Math.round(100-e.y*100)}}},ge=`: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)}`,_e=`[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}`,ve=`[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}`,A=Symbol(`same`),j=Symbol(`color`),M=Symbol(`hsva`),N=Symbol(`update`),P=Symbol(`parts`),F=Symbol(`css`),I=Symbol(`sliders`),ye=class extends HTMLElement{static get observedAttributes(){return[`color`]}get[F](){return[ge,_e,ve]}get[I](){return[he,me]}get color(){return this[j]}set color(e){if(!this[A](e)){let t=this.colorModel.toHsva(e);this[N](t),this[j]=e}}constructor(){super();let e=w(`<style>${this[F].join(``)}</style>`),t=this.attachShadow({mode:`open`});t.appendChild(e.content.cloneNode(!0)),t.addEventListener(`move`,this),this[P]=this[I].map(e=>new e(t))}connectedCallback(){if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color||=this.colorModel.defaultColor}attributeChangedCallback(e,t,n){let r=this.colorModel.fromAttr(n);this[A](r)||(this.color=r)}handleEvent(e){let t=this[M],n={...t,...e.detail};this[N](n);let r;!S(n,t)&&!this[A](r=this.colorModel.fromHsva(n))&&(this[j]=r,T(this,`color-changed`,{value:r}))}[A](e){return this.color&&this.colorModel.equal(e,this.color)}[N](e){this[M]=e,this[P].forEach(t=>t.update(e))}},be={defaultColor:`#000`,toHsva:ae,fromHsva:({h:e,s:t,v:n})=>oe({h:e,s:t,v:n,a:1}),equal:de,fromAttr:e=>e},xe=class extends ye{get colorModel(){return be}},L=class extends xe{};customElements.define(`hex-color-picker`,L);var Se=/^#?([0-9A-F]{3,8})$/i,R=(e,t)=>{let n=Se.exec(e),r=n?n[1].length:0;return r===3||r===6||!!t&&r===4||!!t&&r===8},Ce=w(`<slot><input part="input" spellcheck="false"></slot>`),z=(e,t)=>e.replace(/([^0-9A-F]+)/gi,``).substring(0,t?8:6),B=Symbol(`alpha`),V=Symbol(`color`),H=Symbol(`saved`),U=Symbol(`input`),W=Symbol(`init`),G=Symbol(`prefix`),K=Symbol(`update`),we=class extends HTMLElement{static get observedAttributes(){return[`alpha`,`color`,`prefixed`]}get color(){return this[V]}set color(e){this[V]=e,this[K](e)}get alpha(){return this[B]}set alpha(e){this[B]=e,this.toggleAttribute(`alpha`,e);let t=this.color;t&&!R(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[G]}set prefixed(e){this[G]=e,this.toggleAttribute(`prefixed`,e),this[K](this.color)}constructor(){super();let e=this.attachShadow({mode:`open`});e.appendChild(Ce.content.cloneNode(!0)),e.firstElementChild.addEventListener(`slotchange`,()=>this[W](e))}connectedCallback(){if(this[W](this.shadowRoot),this.hasOwnProperty(`alpha`)){let e=this.alpha;delete this.alpha,this.alpha=e}else this.alpha=this.hasAttribute(`alpha`);if(this.hasOwnProperty(`prefixed`)){let e=this.prefixed;delete this.prefixed,this.prefixed=e}else this.prefixed=this.hasAttribute(`prefixed`);if(this.hasOwnProperty(`color`)){let e=this.color;delete this.color,this.color=e}else this.color==null?this.color=this.getAttribute(`color`)||``:this[V]&&this[K](this[V])}handleEvent(e){let{value:t}=e.target;switch(e.type){case`input`:let e=z(t,this.alpha);this[H]=this.color,(R(e,this.alpha)||t===``)&&(this.color=e,this.dispatchEvent(new CustomEvent(`color-changed`,{bubbles:!0,detail:{value:e?`#`+e:``}})));break;case`blur`:t&&!R(t,this.alpha)&&(this.color=this[H])}}attributeChangedCallback(e,t,n){e===`color`&&this.color!==n&&(this.color=n);let r=n!=null;e===`alpha`&&this.alpha!==r&&(this.alpha=r),e===`prefixed`&&this.prefixed!==r&&(this.prefixed=r)}[W](e){let t=this.querySelector(`input`);if(!t){let n;for(;n=this.firstChild;)n.remove();t=e.querySelector(`input`)}t.addEventListener(`input`,this),t.addEventListener(`blur`,this),this[U]=t,this[K](this.color)}[K](e){this[U]&&(this[U].value=e==null||e==``?``:(this.prefixed?`#`:``)+z(e,this.alpha))}},q=class extends we{};customElements.define(`hex-input`,q);var J=`vvd-hex-picker`,Y=`vvd-hex-input`,Te=class extends L{static{this.displayName=`VvdHexPicker`}},Ee=class extends q{static{this.displayName=`VvdHexInput`}};customElements.get(J)||customElements.define(J,Te),customElements.get(Y)||customElements.define(Y,Ee);var X=J,Z=Y,Q=class extends ee.t(m.t(te.t(ne.t(l.t(re.t(g.t(e.t))))))){constructor(...e){super(...e),this.disableSavedColors=!1,this.savedColors=[],this.maxSwatches=6,this.#e=e=>{this._isInPath(e,this._buttonEl)||this._isInPath(e,this._popupEl)||(this.open=!1)},this.copyIconName=`copy-2-line`,this.#t=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,t){t&&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(){let e=this.value;if(typeof e!=`string`||!g.n(e))return;let t=Array.isArray(this.savedColors)?[...this.savedColors]:[],n=t.findIndex(t=>t.value===e);n!==-1&&t.splice(n,1),t.unshift({value:e}),this.savedColors=t.slice(0,this._maxSwatchesNormalized),this._setSavedColors(this.savedColors)}_loadSavedColors(){try{let e=localStorage.getItem(this._savedColorsStorageKey);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&typeof e.value==`string`&&g.n(e.value)).map(e=>({value:e.value,label:typeof e.label==`string`?e.label:void 0})):[]}catch{return[]}}_setSavedColors(e){try{localStorage.setItem(this._savedColorsStorageKey,JSON.stringify(e))}catch{}}get allSwatches(){let e=Array.isArray(this.swatches)?this.swatches:[],t=Array.isArray(this.savedColors)?this.savedColors:[],n=new Set,r=[],i=e=>{!e||typeof e.value!=`string`||!g.n(e.value)||n.has(e.value)||(n.add(e.value),r.push(e))};return this.disableSavedColors||t.forEach(i),e.forEach(i),r.slice(0,this._maxSwatchesNormalized)}get _maxSwatchesNormalized(){return Number.isFinite(this.maxSwatches)?Math.max(0,Math.floor(this.maxSwatches)):0}maxSwatchesChanged(){let 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){let t=e.currentTarget;this.value=t.value}get _buttonColor(){return this._canvasColor||this._refreshCanvasColor(),this.value&&g.n(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;let n=e.composedPath?.();return!!(n&&n.includes(t))}#e;connectedCallback(){super.connectedCallback(),this.savedColors=this._loadSavedColors(),document.addEventListener(`mousedown`,this.#e,!0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`mousedown`,this.#e,!0)}#t;_setTemporaryCopyIcon(e,t=2e3){this.copyIconName=e,this.#t&&clearTimeout(this.#t),this.#t=setTimeout(()=>{this.copyIconName=`copy-2-line`,this.#t=null},t)}_onBaseKeydown(e){return this.open&&p.t(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,t,n,r){if(e.key===`Tab`){e.preventDefault();let t=this._focusableElsWithinDialog(),n=Array.prototype.indexOf.call(t,e.currentTarget);return t[e.shiftKey?(n-1+t.length)%t.length:(n+1)%t.length]?.focus(),!1}return super._handleCellKeydown(e,t,n,r)}_handleSwatchSelection(e){this.value!==e&&(this._ariaLiveDescription=this.locale.colorPicker.selectionSuccessMessage(e)),super._handleSwatchSelection(e)}};a.t([e.m],Q.prototype,`placeholder`,void 0),a.t([e.m({attribute:`saved-colors-key`})],Q.prototype,`savedColorsKey`,void 0),a.t([e.m({mode:`boolean`,attribute:`disable-saved-colors`})],Q.prototype,`disableSavedColors`,void 0),a.t([e.A],Q.prototype,`savedColors`,void 0),a.t([e.m({attribute:`max-swatches`,mode:`fromView`,converter:e.h})],Q.prototype,`maxSwatches`,void 0),a.t([e.A],Q.prototype,`copyIconName`,void 0),a.t([e.A],Q.prototype,`_ariaLiveDescription`,void 0);function $(t,i){return e.p`
 		<${t}
 			id="text-field"
 			class="${e=>o.t(`control`)}"
-			pattern="${$.HEX_COLOR_PATTERN.source}"
+			pattern="${Q.HEX_COLOR_PATTERN.source}"
 			maxlength="7"
 			label="${e=>e.label}"
 			:value="${e=>e.value}"
@@ -16,7 +16,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 			@change="${e=>e.handleChange()}"
 			@blur="${e=>{e.$emit(`blur`,void 0,{bubbles:!1})}}"
 			@focus="${e=>{e.$emit(`focus`,void 0,{bubbles:!1})}}"
-			${c.n()}
+			${l.n()}
 			${r.t(`_textFieldEl`)}
 		>
 			<button
@@ -42,7 +42,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 				${n.t(`_contextualHelpSlottedContent`)}
 			></slot>
 		</${t}>
-	`}function Ee(t,n){return e.p`
+	`}function De(t,n){return e.p`
 		<div class="header">
 			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${e=>e.locale.colorPicker.popupLabel}</slot>
@@ -53,16 +53,16 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 				<${n} slot="icon" name="close-line"></${n}>
 			</${t}>
 		</div>
-	`}function De(t,n,i){return e.p`
+	`}function Oe(t,n,i){return e.p`
 		<div class="body">
-			<${e.p.partial(Z)}
+			<${e.p.partial(X)}
 				part="hex-picker"
 				color="${e=>e.value}"
 				@color-changed="${(e,t)=>e._onPickerColorChanged(t.event)}"
 				${r.t(`_vcHexPickerEl`)}
-			></${e.p.partial(Z)}>
+			></${e.p.partial(X)}>
 			<div class="hex-input-wrapper">
-				<${e.p.partial(Q)}
+				<${e.p.partial(Z)}
 					part="hex-input"
 					prefixed
 					color="${e=>e.value}"
@@ -73,7 +73,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 						placeholder="${e=>e.placeholder}"
     				@blur="${(e,t)=>t.event.stopImmediatePropagation()}"
 						part="input">
-				</${e.p.partial(Q)}>
+				</${e.p.partial(Z)}>
 				<${i} placement="top"
 					text="${e=>e.locale.colorPicker.copyButtonLabel}"
 					exportparts="vvd-theme-alternate">
@@ -86,7 +86,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 				</${i}>
 			</div>
 		</div>
-	`}function Oe(n,r,a){return e.p`
+	`}function ke(n,r,a){return e.p`
 		<div class="footer">
 			<div class="footer-header">
 				<span class="footer-title" id="color-picker-footer-title"
@@ -94,7 +94,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 						>${e=>e.locale.colorPicker.swatchesLabel}</slot
 					></span
 				>
-				${i.t(e=>!e.disableSavedColors,ke())}
+				${i.t(e=>!e.disableSavedColors,Ae())}
 			</div>
 			<div
 				class="palette"
@@ -124,19 +124,19 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 					`)}
 			</div>
 		</div>
-	`}function ke(){return e.p`
+	`}function Ae(){return e.p`
 		<span
 			id="swatches-count"
 			class="swatches-count"
 			aria-label="${e=>e.locale.colorPicker.maxSwatchesMessage(e.allSwatches.length,e.maxSwatches)}"
 			>${e=>`${e.allSwatches.length}/${e.maxSwatches}`}</span
 		>
-	`}var Ae=e.u(`color-picker`,$,t=>{let n=t.tagFor(h.r),a=t.tagFor(s.r),o=t.tagFor(u.i),c=t.tagFor(l.i),f=t.tagFor(d.r);return e.p`
+	`}var je=e.u(`color-picker`,Q,t=>{let n=t.tagFor(h.r),a=t.tagFor(c.t),o=t.tagFor(d.i),s=t.tagFor(u.i),l=t.tagFor(f.r);return e.p`
 		<div class="base" @keydown="${(e,{event:t})=>e._onBaseKeydown(t)}">
 			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 				${e=>e._ariaLiveDescription}
 			</span>
-			${Te(n,a)}
+			${$(n,a)}
 			<${o}
 				:open="${e=>e.open}"
 				:anchor="${e=>e._buttonEl}"
@@ -147,10 +147,10 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs
 					role="dialog"
 					aria-modal="true"
 					aria-labelledby="color-picker-title">
-					${Ee(c,a)}
-					${De(c,a,f)}
-					${i.t(e=>!e.disableSavedColors||e.allSwatches.length>0,Oe(c,a,f))}
+					${De(s,a)}
+					${Oe(s,a,l)}
+					${i.t(e=>!e.disableSavedColors||e.allSwatches.length>0,ke(s,a,l))}
 				</div>
 			</${o}>
 		</div>
-	`},[u.t,s.t,h.n,l.t,d.n,p.r],{styles:re});e.d(Ae)();
+	`},[d.t,s.t,h.n,u.t,f.n,m.r],{styles:ie});e.d(je)();

package/color-picker/index.js

@@ -5,7 +5,8 @@ import { t as l } from "../bundled/ref.js";
 import { t as u } from "../bundled/when.js";
 import { t as d } from "../bundled/decorate.js";
 import { t as f } from "../bundled/class-names.js";
-import { r as ee, t as te } from "../bundled/definition3.js";
+import { t as ee } from "../bundled/definition3.js";
+import { t as te } from "../bundled/icon.js";
 import { n as ne, t as re } from "../bundled/delegates-aria.js";
 import { i as ie, t as ae } from "../bundled/definition6.js";
 import { i as oe, t as se } from "../bundled/definition8.js";
@@ -646,7 +647,7 @@ function Ue() {
 //#endregion
 //#region src/lib/color-picker/index.ts
 t(o("color-picker", $, (e) => {
-	let t = e.tagFor(ge), n = e.tagFor(ee), r = e.tagFor(oe), a = e.tagFor(ie), o = e.tagFor(p);
+	let t = e.tagFor(ge), n = e.tagFor(te), r = e.tagFor(oe), a = e.tagFor(ie), o = e.tagFor(p);
 	return i`
 		<div class="base" @keydown="${(e, { event: t }) => e._onBaseKeydown(t)}">
 			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
@@ -672,7 +673,7 @@ t(o("color-picker", $, (e) => {
 	`;
 }, [
 	se,
-	te,
+	ee,
 	he,
 	ae,
 	ce,

package/combobox/index.cjs

@@ -1,6 +1,6 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/listbox.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/numbers.cjs`),c=require(`../bundled/aria-binding-directive.cjs`),l=require(`../bundled/definition3.cjs`),u=require(`../bundled/affix.cjs`),d=require(`../bundled/form-associated.cjs`),f=require(`../bundled/definition6.cjs`),p=require(`../bundled/definition8.cjs`),m=require(`../bundled/dialog.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/form-element.cjs`),_=require(`../bundled/with-contextual-help.cjs`),v=require(`../bundled/with-error-text.cjs`),y=require(`../bundled/with-success-text.cjs`),b=require(`../bundled/text-field.cjs`),x=require(`../bundled/definition17.cjs`),S=require(`../bundled/definition18.cjs`);var C=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}`,w={inline:`inline`,list:`list`,both:`both`,none:`none`},T=class extends _.t(h.t(v.t(y.t(g.t(u.t(d.n(a.t))))))){constructor(...e){super(...e),this.filteredOptions=[],this.filter=``,this._isNavigatingWithKeyboard=!1,this.fixedDropdown=!1,this.listboxId=c.r(`listbox-`),this.maxHeight=0,this.open=!1,this.proxy=document.createElement(`input`)}formResetCallback(){super.formResetCallback(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1,this.value=this.firstSelectedOption?.text||``}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===w.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===w.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===w.both}openChanged(){this.open&&this.enqueueScrollSelectedOptionIntoViewIfNeeded()}get options(){return e.k.track(this,`options`),this.filteredOptions.length?this.filteredOptions:this._options}set options(e){super.options=e}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(e,t){if(this.$fastController.isConnected&&this.options){let e=this.options.findIndex(e=>e.text.toLowerCase()===t.toLowerCase()),n=this.options[this.selectedIndex]?.text,r=this.options[e]?.text;this.selectedIndex=n===r?this.selectedIndex:e}super.valueChanged(e,t)}clickHandler(e){if(!(this.disabled||this._isFromContextualHelp(e))){if(this.open){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(!t||t.disabled)return;this.selectedOptions=[t],this.control.value=t.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(e){this.open&&=(e.stopPropagation(),!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){if((!this.autocomplete||this.autocomplete===w.none)&&(this.filter=``),this.filteredOptions=this._options.filter(e=>e.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList){this._options.forEach(e=>{e.hidden=!this.filteredOptions.includes(e)});for(let e of Array.from(this.children))if(S.r(e)){let t=Array.from(e.children).some(e=>x.i(e)&&!e.hidden);e.style.display=t?``:`none`}}}focusAndScrollOptionIntoView(){this.contains(document.activeElement)&&(this.control.focus(),this.enqueueScrollSelectedOptionIntoViewIfNeeded())}enqueueScrollSelectedOptionIntoViewIfNeeded(){let e=this.firstSelectedOption;e&&requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})})}focusoutHandler(e){if(this.syncValue(),!this.open)return!0;let t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}this.open=!1}inputHandler(e){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),e.inputType.includes(`deleteContent`)||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(e){let t=e.key;if(e.ctrlKey||e.shiftKey)return!0;switch(t){case`Enter`:this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();return;case`Escape`:if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;return}this.value=``,this.control.value=``,this.filter=``,this.filterOptions();return;case`Tab`:if(this.setInputToSelection(),!this.open)return!0;e.preventDefault(),this.open=!1;return;case`ArrowUp`:case`ArrowDown`:if(this.filterOptions(),!this.open){this.open=!0;return}this.filteredOptions.length>0&&(this._isNavigatingWithKeyboard=!0,super.keydownHandler(e),this._isNavigatingWithKeyboard=!1),this.isAutocompleteInline&&this.setInlineSelection();return;default:return!0}}setSelectedOptions(){super.setSelectedOptions(),this._isNavigatingWithKeyboard||(this._activeDescendant=``)}selectedIndexChanged(e,t){if(this.$fastController.isConnected){if(t=s.n(-1,this.options.length-1,t),t!==this.selectedIndex){this.selectedIndex=t;return}super.selectedIndexChanged(e,t)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&--this.selectedIndex}_isDefaultSelected(e){return super._isDefaultSelected(e)||e.text!==``&&e.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,`backward`))}syncValue(){let e=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==e)}selectedOptionsChanged(e,t){this.$fastController.isConnected&&this._options.forEach(e=>{e.selected=t.includes(e)})}slottedOptionsChanged(e,t){super.slottedOptionsChanged(e,t),this.updateValue();let n=this.getAttribute(`scale`)||this.scale;t.forEach(e=>{n&&(e.setAttribute(`scale`,n),e.scale=n)})}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),e&&this.$emit(`change`)}clearSelectionRange(){let e=this.control.value.length;this.control.setSelectionRange(e,e)}};i.t([e.m({attribute:`autocomplete`,mode:`fromView`})],T.prototype,`autocomplete`,void 0),i.t([e.m],T.prototype,`appearance`,void 0),i.t([e.m],T.prototype,`shape`,void 0),i.t([e.m()],T.prototype,`scale`,void 0),i.t([e.m],T.prototype,`placement`,void 0),i.t([e.m({mode:`boolean`,attribute:`fixed-dropdown`})],T.prototype,`fixedDropdown`,void 0),i.t([e.A],T.prototype,`metaSlottedContent`,void 0),i.t([e.A],T.prototype,`maxHeight`,void 0),i.t([e.m({attribute:`open`,mode:`boolean`})],T.prototype,`open`,void 0),i.t([e.m],T.prototype,`placeholder`,void 0);function E(){return e.p` <label for="control" class="label">
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/listbox.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/numbers.cjs`),c=require(`../bundled/aria-binding-directive.cjs`),l=require(`../bundled/definition3.cjs`),u=require(`../bundled/affix.cjs`),d=require(`../bundled/form-associated.cjs`),f=require(`../bundled/definition6.cjs`),p=require(`../bundled/definition8.cjs`),m=require(`../bundled/dialog.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/form-element.cjs`),_=require(`../bundled/with-contextual-help.cjs`),v=require(`../bundled/with-error-text.cjs`),y=require(`../bundled/with-success-text.cjs`),b=require(`../bundled/text-field.cjs`),x=require(`../bundled/option.cjs`),S=require(`../bundled/definition17.cjs`),C=require(`../bundled/optgroup.cjs`),w=require(`../bundled/definition18.cjs`);var T=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}`,E={inline:`inline`,list:`list`,both:`both`,none:`none`},D=class extends _.t(h.t(v.t(y.t(g.t(u.t(d.n(a.t))))))){constructor(...e){super(...e),this.filteredOptions=[],this.filter=``,this._isNavigatingWithKeyboard=!1,this.fixedDropdown=!1,this.listboxId=c.r(`listbox-`),this.maxHeight=0,this.open=!1,this.proxy=document.createElement(`input`)}formResetCallback(){super.formResetCallback(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1,this.value=this.firstSelectedOption?.text||``}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===E.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===E.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===E.both}openChanged(){this.open&&this.enqueueScrollSelectedOptionIntoViewIfNeeded()}get options(){return e.k.track(this,`options`),this.filteredOptions.length?this.filteredOptions:this._options}set options(e){super.options=e}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(e,t){if(this.$fastController.isConnected&&this.options){let e=this.options.findIndex(e=>e.text.toLowerCase()===t.toLowerCase()),n=this.options[this.selectedIndex]?.text,r=this.options[e]?.text;this.selectedIndex=n===r?this.selectedIndex:e}super.valueChanged(e,t)}clickHandler(e){if(!(this.disabled||this._isFromContextualHelp(e))){if(this.open){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(!t||t.disabled)return;this.selectedOptions=[t],this.control.value=t.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(e){this.open&&=(e.stopPropagation(),!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){if((!this.autocomplete||this.autocomplete===E.none)&&(this.filter=``),this.filteredOptions=this._options.filter(e=>e.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList){this._options.forEach(e=>{e.hidden=!this.filteredOptions.includes(e)});for(let e of Array.from(this.children))if(C.n(e)){let t=Array.from(e.children).some(e=>x.n(e)&&!e.hidden);e.style.display=t?``:`none`}}}focusAndScrollOptionIntoView(){this.contains(document.activeElement)&&(this.control.focus(),this.enqueueScrollSelectedOptionIntoViewIfNeeded())}enqueueScrollSelectedOptionIntoViewIfNeeded(){let e=this.firstSelectedOption;e&&requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})})}focusoutHandler(e){if(this.syncValue(),!this.open)return!0;let t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}this.open=!1}inputHandler(e){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),e.inputType.includes(`deleteContent`)||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(e){let t=e.key;if(e.ctrlKey||e.shiftKey)return!0;switch(t){case`Enter`:this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();return;case`Escape`:if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;return}this.value=``,this.control.value=``,this.filter=``,this.filterOptions();return;case`Tab`:if(this.setInputToSelection(),!this.open)return!0;e.preventDefault(),this.open=!1;return;case`ArrowUp`:case`ArrowDown`:if(this.filterOptions(),!this.open){this.open=!0;return}this.filteredOptions.length>0&&(this._isNavigatingWithKeyboard=!0,super.keydownHandler(e),this._isNavigatingWithKeyboard=!1),this.isAutocompleteInline&&this.setInlineSelection();return;default:return!0}}setSelectedOptions(){super.setSelectedOptions(),this._isNavigatingWithKeyboard||(this._activeDescendant=``)}selectedIndexChanged(e,t){if(this.$fastController.isConnected){if(t=s.n(-1,this.options.length-1,t),t!==this.selectedIndex){this.selectedIndex=t;return}super.selectedIndexChanged(e,t)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&--this.selectedIndex}_isDefaultSelected(e){return super._isDefaultSelected(e)||e.text!==``&&e.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,`backward`))}syncValue(){let e=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==e)}selectedOptionsChanged(e,t){this.$fastController.isConnected&&this._options.forEach(e=>{e.selected=t.includes(e)})}slottedOptionsChanged(e,t){super.slottedOptionsChanged(e,t),this.updateValue();let n=this.getAttribute(`scale`)||this.scale;t.forEach(e=>{n&&(e.setAttribute(`scale`,n),e.scale=n)})}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),e&&this.$emit(`change`)}clearSelectionRange(){let e=this.control.value.length;this.control.setSelectionRange(e,e)}};i.t([e.m({attribute:`autocomplete`,mode:`fromView`})],D.prototype,`autocomplete`,void 0),i.t([e.m],D.prototype,`appearance`,void 0),i.t([e.m],D.prototype,`shape`,void 0),i.t([e.m()],D.prototype,`scale`,void 0),i.t([e.m],D.prototype,`placement`,void 0),i.t([e.m({mode:`boolean`,attribute:`fixed-dropdown`})],D.prototype,`fixedDropdown`,void 0),i.t([e.A],D.prototype,`metaSlottedContent`,void 0),i.t([e.A],D.prototype,`maxHeight`,void 0),i.t([e.m({attribute:`open`,mode:`boolean`})],D.prototype,`open`,void 0),i.t([e.m],D.prototype,`placeholder`,void 0);function O(){return e.p` <label for="control" class="label">
 		${e=>e.label}
-	</label>`}function D(e){return e.open&&e.fixedDropdown?`--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function O(i){let a=u.a(i),s=f.r(i);return e.p` <div
+	</label>`}function k(e){return e.open&&e.fixedDropdown?`--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function A(i){let a=u.a(i),s=f.r(i);return e.p` <div
 		class="${e=>o.t(`base`,[`disabled`,e.disabled],[`shape-${e.shape}`,!!e.shape],[`size-${e.scale}`,!!e.scale],[`placeholder`,!!e.placeholder],[`appearance-${e.appearance}`,!!e.appearance],[`no-label`,!e.label],[`has-icon`,!!e.icon||!!e.iconSlottedContent?.length],[`has-meta`,!!e.metaSlottedContent?.length],[`has-activedescendant`,!!e._activeDescendant&&e.open],[`error`,!!e.errorValidationMessage],[`success`,!!e.successText])}"
 		${n.t(`_anchor`)}
 	>
@@ -8,7 +8,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 			class="label-wrapper"
 			?hidden=${e=>!e.label&&!e._hasContextualHelp}
 		>
-			${r.t(e=>e.label,E())}
+			${r.t(e=>e.label,O())}
 			<slot
 				name="contextual-help"
 				${t.t(`_contextualHelpSlottedContent`)}
@@ -45,7 +45,7 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 				</div>
 			</div>
 		</div>
-	</div>`}var k=e.u(`combobox`,T,r=>{let i=r.tagFor(p.i);return e.p`
+	</div>`}var j=e.u(`combobox`,D,r=>{let i=r.tagFor(p.i);return e.p`
 		<template
 			tabindex="${e=>e.disabled?null:`0`}"
 			class="${e=>o.t([`has-activedescendant`,!!e._activeDescendant&&e.open])}"
@@ -54,9 +54,9 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 			@keydown="${(e,{event:t})=>(e.open&&m.t(t),e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${()=>O(r)}
+				${()=>A(r)}
 				<${i} class="popup"
-					style="${D}"
+					style="${k}"
 					?open="${e=>e.open}"
 					placement="${e=>e.placement??`bottom-start`}"
 					strategy="${e=>e.fixedDropdown?`fixed`:`absolute`}"
@@ -75,4 +75,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 				${e=>e._getFeedbackTemplate(r)}
 			</div>
     </template>
-	`},[l.t,p.t,x.t,S.t,h.r],{styles:[b.t,C],shadowOptions:{delegatesFocus:!0}});e.d(k)();
+	`},[l.t,p.t,S.t,w.t,h.r],{styles:[b.t,T],shadowOptions:{delegatesFocus:!0}});e.d(j)();

package/combobox/index.js

@@ -19,8 +19,10 @@ import { t as E } from "../bundled/with-contextual-help.js";
 import { t as D } from "../bundled/with-error-text.js";
 import { t as O } from "../bundled/with-success-text.js";
 import { t as k } from "../bundled/text-field.js";
-import { i as A, t as j } from "../bundled/definition17.js";
-import { r as M, t as N } from "../bundled/definition18.js";
+import { n as A } from "../bundled/option.js";
+import { t as j } from "../bundled/definition17.js";
+import { n as M } from "../bundled/optgroup.js";
+import { t as N } from "../bundled/definition18.js";
 //#region src/lib/combobox/combobox.scss?inline
 var P = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}", F = {
 	inline: "inline",