@vonage/vivid 5.14.0 → 5.15.1

package/button/definition.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 require('../icon/definition.cjs');
 require('../progress-ring/definition.cjs');
 require('../unbundled/vivid-element.cjs');
-const button_definition = require('../unbundled/definition.cjs');
+const button_definition = require('../unbundled/definition2.cjs');
 
 
 

package/button/definition.js

@@ -1,4 +1,4 @@
 import '../icon/definition.js';
 import '../progress-ring/definition.js';
 import '../unbundled/vivid-element.js';
-export { B as VwcButtonElement, b as buttonDefinition, r as registerButton } from '../unbundled/definition.js';
+export { B as VwcButtonElement, b as buttonDefinition, r as registerButton } from '../unbundled/definition2.js';

package/calendar/definition.cjs

@@ -20,7 +20,6 @@ function isCellOrHeader(el) {
 }
 const getCellOrHeader = (f) => f.matches('[role="columnheader"i]') ? '[role="gridcell"i]' : '[role="columnheader"i]';
 function getNextFocusableGridElement(key, activeElement) {
-  /* v8 ignore else -- @preserve */
   if (activeElement.parentNode instanceof HTMLElement) {
     switch (key) {
       case ARROW_RIGHT:
@@ -56,7 +55,6 @@ function getDay(el) {
   const cellOrHeader = el.closest('[role="gridcell"i], [role="columnheader"i]');
   if (cellOrHeader) {
     const { parentElement } = cellOrHeader;
-    /* v8 ignore else -- @preserve */
     if (parentElement) {
       return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
     }

package/calendar/definition.js

@@ -1,5 +1,5 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { Updates, attr, repeat, html } from '@microsoft/fast-element';
+import { Updates, attr, html, repeat } from '@microsoft/fast-element';
 import { d as Sticky } from '../unbundled/enums.js';
 import { C as CalendarEvent } from '../unbundled/calendar-event.js';
 import { not, isEmpty } from 'ramda';
@@ -16,7 +16,6 @@ function isCellOrHeader(el) {
 }
 const getCellOrHeader = (f) => f.matches('[role="columnheader"i]') ? '[role="gridcell"i]' : '[role="columnheader"i]';
 function getNextFocusableGridElement(key, activeElement) {
-  /* v8 ignore else -- @preserve */
   if (activeElement.parentNode instanceof HTMLElement) {
     switch (key) {
       case ARROW_RIGHT:
@@ -52,7 +51,6 @@ function getDay(el) {
   const cellOrHeader = el.closest('[role="gridcell"i], [role="columnheader"i]');
   if (cellOrHeader) {
     const { parentElement } = cellOrHeader;
-    /* v8 ignore else -- @preserve */
     if (parentElement) {
       return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
     }

package/calendar/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const l=require("../bundled/vivid-element.cjs"),I=require("../bundled/enums.cjs"),$=require("../bundled/calendar-event.cjs"),f=require("../bundled/repeat.cjs"),z=require("../bundled/class-names.cjs"),H=':host{display:block;overflow:auto;block-size:inherit;max-block-size:inherit}ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:"filler column-headers" "row-headers calendar";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.sticky-column .row-headers,.sticky-all .row-headers{position:sticky;z-index:1;background-color:var(--calendar-column-background-color, var(--vvd-color-canvas));inset-inline-start:0;margin-inline-end:3px}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;border-radius:8px;background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:"";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:"";inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:"";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{position:sticky;z-index:1;background-color:var(--calendar-header-background-color, var(--vvd-color-canvas));inset-block-start:0;margin-block-end:3px}.filler{background-color:transparent;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{position:sticky;z-index:2;background-color:var(--calendar-header-background-color, var(--vvd-color-canvas));margin-block-end:3px}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}',C="ArrowUp",j="ArrowRight",v="ArrowDown",q="ArrowLeft";function R(t){return t instanceof HTMLElement&&(t.matches('[role="gridcell"i]')||t.matches('[role="columnheader"i]'))}const T=t=>t.matches('[role="columnheader"i]')?'[role="gridcell"i]':'[role="columnheader"i]';function M(t,e){/* v8 ignore else -- @preserve */if(e.parentNode instanceof HTMLElement)switch(t){case j:return e.nextElementSibling||e.parentNode.firstElementChild;case q:return e.previousElementSibling||e.parentNode.lastElementChild;case C:case v:{const{children:r}=e.parentNode,n=Array.from(r).indexOf(e);return this.shadowRoot.querySelector(`${T(e)}:nth-child(${n+1})`)}}}function F(t,e){if(t!==v)return;const r=e.closest('[role="columnheader"i]'),n=this.shadowRoot.querySelectorAll('[role="columnheader"i]'),o=Array.from(n).indexOf(r);return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${o+1})`)}function u(t){return t!=null&&typeof t=="object"&&t["@@functional/placeholder"]===!0}function s(t){return function e(r){return arguments.length===0||u(r)?e:t.apply(this,arguments)}}function N(t){return function e(r,n){switch(arguments.length){case 0:return e;case 1:return u(r)?e:s(function(o){return t(r,o)});default:return u(r)&&u(n)?e:u(r)?s(function(o){return t(o,n)}):u(n)?s(function(o){return t(r,o)}):t(r,n)}}}const P=Array.isArray||function(e){return e!=null&&e.length>=0&&Object.prototype.toString.call(e)==="[object Array]"};function b(t){for(var e=[],r;!(r=t.next()).done;)e.push(r.value);return e}function A(t,e,r){for(var n=0,o=r.length;n<o;){if(t(e,r[n]))return!0;n+=1}return!1}function U(t){var e=String(t).match(/^function (\w*)/);return e==null?"":e[1]}function g(t,e){return Object.prototype.hasOwnProperty.call(e,t)}function L(t,e){return t===e?t!==0||1/t===1/e:t!==t&&e!==e}const y=typeof Object.is=="function"?Object.is:L;var k=Object.prototype.toString,x=function(){return k.call(arguments)==="[object Arguments]"?function(e){return k.call(e)==="[object Arguments]"}:function(e){return g("callee",e)}}(),W=!{toString:null}.propertyIsEnumerable("toString"),O=["constructor","valueOf","isPrototypeOf","toString","propertyIsEnumerable","hasOwnProperty","toLocaleString"],E=function(){return arguments.propertyIsEnumerable("length")}(),B=function(e,r){for(var n=0;n<e.length;){if(e[n]===r)return!0;n+=1}return!1},D=s(typeof Object.keys=="function"&&!E?function(e){return Object(e)!==e?[]:Object.keys(e)}:function(e){if(Object(e)!==e)return[];var r,n,o=[],i=E&&x(e);for(r in e)g(r,e)&&(!i||r!=="length")&&(o[o.length]=r);if(W)for(n=O.length-1;n>=0;)r=O[n],g(r,e)&&!B(o,r)&&(o[o.length]=r),n-=1;return o}),S=s(function(e){return e===null?"Null":e===void 0?"Undefined":Object.prototype.toString.call(e).slice(8,-1)});function _(t,e,r,n){var o=b(t),i=b(e);function a(c,h){return w(c,h,r.slice(),n.slice())}return!A(function(c,h){return!A(a,h,c)},i,o)}function w(t,e,r,n){if(y(t,e))return!0;var o=S(t);if(o!==S(e))return!1;if(typeof t["fantasy-land/equals"]=="function"||typeof e["fantasy-land/equals"]=="function")return typeof t["fantasy-land/equals"]=="function"&&t["fantasy-land/equals"](e)&&typeof e["fantasy-land/equals"]=="function"&&e["fantasy-land/equals"](t);if(typeof t.equals=="function"||typeof e.equals=="function")return typeof t.equals=="function"&&t.equals(e)&&typeof e.equals=="function"&&e.equals(t);switch(o){case"Arguments":case"Array":case"Object":if(typeof t.constructor=="function"&&U(t.constructor)==="Promise")return t===e;break;case"Boolean":case"Number":case"String":if(!(typeof t==typeof e&&y(t.valueOf(),e.valueOf())))return!1;break;case"Date":if(!y(t.valueOf(),e.valueOf()))return!1;break;case"Error":return t.name===e.name&&t.message===e.message;case"RegExp":if(!(t.source===e.source&&t.global===e.global&&t.ignoreCase===e.ignoreCase&&t.multiline===e.multiline&&t.sticky===e.sticky&&t.unicode===e.unicode))return!1;break}for(var i=r.length-1;i>=0;){if(r[i]===t)return n[i]===e;i-=1}switch(o){case"Map":return t.size!==e.size?!1:_(t.entries(),e.entries(),r.concat([t]),n.concat([e]));case"Set":return t.size!==e.size?!1:_(t.values(),e.values(),r.concat([t]),n.concat([e]));case"Arguments":case"Array":case"Object":case"Boolean":case"Number":case"String":case"Date":case"Error":case"RegExp":case"Int8Array":case"Uint8Array":case"Uint8ClampedArray":case"Int16Array":case"Uint16Array":case"Int32Array":case"Uint32Array":case"Float32Array":case"Float64Array":case"ArrayBuffer":break;default:return!1}var a=D(t);if(a.length!==D(e).length)return!1;var c=r.concat([t]),h=n.concat([e]);for(i=a.length-1;i>=0;){var p=a[i];if(!(g(p,e)&&w(e[p],t[p],c,h)))return!1;i-=1}return!0}var K=N(function(e,r){return w(e,r,[],[])});function Y(t){return Object.prototype.toString.call(t)==="[object Object]"}function V(t){return Object.prototype.toString.call(t)==="[object String]"}var G=s(function(e){return!e});function X(t){var e=Object.prototype.toString.call(t);return e==="[object Uint8ClampedArray]"||e==="[object Int8Array]"||e==="[object Uint8Array]"||e==="[object Int16Array]"||e==="[object Uint16Array]"||e==="[object Int32Array]"||e==="[object Uint32Array]"||e==="[object Float32Array]"||e==="[object Float64Array]"||e==="[object BigInt64Array]"||e==="[object BigUint64Array]"}var J=s(function(e){return e!=null&&typeof e["fantasy-land/empty"]=="function"?e["fantasy-land/empty"]():e!=null&&e.constructor!=null&&typeof e.constructor["fantasy-land/empty"]=="function"?e.constructor["fantasy-land/empty"]():e!=null&&typeof e.empty=="function"?e.empty():e!=null&&e.constructor!=null&&typeof e.constructor.empty=="function"?e.constructor.empty():e==Set||e instanceof Set?new Set:e==Map||e instanceof Map?new Map:P(e)?[]:V(e)?"":Y(e)?{}:x(e)?function(){return arguments}():X(e)?e.constructor.from(""):void 0}),Q=s(function(e){return e!=null&&K(e,J(e))});function Z(t){const e=t.closest('[role="gridcell"i], [role="columnheader"i]');if(e){const{parentElement:r}=e;/* v8 ignore else -- @preserve */if(r)return r.children&&Array.from(r.children).indexOf(e)}}function ee(t,e,r){const n=e.closest('[role="rowheader"], [role="gridcell"i]');if(n){const o=n.getBoundingClientRect(),i=t.clientY-o.y,a=o.height/r,c=i/a;return Math.round((c+Number.EPSILON)*100)/100}}const te=function(t){if(!(t instanceof KeyboardEvent||t instanceof MouseEvent))throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");const[e]=t.composedPath();if(!(e&&e instanceof HTMLElement&&this.shadowRoot.contains(e)))throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");const r=Z(e);let n;t instanceof MouseEvent&&(n=ee(t,e,this._hours));const o={...r!=null&&{day:r},...n!=null&&{hour:n}};return G(Q(o))?o:null};var re=Object.defineProperty,m=(t,e,r,n)=>{for(var o=void 0,i=t.length-1,a;i>=0;i--)(a=t[i])&&(o=a(e,r,o)||o);return o&&re(e,r,o),o};const ne=t=>{const e=window.getComputedStyle(t).overflowY,r=window.getComputedStyle(t).overflowX;return{vertical:(e==="auto"||e==="scroll")&&t.scrollHeight>t.clientHeight,horizontal:(r==="auto"||r==="scroll")&&t.scrollWidth>t.clientWidth}};class d extends l.VividElement{constructor(){super(...arguments),this.hour12=!1,this.stickyMode=I.Sticky.All,this._hours=24,this._days=7,this.hoursAsDatetime=Array.from({length:this._hours-1}).fill(new Date(new Date().setHours(0,0,0))).map((e,r)=>new Date(e.setHours(++r))),this._generateDaysArr=e=>{if(e.length==this._days)return e;const r=new Date(e[e.length-1]);return r.setDate(r.getDate()+1),this._generateDaysArr([...e,r])},this.getEventContext=te}get#e(){const{activeElement:e}=document;return e instanceof $.CalendarEvent?e:null}getCalendarEventContainingCell(e){const r=e.getAttribute("slot");return this.shadowRoot.querySelector(`slot[name="${r}"i]`).parentElement}arrowKeysInteractions(e){const{activeElement:r}=this.shadowRoot;let n;R(r)?n=M.call(this,e,r):this.#e?n=this.getCalendarEventContainingCell(this.#e):r?.matches('em[role="button"i]')?n=F.call(this,e,r):n=this.shadowRoot.querySelector('[role="columnheader"i]'),this.activateElement(n)}activateElement(e){const r=({target:n})=>n.setAttribute("tabindex","-1");e?.addEventListener("blur",r,{once:!0}),e?.setAttribute("tabindex","0"),e?.focus()}onKeydown({key:e}){const r=[C,j,v,q].some(n=>n==e);return r&&this.arrowKeysInteractions(e),!r}connectedCallback(){super.connectedCallback(),this.initializeScrollPosition()}initializeScrollPosition(){if(!ne(this).vertical)return;const n=this.scrollHeight/this._hours*(8-1);l.Updates.enqueue(()=>{this.scrollTo({top:n})})}}m([l.attr],d.prototype,"datetime");m([l.attr({attribute:"start-day"})],d.prototype,"startDay");m([l.attr],d.prototype,"locales");m([l.attr({mode:"boolean"})],d.prototype,"hour12");m([l.attr({attribute:"sticky-mode",mode:"fromView"})],d.prototype,"stickyMode");function oe(t){const e=r=>`0${r}`.slice(-2);return`${t.getFullYear()}-${e(t.getMonth()+1)}-${e(t.getDate())}`}const ie=new Map([["sunday",0],["monday",1]]);function le(t=new Date,e){t=new Date(t);let r=ie.get(e);r??=1;const n=t.getDate()-(t.getDay()+7-r)%7;return new Date(t.setDate(n))}const ae=({stickyMode:t})=>z.classNames([`sticky-${t}`,!!t]),se=()=>l.html` <div class="row-headers" role="row">
+"use strict";const l=require("../bundled/vivid-element.cjs"),I=require("../bundled/enums.cjs"),$=require("../bundled/calendar-event.cjs"),f=require("../bundled/repeat.cjs"),z=require("../bundled/class-names.cjs"),H=':host{display:block;overflow:auto;block-size:inherit;max-block-size:inherit}ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:"filler column-headers" "row-headers calendar";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.sticky-column .row-headers,.sticky-all .row-headers{position:sticky;z-index:1;background-color:var(--calendar-column-background-color, var(--vvd-color-canvas));inset-inline-start:0;margin-inline-end:3px}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;border-radius:8px;background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:"";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:"";inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:"";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{position:sticky;z-index:1;background-color:var(--calendar-header-background-color, var(--vvd-color-canvas));inset-block-start:0;margin-block-end:3px}.filler{background-color:transparent;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{position:sticky;z-index:2;background-color:var(--calendar-header-background-color, var(--vvd-color-canvas));margin-block-end:3px}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}',C="ArrowUp",j="ArrowRight",v="ArrowDown",q="ArrowLeft";function R(t){return t instanceof HTMLElement&&(t.matches('[role="gridcell"i]')||t.matches('[role="columnheader"i]'))}const T=t=>t.matches('[role="columnheader"i]')?'[role="gridcell"i]':'[role="columnheader"i]';function M(t,e){if(e.parentNode instanceof HTMLElement)switch(t){case j:return e.nextElementSibling||e.parentNode.firstElementChild;case q:return e.previousElementSibling||e.parentNode.lastElementChild;case C:case v:{const{children:r}=e.parentNode,n=Array.from(r).indexOf(e);return this.shadowRoot.querySelector(`${T(e)}:nth-child(${n+1})`)}}}function F(t,e){if(t!==v)return;const r=e.closest('[role="columnheader"i]'),n=this.shadowRoot.querySelectorAll('[role="columnheader"i]'),o=Array.from(n).indexOf(r);return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${o+1})`)}function u(t){return t!=null&&typeof t=="object"&&t["@@functional/placeholder"]===!0}function s(t){return function e(r){return arguments.length===0||u(r)?e:t.apply(this,arguments)}}function N(t){return function e(r,n){switch(arguments.length){case 0:return e;case 1:return u(r)?e:s(function(o){return t(r,o)});default:return u(r)&&u(n)?e:u(r)?s(function(o){return t(o,n)}):u(n)?s(function(o){return t(r,o)}):t(r,n)}}}const P=Array.isArray||function(e){return e!=null&&e.length>=0&&Object.prototype.toString.call(e)==="[object Array]"};function b(t){for(var e=[],r;!(r=t.next()).done;)e.push(r.value);return e}function A(t,e,r){for(var n=0,o=r.length;n<o;){if(t(e,r[n]))return!0;n+=1}return!1}function U(t){var e=String(t).match(/^function (\w*)/);return e==null?"":e[1]}function g(t,e){return Object.prototype.hasOwnProperty.call(e,t)}function L(t,e){return t===e?t!==0||1/t===1/e:t!==t&&e!==e}const y=typeof Object.is=="function"?Object.is:L;var k=Object.prototype.toString,x=(function(){return k.call(arguments)==="[object Arguments]"?function(e){return k.call(e)==="[object Arguments]"}:function(e){return g("callee",e)}})(),W=!{toString:null}.propertyIsEnumerable("toString"),O=["constructor","valueOf","isPrototypeOf","toString","propertyIsEnumerable","hasOwnProperty","toLocaleString"],E=(function(){return arguments.propertyIsEnumerable("length")})(),B=function(e,r){for(var n=0;n<e.length;){if(e[n]===r)return!0;n+=1}return!1},D=s(typeof Object.keys=="function"&&!E?function(e){return Object(e)!==e?[]:Object.keys(e)}:function(e){if(Object(e)!==e)return[];var r,n,o=[],i=E&&x(e);for(r in e)g(r,e)&&(!i||r!=="length")&&(o[o.length]=r);if(W)for(n=O.length-1;n>=0;)r=O[n],g(r,e)&&!B(o,r)&&(o[o.length]=r),n-=1;return o}),S=s(function(e){return e===null?"Null":e===void 0?"Undefined":Object.prototype.toString.call(e).slice(8,-1)});function _(t,e,r,n){var o=b(t),i=b(e);function a(c,h){return w(c,h,r.slice(),n.slice())}return!A(function(c,h){return!A(a,h,c)},i,o)}function w(t,e,r,n){if(y(t,e))return!0;var o=S(t);if(o!==S(e))return!1;if(typeof t["fantasy-land/equals"]=="function"||typeof e["fantasy-land/equals"]=="function")return typeof t["fantasy-land/equals"]=="function"&&t["fantasy-land/equals"](e)&&typeof e["fantasy-land/equals"]=="function"&&e["fantasy-land/equals"](t);if(typeof t.equals=="function"||typeof e.equals=="function")return typeof t.equals=="function"&&t.equals(e)&&typeof e.equals=="function"&&e.equals(t);switch(o){case"Arguments":case"Array":case"Object":if(typeof t.constructor=="function"&&U(t.constructor)==="Promise")return t===e;break;case"Boolean":case"Number":case"String":if(!(typeof t==typeof e&&y(t.valueOf(),e.valueOf())))return!1;break;case"Date":if(!y(t.valueOf(),e.valueOf()))return!1;break;case"Error":return t.name===e.name&&t.message===e.message;case"RegExp":if(!(t.source===e.source&&t.global===e.global&&t.ignoreCase===e.ignoreCase&&t.multiline===e.multiline&&t.sticky===e.sticky&&t.unicode===e.unicode))return!1;break}for(var i=r.length-1;i>=0;){if(r[i]===t)return n[i]===e;i-=1}switch(o){case"Map":return t.size!==e.size?!1:_(t.entries(),e.entries(),r.concat([t]),n.concat([e]));case"Set":return t.size!==e.size?!1:_(t.values(),e.values(),r.concat([t]),n.concat([e]));case"Arguments":case"Array":case"Object":case"Boolean":case"Number":case"String":case"Date":case"Error":case"RegExp":case"Int8Array":case"Uint8Array":case"Uint8ClampedArray":case"Int16Array":case"Uint16Array":case"Int32Array":case"Uint32Array":case"Float32Array":case"Float64Array":case"ArrayBuffer":break;default:return!1}var a=D(t);if(a.length!==D(e).length)return!1;var c=r.concat([t]),h=n.concat([e]);for(i=a.length-1;i>=0;){var p=a[i];if(!(g(p,e)&&w(e[p],t[p],c,h)))return!1;i-=1}return!0}var K=N(function(e,r){return w(e,r,[],[])});function Y(t){return Object.prototype.toString.call(t)==="[object Object]"}function V(t){return Object.prototype.toString.call(t)==="[object String]"}var G=s(function(e){return!e});function X(t){var e=Object.prototype.toString.call(t);return e==="[object Uint8ClampedArray]"||e==="[object Int8Array]"||e==="[object Uint8Array]"||e==="[object Int16Array]"||e==="[object Uint16Array]"||e==="[object Int32Array]"||e==="[object Uint32Array]"||e==="[object Float32Array]"||e==="[object Float64Array]"||e==="[object BigInt64Array]"||e==="[object BigUint64Array]"}var J=s(function(e){return e!=null&&typeof e["fantasy-land/empty"]=="function"?e["fantasy-land/empty"]():e!=null&&e.constructor!=null&&typeof e.constructor["fantasy-land/empty"]=="function"?e.constructor["fantasy-land/empty"]():e!=null&&typeof e.empty=="function"?e.empty():e!=null&&e.constructor!=null&&typeof e.constructor.empty=="function"?e.constructor.empty():e==Set||e instanceof Set?new Set:e==Map||e instanceof Map?new Map:P(e)?[]:V(e)?"":Y(e)?{}:x(e)?(function(){return arguments})():X(e)?e.constructor.from(""):void 0}),Q=s(function(e){return e!=null&&K(e,J(e))});function Z(t){const e=t.closest('[role="gridcell"i], [role="columnheader"i]');if(e){const{parentElement:r}=e;if(r)return r.children&&Array.from(r.children).indexOf(e)}}function ee(t,e,r){const n=e.closest('[role="rowheader"], [role="gridcell"i]');if(n){const o=n.getBoundingClientRect(),i=t.clientY-o.y,a=o.height/r,c=i/a;return Math.round((c+Number.EPSILON)*100)/100}}const te=function(t){if(!(t instanceof KeyboardEvent||t instanceof MouseEvent))throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");const[e]=t.composedPath();if(!(e&&e instanceof HTMLElement&&this.shadowRoot.contains(e)))throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");const r=Z(e);let n;t instanceof MouseEvent&&(n=ee(t,e,this._hours));const o={...r!=null&&{day:r},...n!=null&&{hour:n}};return G(Q(o))?o:null};var re=Object.defineProperty,m=(t,e,r,n)=>{for(var o=void 0,i=t.length-1,a;i>=0;i--)(a=t[i])&&(o=a(e,r,o)||o);return o&&re(e,r,o),o};const ne=t=>{const e=window.getComputedStyle(t).overflowY,r=window.getComputedStyle(t).overflowX;return{vertical:(e==="auto"||e==="scroll")&&t.scrollHeight>t.clientHeight,horizontal:(r==="auto"||r==="scroll")&&t.scrollWidth>t.clientWidth}};class d extends l.VividElement{constructor(){super(...arguments),this.hour12=!1,this.stickyMode=I.Sticky.All,this._hours=24,this._days=7,this.hoursAsDatetime=Array.from({length:this._hours-1}).fill(new Date(new Date().setHours(0,0,0))).map((e,r)=>new Date(e.setHours(++r))),this._generateDaysArr=e=>{if(e.length==this._days)return e;const r=new Date(e[e.length-1]);return r.setDate(r.getDate()+1),this._generateDaysArr([...e,r])},this.getEventContext=te}get#e(){const{activeElement:e}=document;return e instanceof $.CalendarEvent?e:null}getCalendarEventContainingCell(e){const r=e.getAttribute("slot");return this.shadowRoot.querySelector(`slot[name="${r}"i]`).parentElement}arrowKeysInteractions(e){const{activeElement:r}=this.shadowRoot;let n;R(r)?n=M.call(this,e,r):this.#e?n=this.getCalendarEventContainingCell(this.#e):r?.matches('em[role="button"i]')?n=F.call(this,e,r):n=this.shadowRoot.querySelector('[role="columnheader"i]'),this.activateElement(n)}activateElement(e){const r=({target:n})=>n.setAttribute("tabindex","-1");e?.addEventListener("blur",r,{once:!0}),e?.setAttribute("tabindex","0"),e?.focus()}onKeydown({key:e}){const r=[C,j,v,q].some(n=>n==e);return r&&this.arrowKeysInteractions(e),!r}connectedCallback(){super.connectedCallback(),this.initializeScrollPosition()}initializeScrollPosition(){if(!ne(this).vertical)return;const n=this.scrollHeight/this._hours*(8-1);l.Updates.enqueue(()=>{this.scrollTo({top:n})})}}m([l.attr],d.prototype,"datetime");m([l.attr({attribute:"start-day"})],d.prototype,"startDay");m([l.attr],d.prototype,"locales");m([l.attr({mode:"boolean"})],d.prototype,"hour12");m([l.attr({attribute:"sticky-mode",mode:"fromView"})],d.prototype,"stickyMode");function oe(t){const e=r=>`0${r}`.slice(-2);return`${t.getFullYear()}-${e(t.getMonth()+1)}-${e(t.getDate())}`}const ie=new Map([["sunday",0],["monday",1]]);function le(t=new Date,e){t=new Date(t);let r=ie.get(e);r??=1;const n=t.getDate()-(t.getDay()+7-r)%7;return new Date(t.setDate(n))}const ae=({stickyMode:t})=>z.classNames([`sticky-${t}`,!!t]),se=()=>l.html` <div class="row-headers" role="row">
 		${f.repeat(t=>t.hoursAsDatetime,l.html`<span role="rowheader">
 				<time
 					datetime="${(t,e)=>new Intl.DateTimeFormat(e.parent.locales,{hour:"numeric",minute:"numeric",hour12:!1}).format(t)}"

package/calendar/index.js

@@ -9,7 +9,6 @@ function P(t) {
 }
 const U = (t) => t.matches('[role="columnheader"i]') ? '[role="gridcell"i]' : '[role="columnheader"i]';
 function L(t, e) {
-  /* v8 ignore else -- @preserve */
   if (e.parentNode instanceof HTMLElement)
     switch (t) {
       case x:
@@ -88,17 +87,17 @@ function Y(t, e) {
   return t === e ? t !== 0 || 1 / t === 1 / e : t !== t && e !== e;
 }
 const v = typeof Object.is == "function" ? Object.is : Y;
-var O = Object.prototype.toString, $ = /* @__PURE__ */ function() {
+var O = Object.prototype.toString, $ = /* @__PURE__ */ (function() {
   return O.call(arguments) === "[object Arguments]" ? function(e) {
     return O.call(e) === "[object Arguments]";
   } : function(e) {
     return p("callee", e);
   };
-}(), G = !/* @__PURE__ */ {
+})(), G = !/* @__PURE__ */ {
   toString: null
-}.propertyIsEnumerable("toString"), S = ["constructor", "valueOf", "isPrototypeOf", "toString", "propertyIsEnumerable", "hasOwnProperty", "toLocaleString"], D = /* @__PURE__ */ function() {
+}.propertyIsEnumerable("toString"), S = ["constructor", "valueOf", "isPrototypeOf", "toString", "propertyIsEnumerable", "hasOwnProperty", "toLocaleString"], D = /* @__PURE__ */ (function() {
   return arguments.propertyIsEnumerable("length");
-}(), X = function(e, r) {
+})(), X = function(e, r) {
   for (var n = 0; n < e.length; ) {
     if (e[n] === r)
       return !0;
@@ -225,9 +224,9 @@ function te(t) {
   return e === "[object Uint8ClampedArray]" || e === "[object Int8Array]" || e === "[object Uint8Array]" || e === "[object Int16Array]" || e === "[object Uint16Array]" || e === "[object Int32Array]" || e === "[object Uint32Array]" || e === "[object Float32Array]" || e === "[object Float64Array]" || e === "[object BigInt64Array]" || e === "[object BigUint64Array]";
 }
 var re = /* @__PURE__ */ a(function(e) {
-  return e != null && typeof e["fantasy-land/empty"] == "function" ? e["fantasy-land/empty"]() : e != null && e.constructor != null && typeof e.constructor["fantasy-land/empty"] == "function" ? e.constructor["fantasy-land/empty"]() : e != null && typeof e.empty == "function" ? e.empty() : e != null && e.constructor != null && typeof e.constructor.empty == "function" ? e.constructor.empty() : e == Set || e instanceof Set ? /* @__PURE__ */ new Set() : e == Map || e instanceof Map ? /* @__PURE__ */ new Map() : K(e) ? [] : Z(e) ? "" : Q(e) ? {} : $(e) ? /* @__PURE__ */ function() {
+  return e != null && typeof e["fantasy-land/empty"] == "function" ? e["fantasy-land/empty"]() : e != null && e.constructor != null && typeof e.constructor["fantasy-land/empty"] == "function" ? e.constructor["fantasy-land/empty"]() : e != null && typeof e.empty == "function" ? e.empty() : e != null && e.constructor != null && typeof e.constructor.empty == "function" ? e.constructor.empty() : e == Set || e instanceof Set ? /* @__PURE__ */ new Set() : e == Map || e instanceof Map ? /* @__PURE__ */ new Map() : K(e) ? [] : Z(e) ? "" : Q(e) ? {} : $(e) ? /* @__PURE__ */ (function() {
     return arguments;
-  }() : te(e) ? e.constructor.from("") : void 0;
+  })() : te(e) ? e.constructor.from("") : void 0;
 }), ne = /* @__PURE__ */ a(function(e) {
   return e != null && J(e, re(e));
 });
@@ -235,7 +234,6 @@ function oe(t) {
   const e = t.closest('[role="gridcell"i], [role="columnheader"i]');
   if (e) {
     const { parentElement: r } = e;
-    /* v8 ignore else -- @preserve */
     if (r)
       return r.children && Array.from(r.children).indexOf(e);
   }

package/card/definition.cjs

@@ -11,7 +11,7 @@ const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const enums = require('../unbundled/enums.cjs');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');
 
-const styles = ":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+const styles = ":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media(hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/card/definition.js

@@ -7,7 +7,7 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import { A as Appearance } from '../unbundled/enums.js';
 import { d as delegateAria } from '../unbundled/delegates-aria.js';
 
-const styles = ":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+const styles = ":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media(hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/card/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const f=require("../bundled/definition2.cjs"),b=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),m=require("../bundled/linkable.cjs"),d=require("../bundled/enums.cjs"),x=require("../bundled/delegates-aria.cjs"),l=require("../bundled/when.cjs"),v=require("../bundled/slotted.cjs"),g=require("../bundled/class-names.cjs"),w=":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";var y=Object.defineProperty,n=(e,a,r,h)=>{for(var i=void 0,c=e.length-1,u;c>=0;c--)(u=e[c])&&(i=u(a,r,i)||i);return i&&y(a,r,i),i};class o extends m.Linkable(t.VividElement){constructor(){super(...arguments),this.clickableCard=!1}}n([t.attr],o.prototype,"appearance");n([t.attr],o.prototype,"headline");n([t.attr],o.prototype,"subtitle");n([t.attr],o.prototype,"text");n([t.attr],o.prototype,"icon");n([t.attr],o.prototype,"elevation");n([t.attr({mode:"boolean",attribute:"clickable-card"})],o.prototype,"clickableCard");n([t.observable],o.prototype,"footerSlottedContent");n([t.observable],o.prototype,"graphicSlottedContent");n([t.observable],o.prototype,"hasMetaSlottedContent");const p=e=>g.classNames("base",["hide-footer",!e.footerSlottedContent||!e.footerSlottedContent.length],["hide-header",q(e)]);function $(e){return t.html`
+"use strict";const f=require("../bundled/definition2.cjs"),b=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),m=require("../bundled/linkable.cjs"),d=require("../bundled/enums.cjs"),x=require("../bundled/delegates-aria.cjs"),l=require("../bundled/when.cjs"),v=require("../bundled/slotted.cjs"),g=require("../bundled/class-names.cjs"),w=":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media(hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";var y=Object.defineProperty,n=(e,a,r,h)=>{for(var i=void 0,c=e.length-1,u;c>=0;c--)(u=e[c])&&(i=u(a,r,i)||i);return i&&y(a,r,i),i};class o extends m.Linkable(t.VividElement){constructor(){super(...arguments),this.clickableCard=!1}}n([t.attr],o.prototype,"appearance");n([t.attr],o.prototype,"headline");n([t.attr],o.prototype,"subtitle");n([t.attr],o.prototype,"text");n([t.attr],o.prototype,"icon");n([t.attr],o.prototype,"elevation");n([t.attr({mode:"boolean",attribute:"clickable-card"})],o.prototype,"clickableCard");n([t.observable],o.prototype,"footerSlottedContent");n([t.observable],o.prototype,"graphicSlottedContent");n([t.observable],o.prototype,"hasMetaSlottedContent");const p=e=>g.classNames("base",["hide-footer",!e.footerSlottedContent||!e.footerSlottedContent.length],["hide-header",q(e)]);function $(e){return t.html`
 		<${e} class="icon" inline name="${a=>a.icon}"></${e}>`}function _(){return t.html`
 		<div class="header-headline" id="card-headline">${e=>e.headline}</div>
 	`}function C(){return t.html` <div class="header-subtitle">${e=>e.subtitle}</div> `}function k(){return t.html`

package/card/index.js

@@ -7,7 +7,7 @@ import { d as k } from "../bundled/delegates-aria.js";
 import { w as i } from "../bundled/when.js";
 import { s as u } from "../bundled/slotted.js";
 import { c as S } from "../bundled/class-names.js";
-const E = ":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+const E = ":host{display:flex;--_vvd-tinted-shadow-surface-0dp: drop-shadow( 1px 0px 0px var(--card-border-color) ) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color))}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media(hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
 var H = Object.defineProperty, n = (e, a, o, h) => {
   for (var d = void 0, s = e.length - 1, b; s >= 0; s--)
     (b = e[s]) && (d = b(a, o, d) || d);

package/checkbox/definition.cjs

@@ -13,7 +13,7 @@ const withSuccessText = require('../unbundled/with-success-text.cjs');
 const formElement = require('../unbundled/form-element.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@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-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.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{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control: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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
+const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@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-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media(hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.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{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control: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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -89,7 +89,6 @@ class Checkbox extends delegatesAria.DelegatesAria(
    * @internal
    */
   readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }

package/checkbox/definition.js

@@ -9,7 +9,7 @@ import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@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-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.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{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control: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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
+const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@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-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media(hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.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{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control: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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -85,7 +85,6 @@ class Checkbox extends DelegatesAria(
    * @internal
    */
   readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }

package/color-picker/definition.cjs

@@ -16,7 +16,7 @@ const withErrorText = require('../unbundled/with-error-text.cjs');
 const withSuccessText = require('../unbundled/with-success-text.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const textField_definition = require('../text-field/definition.cjs');
-const button_definition = require('../unbundled/definition.cjs');
+const button_definition = require('../unbundled/definition2.cjs');
 const tooltip_definition = require('../tooltip/definition.cjs');
 
 const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--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;--focus-inset: -3px}:host{display:inline-block;--_low-ink-color: var(--vvd-color-neutral-600)}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--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(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input),vvd-hex-input>input{width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--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){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}";
@@ -599,11 +599,9 @@ class VvdHexInput extends HexInput {
     this.displayName = "VvdHexInput";
   }
 }
-/* v8 ignore if -- @preserve */
 if (!customElements.get(VC_HEX_PICKER_TAG)) {
   customElements.define(VC_HEX_PICKER_TAG, VvdHexPicker);
 }
-/* v8 ignore if -- @preserve */
 if (!customElements.get(VC_HEX_INPUT_TAG)) {
   customElements.define(VC_HEX_INPUT_TAG, VvdHexInput);
 }
@@ -662,7 +660,6 @@ class ColorPicker extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   placeholderChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.placeholder = this.placeholder;
     }
@@ -816,7 +813,6 @@ class ColorPicker extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   get _buttonColor() {
-    /* v8 ignore else -- @preserve */
     if (!this._canvasColor) {
       this._refreshCanvasColor();
     }
@@ -914,7 +910,6 @@ class ColorPicker extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   _handleSwatchSelection(value) {
-    /* v8 ignore else -- @preserve */
     if (this.value !== value) {
       this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
     }

package/color-picker/definition.js

@@ -12,7 +12,7 @@ import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { VwcTextFieldElement as TextField, textFieldDefinition } from '../text-field/definition.js';
-import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
 import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/definition.js';
 
 const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--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;--focus-inset: -3px}:host{display:inline-block;--_low-ink-color: var(--vvd-color-neutral-600)}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--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(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input),vvd-hex-input>input{width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--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){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}";
@@ -595,11 +595,9 @@ class VvdHexInput extends HexInput {
     this.displayName = "VvdHexInput";
   }
 }
-/* v8 ignore if -- @preserve */
 if (!customElements.get(VC_HEX_PICKER_TAG)) {
   customElements.define(VC_HEX_PICKER_TAG, VvdHexPicker);
 }
-/* v8 ignore if -- @preserve */
 if (!customElements.get(VC_HEX_INPUT_TAG)) {
   customElements.define(VC_HEX_INPUT_TAG, VvdHexInput);
 }
@@ -658,7 +656,6 @@ class ColorPicker extends WithContextualHelp(
    * @internal
    */
   placeholderChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.placeholder = this.placeholder;
     }
@@ -812,7 +809,6 @@ class ColorPicker extends WithContextualHelp(
    * @internal
    */
   get _buttonColor() {
-    /* v8 ignore else -- @preserve */
     if (!this._canvasColor) {
       this._refreshCanvasColor();
     }
@@ -910,7 +906,6 @@ class ColorPicker extends WithContextualHelp(
    * @internal
    */
   _handleSwatchSelection(value) {
-    /* v8 ignore else -- @preserve */
     if (this.value !== value) {
       this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
     }

package/color-picker/index.cjs

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