@vonage/vivid 5.18.0 → 5.20.0

package/bundled/children.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`);var n=class extends t.n{constructor(e){super(e),this.observerProperty=Symbol(),this.handleEvent=(e,t)=>{let n=t.target;this.updateTarget(this.getSource(n),this.computeNodes(n))},e.childList=!0}observe(t){let n=t[this.observerProperty];n||(n=new MutationObserver(this.handleEvent),n.toJSON=e.N,t[this.observerProperty]=n),n.target=t,n.observe(t,this.options)}disconnect(e){let t=e[this.observerProperty];t.target=null,t.disconnect()}getNodes(e){return`selector`in this.options?Array.from(e.querySelectorAll(this.options.selector)):Array.from(e.childNodes)}};e.m.define(n);function r(t){return e.M(t)&&(t={property:t}),new n(t)}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`);var n=class extends t.n{constructor(e){super(e),this.observerProperty=Symbol(),e.childList=!0}observe(t){let n=t[this.observerProperty];n||(n=new MutationObserver((e,n)=>{this.updateTarget(this.getSource(t),this.computeNodes(t))}),n.toJSON=e.R,t[this.observerProperty]=n),n.observe(t,this.options)}disconnect(e){e[this.observerProperty].disconnect()}getNodes(e){return`selector`in this.options?Array.from(e.querySelectorAll(this.options.selector)):Array.from(e.childNodes)}};e.x.define(n);function r(t){return e.L(t)&&(t={property:t}),new n(t)}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});

package/bundled/children.js

@@ -1,20 +1,18 @@
-import { M as e, N as t, m as n } from "./vivid-element.js";
+import { L as e, R as t, x as n } from "./vivid-element.js";
 import { n as r } from "./slotted.js";
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/templating/children.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/templating/children.js
 var i = class extends r {
 	constructor(e) {
-		super(e), this.observerProperty = Symbol(), this.handleEvent = (e, t) => {
-			let n = t.target;
-			this.updateTarget(this.getSource(n), this.computeNodes(n));
-		}, e.childList = !0;
+		super(e), this.observerProperty = Symbol(), e.childList = !0;
 	}
 	observe(e) {
 		let n = e[this.observerProperty];
-		n || (n = new MutationObserver(this.handleEvent), n.toJSON = t, e[this.observerProperty] = n), n.target = e, n.observe(e, this.options);
+		n || (n = new MutationObserver((t, n) => {
+			this.updateTarget(this.getSource(e), this.computeNodes(e));
+		}), n.toJSON = t, e[this.observerProperty] = n), n.observe(e, this.options);
 	}
 	disconnect(e) {
-		let t = e[this.observerProperty];
-		t.target = null, t.disconnect();
+		e[this.observerProperty].disconnect();
 	}
 	getNodes(e) {
 		return "selector" in this.options ? Array.from(e.querySelectorAll(this.options.selector)) : Array.from(e.childNodes);

package/bundled/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.120.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/bundled/definition.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`);var t=`:host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}`,n=class extends e.t{},r=e.o(`visually-hidden`,n,()=>e.d`<slot></slot>`,[],{styles:t}),i=e.s(r);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
+const e=require(`./vivid-element.cjs`);var t=`:host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}`,n=class extends e.t{},r=e.u(`visually-hidden`,n,()=>e.p`<slot></slot>`,[],{styles:t}),i=e.d(r);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});

package/bundled/definition.js

@@ -1,5 +1,5 @@
-import { d as e, o as t, s as n, t as r } from "./vivid-element.js";
+import { d as e, p as t, t as n, u as r } from "./vivid-element.js";
 //#region src/lib/visually-hidden/visually-hidden.scss?inline
-var i = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}", a = class extends r {}, o = t("visually-hidden", a, () => e`<slot></slot>`, [], { styles: i }), s = n(o);
+var i = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}", a = class extends n {}, o = r("visually-hidden", a, () => t`<slot></slot>`, [], { styles: i }), s = e(o);
 //#endregion
 export { o as n, a as r, s as t };

package/bundled/definition10.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(`./class-names.cjs`),a=require(`./definition8.cjs`),o=require(`./anchored.cjs`),s=require(`./dialog.cjs`);var c=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}`,l=class extends e.t(o.t(t.t)){constructor(...e){super(...e),this.alternate=!1,this.placement=`right`,this.open=!1}#e=null;openChanged(e,t){e!==void 0&&(t?this.setAttribute(`role`,`status`):this.removeAttribute(`role`),this.#a(),this._anchorEl&&this.#n(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||``)}`,this.#n(e)}#n(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.ariaLabel&&=this.#e}#i=()=>{this.open||t.O.enqueue(()=>this.open=!0)};#a(){document.removeEventListener(`click`,this.#o),document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&(document.addEventListener(`click`,this.#o),document.addEventListener(`keydown`,this.#s))}#o=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)};#s=e=>{e.key===`Escape`&&(this.open=!1)}};r.t([t.l],l.prototype,`headline`,void 0),r.t([t.l({mode:`boolean`})],l.prototype,`alternate`,void 0),r.t([t.l({mode:`fromView`})],l.prototype,`placement`,void 0),r.t([t.l({mode:`boolean`})],l.prototype,`open`,void 0);var u=e=>i.t(`control`),d=t.o(`toggletip`,l,e=>{let r=e.tagFor(a.i);return t.d`
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition8.cjs`),o=require(`./anchored.cjs`),s=require(`./dialog.cjs`);var c=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}`,l=class extends e.t(o.t(t.t)){constructor(...e){super(...e),this.#e=null,this.alternate=!1,this.placement=`right`,this.open=!1,this.#i=()=>{this.open||t.M.enqueue(()=>this.open=!0)},this.#o=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this.#s=e=>{e.key===`Escape`&&(this.open=!1)}}#e;openChanged(e,t){e!==void 0&&(t?this.setAttribute(`role`,`status`):this.removeAttribute(`role`),this.#a(),this._anchorEl&&this.#n(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||``)}`,this.#n(e)}#n(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.ariaLabel&&=this.#e}#i;#a(){document.removeEventListener(`click`,this.#o),document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&(document.addEventListener(`click`,this.#o),document.addEventListener(`keydown`,this.#s))}#o;#s};r.t([t.m],l.prototype,`headline`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`alternate`,void 0),r.t([t.m({mode:`fromView`})],l.prototype,`placement`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`open`,void 0);var u=e=>i.t(`control`),d=t.u(`toggletip`,l,e=>{let r=e.tagFor(a.i);return t.p`
 		${o.n()}
 		<${r}
 			@keydown="${(e,{event:t})=>!(e.open&&s.t(t))}"
@@ -11,9 +11,9 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${n.t(e=>e.headline,t.d`<h2 class="headline">${e=>e.headline}</h2>`)}
+				${n.t(e=>e.headline,t.p`<h2 class="headline">${e=>e.headline}</h2>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
 		</${r}>
-	`},[a.t],{styles:c}),f=t.s(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+	`},[a.t],{styles:c}),f=t.d(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});

package/bundled/definition10.js

@@ -1,5 +1,5 @@
 import { t as e } from "./localized.js";
-import { O as t, d as n, l as r, o as i, s as a, t as o } from "./vivid-element.js";
+import { M as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
 import { t as s } from "./when.js";
 import { t as c } from "./decorate.js";
 import { t as l } from "./class-names.js";
@@ -7,11 +7,19 @@ import { i as u, t as d } from "./definition8.js";
 import { n as f, t as p } from "./anchored.js";
 import { t as m } from "./dialog.js";
 //#region src/lib/toggletip/toggletip.scss?inline
-var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(p(o)) {
+var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(p(a)) {
 	constructor(...e) {
-		super(...e), this.alternate = !1, this.placement = "right", this.open = !1;
+		super(...e), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#i = () => {
+			this.open || t.enqueue(() => this.open = !0);
+		}, this.#o = (e) => {
+			let t = !this.contains(e.target), n = this._anchorEl?.contains(e.target);
+			(t || n) && (this.open = !1);
+		}, this.#s = (e) => {
+			/* v8 ignore else -- @preserve */
+			e.key === "Escape" && (this.open = !1);
+		};
 	}
-	#e = null;
+	#e;
 	openChanged(e, t) {
 		e !== void 0 && (t ? this.setAttribute("role", "status") : this.removeAttribute("role"), this.#a(), this._anchorEl && this.#n(this._anchorEl));
 	}
@@ -34,27 +42,19 @@ var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-a
 		/* v8 ignore else -- @preserve */
 		e.removeEventListener("click", this.#i, !0), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.ariaLabel &&= this.#e;
 	}
-	#i = () => {
-		this.open || t.enqueue(() => this.open = !0);
-	};
+	#i;
 	#a() {
 		document.removeEventListener("click", this.#o), document.removeEventListener("keydown", this.#s), this.open && this.isConnected && (document.addEventListener("click", this.#o), document.addEventListener("keydown", this.#s));
 	}
-	#o = (e) => {
-		let t = !this.contains(e.target), n = this._anchorEl?.contains(e.target);
-		(t || n) && (this.open = !1);
-	};
-	#s = (e) => {
-		/* v8 ignore else -- @preserve */
-		e.key === "Escape" && (this.open = !1);
-	};
+	#o;
+	#s;
 };
 c([r], g.prototype, "headline", void 0), c([r({ mode: "boolean" })], g.prototype, "alternate", void 0), c([r({ mode: "fromView" })], g.prototype, "placement", void 0), c([r({ mode: "boolean" })], g.prototype, "open", void 0);
 //#endregion
 //#region src/lib/toggletip/toggletip.template.ts
-var _ = (e) => l("control"), v = i("toggletip", g, (e) => {
+var _ = (e) => l("control"), v = o("toggletip", g, (e) => {
 	let t = e.tagFor(u);
-	return n`
+	return i`
 		${f()}
 		<${t}
 			@keydown="${(e, { event: t }) => !(e.open && m(t))}"
@@ -67,12 +67,12 @@ var _ = (e) => l("control"), v = i("toggletip", g, (e) => {
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${s((e) => e.headline, n`<h2 class="headline">${(e) => e.headline}</h2>`)}
+				${s((e) => e.headline, i`<h2 class="headline">${(e) => e.headline}</h2>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
 		</${t}>
 	`;
-}, [d], { styles: h }), y = a(v);
+}, [d], { styles: h }), y = n(v);
 //#endregion
 export { v as n, g as r, y as t };

package/bundled/definition11.cjs

@@ -1,4 +1,4 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./definition2.cjs`),r=require(`./class-names.cjs`),i=require(`./definition10.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};t.t([e.l({mode:`fromView`})],a.prototype,`placement`,void 0);var o=e=>r.t(`control`),s=e.o(`contextual-help`,a,t=>{let r=t.tagFor(i.r),a=t.tagFor(n.r);return e.d`
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./definition2.cjs`),r=require(`./class-names.cjs`),i=require(`./definition10.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};t.t([e.m({mode:`fromView`})],a.prototype,`placement`,void 0);var o=e=>r.t(`control`),s=e.u(`contextual-help`,a,t=>{let r=t.tagFor(i.r),a=t.tagFor(n.r);return e.p`
 		<${r} class="base" exportparts="vvd-theme-alternate">
 			<button class="${o}" slot="anchor">
         <slot name="icon" slot="icon">
@@ -7,4 +7,4 @@ const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./
 			</button>
 			<slot></slot>
 		</${r}>
-	`},[n.t,i.n],{styles:`.control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),c=e.s(s);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
+	`},[n.t,i.n],{styles:`.control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),c=e.d(s);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/bundled/definition11.js

@@ -1,10 +1,10 @@
-import { d as e, l as t, o as n, s as r, t as i } from "./vivid-element.js";
+import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
 import { t as a } from "./decorate.js";
 import { r as o, t as s } from "./definition2.js";
 import { t as c } from "./class-names.js";
 import { n as l, r as u } from "./definition10.js";
 //#region src/lib/contextual-help/contextual-help.ts
-var d = class extends i {
+var d = class extends r {
 	constructor(...e) {
 		super(...e), this.placement = "right";
 	}
@@ -12,18 +12,18 @@ var d = class extends i {
 a([t({ mode: "fromView" })], d.prototype, "placement", void 0);
 //#endregion
 //#region src/lib/contextual-help/contextual-help.template.ts
-var f = (e) => c("control"), p = n("contextual-help", d, (t) => {
-	let n = t.tagFor(u), r = t.tagFor(o);
-	return e`
-		<${n} class="base" exportparts="vvd-theme-alternate">
+var f = (e) => c("control"), p = i("contextual-help", d, (e) => {
+	let t = e.tagFor(u), r = e.tagFor(o);
+	return n`
+		<${t} class="base" exportparts="vvd-theme-alternate">
 			<button class="${f}" slot="anchor">
         <slot name="icon" slot="icon">
           <${r} name="help-solid"></${r}>
         </slot>
 			</button>
 			<slot></slot>
-		</${n}>
+		</${t}>
 	`;
-}, [s, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = r(p);
+}, [s, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
 //#endregion
 export { m as n, p as t };

package/bundled/definition12.cjs

@@ -1,11 +1,11 @@
-const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.cjs`),r=require(`./slotted.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./definition2.cjs`),s=require(`./affix.cjs`),c=require(`./form-element.cjs`),l=require(`./with-success-text.cjs`),u=require(`./with-error-text.cjs`),d=require(`./with-contextual-help.cjs`),f=require(`./delegates-aria.cjs`),p=require(`./char-count.cjs`),m=require(`./class-names.cjs`),h=require(`./form-associated.cjs`),g=require(`./mixins.cjs`),_=require(`./definition11.cjs`),v=require(`./text-field.cjs`);var y={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},b=new e.y([`
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./definition2.cjs`),s=require(`./affix.cjs`),c=require(`./form-element.cjs`),l=require(`./with-success-text.cjs`),u=require(`./with-error-text.cjs`),d=require(`./with-contextual-help.cjs`),f=require(`./class-names.cjs`),p=require(`./delegates-aria.cjs`),m=require(`./char-count.cjs`),h=require(`./form-associated.cjs`),g=require(`./render-in-light-dom.cjs`),_=require(`./mixins.cjs`),v=require(`./definition11.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
 	._vvd-3-text-field-safari-workaround::placeholder {
 		opacity: 1 !important;
 		-webkit-text-fill-color: var(--_low-ink-color) !important;
 	}
-`]),x=e=>{let t=e.getRootNode();b.isAttachedTo(t)||b.addStylesTo(t)},S=class extends d.t(g.n(p.t(u.t(l.t(c.t(s.t(f.t(h.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=y.text}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.O.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),x(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e=g.i();get _uniqueId(){return this.id||this.#e}};a.t([e.l({attribute:`readonly`,mode:`boolean`})],S.prototype,`readOnly`,void 0),a.t([e.l({mode:`boolean`})],S.prototype,`autofocus`,void 0),a.t([e.l],S.prototype,`placeholder`,void 0),a.t([e.l],S.prototype,`type`,void 0),a.t([e.l],S.prototype,`list`,void 0),a.t([e.l({converter:e.u})],S.prototype,`maxlength`,void 0),a.t([e.l({converter:e.u})],S.prototype,`minlength`,void 0),a.t([e.l],S.prototype,`pattern`,void 0),a.t([e.l({converter:e.u})],S.prototype,`size`,void 0),a.t([e.l({mode:`boolean`})],S.prototype,`spellcheck`,void 0),a.t([e.l],S.prototype,`appearance`,void 0),a.t([e.l],S.prototype,`shape`,void 0),a.t([e.l],S.prototype,`autoComplete`,void 0),a.t([e.l()],S.prototype,`scale`,void 0),a.t([e.l({attribute:`inputmode`})],S.prototype,`inputMode`,void 0),a.t([e.T],S.prototype,`actionItemsSlottedContent`,void 0),a.t([e.T],S.prototype,`leadingActionItemsSlottedContent`,void 0);var C=e=>`vvd-text-field-control-${e}`,w=({errorValidationMessage:e,disabled:t,value:n,readOnly:r,placeholder:i,appearance:a,shape:o,label:s,successText:c,actionItemsSlottedContent:l,leadingActionItemsSlottedContent:u,icon:d,scale:f})=>m.t([`error`,!!e],[`disabled`,t],[`has-value`,!!n],[`readonly`,r],[`placeholder`,!!i],[`appearance-${a}`,!!a],[`shape-${o}`,!!o],[`no-label`,!s],[`has-icon`,!!d],[`success`,!!c],[`action-items`,!!l?.length],[`leading-action-items`,!!u?.length],[`no-leading`,!(u?.length||d)],[`size-${f}`,!!f]),T=e.o(`text-field`,S,i=>{let a=s.a(i);return e.d`
-		<div class="base ${w}">
-			${n.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
+`]),S=e=>{let t=e.getRootNode();x.isAttachedTo(t)||x.addStylesTo(t)},C=class extends d.t(_.n(m.t(u.t(l.t(c.t(s.t(p.t(h.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=b.text,this.#e=g.n()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),S(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}};a.t([e.m({attribute:`readonly`,mode:`boolean`})],C.prototype,`readOnly`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`autofocus`,void 0),a.t([e.m],C.prototype,`placeholder`,void 0),a.t([e.m],C.prototype,`type`,void 0),a.t([e.m],C.prototype,`list`,void 0),a.t([e.m({converter:e.h})],C.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],C.prototype,`minlength`,void 0),a.t([e.m],C.prototype,`pattern`,void 0),a.t([e.m({converter:e.h})],C.prototype,`size`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`spellcheck`,void 0),a.t([e.m],C.prototype,`appearance`,void 0),a.t([e.m],C.prototype,`shape`,void 0),a.t([e.m],C.prototype,`autoComplete`,void 0),a.t([e.m()],C.prototype,`scale`,void 0),a.t([e.m({attribute:`inputmode`})],C.prototype,`inputMode`,void 0),a.t([e.A],C.prototype,`actionItemsSlottedContent`,void 0),a.t([e.A],C.prototype,`leadingActionItemsSlottedContent`,void 0);var w=e=>`vvd-text-field-control-${e}`,T=({errorValidationMessage:e,disabled:t,value:n,readOnly:r,placeholder:i,appearance:a,shape:o,label:s,successText:c,actionItemsSlottedContent:l,leadingActionItemsSlottedContent:u,icon:d,scale:p})=>f.t([`error`,!!e],[`disabled`,t],[`has-value`,!!n],[`readonly`,r],[`placeholder`,!!i],[`appearance-${a}`,!!a],[`shape-${o}`,!!o],[`no-label`,!s],[`has-icon`,!!d],[`success`,!!c],[`action-items`,!!l?.length],[`leading-action-items`,!!u?.length],[`no-leading`,!(u?.length||d)],[`size-${p}`,!!p]),E=e.u(`text-field`,C,i=>{let a=s.a(i);return e.p`
+		<div class="base ${T}">
+			${r.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
 			<div
 				class="label-wrapper"
 				?hidden=${e=>!e.label&&!e._hasContextualHelp}
@@ -13,12 +13,12 @@ const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.
 				<slot class="label" name="_label"></slot>
 				<slot
 					name="contextual-help"
-					${r.t(`_contextualHelpSlottedContent`)}
+					${t.t(`_contextualHelpSlottedContent`)}
 				></slot>
 			</div>
-			${g.r(e.d`
-				${n.t(e=>e.label,e.d`
-						<label slot="_label" for="${e=>C(e._uniqueId)}">
+			${g.t(e.p`
+				${r.t(e=>e.label,e.p`
+						<label slot="_label" for="${e=>w(e._uniqueId)}">
 							${e=>e.label}
 						</label>
 					`)}
@@ -27,15 +27,15 @@ const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.
 				<div class="leading-items-wrapper">
 					<slot
 						name="leading-action-items"
-						${r.t(`leadingActionItemsSlottedContent`)}
+						${t.t(`leadingActionItemsSlottedContent`)}
 					></slot>
 					${e=>a(e.icon)}
 				</div>
 				<div class="wrapper">
 					<slot class="control" name="_control"></slot>
-					${g.r(e.d`<input
+					${g.t(e.p`<input
 							slot="_control"
-							id="${e=>C(e._uniqueId)}"
+							id="${e=>w(e._uniqueId)}"
 							class="_vvd-3-text-field-safari-workaround"
 							@input="${(e,t)=>e.handleTextInput(t.event)}"
 							@change="${e=>e.handleChange()}"
@@ -55,19 +55,18 @@ const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.
 							autocomplete="${e=>e.autoComplete}"
 							type="${e=>e.type}"
 							inputmode="${e=>e.inputMode}"
-							aria-describedby="${e=>e._feedbackDescribedBy} ${e=>e.charCount&&e.maxlength?e._charCountDescribedBy:null}"
 							value="${e=>e.initialValue}"
-							${f.n()}
-							${t.t(`control`)}
+							${p.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
+							${n.t(`control`)}
 						/>`)}
 				</div>
 				<div class="action-items-wrapper">
 					<slot
 						name="action-items"
-						${r.t(`actionItemsSlottedContent`)}
+						${t.t(`actionItemsSlottedContent`)}
 					></slot>
 				</div>
 			</div>
 			${e=>e._getFeedbackTemplate(i)}
 		</div>
-	`},[o.t,g.a,i.n,_.t],{styles:v.t,shadowOptions:{delegatesFocus:!0}}),E=e.s(T);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
+	`},[o.t,_.r,i.n,v.t],{styles:y.t,shadowOptions:{delegatesFocus:!0}}),D=e.d(E);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return D}});

package/bundled/definition12.js

@@ -1,7 +1,7 @@
-import { O as e, T as t, d as n, l as r, o as i, s as a, t as o, u as s, y as c } from "./vivid-element.js";
-import { t as l } from "./ref.js";
-import { t as u } from "./when.js";
-import { t as d } from "./slotted.js";
+import { A as e, M as t, d as n, h as r, m as i, p as a, t as o, u as s, w as c } from "./vivid-element.js";
+import { t as l } from "./slotted.js";
+import { t as u } from "./ref.js";
+import { t as d } from "./when.js";
 import { n as f } from "./definition.js";
 import { t as p } from "./decorate.js";
 import { t as m } from "./definition2.js";
@@ -10,11 +10,12 @@ import { t as _ } from "./form-element.js";
 import { t as v } from "./with-success-text.js";
 import { t as y } from "./with-error-text.js";
 import { t as b } from "./with-contextual-help.js";
-import { n as x, t as S } from "./delegates-aria.js";
-import { t as C } from "./char-count.js";
-import { t as w } from "./class-names.js";
+import { t as x } from "./class-names.js";
+import { n as S, t as C } from "./delegates-aria.js";
+import { t as w } from "./char-count.js";
 import { n as T } from "./form-associated.js";
-import { a as E, i as D, n as O, r as k } from "./mixins.js";
+import { n as E, t as D } from "./render-in-light-dom.js";
+import { n as O, r as k } from "./mixins.js";
 import { t as A } from "./definition11.js";
 import { t as j } from "./text-field.js";
 //#region src/lib/text-field/text-field.ts
@@ -27,9 +28,9 @@ var M = {
 }, N = new c(["\n	._vvd-3-text-field-safari-workaround::placeholder {\n		opacity: 1 !important;\n		-webkit-text-fill-color: var(--_low-ink-color) !important;\n	}\n"]), P = (e) => {
 	let t = e.getRootNode();
 	N.isAttachedTo(t) || N.addStylesTo(t);
-}, F = class extends b(O(C(y(v(_(g(S(T(o))))))))) {
+}, F = class extends b(O(w(y(v(_(g(C(T(o))))))))) {
 	constructor(...e) {
-		super(...e), this.proxy = document.createElement("input"), this.type = M.text;
+		super(...e), this.proxy = document.createElement("input"), this.type = M.text, this.#e = E();
 	}
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
@@ -90,29 +91,29 @@ var M = {
 		super.validate(this.control);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && e.enqueue(() => {
+		super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && t.enqueue(() => {
 			this.focus();
 		}), this._updateControlValueIfNeeded(), P(this), this._renderCharCountRemaining();
 	}
 	focus() {
 		this.control?.focus();
 	}
-	#e = D();
+	#e;
 	get _uniqueId() {
 		return this.id || this.#e;
 	}
 };
-p([r({
+p([i({
 	attribute: "readonly",
 	mode: "boolean"
-})], F.prototype, "readOnly", void 0), p([r({ mode: "boolean" })], F.prototype, "autofocus", void 0), p([r], F.prototype, "placeholder", void 0), p([r], F.prototype, "type", void 0), p([r], F.prototype, "list", void 0), p([r({ converter: s })], F.prototype, "maxlength", void 0), p([r({ converter: s })], F.prototype, "minlength", void 0), p([r], F.prototype, "pattern", void 0), p([r({ converter: s })], F.prototype, "size", void 0), p([r({ mode: "boolean" })], F.prototype, "spellcheck", void 0), p([r], F.prototype, "appearance", void 0), p([r], F.prototype, "shape", void 0), p([r], F.prototype, "autoComplete", void 0), p([r()], F.prototype, "scale", void 0), p([r({ attribute: "inputmode" })], F.prototype, "inputMode", void 0), p([t], F.prototype, "actionItemsSlottedContent", void 0), p([t], F.prototype, "leadingActionItemsSlottedContent", void 0);
+})], F.prototype, "readOnly", void 0), p([i({ mode: "boolean" })], F.prototype, "autofocus", void 0), p([i], F.prototype, "placeholder", void 0), p([i], F.prototype, "type", void 0), p([i], F.prototype, "list", void 0), p([i({ converter: r })], F.prototype, "maxlength", void 0), p([i({ converter: r })], F.prototype, "minlength", void 0), p([i], F.prototype, "pattern", void 0), p([i({ converter: r })], F.prototype, "size", void 0), p([i({ mode: "boolean" })], F.prototype, "spellcheck", void 0), p([i], F.prototype, "appearance", void 0), p([i], F.prototype, "shape", void 0), p([i], F.prototype, "autoComplete", void 0), p([i()], F.prototype, "scale", void 0), p([i({ attribute: "inputmode" })], F.prototype, "inputMode", void 0), p([e], F.prototype, "actionItemsSlottedContent", void 0), p([e], F.prototype, "leadingActionItemsSlottedContent", void 0);
 //#endregion
 //#region src/lib/text-field/text-field.template.ts
-var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e, disabled: t, value: n, readOnly: r, placeholder: i, appearance: a, shape: o, label: s, successText: c, actionItemsSlottedContent: l, leadingActionItemsSlottedContent: u, icon: d, scale: f }) => w(["error", !!e], ["disabled", t], ["has-value", !!n], ["readonly", r], ["placeholder", !!i], [`appearance-${a}`, !!a], [`shape-${o}`, !!o], ["no-label", !s], ["has-icon", !!d], ["success", !!c], ["action-items", !!l?.length], ["leading-action-items", !!u?.length], ["no-leading", !(u?.length || d)], [`size-${f}`, !!f]), R = i("text-field", F, (e) => {
+var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e, disabled: t, value: n, readOnly: r, placeholder: i, appearance: a, shape: o, label: s, successText: c, actionItemsSlottedContent: l, leadingActionItemsSlottedContent: u, icon: d, scale: f }) => x(["error", !!e], ["disabled", t], ["has-value", !!n], ["readonly", r], ["placeholder", !!i], [`appearance-${a}`, !!a], [`shape-${o}`, !!o], ["no-label", !s], ["has-icon", !!d], ["success", !!c], ["action-items", !!l?.length], ["leading-action-items", !!u?.length], ["no-leading", !(u?.length || d)], [`size-${f}`, !!f]), R = s("text-field", F, (e) => {
 	let t = h(e);
-	return n`
+	return a`
 		<div class="base ${L}">
-			${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}
@@ -120,11 +121,11 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 				<slot class="label" name="_label"></slot>
 				<slot
 					name="contextual-help"
-					${d("_contextualHelpSlottedContent")}
+					${l("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			${k(n`
-				${u((e) => e.label, n`
+			${D(a`
+				${d((e) => e.label, a`
 						<label slot="_label" for="${(e) => I(e._uniqueId)}">
 							${(e) => e.label}
 						</label>
@@ -134,13 +135,13 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 				<div class="leading-items-wrapper">
 					<slot
 						name="leading-action-items"
-						${d("leadingActionItemsSlottedContent")}
+						${l("leadingActionItemsSlottedContent")}
 					></slot>
 					${(e) => t(e.icon)}
 				</div>
 				<div class="wrapper">
 					<slot class="control" name="_control"></slot>
-					${k(n`<input
+					${D(a`<input
 							slot="_control"
 							id="${(e) => I(e._uniqueId)}"
 							class="_vvd-3-text-field-safari-workaround"
@@ -166,16 +167,15 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 							autocomplete="${(e) => e.autoComplete}"
 							type="${(e) => e.type}"
 							inputmode="${(e) => e.inputMode}"
-							aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.charCount && e.maxlength ? e._charCountDescribedBy : null}"
 							value="${(e) => e.initialValue}"
-							${x()}
-							${l("control")}
+							${S({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
+							${u("control")}
 						/>`)}
 				</div>
 				<div class="action-items-wrapper">
 					<slot
 						name="action-items"
-						${d("actionItemsSlottedContent")}
+						${l("actionItemsSlottedContent")}
 					></slot>
 				</div>
 			</div>
@@ -184,12 +184,12 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 	`;
 }, [
 	m,
-	E,
+	k,
 	f,
 	A
 ], {
 	styles: j,
 	shadowOptions: { delegatesFocus: !0 }
-}), z = a(R);
+}), z = n(R);
 //#endregion
 export { R as n, F as r, z as t };

package/bundled/definition13.cjs

@@ -1,11 +1,11 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./decorate.cjs`),r=require(`./definition2.cjs`),i=require(`./affix.cjs`),a=require(`./class-names.cjs`),o=require(`./host-semantics.cjs`);var s=`:host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}`,c=class extends o.t(i.n(e.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.tabIndex=`-1`,this.active=!1}_handleCloseClick(e){e.stopImmediatePropagation(),this.$emit(`close`)}_onKeyDown(e){return!this.removable||e.key!==`Delete`?!0:(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};n.t([t.l({mode:`boolean`})],c.prototype,`disabled`,void 0),n.t([t.l],c.prototype,`connotation`,void 0),n.t([t.l],c.prototype,`shape`,void 0),n.t([t.l],c.prototype,`label`,void 0),n.t([t.l({mode:`boolean`})],c.prototype,`removable`,void 0),n.t([t.l({mode:`fromView`})],c.prototype,`tabIndex`,void 0),n.t([t.T],c.prototype,`active`,void 0);var l=({connotation:e,disabled:t,active:n,iconTrailing:r,shape:i,removable:o})=>a.t(`base`,[`connotation-${e}`,!!e&&!!n],[`shape-${i}`,!!i],[`disabled`,!!t],[`selected`,!!n],[`icon-trailing`,r],[`removable`,o]);function u(e){let n=i.a(e);return t.d`<button
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./decorate.cjs`),r=require(`./definition2.cjs`),i=require(`./affix.cjs`),a=require(`./class-names.cjs`),o=require(`./host-semantics.cjs`);var s=`:host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}`,c=class extends o.t(i.n(e.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.tabIndex=`-1`,this.active=!1}_handleCloseClick(e){e.stopImmediatePropagation(),this.$emit(`close`)}_onKeyDown(e){return!this.removable||e.key!==`Delete`?!0:(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};n.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),n.t([t.m],c.prototype,`connotation`,void 0),n.t([t.m],c.prototype,`shape`,void 0),n.t([t.m],c.prototype,`label`,void 0),n.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),n.t([t.m({mode:`fromView`})],c.prototype,`tabIndex`,void 0),n.t([t.A],c.prototype,`active`,void 0);var l=({connotation:e,disabled:t,active:n,iconTrailing:r,shape:i,removable:o})=>a.t(`base`,[`connotation-${e}`,!!e&&!!n],[`shape-${i}`,!!i],[`disabled`,!!t],[`selected`,!!n],[`icon-trailing`,r],[`removable`,o]);function u(e){let n=i.a(e);return t.p`<button
 		aria-label="${e=>e.locale.tab.dismissButtonLabel}"
 		class="close"
 		id="close-btn"
 		@click="${(e,t)=>e._handleCloseClick(t.event)}"
 	>
 		${()=>n(`close-line`,i.i.Span)}
-	</button>`}var d=t.o(`tab`,c,e=>{let n=i.a(e);return t.d`
+	</button>`}var d=t.u(`tab`,c,e=>{let n=i.a(e);return t.p`
 		<template
 			slot="tab"
 			?active="${e=>e.active}"
@@ -17,4 +17,4 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 				${t=>t.removable?u(e):null}
 			</div>
 		</template>
-	`},[r.t],{styles:s}),f=t.s(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+	`},[r.t],{styles:s}),f=t.d(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});

package/bundled/definition13.js

@@ -1,12 +1,12 @@
 import { t as e } from "./localized.js";
-import { T as t, d as n, l as r, o as i, s as a, t as o } from "./vivid-element.js";
+import { A as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
 import { t as s } from "./decorate.js";
 import { t as c } from "./definition2.js";
 import { a as l, i as u, n as d } from "./affix.js";
 import { t as f } from "./class-names.js";
 import { n as p, t as m } from "./host-semantics.js";
 //#region src/lib/tab/tab.scss?inline
-var h = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}", g = class extends m(d(e(o))) {
+var h = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}", g = class extends m(d(e(a))) {
 	constructor(...e) {
 		super(...e), this.removable = !1, this.tabIndex = "-1", this.active = !1;
 	}
@@ -23,7 +23,7 @@ s([r({ mode: "boolean" })], g.prototype, "disabled", void 0), s([r], g.prototype
 var _ = ({ connotation: e, disabled: t, active: n, iconTrailing: r, shape: i, removable: a }) => f("base", [`connotation-${e}`, !!e && !!n], [`shape-${i}`, !!i], ["disabled", !!t], ["selected", !!n], ["icon-trailing", r], ["removable", a]);
 function v(e) {
 	let t = l(e);
-	return n`<button
+	return i`<button
 		aria-label="${(e) => e.locale.tab.dismissButtonLabel}"
 		class="close"
 		id="close-btn"
@@ -34,9 +34,9 @@ function v(e) {
 }
 //#endregion
 //#region src/lib/tab/definition.ts
-var y = i("tab", g, (e) => {
+var y = o("tab", g, (e) => {
 	let t = l(e);
-	return n`
+	return i`
 		<template
 			slot="tab"
 			?active="${(e) => e.active}"
@@ -53,6 +53,6 @@ var y = i("tab", g, (e) => {
 			</div>
 		</template>
 	`;
-}, [c], { styles: h }), b = a(y);
+}, [c], { styles: h }), b = n(y);
 //#endregion
 export { y as n, g as r, b as t };

package/bundled/definition14.cjs

@@ -1,5 +1,5 @@
-const e=require(`./vivid-element.cjs`),t=require(`./host-semantics.cjs`);var n=class extends t.t(e.t){},r=e.d`
+const e=require(`./vivid-element.cjs`),t=require(`./host-semantics.cjs`);var n=class extends t.t(e.t){},r=e.p`
 	<template slot="tabpanel" ${t.n({role:`tabpanel`})}>
 		<slot></slot>
 	</template>
-`,i=e.o(`tab-panel`,n,r,[],{}),a=e.s(i);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+`,i=e.u(`tab-panel`,n,r,[],{}),a=e.d(i);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/bundled/definition14.js

@@ -1,11 +1,11 @@
-import { d as e, o as t, s as n, t as r } from "./vivid-element.js";
+import { d as e, p as t, t as n, u as r } from "./vivid-element.js";
 import { n as i, t as a } from "./host-semantics.js";
 //#endregion
 //#region src/lib/tab-panel/definition.ts
-var o = t("tab-panel", class extends a(r) {}, e`
+var o = r("tab-panel", class extends a(n) {}, t`
 	<template slot="tabpanel" ${i({ role: "tabpanel" })}>
 		<slot></slot>
 	</template>
-`, [], {}), s = n(o);
+`, [], {}), s = e(o);
 //#endregion
 export { o as n, s as t };