@vonage/vivid 5.23.1 → 5.25.0

package/tag/index.cjs

@@ -1,32 +1,32 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/definition3.cjs`),o=require(`../bundled/affix.cjs`),s=require(`../bundled/delegates-aria.cjs`);var c=class extends e.t(s.t(o.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.disabled=!1,this.selectable=!1,this.selected=!1,this.#e=()=>{!this.selectable||this.disabled||(this.selected=!this.selected,this.$emit(`selected-change`))}}remove(){!this.removable||this.selectable||(this.$emit(`removed`),this.parentElement?.removeChild(this))}#e;handleKeydown(e){return(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.#e()),(e.key===`Delete`||e.key===`Backspace`)&&(e.preventDefault(),this.remove()),!0}handleClick(){this.#e()}};r.t([t.m],c.prototype,`connotation`,void 0),r.t([t.m],c.prototype,`shape`,void 0),r.t([t.m],c.prototype,`appearance`,void 0),r.t([t.m],c.prototype,`label`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`selectable`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`selected`,void 0);var l=`.base.connotation-cta{--_connotation-color-primary:var(--vvd-tag-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-tag-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-tag-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-tag-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-tag-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-tag-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-tag-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tag-cta-faint,var(--vvd-color-cta-50));--_connotation-color-dim:var(--vvd-tag-cta-dim,var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary:var(--vvd-tag-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-tag-success-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-tag-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-tag-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-tag-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-tag-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-tag-success-firm-all,var(--vvd-color-success-600));--_connotation-color-faint:var(--vvd-tag-success-faint,var(--vvd-color-success-50));--_connotation-color-dim:var(--vvd-tag-success-dim,var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-tag-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-tag-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-tag-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-tag-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-tag-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-tag-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-tag-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-faint:var(--vvd-tag-alert-faint,var(--vvd-color-alert-50));--_connotation-color-dim:var(--vvd-tag-alert-dim,var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-tag-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-tag-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-tag-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-tag-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-tag-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-tag-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-firm:var(--vvd-tag-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-tag-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-faint:var(--vvd-tag-warning-faint,var(--vvd-color-warning-50));--_connotation-color-dim:var(--vvd-tag-warning-dim,var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary:var(--vvd-tag-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-tag-information-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-tag-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-tag-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-tag-information-fierce,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-tag-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-tag-information-firm-all,var(--vvd-color-information-600));--_connotation-color-faint:var(--vvd-tag-information-faint,var(--vvd-color-information-50));--_connotation-color-dim:var(--vvd-tag-information-dim,var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-tag-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-tag-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-tag-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-tag-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-tag-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-tag-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-tag-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-faint:var(--vvd-tag-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-dim:var(--vvd-tag-announcement-dim,var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-tag-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tag-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-tag-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-tag-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-tag-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-tag-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-tag-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-tag-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-tag-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base:disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--vvd-color-canvas);--_appearance-color-fill:var(--_connotation-color-firm);--_appearance-color-outline:transparent}.base{--tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);vertical-align:middle;border:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;border:none;align-items:center;padding:4px;display:flex;position:relative;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}`,u=e=>i.t(`base`,[`disabled`,e.disabled],[`selectable`,e.selectable],[`selected`,e.selectable&&e.selected],[`removable`,e.removable&&!e.selectable],[`connotation-${e.connotation}`,!!e.connotation],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape]);function d(e){return t.p`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/definition3.cjs`),o=require(`../bundled/icon.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/delegates-aria.cjs`);var l=class extends e.t(c.t(s.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.disabled=!1,this.selectable=!1,this.selected=!1,this.#e=()=>{!this.selectable||this.disabled||(this.selected=!this.selected,this.$emit(`selected-change`))}}remove(){!this.removable||this.selectable||(this.$emit(`removed`),this.parentElement?.removeChild(this))}#e;handleKeydown(e){return(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.#e()),(e.key===`Delete`||e.key===`Backspace`)&&(e.preventDefault(),this.remove()),!0}handleClick(){this.#e()}};r.t([t.m],l.prototype,`connotation`,void 0),r.t([t.m],l.prototype,`shape`,void 0),r.t([t.m],l.prototype,`appearance`,void 0),r.t([t.m],l.prototype,`label`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`removable`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`disabled`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`selectable`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`selected`,void 0);var u=`.base.connotation-cta{--_connotation-color-primary:var(--vvd-tag-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-tag-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-tag-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-tag-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-tag-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-tag-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-tag-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tag-cta-faint,var(--vvd-color-cta-50));--_connotation-color-dim:var(--vvd-tag-cta-dim,var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary:var(--vvd-tag-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-tag-success-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-tag-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-tag-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-tag-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-tag-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-tag-success-firm-all,var(--vvd-color-success-600));--_connotation-color-faint:var(--vvd-tag-success-faint,var(--vvd-color-success-50));--_connotation-color-dim:var(--vvd-tag-success-dim,var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-tag-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-tag-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-tag-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-tag-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-tag-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-tag-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-tag-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-faint:var(--vvd-tag-alert-faint,var(--vvd-color-alert-50));--_connotation-color-dim:var(--vvd-tag-alert-dim,var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-tag-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-tag-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-tag-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-tag-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-tag-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-tag-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-firm:var(--vvd-tag-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-tag-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-faint:var(--vvd-tag-warning-faint,var(--vvd-color-warning-50));--_connotation-color-dim:var(--vvd-tag-warning-dim,var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary:var(--vvd-tag-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-tag-information-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-tag-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-tag-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-tag-information-fierce,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-tag-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-tag-information-firm-all,var(--vvd-color-information-600));--_connotation-color-faint:var(--vvd-tag-information-faint,var(--vvd-color-information-50));--_connotation-color-dim:var(--vvd-tag-information-dim,var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-tag-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-tag-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-tag-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-tag-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-tag-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-tag-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-tag-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-faint:var(--vvd-tag-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-dim:var(--vvd-tag-announcement-dim,var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-tag-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tag-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-tag-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-tag-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-tag-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-tag-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-tag-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-tag-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-tag-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base:disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--vvd-color-canvas);--_appearance-color-fill:var(--_connotation-color-firm);--_appearance-color-outline:transparent}.base{--tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);vertical-align:middle;border:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;border:none;align-items:center;padding:4px;display:flex;position:relative;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}`,d=e=>i.t(`base`,[`disabled`,e.disabled],[`selectable`,e.selectable],[`selected`,e.selectable&&e.selected],[`removable`,e.removable&&!e.selectable],[`connotation-${e.connotation}`,!!e.connotation],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape]);function f(e){return t.p`
 	<button
 		class="dismiss-button"
 		aria-label="${e=>e.locale.tag.remove(e.label)}"
 		?disabled="${e=>e.disabled}"
 		@click="${e=>e.remove()}">
 		<${e} name="close-line"></${e}>
-	</button>`}var f=t.u(`tag`,c,e=>{let r=o.a(e),i=e.tagFor(a.r),c=t.p`
-		${e=>r(e.icon,o.i.Slot)}
+	</button>`}var p=t.u(`tag`,l,e=>{let r=s.a(e),i=e.tagFor(o.t),a=t.p`
+		${e=>r(e.icon,s.i.Slot)}
 		${n.t(e=>e.label,e=>t.p`<span class="label">${e.label}</span>`)}
-		${n.t(e=>e.removable&&!e.selectable,d(i))}
+		${n.t(e=>e.removable&&!e.selectable,f(i))}
 		${n.t(e=>e.selectable&&e.selected,t.p`<${i} class="selectable-icon" name="check-circle-solid"></${i}>`)}
 	`;return t.p`
 		${n.t(e=>e.selectable,t.p`<button
-				class="${u}"
-				${s.n({ariaPressed:e=>e.selected})}
+				class="${d}"
+				${c.n({ariaPressed:e=>e.selected})}
 				?disabled="${e=>e.disabled}"
 				@keydown="${(e,t)=>e.handleKeydown(t.event)}"
 				@click="${e=>e.handleClick()}"
 			>
-				${c}
+				${a}
 			</button>`)}
 		${n.t(e=>!e.selectable,t.p`<span
-				class="${u}"
-				${s.n()}
+				class="${d}"
+				${c.n()}
 				tabindex="${e=>e.disabled||e.removable?null:0}"
 				@keydown="${(e,t)=>e.handleKeydown(t.event)}"
 				@click="${e=>e.handleClick()}"
 			>
-				${c}
+				${a}
 			</span>`)}
-	`},[a.t],{styles:l,shadowOptions:{delegatesFocus:!0}});t.d(f)();
+	`},[a.t],{styles:u,shadowOptions:{delegatesFocus:!0}});t.d(p)();

package/tag/index.js

@@ -3,7 +3,8 @@ import { d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element
 import { t as o } from "../bundled/when.js";
 import { t as s } from "../bundled/decorate.js";
 import { t as c } from "../bundled/class-names.js";
-import { r as l, t as u } from "../bundled/definition3.js";
+import { t as l } from "../bundled/definition3.js";
+import { t as u } from "../bundled/icon.js";
 import { a as d, i as f, t as p } from "../bundled/affix.js";
 import { n as m, t as h } from "../bundled/delegates-aria.js";
 //#region src/lib/tag/tag.ts
@@ -41,7 +42,7 @@ function y(e) {
 //#endregion
 //#region src/lib/tag/index.ts
 t(a("tag", g, (e) => {
-	let t = d(e), n = e.tagFor(l), i = r`
+	let t = d(e), n = e.tagFor(u), i = r`
 		${(e) => t(e.icon, f.Slot)}
 		${o((e) => e.label, (e) => r`<span class="label">${e.label}</span>`)}
 		${o((e) => e.removable && !e.selectable, y(n))}
@@ -67,7 +68,7 @@ t(a("tag", g, (e) => {
 				${i}
 			</span>`)}
 	`;
-}, [u], {
+}, [l], {
 	styles: _,
 	shadowOptions: { delegatesFocus: !0 }
 }))();

package/tag-group/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition74.cjs");
+const require_definition = require("../unbundled/definition76.cjs");
 exports.VwcTagGroupElement = require_definition.TagGroup;
 exports.registerTagGroup = require_definition.registerTagGroup;
 exports.tagGroupDefinition = require_definition.tagGroupDefinition;

package/tag-group/definition.js

@@ -1,2 +1,2 @@
-import { n as tagGroupDefinition, r as TagGroup, t as registerTagGroup } from "../unbundled/definition74.js";
+import { n as tagGroupDefinition, r as TagGroup, t as registerTagGroup } from "../unbundled/definition76.js";
 export { TagGroup as VwcTagGroupElement, registerTagGroup, tagGroupDefinition };

package/text-area/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition76.cjs");
+const require_definition = require("../unbundled/definition78.cjs");
 exports.VwcTextAreaElement = require_definition.TextArea;
 exports.registerTextArea = require_definition.registerTextArea;
 exports.textAreaDefinition = require_definition.textAreaDefinition;

package/text-area/definition.js

@@ -1,2 +1,2 @@
-import { n as textAreaDefinition, r as TextArea, t as registerTextArea } from "../unbundled/definition76.js";
+import { n as textAreaDefinition, r as TextArea, t as registerTextArea } from "../unbundled/definition78.js";
 export { TextArea as VwcTextAreaElement, registerTextArea, textAreaDefinition };

package/time-picker/definition.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_time_selection_picker_template = require("../unbundled/time-selection-picker.template.cjs");
-const require_definition = require("../unbundled/definition77.cjs");
+const require_definition = require("../unbundled/definition79.cjs");
 exports.VwcTimePickerElement = require_time_selection_picker_template.TimePicker;
 exports.registerTimePicker = require_definition.registerTimePicker;
 exports.timePickerDefinition = require_definition.timePickerDefinition;

package/time-picker/definition.js

@@ -1,3 +1,3 @@
 import { n as TimePicker } from "../unbundled/time-selection-picker.template.js";
-import { n as timePickerDefinition, t as registerTimePicker } from "../unbundled/definition77.js";
+import { n as timePickerDefinition, t as registerTimePicker } from "../unbundled/definition79.js";
 export { TimePicker as VwcTimePickerElement, registerTimePicker, timePickerDefinition };

package/tree-item/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition78.cjs");
+const require_definition = require("../unbundled/definition80.cjs");
 exports.VwcTreeItemElement = require_definition.TreeItem;
 exports.registerTreeItem = require_definition.registerTreeItem;
 exports.treeItemDefinition = require_definition.treeItemDefinition;

package/tree-item/definition.js

@@ -1,2 +1,2 @@
-import { n as treeItemDefinition, r as TreeItem, t as registerTreeItem } from "../unbundled/definition78.js";
+import { n as treeItemDefinition, r as TreeItem, t as registerTreeItem } from "../unbundled/definition80.js";
 export { TreeItem as VwcTreeItemElement, registerTreeItem, treeItemDefinition };

package/tree-view/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition79.cjs");
+const require_definition = require("../unbundled/definition81.cjs");
 exports.VwcTreeViewElement = require_definition.TreeView;
 exports.registerTreeView = require_definition.registerTreeView;
 exports.treeViewDefinition = require_definition.treeViewDefinition;

package/tree-view/definition.js

@@ -1,2 +1,2 @@
-import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition79.js";
+import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition81.js";
 export { TreeView as VwcTreeViewElement, registerTreeView, treeViewDefinition };

package/unbundled/affix.cjs

@@ -1,6 +1,6 @@
 require("./chunk.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/affix.ts
 /**
@@ -43,7 +43,7 @@ var IconAriaHidden = {
 * @param context - element definition context
 */
 var affixIconTemplateFactory = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden, announcement = {
 		label: "",
 		announceOnUpdate: false

package/unbundled/affix.js

@@ -1,5 +1,5 @@
-import { r as Icon } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { attr, html, observable, slotted } from "@microsoft/fast-element";
 //#region src/shared/patterns/affix.ts
 /**

package/unbundled/base-progress.cjs

@@ -5,7 +5,7 @@ let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/foundation/progress/base-progress.ts
 /**
 * An Progress HTML Element.
-* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+* Implements the [ARIA progressbar](https://www.w3.org/TR/wai-aria-1.1/#progressbar).
 */
 var BaseProgress = class extends require_vivid_element.VividElement {
 	constructor(..._args) {

package/unbundled/base-progress.js

@@ -4,7 +4,7 @@ import { attr, nullableNumberConverter, observable } from "@microsoft/fast-eleme
 //#region src/shared/foundation/progress/base-progress.ts
 /**
 * An Progress HTML Element.
-* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+* Implements the [ARIA progressbar](https://www.w3.org/TR/wai-aria-1.1/#progressbar).
 */
 var BaseProgress = class extends VividElement {
 	constructor(..._args) {

package/unbundled/button.cjs

@@ -7,7 +7,7 @@ let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/foundation/button/button.ts
 /**
 * A Button Custom HTML Element.
-* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+* Based largely on the [`<button>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).
 *
 * @csspart control - The button element
 * @csspart content - The element wrapping button content
@@ -69,7 +69,7 @@ var VividFoundationButton = class extends require_delegates_aria.DelegatesAria(r
 		if (next === "reset") this.addEventListener("click", this.handleFormReset);
 		if (previous === "reset") this.removeEventListener("click", this.handleFormReset);
 	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
+	/** Validates the element against its constraints (e.g. `required`) and updates its validity state. */
 	validate() {
 		super.validate(this.control);
 	}

package/unbundled/button.js

@@ -6,7 +6,7 @@ import { Updates, attr } from "@microsoft/fast-element";
 //#region src/shared/foundation/button/button.ts
 /**
 * A Button Custom HTML Element.
-* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+* Based largely on the [`<button>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).
 *
 * @csspart control - The button element
 * @csspart content - The element wrapping button content
@@ -68,7 +68,7 @@ var VividFoundationButton = class extends DelegatesAria(FormAssociated(VividElem
 		if (next === "reset") this.addEventListener("click", this.handleFormReset);
 		if (previous === "reset") this.removeEventListener("click", this.handleFormReset);
 	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
+	/** Validates the element against its constraints (e.g. `required`) and updates its validity state. */
 	validate() {
 		super.validate(this.control);
 	}

package/unbundled/definition.cjs

@@ -1,68 +1,11 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_numberConverter = require("./numberConverter.cjs");
-const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/icon/icon.scss?inline
 var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
-//#region src/lib/icon/icon.ts
-var PLACEHOLDER_DELAY = 500;
-var PLACEHOLDER_TIMEOUT = 2e3;
-/**
-* @public
-* @component icon
-* @slot - Default slot.
-* @testQuery name name
-*/
-var Icon = class extends require_vivid_element.VividElement {
-	constructor(..._args) {
-		super(..._args);
-		this.iconLoaded = false;
-		this.#currentRequestId = 0;
-		this.#abortController = null;
-	}
-	#currentRequestId;
-	#abortController;
-	/** @internal */
-	async nameChanged() {
-		const requestId = ++this.#currentRequestId;
-		if (this.#abortController) this.#abortController.abort();
-		this.#abortController = new AbortController();
-		this._svg = void 0;
-		this.iconLoaded = false;
-		let timeout = setTimeout(() => {
-			/* v8 ignore else -- @preserve */
-			if (this.#currentRequestId === requestId) {
-				this._svg = require_numberConverter.PLACEHOLDER_ICON;
-				timeout = setTimeout(() => {
-					/* v8 ignore else -- @preserve */
-					if (this.#currentRequestId === requestId && this._svg === require_numberConverter.PLACEHOLDER_ICON) this._svg = void 0;
-				}, PLACEHOLDER_TIMEOUT);
-			}
-		}, PLACEHOLDER_DELAY);
-		try {
-			const svg = await require_numberConverter.resolveIcon(this.name, this.#abortController.signal);
-			/* v8 ignore else -- @preserve */
-			if (this.#currentRequestId === requestId) this._svg = svg;
-		} catch {
-			if (this.#currentRequestId === requestId) this._svg = void 0;
-		} finally {
-			if (this.#currentRequestId === requestId) {
-				clearTimeout(timeout);
-				this.iconLoaded = true;
-			}
-		}
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_numberConverter.numberConverter })], Icon.prototype, "size", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "_svg", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "iconLoaded", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "label", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "name", void 0);
-//#endregion
 //#region src/lib/icon/icon.template.ts
 var iconTemplate = () => {
 	const isDecorative = (x) => !x.label || x.label.trim().length === 0;
@@ -83,7 +26,7 @@ var iconTemplate = () => {
 //#endregion
 //#region src/lib/icon/definition.ts
 /** @internal */
-var iconDefinition = require_vivid_element.defineVividComponent("icon", Icon, iconTemplate, [], { styles: icon_default });
+var iconDefinition = require_vivid_element.defineVividComponent("icon", require_icon.Icon, iconTemplate, [], { styles: icon_default });
 /**
 * Registers the icon component & its prerequisite components with the design system.
 *
@@ -91,12 +34,6 @@ var iconDefinition = require_vivid_element.defineVividComponent("icon", Icon, ic
 */
 var registerIcon = require_vivid_element.createRegisterFunction(iconDefinition);
 //#endregion
-Object.defineProperty(exports, "Icon", {
-	enumerable: true,
-	get: function() {
-		return Icon;
-	}
-});
 Object.defineProperty(exports, "iconDefinition", {
 	enumerable: true,
 	get: function() {

package/unbundled/definition.js

@@ -1,67 +1,10 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
-import { t as __decorate } from "./decorate.js";
-import { attr, html, observable, when } from "@microsoft/fast-element";
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { t as Icon } from "./icon.js";
+import { html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/icon/icon.scss?inline
 var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
-//#region src/lib/icon/icon.ts
-var PLACEHOLDER_DELAY = 500;
-var PLACEHOLDER_TIMEOUT = 2e3;
-/**
-* @public
-* @component icon
-* @slot - Default slot.
-* @testQuery name name
-*/
-var Icon = class extends VividElement {
-	constructor(..._args) {
-		super(..._args);
-		this.iconLoaded = false;
-		this.#currentRequestId = 0;
-		this.#abortController = null;
-	}
-	#currentRequestId;
-	#abortController;
-	/** @internal */
-	async nameChanged() {
-		const requestId = ++this.#currentRequestId;
-		if (this.#abortController) this.#abortController.abort();
-		this.#abortController = new AbortController();
-		this._svg = void 0;
-		this.iconLoaded = false;
-		let timeout = setTimeout(() => {
-			/* v8 ignore else -- @preserve */
-			if (this.#currentRequestId === requestId) {
-				this._svg = PLACEHOLDER_ICON;
-				timeout = setTimeout(() => {
-					/* v8 ignore else -- @preserve */
-					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
-				}, PLACEHOLDER_TIMEOUT);
-			}
-		}, PLACEHOLDER_DELAY);
-		try {
-			const svg = await resolveIcon(this.name, this.#abortController.signal);
-			/* v8 ignore else -- @preserve */
-			if (this.#currentRequestId === requestId) this._svg = svg;
-		} catch {
-			if (this.#currentRequestId === requestId) this._svg = void 0;
-		} finally {
-			if (this.#currentRequestId === requestId) {
-				clearTimeout(timeout);
-				this.iconLoaded = true;
-			}
-		}
-	}
-};
-__decorate([attr], Icon.prototype, "connotation", void 0);
-__decorate([attr({ converter: numberConverter })], Icon.prototype, "size", void 0);
-__decorate([observable], Icon.prototype, "_svg", void 0);
-__decorate([observable], Icon.prototype, "iconLoaded", void 0);
-__decorate([attr], Icon.prototype, "label", void 0);
-__decorate([attr], Icon.prototype, "name", void 0);
-//#endregion
 //#region src/lib/icon/icon.template.ts
 var iconTemplate = () => {
 	const isDecorative = (x) => !x.label || x.label.trim().length === 0;
@@ -90,4 +33,4 @@ var iconDefinition = defineVividComponent("icon", Icon, iconTemplate, [], { styl
 */
 var registerIcon = createRegisterFunction(iconDefinition);
 //#endregion
-export { registerIcon as n, Icon as r, iconDefinition as t };
+export { registerIcon as n, iconDefinition as t };

package/unbundled/definition11.cjs

@@ -2,6 +2,7 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 const require_affix = require("./affix.cjs");
 const require_key_codes = require("./key-codes.cjs");
 const require_kbd_shortcut = require("./kbd-shortcut.cjs");
@@ -24,7 +25,7 @@ var MenuItemRole = {
 * @public
 * @component menu-item
 * @slot meta - Assign nodes to the `meta` slot to set a badge or an additional icon.
-* @slot trailing-meta - Assign nodes to the `meta` slot to set a badge or an additional icon.
+* @slot trailing-meta - Assign nodes to the `trailing-meta` slot to set a badge or an additional icon at the end of the Menu Item.
 * @slot submenu - Assign a Menu to the `submenu` slot to add a submenu.
 * @event {CustomEvent<HTMLElement>} expanded-change - Fired when the expanded state changes.
 * @event {CustomEvent<undefined>} change - Fired when the item is triggered. Does not fire when a submenu is collapsed or expanded.
@@ -212,7 +213,7 @@ var getIndicatorIcon = (x) => {
 	return `${x.controlType === "checkbox" ? "checkbox" : "radio"}-${x.checked ? "checked" : "unchecked"}-2-line`;
 };
 function checkIndicator(context) {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => Boolean(x.controlType), _microsoft_fast_element.html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;
 }
 function text() {
@@ -223,7 +224,7 @@ function text() {
 }
 var MenuItemTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
 		<template
 			${require_host_semantics.applyHostSemantics({

package/unbundled/definition11.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, n as replaces, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
 import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
 import { t as WithKbdShortcut } from "./kbd-shortcut.js";
@@ -23,7 +24,7 @@ var MenuItemRole = {
 * @public
 * @component menu-item
 * @slot meta - Assign nodes to the `meta` slot to set a badge or an additional icon.
-* @slot trailing-meta - Assign nodes to the `meta` slot to set a badge or an additional icon.
+* @slot trailing-meta - Assign nodes to the `trailing-meta` slot to set a badge or an additional icon at the end of the Menu Item.
 * @slot submenu - Assign a Menu to the `submenu` slot to add a submenu.
 * @event {CustomEvent<HTMLElement>} expanded-change - Fired when the expanded state changes.
 * @event {CustomEvent<undefined>} change - Fired when the item is triggered. Does not fire when a submenu is collapsed or expanded.

package/unbundled/definition12.cjs

@@ -161,6 +161,7 @@ var Menu = class extends require_anchored.Anchored(require_delegates_aria.Delega
 	get #triggerBehaviour() {
 		return this.trigger ?? "auto";
 	}
+	/** @internal */
 	openChanged(_, newValue) {
 		if (newValue) this._popupEl?.show().then(() => this.focus());
 		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
@@ -251,7 +252,7 @@ var MenuTemplate = (context) => {
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
 			>
 			<div class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["hide-header", !x.headerSlottedContent?.length], ["hide-actions", !x.actionItemsSlottedContent?.length], ["hide-body", x.items && !x.items.length])}">
-				<div class="header">
+				<div class="header" part="header">
 					<slot name="header" ${(0, _microsoft_fast_element.slotted)("headerSlottedContent")}></slot>
 				</div>
 				<div
@@ -263,7 +264,7 @@ var MenuTemplate = (context) => {
 				>
 					<slot ${(0, _microsoft_fast_element.slotted)("items")}></slot>
 				</div>
-				<footer class="action-items"><slot name="action-items"  ${(0, _microsoft_fast_element.slotted)("actionItemsSlottedContent")}></slot></footer>
+				<footer class="action-items" part="action-items"><slot name="action-items"  ${(0, _microsoft_fast_element.slotted)("actionItemsSlottedContent")}></slot></footer>
 			</div>
 		</${popupTag}>
 	</template>`;

package/unbundled/definition12.js

@@ -160,6 +160,7 @@ var Menu = class extends Anchored(DelegatesAria(VividElement)) {
 	get #triggerBehaviour() {
 		return this.trigger ?? "auto";
 	}
+	/** @internal */
 	openChanged(_, newValue) {
 		if (newValue) this._popupEl?.show().then(() => this.focus());
 		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
@@ -250,7 +251,7 @@ var MenuTemplate = (context) => {
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
 			>
 			<div class="${(x) => classNames("base", ["hide-header", !x.headerSlottedContent?.length], ["hide-actions", !x.actionItemsSlottedContent?.length], ["hide-body", x.items && !x.items.length])}">
-				<div class="header">
+				<div class="header" part="header">
 					<slot name="header" ${slotted("headerSlottedContent")}></slot>
 				</div>
 				<div
@@ -262,7 +263,7 @@ var MenuTemplate = (context) => {
 				>
 					<slot ${slotted("items")}></slot>
 				</div>
-				<footer class="action-items"><slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot></footer>
+				<footer class="action-items" part="action-items"><slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot></footer>
 			</div>
 		</${popupTag}>
 	</template>`;

package/unbundled/definition13.cjs

@@ -351,7 +351,7 @@ var AudioPlayerTemplate = (context) => {
 			</div>
 			${renderSlider(context)}
 			${(0, _microsoft_fast_element.when)((x) => Boolean(x.playbackRates), _microsoft_fast_element.html`
-			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/unbundled/definition13.js

@@ -350,7 +350,7 @@ var AudioPlayerTemplate = (context) => {
 			</div>
 			${renderSlider(context)}
 			${when((x) => Boolean(x.playbackRates), html`
-			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/unbundled/definition14.cjs

@@ -2,6 +2,7 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_linkable = require("./linkable.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
@@ -62,7 +63,7 @@ function renderAvatarBaseElement(x, content) {
 	else return _microsoft_fast_element.html`<span class="${getClasses}">${content}</span>`;
 }
 var AvatarTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
 		${(x) => renderAvatarBaseElement(x, _microsoft_fast_element.html`<slot name="graphic">
 					${(0, _microsoft_fast_element.when)((x) => x.initials, renderInitials())}

package/unbundled/definition14.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { n as delegateAria } from "./delegates-aria.js";
 import { t as Linkable } from "./linkable.js";
 import { attr, html, when } from "@microsoft/fast-element";