@vonage/vivid 5.19.0 → 5.20.0

package/tag/index.cjs

@@ -1,17 +1,17 @@
-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/definition2.cjs`),a=require(`../bundled/affix.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`);var c=class extends e.t(s.t(a.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&&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.u],c.prototype,`connotation`,void 0),r.t([t.u],c.prototype,`shape`,void 0),r.t([t.u],c.prototype,`appearance`,void 0),r.t([t.u],c.prototype,`label`,void 0),r.t([t.u({mode:`boolean`})],c.prototype,`removable`,void 0),r.t([t.u({mode:`boolean`})],c.prototype,`disabled`,void 0),r.t([t.u({mode:`boolean`})],c.prototype,`selectable`,void 0),r.t([t.u({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))}@supports (user-select:none){.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=({connotation:e,appearance:t,shape:n,disabled:r,selectable:i,removable:a,selected:s})=>o.t(`base`,[`disabled`,r],[`selectable`,i],[`selected`,i&&s],[`removable`,a&&!i],[`connotation-${e}`,!!e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n]);function d(e){return t.f`
+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/definition2.cjs`),a=require(`../bundled/affix.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`);var c=class extends e.t(s.t(a.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&&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))}@supports (user-select:none){.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=({connotation:e,appearance:t,shape:n,disabled:r,selectable:i,removable:a,selected:s})=>o.t(`base`,[`disabled`,r],[`selectable`,i],[`selected`,i&&s],[`removable`,a&&!i],[`connotation-${e}`,!!e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n]);function d(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.s(`tag`,c,e=>{let r=a.a(e),o=e.tagFor(i.r),c=t.f`
+	</button>`}var f=t.u(`tag`,c,e=>{let r=a.a(e),o=e.tagFor(i.r),c=t.p`
 		${e=>r(e.icon,a.i.Slot)}
-		${n.t(e=>e.label,e=>t.f`<span class="label">${e.label}</span>`)}
+		${n.t(e=>e.label,e=>t.p`<span class="label">${e.label}</span>`)}
 		${n.t(e=>e.removable&&!e.selectable,d(o))}
-		${n.t(e=>e.selectable&&e.selected,t.f`<${o} class="selectable-icon" name="check-circle-solid"></${o}>`)}
-	`;return t.f`
-		${n.t(e=>e.selectable,t.f`<button
+		${n.t(e=>e.selectable&&e.selected,t.p`<${o} class="selectable-icon" name="check-circle-solid"></${o}>`)}
+	`;return t.p`
+		${n.t(e=>e.selectable,t.p`<button
 				class="${u}"
 				${s.n({ariaPressed:e=>e.selected})}
 				?disabled="${e=>e.disabled}"
@@ -20,7 +20,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			>
 				${c}
 			</button>`)}
-		${n.t(e=>!e.selectable,t.f`<span
+		${n.t(e=>!e.selectable,t.p`<span
 				class="${u}"
 				${s.n()}
 				tabindex="${e=>e.disabled||e.removable?null:0}"
@@ -29,4 +29,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			>
 				${c}
 			</span>`)}
-	`},[i.t],{styles:l,shadowOptions:{delegatesFocus:!0}});t.c(f)();
+	`},[i.t],{styles:l,shadowOptions:{delegatesFocus:!0}});t.d(f)();

package/tag/index.js

@@ -1,5 +1,5 @@
 import { t as e } from "../bundled/localized.js";
-import { c as t, f as n, s as r, t as i, u as a } from "../bundled/vivid-element.js";
+import { d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
 import { t as o } from "../bundled/when.js";
 import { t as s } from "../bundled/decorate.js";
 import { r as c, t as l } from "../bundled/definition2.js";
@@ -24,12 +24,12 @@ var g = class extends e(h(f(i))) {
 		this.#e();
 	}
 };
-s([a], g.prototype, "connotation", void 0), s([a], g.prototype, "shape", void 0), s([a], g.prototype, "appearance", void 0), s([a], g.prototype, "label", void 0), s([a({ mode: "boolean" })], g.prototype, "removable", void 0), s([a({ mode: "boolean" })], g.prototype, "disabled", void 0), s([a({ mode: "boolean" })], g.prototype, "selectable", void 0), s([a({ mode: "boolean" })], g.prototype, "selected", void 0);
+s([n], g.prototype, "connotation", void 0), s([n], g.prototype, "shape", void 0), s([n], g.prototype, "appearance", void 0), s([n], g.prototype, "label", void 0), s([n({ mode: "boolean" })], g.prototype, "removable", void 0), s([n({ mode: "boolean" })], g.prototype, "disabled", void 0), s([n({ mode: "boolean" })], g.prototype, "selectable", void 0), s([n({ mode: "boolean" })], g.prototype, "selected", void 0);
 //#endregion
 //#region src/lib/tag/tag.scss?inline
 var _ = ".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))}@supports (user-select:none){.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))}", v = ({ connotation: e, appearance: t, shape: n, disabled: r, selectable: i, removable: a, selected: o }) => p("base", ["disabled", r], ["selectable", i], ["selected", i && o], ["removable", a && !i], [`connotation-${e}`, !!e], [`appearance-${t}`, !!t], [`shape-${n}`, !!n]);
 function y(e) {
-	return n`
+	return r`
 	<button
 		class="dismiss-button"
 		aria-label="${(e) => e.locale.tag.remove(e.label)}"
@@ -40,15 +40,15 @@ function y(e) {
 }
 //#endregion
 //#region src/lib/tag/index.ts
-t(r("tag", g, (e) => {
-	let t = u(e), r = e.tagFor(c), i = n`
+t(a("tag", g, (e) => {
+	let t = u(e), n = e.tagFor(c), i = r`
 		${(e) => t(e.icon, d.Slot)}
-		${o((e) => e.label, (e) => n`<span class="label">${e.label}</span>`)}
-		${o((e) => e.removable && !e.selectable, y(r))}
-		${o((e) => e.selectable && e.selected, n`<${r} class="selectable-icon" name="check-circle-solid"></${r}>`)}
+		${o((e) => e.label, (e) => r`<span class="label">${e.label}</span>`)}
+		${o((e) => e.removable && !e.selectable, y(n))}
+		${o((e) => e.selectable && e.selected, r`<${n} class="selectable-icon" name="check-circle-solid"></${n}>`)}
 	`;
-	return n`
-		${o((e) => e.selectable, n`<button
+	return r`
+		${o((e) => e.selectable, r`<button
 				class="${v}"
 				${m({ ariaPressed: (e) => e.selected })}
 				?disabled="${(e) => e.disabled}"
@@ -57,7 +57,7 @@ t(r("tag", g, (e) => {
 			>
 				${i}
 			</button>`)}
-		${o((e) => !e.selectable, n`<span
+		${o((e) => !e.selectable, r`<span
 				class="${v}"
 				${m()}
 				tabindex="${(e) => e.disabled || e.removable ? null : 0}"

package/tag-group/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition71.cjs");
+const require_definition = require("../unbundled/definition74.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/definition71.js";
+import { n as tagGroupDefinition, r as TagGroup, t as registerTagGroup } from "../unbundled/definition74.js";
 export { TagGroup as VwcTagGroupElement, registerTagGroup, tagGroupDefinition };

package/tag-group/index.cjs

@@ -1,8 +1,8 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/class-names.cjs`),n=require(`../bundled/delegates-aria.cjs`);var r=`.base{flex-wrap:wrap;gap:8px;display:flex}`,i=class extends n.t(e.t){},a=e.f`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/class-names.cjs`),n=require(`../bundled/delegates-aria.cjs`);var r=`.base{flex-wrap:wrap;gap:8px;display:flex}`,i=class extends n.t(e.t){},a=e.p`
 	<div
 		class="${e=>t.t(`base`)}"
 		${n.n({role:`group`})}
 	>
 		<slot></slot>
 	</div>
-`,o=e.s(`tag-group`,i,a,[],{styles:r});e.c(o)();
+`,o=e.u(`tag-group`,i,a,[],{styles:r});e.d(o)();

package/tag-group/index.js

@@ -1,9 +1,9 @@
-import { c as e, f as t, s as n, t as r } from "../bundled/vivid-element.js";
+import { d as e, p as t, t as n, u as r } from "../bundled/vivid-element.js";
 import { t as i } from "../bundled/class-names.js";
 import { n as a, t as o } from "../bundled/delegates-aria.js";
 //#endregion
 //#region src/lib/tag-group/index.ts
-e(n("tag-group", class extends o(r) {}, t`
+e(r("tag-group", class extends o(n) {}, t`
 	<div
 		class="${(e) => i("base")}"
 		${a({ role: "group" })}

package/text-area/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition73.cjs");
+const require_definition = require("../unbundled/definition76.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/definition73.js";
+import { n as textAreaDefinition, r as TextArea, t as registerTextArea } from "../unbundled/definition76.js";
 export { TextArea as VwcTextAreaElement, registerTextArea, textAreaDefinition };

package/text-area/index.cjs

@@ -1,16 +1,16 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/definition.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/form-element.cjs`),s=require(`../bundled/with-success-text.cjs`),c=require(`../bundled/with-error-text.cjs`),l=require(`../bundled/with-contextual-help.cjs`),u=require(`../bundled/class-names.cjs`),d=require(`../bundled/delegates-aria.cjs`),f=require(`../bundled/char-count.cjs`),p=require(`../bundled/form-associated.cjs`),m=require(`../bundled/mixins.cjs`),h=require(`../bundled/definition11.cjs`);var g=`.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{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base.connotation-success{--_connotation-color-primary:var(--vvd-text-area-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-text-area-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-intermediate:var(--vvd-text-area-success-intermediate,var(--vvd-color-success-500));--_connotation-color-firm:var(--vvd-text-area-success-firm,var(--vvd-color-success-600));--_connotation-color-fierce:var(--vvd-text-area-success-fierce,var(--vvd-color-success-700));--_connotation-color-faint:var(--vvd-text-area-success-faint,var(--vvd-color-success-50));--_connotation-color-soft:var(--vvd-text-area-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-text-area-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-text-area-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-intermediate:var(--vvd-text-area-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-firm:var(--vvd-text-area-alert-firm,var(--vvd-color-alert-600));--_connotation-color-fierce:var(--vvd-text-area-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-faint:var(--vvd-text-area-alert-faint,var(--vvd-color-alert-50));--_connotation-color-soft:var(--vvd-text-area-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary:var(--vvd-text-area-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-text-area-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-text-area-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-text-area-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-text-area-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-text-area-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-text-area-accent-soft,var(--vvd-color-neutral-100))}.base{grid-template-columns:1fr max-content;row-gap:4px;inline-size:100%;display:inline-grid}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-area:1/1/auto/2}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--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}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{box-sizing:border-box;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));resize:none;border:0;border-radius:8px;grid-column:1/-1;padding:8px 16px;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg, transparent 0, transparent 2px, var(--vvd-color-canvas-text) 2px, var(--vvd-color-canvas-text) 3px, transparent 3px, transparent 5px, var(--vvd-color-canvas-text) 5px, var(--vvd-color-canvas-text) 6px, transparent 6px, transparent 8px, transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control: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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}`,_=class{#e=new Map;#t;#n;constructor(e,t){this.#t=e,this.#n=t}attribute(e,t){this.#r(e,{type:`attribute`,destination:t})}booleanAttribute(e,t){this.#r(e,{type:`boolean-attribute`,destination:t})}property(e,t,n=!1){this.#r(e,{type:`property`,destination:t,skipIfEqual:n})}destroy(){let t=e.E.getNotifier(this.#t);for(let e of this.#e.keys())t.unsubscribe(this.#i,e);this.#e.clear()}#r(t,n){this.#e.set(t,n),e.E.getNotifier(this.#t).subscribe(this.#i,t),this.#i.handleChange(this.#t,t)}#i={handleChange:(t,n)=>{let r=this.#e.get(n),i=t[n];switch(r.type){case`boolean-attribute`:e.j.setBooleanAttribute(this.#n,r.destination,!!i);break;case`attribute`:e.j.setAttribute(this.#n,r.destination,i);break;case`property`:if(r.skipIfEqual&&this.#n[r.destination]===i)return;this.#n[r.destination]=i;break}}}},v={none:`none`,both:`both`,horizontal:`horizontal`,vertical:`vertical`},y=class extends l.t(m.t(f.t(c.t(s.t(o.t(d.t(p.n(e.t)))))))){constructor(...e){super(...e),this.proxy=document.createElement(`textarea`),this.resize=v.none,this.cols=20,this.handleTextInput=()=>{this.value=this.control.value}}readOnlyChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.readOnly=this.readOnly)}autofocusChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.autofocus=this.autofocus)}listChanged(){this.proxy instanceof HTMLTextAreaElement&&this.proxy.setAttribute(`list`,this.list)}maxlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.maxLength=this.maxlength)}minlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.minLength=this.minlength)}spellcheckChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.spellcheck=this.spellcheck)}select(){this.control.select()}valueChanged(e,t){super.valueChanged(e,t),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}#e;connectedCallback(){super.connectedCallback(),this.#e=new _(this,this.control),this.#e.property(`value`,`value`,!0),this._renderCharCountRemaining()}disconnectedCallback(){super.disconnectedCallback(),this.#e.destroy()}};a.t([e.u({mode:`boolean`})],y.prototype,`readOnly`,void 0),a.t([e.u],y.prototype,`resize`,void 0),a.t([e.u({mode:`boolean`})],y.prototype,`autofocus`,void 0),a.t([e.u({attribute:`form`})],y.prototype,`formId`,void 0),a.t([e.u],y.prototype,`list`,void 0),a.t([e.u({converter:e.d})],y.prototype,`maxlength`,void 0),a.t([e.u({converter:e.d})],y.prototype,`minlength`,void 0),a.t([e.u],y.prototype,`placeholder`,void 0),a.t([e.u({converter:e.d,mode:`fromView`})],y.prototype,`cols`,void 0),a.t([e.u({converter:e.d,mode:`fromView`})],y.prototype,`rows`,void 0),a.t([e.u({mode:`boolean`})],y.prototype,`spellcheck`,void 0),a.t([e.D],y.prototype,`defaultSlottedNodes`,void 0),a.t([e.u],y.prototype,`wrap`,void 0);var b=({value:e,errorValidationMessage:t,disabled:n,placeholder:r,readOnly:i,successText:a})=>u.t(`base`,[`readonly`,i],[`placeholder`,!!r],[`disabled`,n],[`error`,!!t],[`has-value`,!!e],[`success`,!!a]);function x(){return e.f` <label for="control" class="label">
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/definition.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/form-element.cjs`),s=require(`../bundled/with-success-text.cjs`),c=require(`../bundled/with-error-text.cjs`),l=require(`../bundled/with-contextual-help.cjs`),u=require(`../bundled/class-names.cjs`),d=require(`../bundled/delegates-aria.cjs`),f=require(`../bundled/char-count.cjs`),p=require(`../bundled/form-associated.cjs`),m=require(`../bundled/mixins.cjs`),h=require(`../bundled/definition11.cjs`);var g=`.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{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base.connotation-success{--_connotation-color-primary:var(--vvd-text-area-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-text-area-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-intermediate:var(--vvd-text-area-success-intermediate,var(--vvd-color-success-500));--_connotation-color-firm:var(--vvd-text-area-success-firm,var(--vvd-color-success-600));--_connotation-color-fierce:var(--vvd-text-area-success-fierce,var(--vvd-color-success-700));--_connotation-color-faint:var(--vvd-text-area-success-faint,var(--vvd-color-success-50));--_connotation-color-soft:var(--vvd-text-area-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-text-area-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-text-area-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-intermediate:var(--vvd-text-area-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-firm:var(--vvd-text-area-alert-firm,var(--vvd-color-alert-600));--_connotation-color-fierce:var(--vvd-text-area-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-faint:var(--vvd-text-area-alert-faint,var(--vvd-color-alert-50));--_connotation-color-soft:var(--vvd-text-area-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary:var(--vvd-text-area-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-text-area-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-text-area-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-text-area-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-text-area-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-text-area-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-text-area-accent-soft,var(--vvd-color-neutral-100))}.base{grid-template-columns:1fr max-content;row-gap:4px;inline-size:100%;display:inline-grid}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-area:1/1/auto/2}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--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}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{box-sizing:border-box;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));resize:none;border:0;border-radius:8px;grid-column:1/-1;padding:8px 16px;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg, transparent 0, transparent 2px, var(--vvd-color-canvas-text) 2px, var(--vvd-color-canvas-text) 3px, transparent 3px, transparent 5px, var(--vvd-color-canvas-text) 5px, var(--vvd-color-canvas-text) 6px, transparent 6px, transparent 8px, transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control: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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}`,_=class{#e=new Map;#t;#n;constructor(e,t){this.#t=e,this.#n=t}attribute(e,t){this.#r(e,{type:`attribute`,destination:t})}booleanAttribute(e,t){this.#r(e,{type:`boolean-attribute`,destination:t})}property(e,t,n=!1){this.#r(e,{type:`property`,destination:t,skipIfEqual:n})}destroy(){let t=e.k.getNotifier(this.#t);for(let e of this.#e.keys())t.unsubscribe(this.#i,e);this.#e.clear()}#r(t,n){this.#e.set(t,n),e.k.getNotifier(this.#t).subscribe(this.#i,t),this.#i.handleChange(this.#t,t)}#i={handleChange:(t,n)=>{let r=this.#e.get(n),i=t[n];switch(r.type){case`boolean-attribute`:e.P.setBooleanAttribute(this.#n,r.destination,!!i);break;case`attribute`:e.P.setAttribute(this.#n,r.destination,i);break;case`property`:if(r.skipIfEqual&&this.#n[r.destination]===i)return;this.#n[r.destination]=i;break}}}},v={none:`none`,both:`both`,horizontal:`horizontal`,vertical:`vertical`},y=class extends l.t(m.t(f.t(c.t(s.t(o.t(d.t(p.n(e.t)))))))){constructor(...e){super(...e),this.proxy=document.createElement(`textarea`),this.resize=v.none,this.cols=20,this.handleTextInput=()=>{this.value=this.control.value}}readOnlyChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.readOnly=this.readOnly)}autofocusChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.autofocus=this.autofocus)}listChanged(){this.proxy instanceof HTMLTextAreaElement&&this.proxy.setAttribute(`list`,this.list)}maxlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.maxLength=this.maxlength)}minlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.minLength=this.minlength)}spellcheckChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.spellcheck=this.spellcheck)}select(){this.control.select()}valueChanged(e,t){super.valueChanged(e,t),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}#e;connectedCallback(){super.connectedCallback(),this.#e=new _(this,this.control),this.#e.property(`value`,`value`,!0),this._renderCharCountRemaining()}disconnectedCallback(){super.disconnectedCallback(),this.#e.destroy()}};a.t([e.m({mode:`boolean`})],y.prototype,`readOnly`,void 0),a.t([e.m],y.prototype,`resize`,void 0),a.t([e.m({mode:`boolean`})],y.prototype,`autofocus`,void 0),a.t([e.m({attribute:`form`})],y.prototype,`formId`,void 0),a.t([e.m],y.prototype,`list`,void 0),a.t([e.m({converter:e.h})],y.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],y.prototype,`minlength`,void 0),a.t([e.m],y.prototype,`placeholder`,void 0),a.t([e.m({converter:e.h,mode:`fromView`})],y.prototype,`cols`,void 0),a.t([e.m({converter:e.h,mode:`fromView`})],y.prototype,`rows`,void 0),a.t([e.m({mode:`boolean`})],y.prototype,`spellcheck`,void 0),a.t([e.A],y.prototype,`defaultSlottedNodes`,void 0),a.t([e.m],y.prototype,`wrap`,void 0);var b=({value:e,errorValidationMessage:t,disabled:n,placeholder:r,readOnly:i,successText:a})=>u.t(`base`,[`readonly`,i],[`placeholder`,!!r],[`disabled`,n],[`error`,!!t],[`has-value`,!!e],[`success`,!!a]);function x(){return e.p` <label for="control" class="label">
 		${e=>e.label}
-	</label>`}var S=e.s(`text-area`,y,i=>e.f`
+	</label>`}var S=e.u(`text-area`,y,i=>e.p`
 		<div class="${b}">
-			${n.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
+			${r.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
 			<div
 				class="label-wrapper"
 				?hidden=${e=>!e.label&&!e._hasContextualHelp}
 			>
-				${n.t(e=>e.label,x())}
+				${r.t(e=>e.label,x())}
 				<slot
 					name="contextual-help"
-					${r.t(`_contextualHelpSlottedContent`)}
+					${t.t(`_contextualHelpSlottedContent`)}
 				></slot>
 			</div>
 			<textarea
@@ -29,13 +29,12 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 				?disabled="${e=>e.disabled}"
 				?required="${e=>e.required}"
 				?spellcheck="${e=>e.spellcheck}"
-				aria-describedby="${e=>e._feedbackDescribedBy} ${e=>e.charCount&&e.maxlength?e._charCountDescribedBy:null}"
-				${d.n()}
+				${d.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
 				@input="${e=>e.handleTextInput()}"
 				@change="${e=>e.handleChange()}"
-				${t.t(`control`)}
+				${n.t(`control`)}
 			>
 			</textarea>
 			${e=>e._getFeedbackTemplate(i)}
 		</div>
-	`,[m.a,i.n,h.t],{styles:g,shadowOptions:{delegatesFocus:!0}});e.c(S)();
+	`,[m.r,i.n,h.t],{styles:g,shadowOptions:{delegatesFocus:!0}});e.d(S)();

package/text-area/index.js

@@ -1,7 +1,7 @@
-import { D as e, E as t, c as n, d as r, f as i, j as a, s as o, t as s, u as c } from "../bundled/vivid-element.js";
-import { t as l } from "../bundled/ref.js";
-import { t as u } from "../bundled/when.js";
-import { t as d } from "../bundled/slotted.js";
+import { A as e, P as t, d as n, h as r, k as i, m as a, p as o, t as s, u as c } from "../bundled/vivid-element.js";
+import { t as l } from "../bundled/slotted.js";
+import { t as u } from "../bundled/ref.js";
+import { t as d } from "../bundled/when.js";
 import { n as f } from "../bundled/definition.js";
 import { t as p } from "../bundled/decorate.js";
 import { t as m } from "../bundled/form-element.js";
@@ -12,7 +12,7 @@ import { t as v } from "../bundled/class-names.js";
 import { n as y, t as b } from "../bundled/delegates-aria.js";
 import { t as x } from "../bundled/char-count.js";
 import { n as S } from "../bundled/form-associated.js";
-import { a as C, t as w } from "../bundled/mixins.js";
+import { r as C, t as w } from "../bundled/mixins.js";
 import { t as T } from "../bundled/definition11.js";
 //#region src/lib/text-area/text-area.scss?inline
 var E = ".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{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base.connotation-success{--_connotation-color-primary:var(--vvd-text-area-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-text-area-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-intermediate:var(--vvd-text-area-success-intermediate,var(--vvd-color-success-500));--_connotation-color-firm:var(--vvd-text-area-success-firm,var(--vvd-color-success-600));--_connotation-color-fierce:var(--vvd-text-area-success-fierce,var(--vvd-color-success-700));--_connotation-color-faint:var(--vvd-text-area-success-faint,var(--vvd-color-success-50));--_connotation-color-soft:var(--vvd-text-area-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-text-area-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-text-area-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-intermediate:var(--vvd-text-area-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-firm:var(--vvd-text-area-alert-firm,var(--vvd-color-alert-600));--_connotation-color-fierce:var(--vvd-text-area-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-faint:var(--vvd-text-area-alert-faint,var(--vvd-color-alert-50));--_connotation-color-soft:var(--vvd-text-area-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary:var(--vvd-text-area-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-text-area-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-area-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-text-area-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-text-area-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-text-area-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-text-area-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-text-area-accent-soft,var(--vvd-color-neutral-100))}.base{grid-template-columns:1fr max-content;row-gap:4px;inline-size:100%;display:inline-grid}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-area:1/1/auto/2}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--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}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{box-sizing:border-box;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));resize:none;border:0;border-radius:8px;grid-column:1/-1;padding:8px 16px;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg, transparent 0, transparent 2px, var(--vvd-color-canvas-text) 2px, var(--vvd-color-canvas-text) 3px, transparent 3px, transparent 5px, var(--vvd-color-canvas-text) 5px, var(--vvd-color-canvas-text) 6px, transparent 6px, transparent 8px, transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control: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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}", D = class {
@@ -42,25 +42,25 @@ var E = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		});
 	}
 	destroy() {
-		let e = t.getNotifier(this.#t);
+		let e = i.getNotifier(this.#t);
 		for (let t of this.#e.keys()) e.unsubscribe(this.#i, t);
 		this.#e.clear();
 	}
-	#r(e, n) {
-		this.#e.set(e, n), t.getNotifier(this.#t).subscribe(this.#i, e), this.#i.handleChange(this.#t, e);
+	#r(e, t) {
+		this.#e.set(e, t), i.getNotifier(this.#t).subscribe(this.#i, e), this.#i.handleChange(this.#t, e);
 	}
-	#i = { handleChange: (e, t) => {
-		let n = this.#e.get(t), r = e[t];
-		switch (n.type) {
+	#i = { handleChange: (e, n) => {
+		let r = this.#e.get(n), i = e[n];
+		switch (r.type) {
 			case "boolean-attribute":
-				a.setBooleanAttribute(this.#n, n.destination, !!r);
+				t.setBooleanAttribute(this.#n, r.destination, !!i);
 				break;
 			case "attribute":
-				a.setAttribute(this.#n, n.destination, r);
+				t.setAttribute(this.#n, r.destination, i);
 				break;
 			case "property":
-				if (n.skipIfEqual && this.#n[n.destination] === r) return;
-				this.#n[n.destination] = r;
+				if (r.skipIfEqual && this.#n[r.destination] === i) return;
+				this.#n[r.destination] = i;
 				break;
 		}
 	} };
@@ -119,34 +119,34 @@ var E = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		super.disconnectedCallback(), this.#e.destroy();
 	}
 };
-p([c({ mode: "boolean" })], k.prototype, "readOnly", void 0), p([c], k.prototype, "resize", void 0), p([c({ mode: "boolean" })], k.prototype, "autofocus", void 0), p([c({ attribute: "form" })], k.prototype, "formId", void 0), p([c], k.prototype, "list", void 0), p([c({ converter: r })], k.prototype, "maxlength", void 0), p([c({ converter: r })], k.prototype, "minlength", void 0), p([c], k.prototype, "placeholder", void 0), p([c({
+p([a({ mode: "boolean" })], k.prototype, "readOnly", void 0), p([a], k.prototype, "resize", void 0), p([a({ mode: "boolean" })], k.prototype, "autofocus", void 0), p([a({ attribute: "form" })], k.prototype, "formId", void 0), p([a], k.prototype, "list", void 0), p([a({ converter: r })], k.prototype, "maxlength", void 0), p([a({ converter: r })], k.prototype, "minlength", void 0), p([a], k.prototype, "placeholder", void 0), p([a({
 	converter: r,
 	mode: "fromView"
-})], k.prototype, "cols", void 0), p([c({
+})], k.prototype, "cols", void 0), p([a({
 	converter: r,
 	mode: "fromView"
-})], k.prototype, "rows", void 0), p([c({ mode: "boolean" })], k.prototype, "spellcheck", void 0), p([e], k.prototype, "defaultSlottedNodes", void 0), p([c], k.prototype, "wrap", void 0);
+})], k.prototype, "rows", void 0), p([a({ mode: "boolean" })], k.prototype, "spellcheck", void 0), p([e], k.prototype, "defaultSlottedNodes", void 0), p([a], k.prototype, "wrap", void 0);
 //#endregion
 //#region src/lib/text-area/text-area.template.ts
 var A = ({ value: e, errorValidationMessage: t, disabled: n, placeholder: r, readOnly: i, successText: a }) => v("base", ["readonly", i], ["placeholder", !!r], ["disabled", n], ["error", !!t], ["has-value", !!e], ["success", !!a]);
 function j() {
-	return i` <label for="control" class="label">
+	return o` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
 //#endregion
 //#region src/lib/text-area/index.ts
-n(o("text-area", k, (e) => i`
+n(c("text-area", k, (e) => o`
 		<div class="${A}">
-			${u((e) => e.charCount && e.maxlength, (t) => t._getCharCountTemplate(e))}
+			${d((e) => e.charCount && e.maxlength, (t) => t._getCharCountTemplate(e))}
 			<div
 				class="label-wrapper"
 				?hidden=${(e) => !e.label && !e._hasContextualHelp}
 			>
-				${u((e) => e.label, j())}
+				${d((e) => e.label, j())}
 				<slot
 					name="contextual-help"
-					${d("_contextualHelpSlottedContent")}
+					${l("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
 			<textarea
@@ -165,11 +165,10 @@ n(o("text-area", k, (e) => i`
 				?disabled="${(e) => e.disabled}"
 				?required="${(e) => e.required}"
 				?spellcheck="${(e) => e.spellcheck}"
-				aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.charCount && e.maxlength ? e._charCountDescribedBy : null}"
-				${y()}
+				${y({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
 				@input="${(e) => e.handleTextInput()}"
 				@change="${(e) => e.handleChange()}"
-				${l("control")}
+				${u("control")}
 			>
 			</textarea>
 			${(t) => t._getFeedbackTemplate(e)}

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/definition74.cjs");
+const require_definition = require("../unbundled/definition77.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/definition74.js";
+import { n as timePickerDefinition, t as registerTimePicker } from "../unbundled/definition77.js";
 export { TimePicker as VwcTimePickerElement, registerTimePicker, timePickerDefinition };

package/time-picker/index.cjs

@@ -1 +1 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`),n=require(`../bundled/definition6.cjs`),r=require(`../bundled/definition8.cjs`),i=require(`../bundled/definition12.cjs`),a=require(`../bundled/picker-field.template.cjs`),o=require(`../bundled/time-selection-picker.template.cjs`);var s=e.s(`time-picker`,o.n,e=>a.t(e,o.t(e,6),{withSeparator:!0,padded:!1}),[i.n,r.t,n.t,o.s,t.n],{styles:a.r,shadowOptions:{delegatesFocus:!0}});e.c(s)();
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`),n=require(`../bundled/definition6.cjs`),r=require(`../bundled/definition8.cjs`),i=require(`../bundled/definition12.cjs`),a=require(`../bundled/picker-field.template.cjs`),o=require(`../bundled/time-selection-picker.template.cjs`);var s=e.u(`time-picker`,o.n,e=>a.t(e,o.t(e,6),{withSeparator:!0,padded:!1}),[i.n,r.t,n.t,o.s,t.n],{styles:a.r,shadowOptions:{delegatesFocus:!0}});e.d(s)();

package/time-picker/index.js

@@ -1,4 +1,4 @@
-import { c as e, s as t } from "../bundled/vivid-element.js";
+import { d as e, u as t } from "../bundled/vivid-element.js";
 import { n } from "../bundled/definition.js";
 import { t as r } from "../bundled/definition6.js";
 import { t as i } from "../bundled/definition8.js";

package/tree-item/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition75.cjs");
+const require_definition = require("../unbundled/definition78.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/definition75.js";
+import { n as treeItemDefinition, r as TreeItem, t as registerTreeItem } from "../unbundled/definition78.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/definition76.cjs");
+const require_definition = require("../unbundled/definition79.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/definition76.js";
+import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition79.js";
 export { TreeView as VwcTreeViewElement, registerTreeView, treeViewDefinition };

package/tree-view/index.cjs

@@ -1,5 +1,5 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dom.cjs`),o=require(`../bundled/key-codes.cjs`),s=require(`../bundled/definition4.cjs`),c=require(`../bundled/host-semantics.cjs`);var l=`.control{flex-direction:column;gap:4px;display:flex;position:relative}`;function u(e,t){return a.t(e)?Array.from(e.querySelectorAll(t)).filter(e=>{if(e.parentElement instanceof s.r){if(e.parentElement.expanded)return!0}else return!0;return!1}):[]}var d=class extends c.t(e.t){constructor(...e){super(...e),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&s.r.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute(`tabindex`,`-1`),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabindex`,`0`)},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){let t=this.getVisibleNodes();switch(e.key){case o.s:t.length&&s.r.focusItem(t[0]);return;case`End`:t.length&&s.r.focusItem(t[t.length-1]);return;case o.n:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&t.expanded?t.expanded=!1:t instanceof s.r&&t.parentElement instanceof s.r&&s.r.focusItem(t.parentElement)}return!1;case o.r:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&!t.expanded?t.expanded=!0:t instanceof s.r&&t.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case o.t:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case o.i:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case o.a:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{let e=this.treeView.querySelector(`[selected]`);this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(e=>{s.i(e)&&(e.nested=this.nested)})},this.isFocusableElement=e=>s.i(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute(`tabindex`,`0`),e.A.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){let n=this.getVisibleNodes();if(n){let r=n[n.indexOf(t)+e];a.t(r)&&s.r.focusItem(r)}}getValidFocusableItem(){let e=this.getVisibleNodes(),t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t===-1?null:e[t]}checkForNestedItems(){return this.slottedTreeItems.some(e=>s.i(e)&&e.querySelector(`[data-vvd-component='tree-item']`))}getVisibleNodes(){return u(this,`[data-vvd-component='tree-item']`)}};r.t([e.u({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.D],d.prototype,`currentSelected`,void 0),r.t([e.D],d.prototype,`slottedTreeItems`,void 0);var f=e.f` <template
-	${t.t(`treeView`)}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dom.cjs`),o=require(`../bundled/key-codes.cjs`),s=require(`../bundled/definition4.cjs`),c=require(`../bundled/host-semantics.cjs`);var l=`.control{flex-direction:column;gap:4px;display:flex;position:relative}`;function u(e,t){return a.t(e)?Array.from(e.querySelectorAll(t)).filter(e=>{if(e.parentElement instanceof s.r){if(e.parentElement.expanded)return!0}else return!0;return!1}):[]}var d=class extends c.t(e.t){constructor(...e){super(...e),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&s.r.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute(`tabindex`,`-1`),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabindex`,`0`)},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){let t=this.getVisibleNodes();switch(e.key){case o.s:t.length&&s.r.focusItem(t[0]);return;case`End`:t.length&&s.r.focusItem(t[t.length-1]);return;case o.n:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&t.expanded?t.expanded=!1:t instanceof s.r&&t.parentElement instanceof s.r&&s.r.focusItem(t.parentElement)}return!1;case o.r:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&!t.expanded?t.expanded=!0:t instanceof s.r&&t.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case o.t:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case o.i:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case o.a:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{let e=this.treeView.querySelector(`[selected]`);this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(e=>{s.i(e)&&(e.nested=this.nested)})},this.isFocusableElement=e=>s.i(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute(`tabindex`,`0`),e.M.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){let n=this.getVisibleNodes();if(n){let r=n[n.indexOf(t)+e];a.t(r)&&s.r.focusItem(r)}}getValidFocusableItem(){let e=this.getVisibleNodes(),t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t===-1?null:e[t]}checkForNestedItems(){return this.slottedTreeItems.some(e=>s.i(e)&&e.querySelector(`[data-vvd-component='tree-item']`))}getVisibleNodes(){return u(this,`[data-vvd-component='tree-item']`)}};r.t([e.m({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.A],d.prototype,`currentSelected`,void 0),r.t([e.A],d.prototype,`slottedTreeItems`,void 0);var f=e.p` <template
+	${n.t(`treeView`)}
 	${c.n({role:`tree`})}
 	@keydown="${(e,t)=>e.handleKeyDown(t.event)}"
 	@focusin="${(e,t)=>e.handleFocus(t.event)}"
@@ -8,6 +8,6 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 	@selected-change="${(e,t)=>e.handleSelectedChange(t.event)}"
 >
 	<div class="${e=>i.t(`control`)}">
-		<slot ${n.t(`slottedTreeItems`)}></slot>
+		<slot ${t.t(`slottedTreeItems`)}></slot>
 	</div>
-</template>`,p=e.s(`tree-view`,d,f,[s.n],{styles:l});e.c(p)();
+</template>`,p=e.u(`tree-view`,d,f,[s.n],{styles:l});e.d(p)();

package/tree-view/index.js

@@ -1,6 +1,6 @@
-import { A as e, D as t, c as n, f as r, s as i, t as a, u as o } from "../bundled/vivid-element.js";
-import { t as s } from "../bundled/ref.js";
-import { t as c } from "../bundled/slotted.js";
+import { A as e, M as t, d as n, m as r, p as i, t as a, u as o } from "../bundled/vivid-element.js";
+import { t as s } from "../bundled/slotted.js";
+import { t as c } from "../bundled/ref.js";
 import { t as l } from "../bundled/decorate.js";
 import { t as u } from "../bundled/class-names.js";
 import { t as d } from "../bundled/dom.js";
@@ -98,7 +98,7 @@ var T = class extends S(a) {
 		this.$fastController.isConnected && this.setItems();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.setAttribute("tabindex", "0"), e.enqueue(() => {
+		super.connectedCallback(), this.setAttribute("tabindex", "0"), t.enqueue(() => {
 			this.setItems();
 		});
 	}
@@ -132,8 +132,8 @@ var T = class extends S(a) {
 };
 //#endregion
 //#region src/lib/tree-view/index.ts
-l([o({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNodes", void 0), l([t], T.prototype, "currentSelected", void 0), l([t], T.prototype, "slottedTreeItems", void 0), n(i("tree-view", T, r` <template
-	${s("treeView")}
+l([r({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNodes", void 0), l([e], T.prototype, "currentSelected", void 0), l([e], T.prototype, "slottedTreeItems", void 0), n(o("tree-view", T, i` <template
+	${c("treeView")}
 	${x({ role: "tree" })}
 	@keydown="${(e, t) => e.handleKeyDown(t.event)}"
 	@focusin="${(e, t) => e.handleFocus(t.event)}"
@@ -142,7 +142,7 @@ l([o({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNod
 	@selected-change="${(e, t) => e.handleSelectedChange(t.event)}"
 >
 	<div class="${(e) => u("control")}">
-		<slot ${c("slottedTreeItems")}></slot>
+		<slot ${s("slottedTreeItems")}></slot>
 	</div>
 </template>`, [y], { styles: C }))();
 //#endregion

package/unbundled/affix.cjs

@@ -1,5 +1,5 @@
 require("./chunk.cjs");
-const require_definition = require("./definition2.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/affix.ts