@vonage/vivid 5.3.0 → 5.5.0

package/accordion-item/definition.js

@@ -1,7 +1,7 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { iconDefinition } from '../icon/definition.js';
 import { attr, nullableNumberConverter, observable, html, ref, slotted, when } from '@microsoft/fast-element';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";

package/alert/definition.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const button_definition = require('../unbundled/definition.cjs');
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const icon_definition = require('../icon/definition.cjs');
 const fastElement = require('@microsoft/fast-element');

package/alert/definition.js

@@ -1,10 +1,10 @@
 import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { iconDefinition } from '../icon/definition.js';
 import { attr, nullableNumberConverter, when, html } from '@microsoft/fast-element';
 import { C as Connotation } from '../unbundled/enums.js';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';

package/badge/definition.js

@@ -1,7 +1,7 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { iconDefinition } from '../icon/definition.js';
 import { attr, when, html } from '@microsoft/fast-element';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;

package/banner/definition.js

@@ -4,7 +4,7 @@ import { V as VividElement, d as defineVividComponent, c as createRegisterFuncti
 import { attr, observable, slotted, when, html } from '@microsoft/fast-element';
 import { C as Connotation } from '../unbundled/enums.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 

package/bundled/base-color-picker.cjs

@@ -1,13 +1,18 @@
-"use strict";const m=require("./form-associated.cjs"),u=require("./vivid-element.cjs"),v=require("./when.cjs"),g=require("./localized.cjs"),y=require("./form-element.cjs"),S=require("./class-names.cjs");function C(o){if(!o)return null;const s=o.trim().replace(/^#/,"");return/^[0-9a-fA-F]{3}$/.test(s)?s.split("").map(a=>a+a).join("").toLowerCase():/^[0-9a-fA-F]{6}$/.test(s)?s.toLowerCase():null}function b(o){return C(o)!==null}function p(o){const s=C(o);if(!s)return 0;const a=parseInt(s.slice(0,2),16)/255,r=parseInt(s.slice(2,4),16)/255,e=parseInt(s.slice(4,6),16)/255,t=a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4),l=r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4),n=e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4);return .2126*t+.7152*l+.0722*n}function I(o,s){const a=p(o),r=p(s),e=Math.max(a,r),t=Math.min(a,r);return(e+.05)/(t+.05)}function B(o,s){return s||(s=document.querySelector(".vvd-root")||document.documentElement),getComputedStyle(s).getPropertyValue(o).trim()}var A=Object.defineProperty,_=(o,s,a,r)=>{for(var e=void 0,t=o.length-1,l;t>=0;t--)(l=o[t])&&(e=l(s,a,e)||e);return e&&A(s,a,e),e};const E=o=>{class s extends g.Localized(y.FormElement(m.FormAssociated(o))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.open=!1,this.swatches=[],this._canvasColor=""}connectedCallback(){super.connectedCallback(),this._refreshCanvasColor()}_refreshCanvasColor(){this._canvasColor=B("--vvd-color-canvas",this)}_applyContrastClass(r,e=3){return!r||!this._canvasColor?!1:I(r,this._canvasColor)<e}_getRowLength(){return 7}_handleSwatchSelection(r){this.value===r?this.value="":this.value=r,this.$emit("change"),this.open=!1}_handleColorSaving(){}_getFocusReturnEl(){return null}_returnFocusToAnchor(){const r=this._getFocusReturnEl();r&&u.Updates.enqueue(()=>r.focus())}_getGridCells(){const r=this.shadowRoot?.querySelector('[role="grid"]');return r?Array.from(r.querySelectorAll('[role="gridcell"], [data-vvd-role="gridcell"]')):[]}_handleCellKeydown(r,e,t,l){const n=this._getRowLength(),c=this._getGridCells().length,h=Math.floor(t/n),f=t%n,d=Math.ceil(c/n);switch(r.key){case"ArrowRight":return f<n-1&&t+1<c&&this._focusSwatchByIndex(t+1),!1;case"ArrowLeft":return f>0&&this._focusSwatchByIndex(t-1),!1;case"ArrowDown":return h<d-1&&t+n<c&&this._focusSwatchByIndex(t+n),!1;case"ArrowUp":return h>0&&this._focusSwatchByIndex(t-n),!1;case"PageDown":{const i=(d-1)*n,w=Math.min(i+f,c-1);return t!==w&&this._focusSwatchByIndex(w),!1}case"PageUp":{const i=Math.min(f,c-1);return t!==i&&this._focusSwatchByIndex(i),!1}case"Home":return r.ctrlKey?this._focusSwatchByIndex(0):this._focusSwatchByIndex(h*n),!1;case"End":if(r.ctrlKey)this._focusSwatchByIndex(c-1);else{const i=Math.min((h+1)*n-1,c-1);this._focusSwatchByIndex(i)}return!1;case"Enter":case" ":return l&&this._handleColorSaving(),e&&!l&&(this._handleSwatchSelection(e),this._returnFocusToAnchor()),!1;case"Escape":return this.open=!1,this._returnFocusToAnchor(),!1;case"Tab":return this.open=!1,!0;default:return!0}}_focusSwatchByIndex(r){const e=this._getGridCells();r<0||r>=e.length||e[r]?.focus()}_renderColorSwatch(r){return u.html`
-				<button
-					class="swatch ${(e,t)=>S.classNames(t.parent.value===e.value?"selected":"",t.parent._applyContrastClass(e.value)?"contrast":"")}"
-					role="gridcell"
-					style="--swatch-color: ${e=>e.value};"
-					tabindex="${(e,t)=>t.index===0?"0":"-1"}"
-					aria-label="${(e,t)=>t.parent.locale.baseColorPicker.colorSwatchLabel(e.value,e.label,t.parent.value===e.value)}"
-					@click="${(e,t)=>t.parent._handleSwatchSelection(e.value)}"
-					@keydown="${(e,t)=>t.parent._handleCellKeydown(t.event,e.value,t.index)}"
-				>
-					${v.when((e,t)=>t.parent.value===e.value,u.html`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`)}
-				</button>
-			`}}return _([u.attr({mode:"boolean"})],s.prototype,"open"),_([u.observable],s.prototype,"swatches"),s};exports.BaseColorPicker=E;exports.isValidHexColor=b;
+"use strict";const m=require("./form-associated.cjs"),u=require("./vivid-element.cjs"),g=require("./when.cjs"),y=require("./localized.cjs"),S=require("./form-element.cjs"),b=require("./class-names.cjs");function C(a){if(!a)return null;const s=a.trim().replace(/^#/,"");return/^[0-9a-fA-F]{3}$/.test(s)?s.split("").map(n=>n+n).join("").toLowerCase():/^[0-9a-fA-F]{6}$/.test(s)?s.toLowerCase():null}function I(a){return C(a)!==null}function w(a){const s=C(a);if(!s)return 0;const n=parseInt(s.slice(0,2),16)/255,t=parseInt(s.slice(2,4),16)/255,o=parseInt(s.slice(4,6),16)/255,e=n<=.03928?n/12.92:Math.pow((n+.055)/1.055,2.4),r=t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4),l=o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4);return .2126*e+.7152*r+.0722*l}function B(a,s){const n=w(a),t=w(s),o=Math.max(n,t),e=Math.min(n,t);return(o+.05)/(e+.05)}function _(a,s){return s||(s=document.querySelector(".vvd-root")||document.documentElement),getComputedStyle(s).getPropertyValue(a).trim()}var $=Object.defineProperty,d=(a,s,n,t)=>{for(var o=void 0,e=a.length-1,r;e>=0;e--)(r=a[e])&&(o=r(s,n,o)||o);return o&&$(s,n,o),o};const A=a=>{class s extends y.Localized(S.FormElement(m.FormAssociated(a))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.open=!1,this.swatches=[],this._canvasColor=""}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>{this._refreshCanvasColor()})}get _computedCanvasColor(){return this._canvasColor||(this._canvasColor=_("--vvd-color-canvas",this)),this._canvasColor}_refreshCanvasColor(){this._canvasColor=_("--vvd-color-canvas",this)}_applyContrastClass(t,o=3){if(!t)return!1;const e=this._computedCanvasColor;return e?B(t,e)<o:!1}_getRowLength(){return 7}_handleSwatchSelection(t){this.value===t?this.value="":this.value=t,this.$emit("change"),this.open=!1}_handleColorSaving(){}_getFocusReturnEl(){return null}_returnFocusToAnchor(){const t=this._getFocusReturnEl();t&&u.Updates.enqueue(()=>t.focus())}_getGridCells(){const t=this.shadowRoot?.querySelector('[role="grid"]');return t?Array.from(t.querySelectorAll('[role="gridcell"], [data-vvd-role="gridcell"]')):[]}_handleCellKeydown(t,o,e,r){const l=this._getRowLength(),c=this._getGridCells().length,h=Math.floor(e/l),f=e%l,p=Math.ceil(c/l);switch(t.key){case"ArrowRight":return f<l-1&&e+1<c&&this._focusSwatchByIndex(e+1),!1;case"ArrowLeft":return f>0&&this._focusSwatchByIndex(e-1),!1;case"ArrowDown":return h<p-1&&e+l<c&&this._focusSwatchByIndex(e+l),!1;case"ArrowUp":return h>0&&this._focusSwatchByIndex(e-l),!1;case"PageDown":{const i=(p-1)*l,v=Math.min(i+f,c-1);return e!==v&&this._focusSwatchByIndex(v),!1}case"PageUp":{const i=Math.min(f,c-1);return e!==i&&this._focusSwatchByIndex(i),!1}case"Home":return t.ctrlKey?this._focusSwatchByIndex(0):this._focusSwatchByIndex(h*l),!1;case"End":if(t.ctrlKey)this._focusSwatchByIndex(c-1);else{const i=Math.min((h+1)*l-1,c-1);this._focusSwatchByIndex(i)}return!1;case"Enter":case" ":return r&&this._handleColorSaving(),o&&!r&&(this._handleSwatchSelection(o),this._returnFocusToAnchor()),!1;case"Escape":return this.open=!1,this._returnFocusToAnchor(),!1;case"Tab":return this.open=!1,!0;default:return!0}}_focusSwatchByIndex(t){const o=this._getGridCells();t<0||t>=o.length||o[t]?.focus()}_renderColorSwatch(t,o){return u.html`
+				<${o} placement="top" 
+					text="${e=>e.label??e.value}" 
+					exportparts="vvd-theme-alternate">
+					<button
+						slot="anchor"
+						class="swatch ${(e,r)=>b.classNames(r.parent.value===e.value?"selected":"",r.parent._applyContrastClass(e.value)?"contrast":"")}"
+						role="gridcell"
+						style="--swatch-color: ${e=>e.value};"
+						tabindex="${(e,r)=>r.index===0?"0":"-1"}"
+						aria-label="${(e,r)=>r.parent.locale.baseColorPicker.colorSwatchLabel(e.value,e.label,r.parent.value===e.value)}"
+						@click="${(e,r)=>r.parent._handleSwatchSelection(e.value)}"
+						@keydown="${(e,r)=>r.parent._handleCellKeydown(r.event,e.value,r.index)}"
+					>
+						${g.when((e,r)=>r.parent.value===e.value,u.html`<${t} size="-6" name="check-solid" aria-hidden="true"></${t}>`)}
+					</button>
+				</${o}>
+			`}}return d([u.attr({mode:"boolean"})],s.prototype,"open"),d([u.observable],s.prototype,"swatches"),d([u.observable],s.prototype,"_canvasColor"),s};exports.BaseColorPicker=A;exports.isValidHexColor=I;

package/bundled/base-color-picker.js

@@ -1,56 +1,66 @@
-import { F as C } from "./form-associated.js";
-import { U as g, h as p, a as v, o as y } from "./vivid-element.js";
-import { w as S } from "./when.js";
-import { L as b } from "./localized.js";
-import { F as I } from "./form-element.js";
-import { c as B } from "./class-names.js";
-function _(o) {
-  if (!o) return null;
-  const s = o.trim().replace(/^#/, "");
-  return /^[0-9a-fA-F]{3}$/.test(s) ? s.split("").map((a) => a + a).join("").toLowerCase() : /^[0-9a-fA-F]{6}$/.test(s) ? s.toLowerCase() : null;
+import { F as g } from "./form-associated.js";
+import { U as y, h as m, a as S, o as w } from "./vivid-element.js";
+import { w as b } from "./when.js";
+import { L as I } from "./localized.js";
+import { F as B } from "./form-element.js";
+import { c as $ } from "./class-names.js";
+function C(a) {
+  if (!a) return null;
+  const s = a.trim().replace(/^#/, "");
+  return /^[0-9a-fA-F]{3}$/.test(s) ? s.split("").map((n) => n + n).join("").toLowerCase() : /^[0-9a-fA-F]{6}$/.test(s) ? s.toLowerCase() : null;
 }
-function P(o) {
-  return _(o) !== null;
+function P(a) {
+  return C(a) !== null;
 }
-function w(o) {
-  const s = _(o);
+function _(a) {
+  const s = C(a);
   if (!s) return 0;
-  const a = parseInt(s.slice(0, 2), 16) / 255, r = parseInt(s.slice(2, 4), 16) / 255, e = parseInt(s.slice(4, 6), 16) / 255, t = a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4), l = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4), n = e <= 0.03928 ? e / 12.92 : Math.pow((e + 0.055) / 1.055, 2.4);
-  return 0.2126 * t + 0.7152 * l + 0.0722 * n;
+  const n = parseInt(s.slice(0, 2), 16) / 255, t = parseInt(s.slice(2, 4), 16) / 255, o = parseInt(s.slice(4, 6), 16) / 255, e = n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4), r = t <= 0.03928 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4), l = o <= 0.03928 ? o / 12.92 : Math.pow((o + 0.055) / 1.055, 2.4);
+  return 0.2126 * e + 0.7152 * r + 0.0722 * l;
 }
-function A(o, s) {
-  const a = w(o), r = w(s), e = Math.max(a, r), t = Math.min(a, r);
-  return (e + 0.05) / (t + 0.05);
+function A(a, s) {
+  const n = _(a), t = _(s), o = Math.max(n, t), e = Math.min(n, t);
+  return (o + 0.05) / (e + 0.05);
 }
-function $(o, s) {
-  return s || (s = document.querySelector(".vvd-root") || document.documentElement), getComputedStyle(s).getPropertyValue(o).trim();
+function v(a, s) {
+  return s || (s = document.querySelector(".vvd-root") || document.documentElement), getComputedStyle(s).getPropertyValue(a).trim();
 }
-var x = Object.defineProperty, m = (o, s, a, r) => {
-  for (var e = void 0, t = o.length - 1, l; t >= 0; t--)
-    (l = o[t]) && (e = l(s, a, e) || e);
-  return e && x(s, a, e), e;
+var x = Object.defineProperty, f = (a, s, n, t) => {
+  for (var o = void 0, e = a.length - 1, r; e >= 0; e--)
+    (r = a[e]) && (o = r(s, n, o) || o);
+  return o && x(s, n, o), o;
 };
-const q = (o) => {
-  class s extends b(
-    I(C(o))
+const q = (a) => {
+  class s extends I(
+    B(g(a))
   ) {
     constructor() {
       super(...arguments), this.proxy = document.createElement("input"), this.open = !1, this.swatches = [], this._canvasColor = "";
     }
     connectedCallback() {
-      super.connectedCallback(), this._refreshCanvasColor();
+      super.connectedCallback(), requestAnimationFrame(() => {
+        this._refreshCanvasColor();
+      });
+    }
+    /**
+     * @internal
+     */
+    get _computedCanvasColor() {
+      return this._canvasColor || (this._canvasColor = v("--vvd-color-canvas", this)), this._canvasColor;
     }
     /**
      * @internal
      */
     _refreshCanvasColor() {
-      this._canvasColor = $("--vvd-color-canvas", this);
+      this._canvasColor = v("--vvd-color-canvas", this);
     }
     /**
      * @internal
      */
-    _applyContrastClass(r, e = 3) {
-      return !r || !this._canvasColor ? !1 : A(r, this._canvasColor) < e;
+    _applyContrastClass(t, o = 3) {
+      if (!t) return !1;
+      const e = this._computedCanvasColor;
+      return e ? A(t, e) < o : !1;
     }
     /**
      * @internal
@@ -61,8 +71,8 @@ const q = (o) => {
     /**
      * @internal
      */
-    _handleSwatchSelection(r) {
-      this.value === r ? this.value = "" : this.value = r, this.$emit("change"), this.open = !1;
+    _handleSwatchSelection(t) {
+      this.value === t ? this.value = "" : this.value = t, this.$emit("change"), this.open = !1;
     }
     /**
      * @internal
@@ -79,16 +89,16 @@ const q = (o) => {
      * @internal
      */
     _returnFocusToAnchor() {
-      const r = this._getFocusReturnEl();
-      r && g.enqueue(() => r.focus());
+      const t = this._getFocusReturnEl();
+      t && y.enqueue(() => t.focus());
     }
     /**
      * @internal
      */
     _getGridCells() {
-      const r = this.shadowRoot?.querySelector('[role="grid"]');
-      return r ? Array.from(
-        r.querySelectorAll(
+      const t = this.shadowRoot?.querySelector('[role="grid"]');
+      return t ? Array.from(
+        t.querySelectorAll(
           '[role="gridcell"], [data-vvd-role="gridcell"]'
         )
       ) : [];
@@ -96,36 +106,36 @@ const q = (o) => {
     /**
      * @internal
      */
-    _handleCellKeydown(r, e, t, l) {
-      const n = this._getRowLength(), c = this._getGridCells().length, u = Math.floor(t / n), h = t % n, f = Math.ceil(c / n);
-      switch (r.key) {
+    _handleCellKeydown(t, o, e, r) {
+      const l = this._getRowLength(), c = this._getGridCells().length, u = Math.floor(e / l), h = e % l, d = Math.ceil(c / l);
+      switch (t.key) {
         case "ArrowRight":
-          return h < n - 1 && t + 1 < c && this._focusSwatchByIndex(t + 1), !1;
+          return h < l - 1 && e + 1 < c && this._focusSwatchByIndex(e + 1), !1;
         case "ArrowLeft":
-          return h > 0 && this._focusSwatchByIndex(t - 1), !1;
+          return h > 0 && this._focusSwatchByIndex(e - 1), !1;
         case "ArrowDown":
-          return u < f - 1 && t + n < c && this._focusSwatchByIndex(t + n), !1;
+          return u < d - 1 && e + l < c && this._focusSwatchByIndex(e + l), !1;
         case "ArrowUp":
-          return u > 0 && this._focusSwatchByIndex(t - n), !1;
+          return u > 0 && this._focusSwatchByIndex(e - l), !1;
         case "PageDown": {
-          const i = (f - 1) * n, d = Math.min(
+          const i = (d - 1) * l, p = Math.min(
             i + h,
             c - 1
           );
-          return t !== d && this._focusSwatchByIndex(d), !1;
+          return e !== p && this._focusSwatchByIndex(p), !1;
         }
         case "PageUp": {
           const i = Math.min(h, c - 1);
-          return t !== i && this._focusSwatchByIndex(i), !1;
+          return e !== i && this._focusSwatchByIndex(i), !1;
         }
         case "Home":
-          return r.ctrlKey ? this._focusSwatchByIndex(0) : this._focusSwatchByIndex(u * n), !1;
+          return t.ctrlKey ? this._focusSwatchByIndex(0) : this._focusSwatchByIndex(u * l), !1;
         case "End":
-          if (r.ctrlKey)
+          if (t.ctrlKey)
             this._focusSwatchByIndex(c - 1);
           else {
             const i = Math.min(
-              (u + 1) * n - 1,
+              (u + 1) * l - 1,
               c - 1
             );
             this._focusSwatchByIndex(i);
@@ -133,7 +143,7 @@ const q = (o) => {
           return !1;
         case "Enter":
         case " ":
-          return l && this._handleColorSaving(), e && !l && (this._handleSwatchSelection(e), this._returnFocusToAnchor()), !1;
+          return r && this._handleColorSaving(), o && !r && (this._handleSwatchSelection(o), this._returnFocusToAnchor()), !1;
         case "Escape":
           return this.open = !1, this._returnFocusToAnchor(), !1;
         case "Tab":
@@ -145,48 +155,55 @@ const q = (o) => {
     /**
      * @internal
      */
-    _focusSwatchByIndex(r) {
-      const e = this._getGridCells();
-      r < 0 || r >= e.length || e[r]?.focus();
+    _focusSwatchByIndex(t) {
+      const o = this._getGridCells();
+      t < 0 || t >= o.length || o[t]?.focus();
     }
     /**
      * @internal
      */
-    _renderColorSwatch(r) {
-      return p`
-				<button
-					class="swatch ${(e, t) => B(
-        t.parent.value === e.value ? "selected" : "",
-        t.parent._applyContrastClass(e.value) ? "contrast" : ""
+    _renderColorSwatch(t, o) {
+      return m`
+				<${o} placement="top" 
+					text="${(e) => e.label ?? e.value}" 
+					exportparts="vvd-theme-alternate">
+					<button
+						slot="anchor"
+						class="swatch ${(e, r) => $(
+        r.parent.value === e.value ? "selected" : "",
+        r.parent._applyContrastClass(e.value) ? "contrast" : ""
       )}"
-					role="gridcell"
-					style="--swatch-color: ${(e) => e.value};"
-					tabindex="${(e, t) => t.index === 0 ? "0" : "-1"}"
-					aria-label="${(e, t) => t.parent.locale.baseColorPicker.colorSwatchLabel(
+						role="gridcell"
+						style="--swatch-color: ${(e) => e.value};"
+						tabindex="${(e, r) => r.index === 0 ? "0" : "-1"}"
+						aria-label="${(e, r) => r.parent.locale.baseColorPicker.colorSwatchLabel(
         e.value,
         e.label,
-        t.parent.value === e.value
+        r.parent.value === e.value
       )}"
-					@click="${(e, t) => t.parent._handleSwatchSelection(e.value)}"
-					@keydown="${(e, t) => t.parent._handleCellKeydown(
-        t.event,
+						@click="${(e, r) => r.parent._handleSwatchSelection(e.value)}"
+						@keydown="${(e, r) => r.parent._handleCellKeydown(
+        r.event,
         e.value,
-        t.index
+        r.index
       )}"
-				>
-					${S(
-        (e, t) => t.parent.value === e.value,
-        p`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`
+					>
+						${b(
+        (e, r) => r.parent.value === e.value,
+        m`<${t} size="-6" name="check-solid" aria-hidden="true"></${t}>`
       )}
-				</button>
+					</button>
+				</${o}>
 			`;
     }
   }
-  return m([
-    v({ mode: "boolean" })
-  ], s.prototype, "open"), m([
-    y
-  ], s.prototype, "swatches"), s;
+  return f([
+    S({ mode: "boolean" })
+  ], s.prototype, "open"), f([
+    w
+  ], s.prototype, "swatches"), f([
+    w
+  ], s.prototype, "_canvasColor"), s;
 };
 export {
   q as B,