@vonage/vivid 5.27.0 → 5.28.0

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/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"

package/unbundled/definition63.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require("./rolldown-runtime.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
 const require_definition = require("./definition5.cjs");
 const require_localized = require("./localized.cjs");
 const require_definition$1 = require("./definition6.cjs");
@@ -32,7 +33,7 @@ let prosemirror_inputrules = require("prosemirror-inputrules");
 let prosemirror_transform = require("prosemirror-transform");
 let prosemirror_schema_basic = require("prosemirror-schema-basic");
 //#region src/lib/rich-text-editor/rich-text-editor.scss?inline
-var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,calc(8px + var(--_border-width,0px)));block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.rte.appearance-fieldset{--_border-width:1px;border:var(--_border-width) solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;transition:border-color .2s}.rte.appearance-fieldset:focus-within{--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))}.rte.appearance-fieldset .editor-viewport{border-start-start-radius:inherit;border-start-end-radius:inherit}.rte.appearance-fieldset .editor-scroll-area{background:0 0}.rte.appearance-fieldset .toolbar{border-end-end-radius:inherit;border-end-start-radius:inherit}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
+var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,8px);block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.rte.appearance-fieldset{background-color:var(--_appearance-color-fill);outline:1px solid var(--_appearance-color-outline);outline-offset:-1px;border-radius:8px;transition:outline-color .2s,background-color .2s}.rte.appearance-fieldset:focus-within{--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))}.rte.appearance-fieldset .editor-viewport{border-start-start-radius:inherit;border-start-end-radius:inherit}.rte.appearance-fieldset .editor-scroll-area{background:0 0}.rte.appearance-fieldset .toolbar{border-end-end-radius:inherit;border-end-start-radius:inherit}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
 //#endregion
 //#region src/lib/rich-text-editor/rich-text-editor.ts
 /**
@@ -47,10 +48,16 @@ var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline
 * @dynamicSlot `{ url: string }` inline-image-placeholder - Placeholder content for inline images.
 * @dynamicSlot `{ id: string }` suggestions-empty - Empty state if no suggestions are found.
 */
-var RichTextEditor = class extends require_localized.WithObservableLocale(require_vivid_element.VividElement) {
+var RichTextEditor = class extends require_delegates_aria.DelegatesAria(require_localized.WithObservableLocale(require_vivid_element.VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this._disabled = false;
+	}
 	/** @internal */
 	instanceChanged(prevInstance) {
 		prevInstance?.[require_slottable_request.impl].destroyViewIfNeeded();
+		if (prevInstance) prevInstance[require_slottable_request.impl].onDisabledChanged = null;
+		this._disabled = false;
 		this._initViewIfNeeded();
 		prevInstance?.[require_slottable_request.impl].styles.removeStylesFrom(this.shadowRoot);
 		this.instance?.[require_slottable_request.impl].styles.addStylesTo(this.shadowRoot);
@@ -59,7 +66,10 @@ var RichTextEditor = class extends require_localized.WithObservableLocale(requir
 		const instance = this.instance?.[require_slottable_request.impl];
 		if (instance && this.$fastController.isConnected && !instance.view) {
 			this._syncStateIfNeeded();
-			instance.createView(this._editorEl);
+			instance.onDisabledChanged = (disabled) => {
+				this._disabled = disabled;
+			};
+			instance.createView(this._editableEl);
 		}
 	}
 	_destroyViewIfNeeded() {
@@ -72,6 +82,7 @@ var RichTextEditor = class extends require_localized.WithObservableLocale(requir
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this._destroyViewIfNeeded();
+		if (this.instance) this.instance[require_slottable_request.impl].onDisabledChanged = null;
 	}
 	/** @internal */
 	localeChanged() {
@@ -83,21 +94,37 @@ var RichTextEditor = class extends require_localized.WithObservableLocale(requir
 			ctx: this._ctx
 		});
 	}
+	/** @internal */
+	focus(options) {
+		const view = this.instance?.[require_slottable_request.impl].view;
+		if (view && view.editable) {
+			this._editableEl.focus(options);
+			view.focus();
+		} else super.focus(options);
+	}
 };
 require_decorate.__decorate([_microsoft_fast_element.observable], RichTextEditor.prototype, "instance", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], RichTextEditor.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], RichTextEditor.prototype, "state", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RichTextEditor.prototype, "_disabled", void 0);
 //#endregion
 //#region src/lib/rich-text-editor/rich-text-editor.template.ts
 var RichTextEditorTemplate = (ctx) => {
 	return _microsoft_fast_element.html`<template :_ctx="${() => ctx}">
 		<div
-			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("rte", `connotation-accent`, "with-idle", "with-hover", [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("rte", `connotation-accent`, "with-idle", "with-hover", "with-disabled", "with-error", "with-success", ["disabled", x._disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["error", x.state === "error"], ["success", x.state === "success"])}"
 		>
 			<slot name="editor-before"></slot>
-			<div class="editor-viewport" ${(0, _microsoft_fast_element.ref)("editorViewportElement")}>
+			<div
+				class="editor-viewport"
+				part="editor-viewport"
+				${(0, _microsoft_fast_element.ref)("editorViewportElement")}
+			>
 				<div class="editor-scroll-area" part="editor-scrollable-area">
 					<slot name="editor-start"></slot>
-					<div class="editor rich-text" ${(0, _microsoft_fast_element.ref)("_editorEl")}></div>
+					<div class="editor rich-text">
+						<div part="editor" ${require_delegates_aria.delegateAria()} ${(0, _microsoft_fast_element.ref)("_editableEl")}></div>
+					</div>
 					<div class="popovers"></div>
 					<slot name="editor-end"></slot>
 				</div>
@@ -246,7 +273,7 @@ var FeatureState = class {
 };
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/core.style.scss?inline
-var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode: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));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--vvd-color-neutral-300);cursor:not-allowed}";
+var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode: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));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--_appearance-color-text,var(--vvd-color-neutral-300));cursor:not-allowed}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/foreign-html.ts
 var RteForeignHtmlFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
@@ -390,6 +417,7 @@ var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
 						const disabled = this.disabled.getValue(rte);
 						popovers.classList.toggle("popovers--disabled", disabled);
 						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
+						rte.onDisabledChanged?.(disabled);
 					};
 					updateDisabled();
 					return { update: () => {
@@ -651,6 +679,7 @@ var RteInstanceImpl = class {
 	constructor(instanceFacade, configFacade, options) {
 		this.options = options;
 		this.view = null;
+		this.onDisabledChanged = null;
 		this.dispatchTransaction = (tr) => {
 			const prevState = this.state;
 			this.state = this.state.apply(tr);
@@ -682,12 +711,9 @@ var RteInstanceImpl = class {
 		this.updateHostState(currentHostState);
 		this.view?.updateState(this.state);
 	}
-	createView(target) {
+	createView(mountTarget) {
 		const core = this.config.featureMap.get("RteCore");
-		this.view = new prosemirror_view.EditorView((editor) => {
-			editor.part = "editor";
-			target.appendChild(editor);
-		}, {
+		this.view = new prosemirror_view.EditorView({ mount: mountTarget }, {
 			state: this.state,
 			dispatchTransaction: this.dispatchTransaction,
 			...core?.scrollThreshold !== void 0 && { scrollThreshold: core.scrollThreshold },
@@ -3204,24 +3230,57 @@ var RteToolbarButtonFeature = require_slottable_request.featureFacade(RteToolbar
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/atom.ts
 var isGenerator = (value) => value !== null && typeof value === "object" && "next" in value;
+var VALID_VARIANT = /^[a-zA-Z0-9-]+$/;
+var normalizeResolvedValue = (value) => {
+	if (value == null) return {
+		text: "",
+		variant: []
+	};
+	if (typeof value === "string") return {
+		text: value,
+		variant: []
+	};
+	return {
+		text: value.text,
+		variant: (value.variant ?? []).filter((v) => {
+			if (!VALID_VARIANT.test(v)) {
+				console.warn(`[rich-text-editor] Ignoring invalid atom variant "${v}".`);
+				return false;
+			}
+			return true;
+		})
+	};
+};
+var partsFor = (atomName, variant) => [`node--${atomName}`, ...variant.map((v) => `atom-variant--${v}`)].join(" ");
 var AtomView = class {
 	constructor(node, config, atomName) {
+		this.atomName = atomName;
 		this.dom = document.createElement("span");
 		this.dom.className = "atom-wrapper";
-		this.dom.setAttribute("part", `node--${atomName}`);
 		const result = config.resolveValue ? config.resolveValue(node.attrs.value) : node.attrs.value;
 		if (isGenerator(result)) {
-			this.dom.textContent = "";
+			this.render(null);
 			this.handleResolvedGenerator(result);
-		} else this.dom.textContent = result ?? "";
+		} else this.render(result);
+	}
+	render(value) {
+		const { text, variant } = normalizeResolvedValue(value);
+		if (this.dom.textContent !== text) this.dom.textContent = text;
+		const parts = partsFor(this.atomName, variant);
+		if (this.dom.getAttribute("part") !== parts) this.dom.setAttribute("part", parts);
 	}
 	async handleResolvedGenerator(generator) {
 		const iterator = generator[Symbol.asyncIterator]();
-		let result;
-		do {
-			result = await iterator.next();
-			this.dom.textContent = result.value ?? "";
-		} while (!result.done);
+		try {
+			let result;
+			do {
+				result = await iterator.next();
+				this.render(result.value ?? null);
+			} while (!result.done);
+		} catch (error) {
+			this.render(null);
+			console.warn("[rich-text-editor] Error while resolving atom value:", error);
+		}
 	}
 };
 var RteAtomFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
@@ -3248,7 +3307,7 @@ var RteAtomFeatureImpl = class extends require_slottable_request.RteFeatureImpl
 				if (serializedValue === null) return document.createDocumentFragment();
 				return [
 					"span",
-					{ part: `node--${this.atomName}` },
+					{ part: partsFor(this.atomName, []) },
 					serializedValue
 				];
 			},