@vonage/vivid 5.27.0 → 5.28.1

package/unbundled/definition27.js

@@ -8,7 +8,7 @@ import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
 import { DOM, attr, elements, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;display:flex}.control:not(.has-text) .text{display:none}.content{display:contents}.has-text .content{font:var(--vvd-typography-base)}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
@@ -116,13 +116,14 @@ __decorate([attr({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
 __decorate([observable], Tooltip.prototype, "_defaultSlotContent", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
+var getClasses = (x) => classNames("control", ["has-text", x.text !== void 0], ["open", x.open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
 	const anchorSlotTemplate = anchorSlotTemplateFactory();
 	return html`
 ${anchorSlotTemplate}
 ${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span><span slot="_description-secondary" id="${(x) => x._descriptionSecondaryId}">${(x) => x.textSecondary}</span>`)}
-<${popupTag} class="${(x) => classNames("control", ["open", x.open])}" arrow alternate
+<${popupTag} class="${(x) => getClasses(x)}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
 	:open="${(x) => x.open}"
@@ -135,12 +136,14 @@ ${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}
 		${when((x) => x.textSecondary, html`<span class="text-secondary"
 				><slot name="_description-secondary"></slot
 			></span>`)}
-		<slot
-			${slotted({
+		<span class="content"
+			><slot
+				${slotted({
 		property: "_defaultSlotContent",
 		filter: elements()
 	})}
-		></slot>
+			></slot
+		></span>
 		<slot name="kbd-shortcut"
 			${slotted({
 		property: "_kbdShortcutSlotted",

package/unbundled/definition35.cjs

@@ -16,7 +16,7 @@ var data_grid_default = ":host{display:block}:host([generate-header=sticky]){max
 var data_grid_row_default = ".base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
 //#endregion
 //#region src/lib/data-grid/data-grid-cell.scss?inline
-var data_grid_cell_default = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size,var(--_data-grid-cell-default-block-size));color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_data-grid-cell-default-white-space:nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size:100%;--_data-grid-cell-default-white-space:normal}:host([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
+var data_grid_cell_default = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size,var(--_data-grid-cell-default-block-size));color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_data-grid-cell-default-white-space:nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size:100%;--_data-grid-cell-default-white-space:normal}:host([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{flex:1;align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
 //#endregion
 //#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
 var kernelMode;

package/unbundled/definition35.js

@@ -16,7 +16,7 @@ var data_grid_default = ":host{display:block}:host([generate-header=sticky]){max
 var data_grid_row_default = ".base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
 //#endregion
 //#region src/lib/data-grid/data-grid-cell.scss?inline
-var data_grid_cell_default = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size,var(--_data-grid-cell-default-block-size));color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_data-grid-cell-default-white-space:nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size:100%;--_data-grid-cell-default-white-space:normal}:host([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
+var data_grid_cell_default = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size,var(--_data-grid-cell-default-block-size));color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_data-grid-cell-default-white-space:nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size:100%;--_data-grid-cell-default-white-space:normal}:host([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{flex:1;align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
 //#endregion
 //#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
 var kernelMode;

package/unbundled/definition5.cjs

@@ -6,7 +6,7 @@ const require_base_progress = require("./base-progress.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/progress-ring/progress-ring.scss?inline
-var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
+var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.size--7{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--7,.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
 //#endregion
 //#region src/lib/progress-ring/progress-ring.ts
 var progressRingConnotation = require_component_enum.componentEnum([

package/unbundled/definition5.js

@@ -6,7 +6,7 @@ import { t as BaseProgress } from "./base-progress.js";
 import { attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/progress-ring/progress-ring.scss?inline
-var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
+var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.size--7{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--7,.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
 //#endregion
 //#region src/lib/progress-ring/progress-ring.ts
 var progressRingConnotation = componentEnum([

package/unbundled/definition55.cjs

@@ -21,7 +21,7 @@ const require_definition$4 = require("./definition36.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/number-field/number-field.scss?inline
-var number_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button{appearance:none}.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
+var number_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
 //#endregion
 //#region src/lib/number-field/number-field.ts
 var numberFieldAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");

package/unbundled/definition55.js

@@ -21,7 +21,7 @@ import { t as dividerDefinition } from "./definition36.js";
 import { Updates, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames, keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 //#region src/lib/number-field/number-field.scss?inline
-var number_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button{appearance:none}.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
+var number_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
 //#endregion
 //#region src/lib/number-field/number-field.ts
 var numberFieldAppearance = componentEnum(["fieldset", "ghost"], "fieldset");

package/unbundled/definition58.cjs

@@ -15,6 +15,57 @@ var popover_default = ":host{display:inline-block}.base{white-space:initial;--sc
 //#endregion
 //#region src/lib/popover/popover.ts
 /**
+* Roles that support the `aria-expanded` attribute.
+* See https://www.w3.org/TR/wai-aria-1.2/#aria-expanded
+*/
+var EXPANDABLE_ANCHOR_ROLES = /* @__PURE__ */ new Set([
+	"application",
+	"button",
+	"checkbox",
+	"columnheader",
+	"combobox",
+	"gridcell",
+	"link",
+	"listbox",
+	"menuitem",
+	"menuitemcheckbox",
+	"menuitemradio",
+	"row",
+	"rowheader",
+	"switch",
+	"tab",
+	"treeitem"
+]);
+/**
+* Whether a `role` attribute value describes a role that supports
+* `aria-expanded`. Role values are case-insensitive and may list several
+* space-separated fallback roles (e.g. `role="button menuitem"`), so any
+* matching token is accepted.
+*/
+function isExpandableRole(role) {
+	return role.toLowerCase().split(/\s+/).some((token) => EXPANDABLE_ANCHOR_ROLES.has(token));
+}
+/** Input types with button semantics, i.e. an implicit role of `button`. */
+var BUTTON_LIKE_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"button",
+	"submit",
+	"reset",
+	"image"
+]);
+/**
+* Determines whether the trigger ARIA attributes (`aria-haspopup`,
+* `aria-expanded`) may be applied to the anchor. They are only permitted on
+* elements with an appropriate interactive role, not on elements with a
+* generic role like a plain `<span>`.
+*/
+function anchorSupportsTriggerAria(anchor) {
+	if (anchor._vividAriaBehaviour === "delegate") return true;
+	if (anchor.tagName.includes("-") && !window.customElements.get(anchor.tagName.toLowerCase())) return true;
+	const explicitRole = anchor.getAttribute("role");
+	if (explicitRole !== null) return isExpandableRole(explicitRole);
+	return anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement && BUTTON_LIKE_INPUT_TYPES.has(anchor.type) || (anchor instanceof HTMLAnchorElement || anchor instanceof HTMLAreaElement) && anchor.hasAttribute("href") || anchor instanceof HTMLSelectElement || anchor.tagName === "SUMMARY";
+}
+/**
 * @public
 * @component popover
 * @slot - Default slot for the popover content.
@@ -35,6 +86,7 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 		this.arrow = false;
 		this.open = false;
 		this.#currentAnchor = null;
+		this.#currentAnchorSupportsTriggerAria = false;
 		this.#manualToggle = () => {
 			this._popoverEl.togglePopover();
 		};
@@ -74,6 +126,12 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 	}
 	/** @internal */
 	#currentAnchor;
+	/**
+	* Whether the current anchor may receive the trigger ARIA attributes
+	* (`aria-haspopup`, `aria-expanded`).
+	* @internal
+	*/
+	#currentAnchorSupportsTriggerAria;
 	/** @internal */
 	#updateAnchor() {
 		if (!this._popoverEl) return;
@@ -88,15 +146,20 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 	}
 	/** @internal */
 	#bindTrigger(anchor) {
-		anchor.setAttribute("aria-haspopup", "dialog");
+		this.#currentAnchorSupportsTriggerAria = anchorSupportsTriggerAria(anchor);
+		if (this.#currentAnchorSupportsTriggerAria) anchor.setAttribute("aria-haspopup", "dialog");
+		else console.warn(`[popover] The anchor element <${anchor.tagName.toLowerCase()}> does not have button-like semantics, so the "aria-haspopup" and "aria-expanded" attributes will not be applied to it. To make the Popover trigger accessible, use a button element (e.g. <vwc-button> or <button>) or provide an appropriate role (e.g. role="button") on the anchor.`);
 		this.#updateAnchorExpandedState();
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
 		else anchor.addEventListener("click", this.#manualToggle);
 	}
 	/** @internal */
 	#unbindTrigger(anchor) {
-		anchor.removeAttribute("aria-haspopup");
-		anchor.ariaExpanded = null;
+		if (this.#currentAnchorSupportsTriggerAria) {
+			anchor.removeAttribute("aria-haspopup");
+			anchor.ariaExpanded = null;
+		}
+		this.#currentAnchorSupportsTriggerAria = false;
 		require_anchored.clearAnchorExpanded(anchor);
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
 		else anchor.removeEventListener("click", this.#manualToggle);
@@ -105,11 +168,13 @@ var Popover = class extends require_localized.Localized(require_delegates_aria.D
 	* Reflects the open state onto the anchor as `aria-expanded` (for assistive
 	* technology) and `data-expanded` (a styling hook, e.g. to show a pressed
 	* trigger while the Popover is open). Mirrors the Menu anchor behaviour.
+	* `aria-expanded` is only applied to anchors with an appropriate interactive
+	* role, as it is not permitted on elements with a generic role.
 	* @internal
 	*/
 	#updateAnchorExpandedState() {
 		if (!this.#currentAnchor) return;
-		this.#currentAnchor.ariaExpanded = this.open.toString();
+		if (this.#currentAnchorSupportsTriggerAria) this.#currentAnchor.ariaExpanded = this.open.toString();
 		require_anchored.setAnchorExpanded(this.#currentAnchor, this.open);
 	}
 	/** @internal */

package/unbundled/definition58.js

@@ -15,6 +15,57 @@ var popover_default = ":host{display:inline-block}.base{white-space:initial;--sc
 //#endregion
 //#region src/lib/popover/popover.ts
 /**
+* Roles that support the `aria-expanded` attribute.
+* See https://www.w3.org/TR/wai-aria-1.2/#aria-expanded
+*/
+var EXPANDABLE_ANCHOR_ROLES = /* @__PURE__ */ new Set([
+	"application",
+	"button",
+	"checkbox",
+	"columnheader",
+	"combobox",
+	"gridcell",
+	"link",
+	"listbox",
+	"menuitem",
+	"menuitemcheckbox",
+	"menuitemradio",
+	"row",
+	"rowheader",
+	"switch",
+	"tab",
+	"treeitem"
+]);
+/**
+* Whether a `role` attribute value describes a role that supports
+* `aria-expanded`. Role values are case-insensitive and may list several
+* space-separated fallback roles (e.g. `role="button menuitem"`), so any
+* matching token is accepted.
+*/
+function isExpandableRole(role) {
+	return role.toLowerCase().split(/\s+/).some((token) => EXPANDABLE_ANCHOR_ROLES.has(token));
+}
+/** Input types with button semantics, i.e. an implicit role of `button`. */
+var BUTTON_LIKE_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"button",
+	"submit",
+	"reset",
+	"image"
+]);
+/**
+* Determines whether the trigger ARIA attributes (`aria-haspopup`,
+* `aria-expanded`) may be applied to the anchor. They are only permitted on
+* elements with an appropriate interactive role, not on elements with a
+* generic role like a plain `<span>`.
+*/
+function anchorSupportsTriggerAria(anchor) {
+	if (anchor._vividAriaBehaviour === "delegate") return true;
+	if (anchor.tagName.includes("-") && !window.customElements.get(anchor.tagName.toLowerCase())) return true;
+	const explicitRole = anchor.getAttribute("role");
+	if (explicitRole !== null) return isExpandableRole(explicitRole);
+	return anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement && BUTTON_LIKE_INPUT_TYPES.has(anchor.type) || (anchor instanceof HTMLAnchorElement || anchor instanceof HTMLAreaElement) && anchor.hasAttribute("href") || anchor instanceof HTMLSelectElement || anchor.tagName === "SUMMARY";
+}
+/**
 * @public
 * @component popover
 * @slot - Default slot for the popover content.
@@ -35,6 +86,7 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 		this.arrow = false;
 		this.open = false;
 		this.#currentAnchor = null;
+		this.#currentAnchorSupportsTriggerAria = false;
 		this.#manualToggle = () => {
 			this._popoverEl.togglePopover();
 		};
@@ -74,6 +126,12 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 	}
 	/** @internal */
 	#currentAnchor;
+	/**
+	* Whether the current anchor may receive the trigger ARIA attributes
+	* (`aria-haspopup`, `aria-expanded`).
+	* @internal
+	*/
+	#currentAnchorSupportsTriggerAria;
 	/** @internal */
 	#updateAnchor() {
 		if (!this._popoverEl) return;
@@ -88,15 +146,20 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 	}
 	/** @internal */
 	#bindTrigger(anchor) {
-		anchor.setAttribute("aria-haspopup", "dialog");
+		this.#currentAnchorSupportsTriggerAria = anchorSupportsTriggerAria(anchor);
+		if (this.#currentAnchorSupportsTriggerAria) anchor.setAttribute("aria-haspopup", "dialog");
+		else console.warn(`[popover] The anchor element <${anchor.tagName.toLowerCase()}> does not have button-like semantics, so the "aria-haspopup" and "aria-expanded" attributes will not be applied to it. To make the Popover trigger accessible, use a button element (e.g. <vwc-button> or <button>) or provide an appropriate role (e.g. role="button") on the anchor.`);
 		this.#updateAnchorExpandedState();
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
 		else anchor.addEventListener("click", this.#manualToggle);
 	}
 	/** @internal */
 	#unbindTrigger(anchor) {
-		anchor.removeAttribute("aria-haspopup");
-		anchor.ariaExpanded = null;
+		if (this.#currentAnchorSupportsTriggerAria) {
+			anchor.removeAttribute("aria-haspopup");
+			anchor.ariaExpanded = null;
+		}
+		this.#currentAnchorSupportsTriggerAria = false;
 		clearAnchorExpanded(anchor);
 		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
 		else anchor.removeEventListener("click", this.#manualToggle);
@@ -105,11 +168,13 @@ var Popover = class extends Localized(DelegatesAria(VividElement)) {
 	* Reflects the open state onto the anchor as `aria-expanded` (for assistive
 	* technology) and `data-expanded` (a styling hook, e.g. to show a pressed
 	* trigger while the Popover is open). Mirrors the Menu anchor behaviour.
+	* `aria-expanded` is only applied to anchors with an appropriate interactive
+	* role, as it is not permitted on elements with a generic role.
 	* @internal
 	*/
 	#updateAnchorExpandedState() {
 		if (!this.#currentAnchor) return;
-		this.#currentAnchor.ariaExpanded = this.open.toString();
+		if (this.#currentAnchorSupportsTriggerAria) this.#currentAnchor.ariaExpanded = this.open.toString();
 		setAnchorExpanded(this.#currentAnchor, this.open);
 	}
 	/** @internal */

package/unbundled/definition6.cjs

@@ -112,9 +112,10 @@ function getEffectiveAppearance(x) {
 }
 var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("control", `connotation-${buttonConnotation.parse(x.connotation)}`, `appearance-${getEffectiveAppearance(x)}`, "with-idle", "with-hover", "with-active", "with-disabled", ["disabled", x.disabled || x.pending], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-only", !x.label && !!(x.icon || x.iconSlottedContent?.length) && !x.dropdownIndicator], ["icon-trailing", x.iconTrailing], ["stacked", x.stacked], ["active", x.ariaExpanded === "true" || x.active]);
 function renderIconOrPending(context, icon, pending, size = require_enums.Size.Normal) {
-	if (pending && size != require_enums.Size.SuperCondensed) {
+	if (pending) {
 		const progressTag = context.tagFor(require_definition$1.ProgressRing);
 		const progressSize = {
+			[require_enums.Size.SuperCondensed]: "-7",
 			[require_enums.Size.Condensed]: "-6",
 			[require_enums.Size.Normal]: "-5",
 			[require_enums.Size.Expanded]: "-4"

package/unbundled/definition6.js

@@ -112,9 +112,10 @@ function getEffectiveAppearance(x) {
 }
 var getClasses = (x) => classNames("control", `connotation-${buttonConnotation.parse(x.connotation)}`, `appearance-${getEffectiveAppearance(x)}`, "with-idle", "with-hover", "with-active", "with-disabled", ["disabled", x.disabled || x.pending], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-only", !x.label && !!(x.icon || x.iconSlottedContent?.length) && !x.dropdownIndicator], ["icon-trailing", x.iconTrailing], ["stacked", x.stacked], ["active", x.ariaExpanded === "true" || x.active]);
 function renderIconOrPending(context, icon, pending, size = Size.Normal) {
-	if (pending && size != Size.SuperCondensed) {
+	if (pending) {
 		const progressTag = context.tagFor(ProgressRing);
 		const progressSize = {
+			[Size.SuperCondensed]: "-7",
 			[Size.Condensed]: "-6",
 			[Size.Normal]: "-5",
 			[Size.Expanded]: "-4"