@vonage/vivid 5.19.0 → 5.20.1

package/banner/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/delegates-aria.cjs`),u=require(`../bundled/definition6.cjs`);var d=`:host{display:block}.control.connotation-success{--_connotation-color-primary:var(--vvd-banner-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-banner-success-primary-text,var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-banner-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-banner-alert-primary-text,var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-banner-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-banner-announcement-primary-text,var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-banner-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-banner-warning-primary-text,var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary:var(--vvd-banner-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-banner-information-primary-text,var(--vvd-color-canvas))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;background-color:var(--_appearance-color-fill);max-height:160px;color:var(--_appearance-color-text);transition:max-height var(--transition-delay,.2s);overflow:hidden}.control.removing{max-height:0}.header{box-sizing:border-box;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20));align-items:center;display:flex}.header .content{flex-grow:1;justify-content:center;align-items:center;column-gap:16px;inline-size:100%;padding:10px 16px;display:flex}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}`,f={[i.n.Information]:`info-solid`,[i.n.Announcement]:`megaphone-solid`,[i.n.Success]:`check-circle-solid`,[i.n.Warning]:`warning-solid`,[i.n.Alert]:`error-solid`},p=(e=i.n.Information)=>f[e],m=class extends s.t(e.t(l.t(t.t))){constructor(...e){super(...e),this.dismissButtonAriaLabel=null,this.removable=!1,this.#e=()=>{this.$emit(`removed`),this.parentElement&&this.parentElement.removeChild(this)},this.#t=e=>{e.key!==`Escape`||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??p(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,this.#t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`keydown`,this.#t)}remove(){this.$emit(`removing`);let e=this.shadowRoot&&this.shadowRoot.querySelector(`.control`);e?.classList.add(`removing`),e?.addEventListener(`transitionend`,this.#e)}#e;#t};a.t([t.u({attribute:`dismiss-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.u({mode:`boolean`})],m.prototype,`removable`,void 0),a.t([t.u()],m.prototype,`text`,void 0),a.t([t.u()],m.prototype,`connotation`,void 0),a.t([t.D],m.prototype,`actionItemsSlottedContent`,void 0);var h=e=>c.t(`control`,[`connotation-${e.connotation}`,!!e.connotation]);function g(e){return t.f`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/delegates-aria.cjs`),u=require(`../bundled/definition6.cjs`);var d=`:host{display:block}.control.connotation-success{--_connotation-color-primary:var(--vvd-banner-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-banner-success-primary-text,var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-banner-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-banner-alert-primary-text,var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-banner-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-banner-announcement-primary-text,var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-banner-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-banner-warning-primary-text,var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary:var(--vvd-banner-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-banner-information-primary-text,var(--vvd-color-canvas))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;background-color:var(--_appearance-color-fill);max-height:160px;color:var(--_appearance-color-text);transition:max-height var(--transition-delay,.2s);overflow:hidden}.control.removing{max-height:0}.header{box-sizing:border-box;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20));align-items:center;display:flex}.header .content{flex-grow:1;justify-content:center;align-items:center;column-gap:16px;inline-size:100%;padding:10px 16px;display:flex}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}`,f={[i.n.Information]:`info-solid`,[i.n.Announcement]:`megaphone-solid`,[i.n.Success]:`check-circle-solid`,[i.n.Warning]:`warning-solid`,[i.n.Alert]:`error-solid`},p=(e=i.n.Information)=>f[e],m=class extends s.t(e.t(l.t(t.t))){constructor(...e){super(...e),this.dismissButtonAriaLabel=null,this.removable=!1,this.#e=()=>{this.$emit(`removed`),this.parentElement&&this.parentElement.removeChild(this)},this.#t=e=>{e.key!==`Escape`||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??p(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,this.#t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`keydown`,this.#t)}remove(){this.$emit(`removing`);let e=this.shadowRoot&&this.shadowRoot.querySelector(`.control`);e?.classList.add(`removing`),e?.addEventListener(`transitionend`,this.#e)}#e;#t};a.t([t.m({attribute:`dismiss-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],m.prototype,`removable`,void 0),a.t([t.m()],m.prototype,`text`,void 0),a.t([t.m()],m.prototype,`connotation`,void 0),a.t([t.A],m.prototype,`actionItemsSlottedContent`,void 0);var h=e=>c.t(`control`,[`connotation-${e.connotation}`,!!e.connotation]);function g(e){return t.p`
 	  <${e}
 	  		aria-label="${e=>e.dismissButtonAriaLabel||e.locale.banner.dismissButtonLabel}"
 			part="${e=>e.connotation===`warning`?``:`vvd-theme-alternate`}"
@@ -6,7 +6,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			class="dismiss-button"
 			icon="close-line"
 			@click="${e=>e.remove()}">
-	  </${e}>`}var _=(e,t)=>{let n=s.a(e),r=t.conditionedIcon,i=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!1}:void 0;return n(r,s.i.Slot,s.r.Hidden,i)},v=t.s(`banner`,m,e=>{let i=e.tagFor(u.i);return t.f`
+	  </${e}>`}var _=(e,t)=>{let n=s.a(e),r=t.conditionedIcon,i=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!1}:void 0;return n(r,s.i.Slot,s.r.Hidden,i)},v=t.u(`banner`,m,e=>{let i=e.tagFor(u.i);return t.p`
 		<div class="${h}">
 			<header class="header">
 				<div class="content">
@@ -19,12 +19,12 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					</div>
 					<slot
 						class="action-items"
-						${r.t(`actionItemsSlottedContent`)}
+						${n.t(`actionItemsSlottedContent`)}
 						name="action-items"
 					></slot>
 				</div>
 
-				${n.t(e=>e.removable,g(i))}
+				${r.t(e=>e.removable,g(i))}
 			</header>
 		</div>
-	`},[o.t,u.t],{styles:d});t.c(v)();
+	`},[o.t,u.t],{styles:d});t.d(v)();

package/banner/index.js

@@ -1,7 +1,7 @@
 import { t as e } from "../bundled/localized.js";
-import { 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/when.js";
-import { t as c } from "../bundled/slotted.js";
+import { A 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/when.js";
 import { n as l } from "../bundled/enums.js";
 import { t as u } from "../bundled/decorate.js";
 import { t as d } from "../bundled/definition2.js";
@@ -41,12 +41,12 @@ var x = ":host{display:block}.control.connotation-success{--_connotation-color-p
 	#e;
 	#t;
 };
-u([o({ attribute: "dismiss-aria-label" })], w.prototype, "dismissButtonAriaLabel", void 0), u([o({ mode: "boolean" })], w.prototype, "removable", void 0), u([o()], w.prototype, "text", void 0), u([o()], w.prototype, "connotation", void 0), u([t], w.prototype, "actionItemsSlottedContent", void 0);
+u([r({ attribute: "dismiss-aria-label" })], w.prototype, "dismissButtonAriaLabel", void 0), u([r({ mode: "boolean" })], w.prototype, "removable", void 0), u([r()], w.prototype, "text", void 0), u([r()], w.prototype, "connotation", void 0), u([t], w.prototype, "actionItemsSlottedContent", void 0);
 //#endregion
 //#region src/lib/banner/banner.template.ts
 var T = (e) => g("control", [`connotation-${e.connotation}`, !!e.connotation]);
 function E(e) {
-	return r`
+	return i`
 	  <${e}
 	  		aria-label="${(e) => e.dismissButtonAriaLabel || e.locale.banner.dismissButtonLabel}"
 			part="${(e) => e.connotation === "warning" ? "" : "vvd-theme-alternate"}"
@@ -65,9 +65,9 @@ var D = (e, t) => {
 };
 //#endregion
 //#region src/lib/banner/index.ts
-n(i("banner", w, (e) => {
+n(o("banner", w, (e) => {
 	let t = e.tagFor(y);
-	return r`
+	return i`
 		<div class="${T}">
 			<header class="header">
 				<div class="content">
@@ -83,12 +83,12 @@ n(i("banner", w, (e) => {
 					</div>
 					<slot
 						class="action-items"
-						${c("actionItemsSlottedContent")}
+						${s("actionItemsSlottedContent")}
 						name="action-items"
 					></slot>
 				</div>
 
-				${s((e) => e.removable, E(t))}
+				${c((e) => e.removable, E(t))}
 			</header>
 		</div>
 	`;

package/breadcrumb/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/breadcrumb-item.cjs`);var a=e.f`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/breadcrumb-item.cjs`);var a=e.p`
 	<nav
 		class="base"
 		${r.n({ariaLabel:e=>e.ariaLabel||`breadcrumbs`})}
@@ -9,4 +9,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cj
 			></slot>
 		</div>
 	</nav>
-`,o=`.list{display:flex}`,s=class extends r.t(e.t){slottedBreadcrumbItemsChanged(e,t){t&&t.forEach((e,n)=>{let r=n===t.length-1;this.setItemSeparator(e,r),this.setAriaCurrent(e,r)})}setItemSeparator(e,t){e instanceof i.t&&(e.separator=!t)}findChildWithHref(e){return e.childElementCount>0?e.querySelector(`a[href]`):e.shadowRoot?e.shadowRoot.querySelector(`a[href]`):null}setAriaCurrent(e,t){let n=this.findChildWithHref(e);n!==null&&(t?n.setAttribute(`aria-current`,`page`):n.removeAttribute(`aria-current`))}};n.t([e.D],s.prototype,`slottedBreadcrumbItems`,void 0);var c=e.s(`breadcrumb`,s,a,[],{styles:o});e.c(c)();
+`,o=`.list{display:flex}`,s=class extends r.t(e.t){slottedBreadcrumbItemsChanged(e,t){t&&t.forEach((e,n)=>{let r=n===t.length-1;this.setItemSeparator(e,r),this.setAriaCurrent(e,r)})}setItemSeparator(e,t){e instanceof i.t&&(e.separator=!t)}findChildWithHref(e){return e.childElementCount>0?e.querySelector(`a[href]`):e.shadowRoot?e.shadowRoot.querySelector(`a[href]`):null}setAriaCurrent(e,t){let n=this.findChildWithHref(e);n!==null&&(t?n.setAttribute(`aria-current`,`page`):n.removeAttribute(`aria-current`))}};n.t([e.A],s.prototype,`slottedBreadcrumbItems`,void 0);var c=e.u(`breadcrumb`,s,a,[],{styles:o});e.d(c)();

package/breadcrumb/index.js

@@ -1,4 +1,4 @@
-import { D as e, c as t, f as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { A as e, d as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
 import { r as a, t as o } from "../bundled/slotted.js";
 import { t as s } from "../bundled/decorate.js";
 import { n as c, t as l } from "../bundled/delegates-aria.js";
@@ -18,7 +18,7 @@ var d = n`
 			></slot>
 		</div>
 	</nav>
-`, f = ".list{display:flex}", p = class extends l(i) {
+`, f = ".list{display:flex}", p = class extends l(r) {
 	slottedBreadcrumbItemsChanged(e, t) {
 		/* v8 ignore else -- @preserve */
 		t && t.forEach((e, n) => {
@@ -39,5 +39,5 @@ var d = n`
 };
 //#endregion
 //#region src/lib/breadcrumb/index.ts
-s([e], p.prototype, "slottedBreadcrumbItems", void 0), t(r("breadcrumb", p, d, [], { styles: f }))();
+s([e], p.prototype, "slottedBreadcrumbItems", void 0), t(i("breadcrumb", p, d, [], { styles: f }))();
 //#endregion

package/breadcrumb-item/index.cjs

@@ -1,5 +1,5 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/breadcrumb-item.cjs`);var a=`.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}`,o=e=>r.t(`base`),s=e.s(`breadcrumb-item`,i.t,r=>{let i=r.tagFor(n.r);return e.f` <div role="listitem" class="${o}">
-		${t.t(e=>e.text&&!e.href,e.f`${e=>e.text}`)}
-		${t.t(e=>e.text&&e.href&&e.href.length>0,e.f`${t=>t._renderLinkElement(e.f`${e=>e.text}`,`control`)}`)}
-		${t.t(e=>e.separator,e.f`<${i} class="separator" name="chevron-right-solid"></${i}>`)}
-	</div>`},[n.t],{styles:a,shadowOptions:{delegatesFocus:!0}});e.c(s)();
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/breadcrumb-item.cjs`);var a=`.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}`,o=e=>r.t(`base`),s=e.u(`breadcrumb-item`,i.t,r=>{let i=r.tagFor(n.r);return e.p` <div role="listitem" class="${o}">
+		${t.t(e=>e.text&&!e.href,e.p`${e=>e.text}`)}
+		${t.t(e=>e.text&&e.href&&e.href.length>0,e.p`${t=>t._renderLinkElement(e.p`${e=>e.text}`,`control`)}`)}
+		${t.t(e=>e.separator,e.p`<${i} class="separator" name="chevron-right-solid"></${i}>`)}
+	</div>`},[n.t],{styles:a,shadowOptions:{delegatesFocus:!0}});e.d(s)();

package/breadcrumb-item/index.js

@@ -1,4 +1,4 @@
-import { c as e, f as t, s as n } from "../bundled/vivid-element.js";
+import { d as e, p as t, u as n } from "../bundled/vivid-element.js";
 import { t as r } from "../bundled/when.js";
 import { r as i, t as a } from "../bundled/definition2.js";
 import { t as o } from "../bundled/class-names.js";

package/bundled/affix.cjs

@@ -1,8 +1,8 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./definition2.cjs`);var i=t=>{class r extends t{}return n.t([e.u],r.prototype,`icon`,void 0),n.t([e.D],r.prototype,`iconSlottedContent`,void 0),r},a=t=>{class r extends i(t){constructor(...e){super(...e),this.iconTrailing=!1}}return n.t([e.u({mode:`boolean`,attribute:`icon-trailing`})],r.prototype,`iconTrailing`,void 0),r},o={Slot:!1,Span:!0},s={Hidden:`true`,Visible:`false`},c=n=>{let i=n.tagFor(r.r);return(n,r=o.Span,a=s.Hidden,c={label:``,announceOnUpdate:!1})=>{if(!n&&!r)return e.f`<slot
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./definition2.cjs`);var i=t=>{class r extends t{}return n.t([e.m],r.prototype,`icon`,void 0),n.t([e.A],r.prototype,`iconSlottedContent`,void 0),r},a=t=>{class r extends i(t){constructor(...e){super(...e),this.iconTrailing=!1}}return n.t([e.m({mode:`boolean`,attribute:`icon-trailing`})],r.prototype,`iconTrailing`,void 0),r},o={Slot:!1,Span:!0},s={Hidden:`true`,Visible:`false`},c=n=>{let i=n.tagFor(r.r);return(n,r=o.Span,a=s.Hidden,c={label:``,announceOnUpdate:!1})=>{if(!n&&!r)return e.p`<slot
 				name="icon"
 				aria-hidden="${()=>a}"
 				${t.t(`iconSlottedContent`)}
-			></slot>`;if(!n&&r)return null;let l=e.f`<${i} :name="${()=>n}" :label="${()=>c?.label||void 0}"></${i}>`,u=e.f.partial(r?`span`:`slot`);return e.f`<${u}
+			></slot>`;if(!n&&r)return null;let l=e.p`<${i} :name="${()=>n}" :label="${()=>c?.label||void 0}"></${i}>`,u=e.p.partial(r?`span`:`slot`);return e.p`<${u}
 					class="${()=>r?`icon`:void 0}"
 					:name="${()=>r?void 0:`icon`}"
 					aria-hidden="${()=>c?.label?!1:a}"

package/bundled/affix.js

@@ -1,21 +1,21 @@
-import { D as e, f as t, u as n } from "./vivid-element.js";
+import { A as e, m as t, p as n } from "./vivid-element.js";
 import { t as r } from "./slotted.js";
 import { t as i } from "./decorate.js";
 import { r as a } from "./definition2.js";
 //#region src/shared/patterns/affix.ts
-var o = (t) => {
-	class r extends t {}
-	return i([n], r.prototype, "icon", void 0), i([e], r.prototype, "iconSlottedContent", void 0), r;
+var o = (n) => {
+	class r extends n {}
+	return i([t], r.prototype, "icon", void 0), i([e], r.prototype, "iconSlottedContent", void 0), r;
 }, s = (e) => {
-	class t extends o(e) {
+	class n extends o(e) {
 		constructor(...e) {
 			super(...e), this.iconTrailing = !1;
 		}
 	}
-	return i([n({
+	return i([t({
 		mode: "boolean",
 		attribute: "icon-trailing"
-	})], t.prototype, "iconTrailing", void 0), t;
+	})], n.prototype, "iconTrailing", void 0), n;
 }, c = {
 	Slot: !1,
 	Span: !0
@@ -23,19 +23,19 @@ var o = (t) => {
 	Hidden: "true",
 	Visible: "false"
 }, u = (e) => {
-	let n = e.tagFor(a);
+	let t = e.tagFor(a);
 	return (e, i = c.Span, a = l.Hidden, o = {
 		label: "",
 		announceOnUpdate: !1
 	}) => {
-		if (!e && !i) return t`<slot
+		if (!e && !i) return n`<slot
 				name="icon"
 				aria-hidden="${() => a}"
 				${r("iconSlottedContent")}
 			></slot>`;
 		if (!e && i) return null;
-		let s = t`<${n} :name="${() => e}" :label="${() => o?.label || void 0}"></${n}>`, u = t.partial(i ? "span" : "slot");
-		return t`<${u}
+		let s = n`<${t} :name="${() => e}" :label="${() => o?.label || void 0}"></${t}>`, u = n.partial(i ? "span" : "slot");
+		return n`<${u}
 					class="${() => i ? "icon" : void 0}"
 					:name="${() => i ? void 0 : "icon"}"
 					aria-hidden="${() => o?.label ? !1 : a}"

package/bundled/anchored.cjs

@@ -1,4 +1,4 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`);var r=t=>{class r extends t{anchorChanged(){this.#e()}_slottedAnchorChanged(){let t=!!(this._slottedAnchor&&this._slottedAnchor.length>0);e.j.setBooleanAttribute(this,`slotted-anchor`,t),this.#e()}#e=()=>{if(!this.isConnected){this._anchorEl=void 0;return}this.#r();let e;this._slottedAnchor&&this._slottedAnchor.length>0?e=this._slottedAnchor[0]:this.anchor instanceof HTMLElement?e=this.anchor:typeof this.anchor==`string`&&(e=document.getElementById(this.anchor)??void 0,e||this.#n(this.anchor)),this._anchorEl=e};#t;#n=e=>{this.#t=new MutationObserver(()=>{let t=document.getElementById(e);t&&(this._anchorEl=t,this.#r())}),this.#t.observe(document.body,{childList:!0,subtree:!0})};#r=()=>{this.#t?.disconnect(),this.#t=void 0};connectedCallback(){super.connectedCallback(),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#r(),this._anchorEl=void 0}}return n.t([e.u],r.prototype,`anchor`,void 0),n.t([e.D],r.prototype,`_slottedAnchor`,void 0),n.t([e.D],r.prototype,`_anchorEl`,void 0),r},i=()=>e.f`<slot
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`);var r=t=>{class r extends t{anchorChanged(){this.#e()}_slottedAnchorChanged(){let t=!!(this._slottedAnchor&&this._slottedAnchor.length>0);e.P.setBooleanAttribute(this,`slotted-anchor`,t),this.#e()}#e=()=>{if(!this.isConnected){this._anchorEl=void 0;return}this.#r();let e;this._slottedAnchor&&this._slottedAnchor.length>0?e=this._slottedAnchor[0]:this.anchor instanceof HTMLElement?e=this.anchor:typeof this.anchor==`string`&&(e=document.getElementById(this.anchor)??void 0,e||this.#n(this.anchor)),this._anchorEl=e};#t;#n=e=>{this.#t=new MutationObserver(()=>{let t=document.getElementById(e);t&&(this._anchorEl=t,this.#r())}),this.#t.observe(document.body,{childList:!0,subtree:!0})};#r=()=>{this.#t?.disconnect(),this.#t=void 0};connectedCallback(){super.connectedCallback(),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#r(),this._anchorEl=void 0}}return n.t([e.m],r.prototype,`anchor`,void 0),n.t([e.A],r.prototype,`_slottedAnchor`,void 0),n.t([e.A],r.prototype,`_anchorEl`,void 0),r},i=()=>e.p`<slot
 		name="anchor"
 		${t.t(`_slottedAnchor`)}
 	></slot>`;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});

package/bundled/anchored.js

@@ -1,15 +1,15 @@
-import { D as e, f as t, j as n, u as r } from "./vivid-element.js";
+import { A as e, P as t, m as n, p as r } from "./vivid-element.js";
 import { t as i } from "./slotted.js";
 import { t as a } from "./decorate.js";
 //#region src/shared/patterns/anchored.ts
-var o = (t) => {
-	class i extends t {
+var o = (r) => {
+	class i extends r {
 		anchorChanged() {
 			this.#e();
 		}
 		_slottedAnchorChanged() {
 			let e = !!(this._slottedAnchor && this._slottedAnchor.length > 0);
-			n.setBooleanAttribute(this, "slotted-anchor", e), this.#e();
+			t.setBooleanAttribute(this, "slotted-anchor", e), this.#e();
 		}
 		#e = () => {
 			if (!this.isConnected) {
@@ -40,8 +40,8 @@ var o = (t) => {
 			super.disconnectedCallback(), this.#r(), this._anchorEl = void 0;
 		}
 	}
-	return a([r], i.prototype, "anchor", void 0), a([e], i.prototype, "_slottedAnchor", void 0), a([e], i.prototype, "_anchorEl", void 0), i;
-}, s = () => t`<slot
+	return a([n], i.prototype, "anchor", void 0), a([e], i.prototype, "_slottedAnchor", void 0), a([e], i.prototype, "_anchorEl", void 0), i;
+}, s = () => r`<slot
 		name="anchor"
 		${i("_slottedAnchor")}
 	></slot>`;

package/bundled/aria-binding-directive.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`);var t=0;function n(e=``){return`${e}${t++}`}var r=(t,n,r)=>e.j.setAttribute(t,e.r(n),r===!1?null:r),i=class extends e._{get propertyBindingBehaviours(){return this._propertyBindingBehaviours||=Object.entries(this.options.boundProperties).map(([t,r])=>{let i=new e.p(e.C(r instanceof Function?r:()=>r));return i.id=n(),i.targetNodeId=this.targetNodeId,i.policy=this.policy,e.g.assignAspect(i,e.r(t)),i.createBehavior()}),this._propertyBindingBehaviours}bind(t){let n=t.source,i=t.targets[this.targetNodeId];if(this.options.requireHost&&i!==n)throw Error(`Target element must be the same as the source element`);for(let e of this.propertyBindingBehaviours)e.bind(t);for(let e of this.options.forwardedProperties)r(i,e,n[e]);let a=(e,t)=>{this.options.forwardedProperties.has(t)&&r(i,t,e[t])};e.a(n,a),t.onUnbind({unbind:()=>e.o(n,a)})}};e.g.define(i),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
+const e=require(`./vivid-element.cjs`);var t=0;function n(e=``){return`${e}${t++}`}var r=e=>e.trim()?e.trim().split(/\s+/):[],i=new WeakMap,a=class t{static resolvedElements(e,t){return i.get(e)?.get(t)?.getResolvedElements()??null}static for(e,n){let r=i.get(e);r||(r=new Map,i.set(e,r));let a=r.get(n);return a||(a=new t(e,n),r.set(n,a)),a}constructor(e,t){this.host=e,this.propertyName=t,e._addController(this)}#e=!1;hostConnected(){this.#e=!0,this.#r()}hostDisconnected(){this.#e=!1,this.#r()}getAttribute(){return this.host[`_${this.propertyName}`]}setAttribute(t){this.host[`_${this.propertyName}`]=t,e.o(this.host,this.propertyName),this.#r()}#t=null;#n(t){this.#t=t,e.s(this.host,this.propertyName)}getResolvedElements(){return!this.host.isConnected&&this.#t?[]:this.#t}setElements(e){this.setAttribute(e===null?null:``),this.#n(e)}#r(){if(this.#c(),!(this.#e&&this.host.isConnected))return;let e=this.getAttribute();if(e){let t=r(e);if(t.length===0){this.#n([]);return}let n=this.#a(t);this.#n(n),n.length<t.length&&this.#s(t)}}#i(e){return this.host.getRootNode().getElementById(e)}#a(e){return e.map(e=>this.#i(e)).filter(e=>e!==null)}#o;#s(e){this.#o=new MutationObserver(()=>{let t=this.#a(e);this.#n(t),t.length===e.length&&this.#c()}),this.#o.observe(this.host.getRootNode(),{childList:!0,subtree:!0})}#c(){this.#o?.disconnect(),this.#o=void 0}},o=(t,n,r)=>e.P.setAttribute(t,e.r(n),r===!1?null:r),s=class extends e.S{get propertyBindingBehaviours(){return this._propertyBindingBehaviours||=Object.entries(this.options.boundProperties).map(([t,r])=>{let i=new e.g(e.E(r instanceof Function?r:()=>r));return i.id=n(),i.targetNodeId=this.targetNodeId,i.policy=this.policy,e.x.assignAspect(i,e.r(t)),i.createBehavior()}),this._propertyBindingBehaviours}bind(t){let n=t.source,r=t.targets[this.targetNodeId];if(this.options.requireHost&&r!==n)throw Error(`Target element must be the same as the source element`);for(let e of this.propertyBindingBehaviours)e.bind(t);for(let e of this.options.forwardedValueProperties)o(r,e,n[e]);let i=e=>{r[`${e}Elements`]=a.resolvedElements(n,e)};for(let e of this.options.forwardedIdrefsProperties)i(e);let s=(e,t)=>{this.options.forwardedValueProperties.has(t)&&o(r,t,e[t]),this.options.forwardedIdrefsProperties.has(t)&&i(t)};e.c(n,s),t.onUnbind({unbind:()=>e.l(n,s)})}};e.x.define(s),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/bundled/aria-binding-directive.js

@@ -1,29 +1,101 @@
-import { C as e, _ as t, a as n, g as r, j as i, o as a, p as o, r as s } from "./vivid-element.js";
+import { E as e, P as t, S as n, c as r, g as i, l as a, o, r as s, s as c, x as l } from "./vivid-element.js";
 //#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/strings.js
-var c = 0;
-function l(e = "") {
-	return `${e}${c++}`;
+var u = 0;
+function d(e = "") {
+	return `${e}${u++}`;
 }
 //#endregion
-//#region src/shared/aria/aria-binding-directive.ts
-var u = (e, t, n) => i.setAttribute(e, s(t), n === !1 ? null : n), d = class extends t {
+//#region src/shared/aria/idrefs-controller.ts
+var f = (e) => e.trim() ? e.trim().split(/\s+/) : [], p = /* @__PURE__ */ new WeakMap(), m = class e {
+	static resolvedElements(e, t) {
+		return p.get(e)?.get(t)?.getResolvedElements() ?? null;
+	}
+	static for(t, n) {
+		let r = p.get(t);
+		r || (r = /* @__PURE__ */ new Map(), p.set(t, r));
+		let i = r.get(n);
+		return i || (i = new e(t, n), r.set(n, i)), i;
+	}
+	constructor(e, t) {
+		this.host = e, this.propertyName = t, e._addController(this);
+	}
+	#e = !1;
+	hostConnected() {
+		this.#e = !0, this.#r();
+	}
+	hostDisconnected() {
+		this.#e = !1, this.#r();
+	}
+	getAttribute() {
+		return this.host[`_${this.propertyName}`];
+	}
+	setAttribute(e) {
+		this.host[`_${this.propertyName}`] = e, o(this.host, this.propertyName), this.#r();
+	}
+	#t = null;
+	#n(e) {
+		this.#t = e, c(this.host, this.propertyName);
+	}
+	getResolvedElements() {
+		return !this.host.isConnected && this.#t ? [] : this.#t;
+	}
+	setElements(e) {
+		this.setAttribute(e === null ? null : ""), this.#n(e);
+	}
+	#r() {
+		if (this.#c(), !(this.#e && this.host.isConnected)) return;
+		let e = this.getAttribute();
+		if (e) {
+			let t = f(e);
+			if (t.length === 0) {
+				this.#n([]);
+				return;
+			}
+			let n = this.#a(t);
+			this.#n(n), n.length < t.length && this.#s(t);
+		}
+	}
+	#i(e) {
+		return this.host.getRootNode().getElementById(e);
+	}
+	#a(e) {
+		return e.map((e) => this.#i(e)).filter((e) => e !== null);
+	}
+	#o;
+	#s(e) {
+		this.#o = new MutationObserver(() => {
+			let t = this.#a(e);
+			this.#n(t), t.length === e.length && this.#c();
+		}), this.#o.observe(this.host.getRootNode(), {
+			childList: !0,
+			subtree: !0
+		});
+	}
+	#c() {
+		this.#o?.disconnect(), this.#o = void 0;
+	}
+}, h = (e, n, r) => t.setAttribute(e, s(n), r === !1 ? null : r), g = class extends n {
 	get propertyBindingBehaviours() {
 		return this._propertyBindingBehaviours ||= Object.entries(this.options.boundProperties).map(([t, n]) => {
-			let i = new o(e(n instanceof Function ? n : () => n));
-			return i.id = l(), i.targetNodeId = this.targetNodeId, i.policy = this.policy, r.assignAspect(i, s(t)), i.createBehavior();
+			let r = new i(e(n instanceof Function ? n : () => n));
+			return r.id = d(), r.targetNodeId = this.targetNodeId, r.policy = this.policy, l.assignAspect(r, s(t)), r.createBehavior();
 		}), this._propertyBindingBehaviours;
 	}
 	bind(e) {
-		let t = e.source, r = e.targets[this.targetNodeId];
-		if (this.options.requireHost && r !== t) throw Error("Target element must be the same as the source element");
+		let t = e.source, n = e.targets[this.targetNodeId];
+		if (this.options.requireHost && n !== t) throw Error("Target element must be the same as the source element");
 		for (let t of this.propertyBindingBehaviours) t.bind(e);
-		for (let e of this.options.forwardedProperties) u(r, e, t[e]);
-		let i = (e, t) => {
-			this.options.forwardedProperties.has(t) && u(r, t, e[t]);
+		for (let e of this.options.forwardedValueProperties) h(n, e, t[e]);
+		let i = (e) => {
+			n[`${e}Elements`] = m.resolvedElements(t, e);
+		};
+		for (let e of this.options.forwardedIdrefsProperties) i(e);
+		let o = (e, t) => {
+			this.options.forwardedValueProperties.has(t) && h(n, t, e[t]), this.options.forwardedIdrefsProperties.has(t) && i(t);
 		};
-		n(t, i), e.onUnbind({ unbind: () => a(t, i) });
+		r(t, o), e.onUnbind({ unbind: () => a(t, o) });
 	}
 };
-r.define(d);
+l.define(g);
 //#endregion
-export { l as n, d as t };
+export { m as n, d as r, g as t };

package/bundled/base-color-picker.cjs

@@ -1,4 +1,4 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./form-element.cjs`),a=require(`./class-names.cjs`),o=require(`./form-associated.cjs`);function s(e){if(!e)return null;let t=e.trim().replace(/^#/,``);return/^[0-9a-fA-F]{3}$/.test(t)?t.split(``).map(e=>e+e).join(``).toLowerCase():/^[0-9a-fA-F]{6}$/.test(t)?t.toLowerCase():null}function c(e){return s(e)!==null}function l(e){let t=s(e);if(!t)return 0;let n=parseInt(t.slice(0,2),16)/255,r=parseInt(t.slice(2,4),16)/255,i=parseInt(t.slice(4,6),16)/255,a=n<=.03928?n/12.92:((n+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,c=i<=.03928?i/12.92:((i+.055)/1.055)**2.4;return .2126*a+.7152*o+.0722*c}function u(e,t){let n=l(e),r=l(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function d(e,t){return t||=document.querySelector(`.vvd-root`)||document.documentElement,getComputedStyle(t).getPropertyValue(e).trim()}var f=s=>{class c extends e.t(i.t(o.n(s))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.open=!1,this.swatches=[],this._canvasColor=``}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>{this._refreshCanvasColor()})}get _computedCanvasColor(){return this._canvasColor||=d(`--vvd-color-canvas`,this),this._canvasColor}_refreshCanvasColor(){this._canvasColor=d(`--vvd-color-canvas`,this)}_applyContrastClass(e,t=3){if(!e)return!1;let n=this._computedCanvasColor;return n?u(e,n)<t:!1}_getRowLength(){return 7}_handleSwatchSelection(e){this.value===e?this.value=``:this.value=e,this.$emit(`change`),this.open=!1}_handleColorSaving(){}_getFocusReturnEl(){return null}_returnFocusToAnchor(){let e=this._getFocusReturnEl();e&&t.A.enqueue(()=>e.focus())}_getGridCells(){let e=this.shadowRoot?.querySelector(`[role="grid"]`);return e?Array.from(e.querySelectorAll(`[role="gridcell"], [data-vvd-role="gridcell"]`)):[]}_handleCellKeydown(e,t,n,r){let i=this._getRowLength(),a=this._getGridCells().length,o=Math.floor(n/i),s=n%i,c=Math.ceil(a/i);switch(e.key){case`ArrowRight`:return s<i-1&&n+1<a&&this._focusSwatchByIndex(n+1),!1;case`ArrowLeft`:return s>0&&this._focusSwatchByIndex(n-1),!1;case`ArrowDown`:return o<c-1&&n+i<a&&this._focusSwatchByIndex(n+i),!1;case`ArrowUp`:return o>0&&this._focusSwatchByIndex(n-i),!1;case`PageDown`:{let e=(c-1)*i,t=Math.min(e+s,a-1);return n!==t&&this._focusSwatchByIndex(t),!1}case`PageUp`:{let e=Math.min(s,a-1);return n!==e&&this._focusSwatchByIndex(e),!1}case`Home`:return e.ctrlKey?this._focusSwatchByIndex(0):this._focusSwatchByIndex(o*i),!1;case`End`:if(e.ctrlKey)this._focusSwatchByIndex(a-1);else{let e=Math.min((o+1)*i-1,a-1);this._focusSwatchByIndex(e)}return!1;case`Enter`:case` `:return r&&this._handleColorSaving(),t&&!r&&(this._handleSwatchSelection(t),this._returnFocusToAnchor()),!1;case`Escape`:return this.open=!1,this._returnFocusToAnchor(),!1;case`Tab`:return this.open=!1,!0;default:return!0}}_focusSwatchByIndex(e){let t=this._getGridCells();e<0||e>=t.length||t[e]?.focus()}_renderColorSwatch(e,r){return t.f`
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./form-element.cjs`),a=require(`./class-names.cjs`),o=require(`./form-associated.cjs`);function s(e){if(!e)return null;let t=e.trim().replace(/^#/,``);return/^[0-9a-fA-F]{3}$/.test(t)?t.split(``).map(e=>e+e).join(``).toLowerCase():/^[0-9a-fA-F]{6}$/.test(t)?t.toLowerCase():null}function c(e){return s(e)!==null}function l(e){let t=s(e);if(!t)return 0;let n=parseInt(t.slice(0,2),16)/255,r=parseInt(t.slice(2,4),16)/255,i=parseInt(t.slice(4,6),16)/255,a=n<=.03928?n/12.92:((n+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,c=i<=.03928?i/12.92:((i+.055)/1.055)**2.4;return .2126*a+.7152*o+.0722*c}function u(e,t){let n=l(e),r=l(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function d(e,t){return t||=document.querySelector(`.vvd-root`)||document.documentElement,getComputedStyle(t).getPropertyValue(e).trim()}var f=s=>{class c extends e.t(i.t(o.n(s))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.open=!1,this.swatches=[],this._canvasColor=``}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>{this._refreshCanvasColor()})}get _computedCanvasColor(){return this._canvasColor||=d(`--vvd-color-canvas`,this),this._canvasColor}_refreshCanvasColor(){this._canvasColor=d(`--vvd-color-canvas`,this)}_applyContrastClass(e,t=3){if(!e)return!1;let n=this._computedCanvasColor;return n?u(e,n)<t:!1}_getRowLength(){return 7}_handleSwatchSelection(e){this.value===e?this.value=``:this.value=e,this.$emit(`change`),this.open=!1}_handleColorSaving(){}_getFocusReturnEl(){return null}_returnFocusToAnchor(){let e=this._getFocusReturnEl();e&&t.M.enqueue(()=>e.focus())}_getGridCells(){let e=this.shadowRoot?.querySelector(`[role="grid"]`);return e?Array.from(e.querySelectorAll(`[role="gridcell"], [data-vvd-role="gridcell"]`)):[]}_handleCellKeydown(e,t,n,r){let i=this._getRowLength(),a=this._getGridCells().length,o=Math.floor(n/i),s=n%i,c=Math.ceil(a/i);switch(e.key){case`ArrowRight`:return s<i-1&&n+1<a&&this._focusSwatchByIndex(n+1),!1;case`ArrowLeft`:return s>0&&this._focusSwatchByIndex(n-1),!1;case`ArrowDown`:return o<c-1&&n+i<a&&this._focusSwatchByIndex(n+i),!1;case`ArrowUp`:return o>0&&this._focusSwatchByIndex(n-i),!1;case`PageDown`:{let e=(c-1)*i,t=Math.min(e+s,a-1);return n!==t&&this._focusSwatchByIndex(t),!1}case`PageUp`:{let e=Math.min(s,a-1);return n!==e&&this._focusSwatchByIndex(e),!1}case`Home`:return e.ctrlKey?this._focusSwatchByIndex(0):this._focusSwatchByIndex(o*i),!1;case`End`:if(e.ctrlKey)this._focusSwatchByIndex(a-1);else{let e=Math.min((o+1)*i-1,a-1);this._focusSwatchByIndex(e)}return!1;case`Enter`:case` `:return r&&this._handleColorSaving(),t&&!r&&(this._handleSwatchSelection(t),this._returnFocusToAnchor()),!1;case`Escape`:return this.open=!1,this._returnFocusToAnchor(),!1;case`Tab`:return this.open=!1,!0;default:return!0}}_focusSwatchByIndex(e){let t=this._getGridCells();e<0||e>=t.length||t[e]?.focus()}_renderColorSwatch(e,r){return t.p`
 				<${r} placement="top" 
 					text="${e=>e.label??e.value}" 
 					exportparts="vvd-theme-alternate">
@@ -12,7 +12,7 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 						@click="${(e,t)=>t.parent._handleSwatchSelection(e.value)}"
 						@keydown="${(e,t)=>t.parent._handleCellKeydown(t.event,e.value,t.index)}"
 					>
-						${n.t((e,t)=>t.parent.value===e.value,t.f`<${e} size="-6" name="check-solid" aria-hidden="true"></${e}>`)}
+						${n.t((e,t)=>t.parent.value===e.value,t.p`<${e} size="-6" name="check-solid" aria-hidden="true"></${e}>`)}
 					</button>
 				</${r}>
-			`}}return r.t([t.u({mode:`boolean`})],c.prototype,`open`,void 0),r.t([t.D],c.prototype,`swatches`,void 0),r.t([t.D],c.prototype,`_canvasColor`,void 0),c};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+			`}}return r.t([t.m({mode:`boolean`})],c.prototype,`open`,void 0),r.t([t.A],c.prototype,`swatches`,void 0),r.t([t.A],c.prototype,`_canvasColor`,void 0),c};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});

package/bundled/base-color-picker.js

@@ -1,5 +1,5 @@
 import { t as e } from "./localized.js";
-import { A as t, D as n, f as r, u as i } from "./vivid-element.js";
+import { A as t, M as n, m as r, p as i } from "./vivid-element.js";
 import { t as a } from "./when.js";
 import { t as o } from "./decorate.js";
 import { t as s } from "./form-element.js";
@@ -63,7 +63,7 @@ var h = (u) => {
 		}
 		_returnFocusToAnchor() {
 			let e = this._getFocusReturnEl();
-			e && t.enqueue(() => e.focus());
+			e && n.enqueue(() => e.focus());
 		}
 		_getGridCells() {
 			let e = this.shadowRoot?.querySelector("[role=\"grid\"]");
@@ -104,7 +104,7 @@ var h = (u) => {
 			e < 0 || e >= t.length || t[e]?.focus();
 		}
 		_renderColorSwatch(e, t) {
-			return r`
+			return i`
 				<${t} placement="top" 
 					text="${(e) => e.label ?? e.value}" 
 					exportparts="vvd-theme-alternate">
@@ -118,13 +118,13 @@ var h = (u) => {
 						@click="${(e, t) => t.parent._handleSwatchSelection(e.value)}"
 						@keydown="${(e, t) => t.parent._handleCellKeydown(t.event, e.value, t.index)}"
 					>
-						${a((e, t) => t.parent.value === e.value, r`<${e} size="-6" name="check-solid" aria-hidden="true"></${e}>`)}
+						${a((e, t) => t.parent.value === e.value, i`<${e} size="-6" name="check-solid" aria-hidden="true"></${e}>`)}
 					</button>
 				</${t}>
 			`;
 		}
 	}
-	return o([i({ mode: "boolean" })], d.prototype, "open", void 0), o([n], d.prototype, "swatches", void 0), o([n], d.prototype, "_canvasColor", void 0), d;
+	return o([r({ mode: "boolean" })], d.prototype, "open", void 0), o([t], d.prototype, "swatches", void 0), o([t], d.prototype, "_canvasColor", void 0), d;
 };
 //#endregion
 export { d as n, h as t };

package/bundled/base-progress.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`);var n=class extends e.t{constructor(...e){super(...e),this.percentComplete=0}valueChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}minChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}maxChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}connectedCallback(){super.connectedCallback(),this.updatePercentComplete()}updatePercentComplete(){let e=typeof this.min==`number`?this.min:0,t=typeof this.max==`number`?this.max:100,n=typeof this.value==`number`?this.value:0,r=t-e;this.percentComplete=r===0?0:Math.fround((n-e)/r*100)}};t.t([e.u({converter:e.d})],n.prototype,`value`,void 0),t.t([e.u({converter:e.d})],n.prototype,`min`,void 0),t.t([e.u({converter:e.d})],n.prototype,`max`,void 0),t.t([e.u({mode:`boolean`})],n.prototype,`paused`,void 0),t.t([e.D],n.prototype,`percentComplete`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`);var n=class extends e.t{constructor(...e){super(...e),this.percentComplete=0}valueChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}minChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}maxChanged(){this.$fastController.isConnected&&this.updatePercentComplete()}connectedCallback(){super.connectedCallback(),this.updatePercentComplete()}updatePercentComplete(){let e=typeof this.min==`number`?this.min:0,t=typeof this.max==`number`?this.max:100,n=typeof this.value==`number`?this.value:0,r=t-e;this.percentComplete=r===0?0:Math.fround((n-e)/r*100)}};t.t([e.m({converter:e.h})],n.prototype,`value`,void 0),t.t([e.m({converter:e.h})],n.prototype,`min`,void 0),t.t([e.m({converter:e.h})],n.prototype,`max`,void 0),t.t([e.m({mode:`boolean`})],n.prototype,`paused`,void 0),t.t([e.A],n.prototype,`percentComplete`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});

package/bundled/base-progress.js

@@ -1,7 +1,7 @@
-import { D as e, d as t, t as n, u as r } from "./vivid-element.js";
+import { A as e, h as t, m as n, t as r } from "./vivid-element.js";
 import { t as i } from "./decorate.js";
 //#region src/shared/foundation/progress/base-progress.ts
-var a = class extends n {
+var a = class extends r {
 	constructor(...e) {
 		super(...e), this.percentComplete = 0;
 	}
@@ -25,6 +25,6 @@ var a = class extends n {
 		this.percentComplete = r === 0 ? 0 : Math.fround((n - e) / r * 100);
 	}
 };
-i([r({ converter: t })], a.prototype, "value", void 0), i([r({ converter: t })], a.prototype, "min", void 0), i([r({ converter: t })], a.prototype, "max", void 0), i([r({ mode: "boolean" })], a.prototype, "paused", void 0), i([e], a.prototype, "percentComplete", void 0);
+i([n({ converter: t })], a.prototype, "value", void 0), i([n({ converter: t })], a.prototype, "min", void 0), i([n({ converter: t })], a.prototype, "max", void 0), i([n({ mode: "boolean" })], a.prototype, "paused", void 0), i([e], a.prototype, "percentComplete", void 0);
 //#endregion
 export { a as t };

package/bundled/breadcrumb-item.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./linkable.cjs`);var r=class extends n.t(e.t){constructor(...e){super(...e),this.separator=!0}};t.t([e.u],r.prototype,`text`,void 0),t.t([e.D],r.prototype,`separator`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./linkable.cjs`);var r=class extends n.t(e.t){constructor(...e){super(...e),this.separator=!0}};t.t([e.m],r.prototype,`text`,void 0),t.t([e.A],r.prototype,`separator`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});

package/bundled/breadcrumb-item.js

@@ -1,12 +1,12 @@
-import { D as e, t, u as n } from "./vivid-element.js";
+import { A as e, m as t, t as n } from "./vivid-element.js";
 import { t as r } from "./decorate.js";
 import { t as i } from "./linkable.js";
 //#region src/lib/breadcrumb-item/breadcrumb-item.ts
-var a = class extends i(t) {
+var a = class extends i(n) {
 	constructor(...e) {
 		super(...e), this.separator = !0;
 	}
 };
-r([n], a.prototype, "text", void 0), r([e], a.prototype, "separator", void 0);
+r([t], a.prototype, "text", void 0), r([e], a.prototype, "separator", void 0);
 //#endregion
 export { a as t };

package/bundled/button.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./delegates-aria.cjs`),r=require(`./form-associated.cjs`);var i=class extends n.t(r.n(e.t)){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.handleClick=e=>{this.disabled&&e.stopPropagation()},this.handleSubmission=()=>{this.form&&(this.attachProxy(),this.form.requestSubmit(this.proxy),this.detachProxy())},this.handleFormReset=()=>{this.form?.reset()},this.handleUnsupportedDelegatesFocus=()=>{this.$fastController.definition.shadowOptions&&window.ShadowRoot&&!window.ShadowRoot.prototype.hasOwnProperty(`delegatesFocus`)&&this.$fastController.definition.shadowOptions.delegatesFocus&&Object.defineProperty(this,`focus`,{value:()=>{this.control.focus()},configurable:!0})}}formactionChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formAction=this.formaction)}formenctypeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formEnctype=this.formenctype)}formmethodChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formMethod=this.formmethod)}formnovalidateChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formNoValidate=this.formnovalidate)}formtargetChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formTarget=this.formtarget)}typeChanged(e,t){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type),t===`submit`&&this.addEventListener(`click`,this.handleSubmission),e===`submit`&&this.removeEventListener(`click`,this.handleSubmission),t===`reset`&&this.addEventListener(`click`,this.handleFormReset),e===`reset`&&this.removeEventListener(`click`,this.handleFormReset)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.handleUnsupportedDelegatesFocus(),this.autofocus&&e.A.enqueue(()=>{this.focus()}),(this.control?Array.from(this.control.children):[]).forEach(e=>{e.addEventListener(`click`,this.handleClick)})}disconnectedCallback(){super.disconnectedCallback(),(this.control?Array.from(this.control.children):[]).forEach(e=>{e.removeEventListener(`click`,this.handleClick)})}};t.t([e.u({mode:`boolean`})],i.prototype,`autofocus`,void 0),t.t([e.u({attribute:`form`})],i.prototype,`formId`,void 0),t.t([e.u],i.prototype,`formaction`,void 0),t.t([e.u],i.prototype,`formenctype`,void 0),t.t([e.u],i.prototype,`formmethod`,void 0),t.t([e.u({mode:`boolean`})],i.prototype,`formnovalidate`,void 0),t.t([e.u],i.prototype,`formtarget`,void 0),t.t([e.u],i.prototype,`type`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./delegates-aria.cjs`),r=require(`./form-associated.cjs`);var i=class extends n.t(r.n(e.t)){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.handleClick=e=>{this.disabled&&e.stopPropagation()},this.handleSubmission=()=>{this.form&&(this.attachProxy(),this.form.requestSubmit(this.proxy),this.detachProxy())},this.handleFormReset=()=>{this.form?.reset()},this.handleUnsupportedDelegatesFocus=()=>{this.$fastController.definition.shadowOptions&&window.ShadowRoot&&!window.ShadowRoot.prototype.hasOwnProperty(`delegatesFocus`)&&this.$fastController.definition.shadowOptions.delegatesFocus&&Object.defineProperty(this,`focus`,{value:()=>{this.control.focus()},configurable:!0})}}formactionChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formAction=this.formaction)}formenctypeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formEnctype=this.formenctype)}formmethodChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formMethod=this.formmethod)}formnovalidateChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formNoValidate=this.formnovalidate)}formtargetChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formTarget=this.formtarget)}typeChanged(e,t){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type),t===`submit`&&this.addEventListener(`click`,this.handleSubmission),e===`submit`&&this.removeEventListener(`click`,this.handleSubmission),t===`reset`&&this.addEventListener(`click`,this.handleFormReset),e===`reset`&&this.removeEventListener(`click`,this.handleFormReset)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.handleUnsupportedDelegatesFocus(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),(this.control?Array.from(this.control.children):[]).forEach(e=>{e.addEventListener(`click`,this.handleClick)})}disconnectedCallback(){super.disconnectedCallback(),(this.control?Array.from(this.control.children):[]).forEach(e=>{e.removeEventListener(`click`,this.handleClick)})}};t.t([e.m({mode:`boolean`})],i.prototype,`autofocus`,void 0),t.t([e.m({attribute:`form`})],i.prototype,`formId`,void 0),t.t([e.m],i.prototype,`formaction`,void 0),t.t([e.m],i.prototype,`formenctype`,void 0),t.t([e.m],i.prototype,`formmethod`,void 0),t.t([e.m({mode:`boolean`})],i.prototype,`formnovalidate`,void 0),t.t([e.m],i.prototype,`formtarget`,void 0),t.t([e.m],i.prototype,`type`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});

package/bundled/button.js

@@ -1,9 +1,9 @@
-import { A as e, t, u as n } from "./vivid-element.js";
+import { M as e, m as t, t as n } from "./vivid-element.js";
 import { t as r } from "./decorate.js";
 import { t as i } from "./delegates-aria.js";
 import { n as a } from "./form-associated.js";
 //#region src/shared/foundation/button/button.ts
-var o = class extends i(a(t)) {
+var o = class extends i(a(n)) {
 	constructor(...e) {
 		super(...e), this.proxy = document.createElement("input"), this.handleClick = (e) => {
 			/* v8 ignore else -- @preserve */
@@ -61,6 +61,6 @@ var o = class extends i(a(t)) {
 		});
 	}
 };
-r([n({ mode: "boolean" })], o.prototype, "autofocus", void 0), r([n({ attribute: "form" })], o.prototype, "formId", void 0), r([n], o.prototype, "formaction", void 0), r([n], o.prototype, "formenctype", void 0), r([n], o.prototype, "formmethod", void 0), r([n({ mode: "boolean" })], o.prototype, "formnovalidate", void 0), r([n], o.prototype, "formtarget", void 0), r([n], o.prototype, "type", void 0);
+r([t({ mode: "boolean" })], o.prototype, "autofocus", void 0), r([t({ attribute: "form" })], o.prototype, "formId", void 0), r([t], o.prototype, "formaction", void 0), r([t], o.prototype, "formenctype", void 0), r([t], o.prototype, "formmethod", void 0), r([t({ mode: "boolean" })], o.prototype, "formnovalidate", void 0), r([t], o.prototype, "formtarget", void 0), r([t], o.prototype, "type", void 0);
 //#endregion
 export { o as t };

package/bundled/calendar-event.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./delegates-aria.cjs`);var r=class extends n.t(e.t){};t.t([e.u],r.prototype,`heading`,void 0),t.t([e.u],r.prototype,`description`,void 0),t.t([e.u],r.prototype,`connotation`,void 0),t.t([e.u],r.prototype,`appearance`,void 0),t.t([e.u({converter:e.d,attribute:`overlap-count`})],r.prototype,`overlapCount`,void 0),t.t([e.u({converter:e.d})],r.prototype,`start`,void 0),t.t([e.u({converter:e.d})],r.prototype,`duration`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./delegates-aria.cjs`);var r=class extends n.t(e.t){};t.t([e.m],r.prototype,`heading`,void 0),t.t([e.m],r.prototype,`description`,void 0),t.t([e.m],r.prototype,`connotation`,void 0),t.t([e.m],r.prototype,`appearance`,void 0),t.t([e.m({converter:e.h,attribute:`overlap-count`})],r.prototype,`overlapCount`,void 0),t.t([e.m({converter:e.h})],r.prototype,`start`,void 0),t.t([e.m({converter:e.h})],r.prototype,`duration`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});

package/bundled/calendar-event.js

@@ -1,11 +1,11 @@
-import { d as e, t, u as n } from "./vivid-element.js";
+import { h as e, m as t, t as n } from "./vivid-element.js";
 import { t as r } from "./decorate.js";
 import { t as i } from "./delegates-aria.js";
 //#region src/lib/calendar-event/calendar-event.ts
-var a = class extends i(t) {};
-r([n], a.prototype, "heading", void 0), r([n], a.prototype, "description", void 0), r([n], a.prototype, "connotation", void 0), r([n], a.prototype, "appearance", void 0), r([n({
+var a = class extends i(n) {};
+r([t], a.prototype, "heading", void 0), r([t], a.prototype, "description", void 0), r([t], a.prototype, "connotation", void 0), r([t], a.prototype, "appearance", void 0), r([t({
 	converter: e,
 	attribute: "overlap-count"
-})], a.prototype, "overlapCount", void 0), r([n({ converter: e })], a.prototype, "start", void 0), r([n({ converter: e })], a.prototype, "duration", void 0);
+})], a.prototype, "overlapCount", void 0), r([t({ converter: e })], a.prototype, "start", void 0), r([t({ converter: e })], a.prototype, "duration", void 0);
 //#endregion
 export { a as t };