@vonage/vivid 5.16.0 → 5.18.0

package/bundled/definition10.cjs

@@ -1,31 +1,19 @@
-const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./slotted.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./key-codes.cjs`),o=require(`./delegates-aria.cjs`),s=require(`./dialog.cjs`),c=require(`./definition8.cjs`),l=require(`./definition9.cjs`),u=require(`./anchored.cjs`),d=require(`./divider.cjs`);var f=`:host{display:var(--_popup-display,inline)}:host([slotted-anchor]){--_popup-display:contents}.base{box-sizing:border-box;inline-size:max-content;max-block-size:var(--menu-block-size,408px);min-inline-size:var(--menu-min-inline-size);flex-direction:column;gap:8px;padding:4px;display:flex;overflow:hidden auto}@media not all and (width>=600px){.base{max-inline-size:var(--menu-max-inline-size,300px)}}@media (width>=600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]: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));--focus-stroke-gap-color:transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{flex-direction:column;row-gap:1px;display:flex}.hide-body .body{display:none}.action-items{justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px;display:flex}.hide-actions .action-items{display:none}`,p=e=>e instanceof l.i&&e.controlType===`checkbox`,m=e=>e instanceof l.i&&e.controlType===`radio`,h=e=>e instanceof d.t?!0:e.role===`separator`,g=e=>e instanceof l.i?!0:!!(e.role&&e.role in l.a),_=class extends u.t(o.t(e.t)){constructor(...e){super(...e),this.offset=null,this.expandedItem=null,this.focusIndex=-1,this.handleFocusOut=e=>{!this.contains(e.relatedTarget)&&this.menuItems!==void 0&&this.menuItems.length&&(this.collapseExpandedItem(),this.menuItems[this.focusIndex].setAttribute(`tabindex`,`-1`),this.menuItems[0].setAttribute(`tabindex`,`0`),this.focusIndex=0)},this.handleItemFocus=e=>{let t=e.target;this.menuItems!==void 0&&t!==this.menuItems[this.focusIndex]&&(this.menuItems[this.focusIndex].setAttribute(`tabindex`,`-1`),this.focusIndex=this.menuItems.indexOf(t),t.setAttribute(`tabindex`,`0`))},this.handleExpandedChanged=e=>{let t=e.target;this.expandedItem!==null&&t===this.expandedItem&&t.expanded===!1&&(this.expandedItem=null),t.expanded&&(this.expandedItem=t)},this.removeItemListeners=()=>{this.menuItems!==void 0&&this.menuItems.forEach(e=>{e.removeEventListener(`expanded-change`,this.handleExpandedChanged),e.removeEventListener(`focus`,this.handleItemFocus)})},this.setItems=()=>{let e=this.domChildren();this.removeItemListeners(),this.menuItems=e.filter(g),this.menuItems.length&&(this.focusIndex=0),this.menuItems.forEach((e,t)=>{e instanceof l.i&&(e._isPresentational=!1),e.setAttribute(`tabindex`,t===0?`0`:`-1`),e.addEventListener(`expanded-change`,this.handleExpandedChanged),e.addEventListener(`focus`,this.handleItemFocus)})},this.placement=`bottom`,this.autoDismiss=!1,this.positionStrategy=`fixed`,this.open=!1,this._onFocusout=e=>{let t=e.relatedTarget,n=!this.contains(t)&&!this._anchorEl?.contains(t);this.autoDismiss&&n&&(this.open=!1)}}itemsChanged(){this.$fastController.isConnected&&this.menuItems!==void 0&&this.setItems()}connectedCallback(){super.connectedCallback(),e.O.enqueue(()=>{this.setItems()})}disconnectedCallback(){super.disconnectedCallback(),this.removeItemListeners(),this.menuItems=void 0}focus(){let e=this.querySelector(`[autofocus]:not([slot="anchor"])`);e instanceof HTMLElement?e.focus():this.setFocus(0)}collapseExpandedItem(){this.expandedItem!==null&&(this.expandedItem.expanded=!1,this.expandedItem=null)}handleMenuKeyDown(e){if(!(e.defaultPrevented||this.menuItems===void 0))switch(e.key){case a.t:this.setFocus(this.focusIndex+1);return;case a.i:this.setFocus(this.focusIndex-1);return;case`End`:this.setFocus(this.menuItems.length-1);return;case a.s:this.setFocus(0);return;default:return!0}}domChildren(){return Array.from(this.children).filter(e=>!e.hasAttribute(`hidden`)).filter(e=>!e.hasAttribute(`slot`))}setFocus(e){if(this.menuItems!==void 0&&e>=0&&e<this.menuItems.length){let t=this.menuItems[e];this.focusIndex>-1&&this.menuItems.length>=this.focusIndex-1&&this.menuItems[this.focusIndex].setAttribute(`tabindex`,`-1`),this.focusIndex=e,t.setAttribute(`tabindex`,`0`),t.focus()}}get#e(){return this.trigger??`auto`}openChanged(e,t){t&&this._popupEl?.show().then(()=>this.focus()),t?this.$emit(`open`,void 0,{bubbles:!1}):this.$emit(`close`,void 0,{bubbles:!1}),this._anchorEl&&this.#n(this._anchorEl)}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),e.addEventListener(`focusout`,this._onFocusout),e.ariaHasPopup=`menu`,this.#n(e)}#n(e){e.ariaExpanded=this.open.toString(),e.dataset.expanded=this.open.toString()}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeEventListener(`focusout`,this._onFocusout),e.ariaHasPopup=null,e.ariaExpanded=null,delete e.dataset.expanded}#i=()=>{if(this.#e===`off`||this.#e===`legacy`&&this.open)return;let t=!this.open;e.O.enqueue(()=>this.open=t)};_onBodyChange(e){if(this.menuItems===void 0||!(e.target instanceof Element))return;this.#e===`auto`&&!p(e.target)&&(this.open=!1);let t=this.domChildren(),n=t.indexOf(e.target);if(n!==-1){if(m(e.target)&&e.target.checked){for(let e=n-1;e>=0;--e){let n=t[e];if(m(n)&&(n.checked=!1),h(n))break}for(let e=n+1;e<=t.length-1;++e){let n=t[e];if(m(n)&&(n.checked=!1),h(n))break}}return!0}}};r.t([e.l({attribute:`offset`,converter:e.u})],_.prototype,`offset`,void 0),r.t([e.T],_.prototype,`items`,void 0),r.t([e.l({mode:`fromView`})],_.prototype,`placement`,void 0),r.t([e.l],_.prototype,`trigger`,void 0),r.t([e.l({mode:`boolean`,attribute:`auto-dismiss`})],_.prototype,`autoDismiss`,void 0),r.t([e.l({mode:`fromView`,attribute:`position-strategy`})],_.prototype,`positionStrategy`,void 0),r.t([e.l({mode:`boolean`})],_.prototype,`open`,void 0),r.t([e.T],_.prototype,`headerSlottedContent`,void 0),r.t([e.T],_.prototype,`actionItemsSlottedContent`,void 0),r.t([e.T],_.prototype,`_popupOffset`,void 0);var v=({headerSlottedContent:e,actionItemsSlottedContent:t,items:n})=>i.t(`base`,[`hide-header`,!e?.length],[`hide-actions`,!t?.length],[`hide-body`,n&&!n.length]);function y(e,t){return e.open&&s.t(t)&&(e.open=!1),!0}var b=e.o(l.r,_,r=>{let i=r.tagFor(c.i),a=u.n();function s(e,t,n){t.stopPropagation(),e.open=n}return e.d`
-		<template @focusout="${(e,t)=>e._onFocusout(t.event)}">
-			${a}
-			<${i}
-				${t.t(`_popupEl`)}
-				:placement=${e=>e.placement}
-				:open=${e=>e.open}
-				:anchor=${e=>e._anchorEl}
-				:strategy="${e=>e.positionStrategy}"
-				:offset=${e=>e.offset||e._popupOffset}
-				@keydown="${(e,t)=>y(e,t.event)}"
-				@vwc-popup:open="${(e,t)=>s(e,t.event,!0)}"
-				@vwc-popup:close="${(e,t)=>s(e,t.event,!1)}"
-			>
-			<div class="${v}">
-				<div class="header">
-					<slot name="header" ${n.t(`headerSlottedContent`)}></slot>
-				</div>
-				<div
-					class="body"
-					${o.n({role:`menu`})}
-					@change="${(e,t)=>e._onBodyChange(t.event)}"
-					@keydown="${(e,t)=>e.handleMenuKeyDown(t.event)}"
-					@focusout="${(e,t)=>e.handleFocusOut(t.event)}"
-				>
-					<slot ${n.t(`items`)}></slot>
-				</div>
-				<footer class="action-items"><slot name="action-items"  ${n.t(`actionItemsSlottedContent`)}></slot></footer>
+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`
+		${o.n()}
+		<${r}
+			@keydown="${(e,{event:t})=>!(e.open&&s.t(t))}"
+			class="${u}"
+			arrow
+			:anchor="${e=>e._anchorEl}"
+			:open="${e=>e.open}"
+			?alternate="${e=>!e.alternate}"
+			placement="${e=>e.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${n.t(e=>e.headline,t.d`<h2 class="headline">${e=>e.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
-		</${i}>
-	</template>`},[c.t,l.t],{styles:f}),x=e.s(b);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return b}});
+		</${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}});

package/bundled/definition10.js

@@ -1,180 +1,78 @@
-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 } from "./vivid-element.js";
-import { t as c } from "./ref.js";
-import { t as l } from "./slotted.js";
-import { t as u } from "./decorate.js";
-import { t as d } from "./class-names.js";
-import { i as f, s as p, t as m } from "./key-codes.js";
-import { n as h, t as g } from "./delegates-aria.js";
-import { t as _ } from "./dialog.js";
-import { i as v, t as y } from "./definition8.js";
-import { a as b, i as x, r as S, t as C } from "./definition9.js";
-import { n as w, t as T } from "./anchored.js";
-import { t as E } from "./divider.js";
-//#region src/lib/menu/menu.scss?inline
-var D = ":host{display:var(--_popup-display,inline)}:host([slotted-anchor]){--_popup-display:contents}.base{box-sizing:border-box;inline-size:max-content;max-block-size:var(--menu-block-size,408px);min-inline-size:var(--menu-min-inline-size);flex-direction:column;gap:8px;padding:4px;display:flex;overflow:hidden auto}@media not all and (width>=600px){.base{max-inline-size:var(--menu-max-inline-size,300px)}}@media (width>=600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]: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));--focus-stroke-gap-color:transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{flex-direction:column;row-gap:1px;display:flex}.hide-body .body{display:none}.action-items{justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px;display:flex}.hide-actions .action-items{display:none}", O = (e) => e instanceof x && e.controlType === "checkbox", k = (e) => e instanceof x && e.controlType === "radio", A = (e) => e instanceof E ? !0 : e.role === "separator", j = (e) => e instanceof x ? !0 : !!(e.role && e.role in b), M = class extends T(g(o)) {
+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 { t as s } from "./when.js";
+import { t as c } from "./decorate.js";
+import { t as l } from "./class-names.js";
+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)) {
 	constructor(...e) {
-		super(...e), this.offset = null, this.expandedItem = null, this.focusIndex = -1, this.handleFocusOut = (e) => {
-			!this.contains(e.relatedTarget) && this.menuItems !== void 0 && this.menuItems.length && (this.collapseExpandedItem(), this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.menuItems[0].setAttribute("tabindex", "0"), this.focusIndex = 0);
-		}, this.handleItemFocus = (e) => {
-			let t = e.target;
-			this.menuItems !== void 0 && t !== this.menuItems[this.focusIndex] && (this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.focusIndex = this.menuItems.indexOf(t), t.setAttribute("tabindex", "0"));
-		}, this.handleExpandedChanged = (e) => {
-			let t = e.target;
-			this.expandedItem !== null && t === this.expandedItem && t.expanded === !1 && (this.expandedItem = null), t.expanded && (this.expandedItem = t);
-		}, this.removeItemListeners = () => {
-			this.menuItems !== void 0 && this.menuItems.forEach((e) => {
-				e.removeEventListener("expanded-change", this.handleExpandedChanged), e.removeEventListener("focus", this.handleItemFocus);
-			});
-		}, this.setItems = () => {
-			let e = this.domChildren();
-			this.removeItemListeners(), this.menuItems = e.filter(j), this.menuItems.length && (this.focusIndex = 0), this.menuItems.forEach((e, t) => {
-				e instanceof x && (e._isPresentational = !1), e.setAttribute("tabindex", t === 0 ? "0" : "-1"), e.addEventListener("expanded-change", this.handleExpandedChanged), e.addEventListener("focus", this.handleItemFocus);
-			});
-		}, this.placement = "bottom", this.autoDismiss = !1, this.positionStrategy = "fixed", this.open = !1, this._onFocusout = (e) => {
-			let t = e.relatedTarget, n = !this.contains(t) && !this._anchorEl?.contains(t);
-			this.autoDismiss && n && (this.open = !1);
-		};
+		super(...e), this.alternate = !1, this.placement = "right", this.open = !1;
 	}
-	itemsChanged() {
-		this.$fastController.isConnected && this.menuItems !== void 0 && this.setItems();
+	#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(), e.enqueue(() => {
-			this.setItems();
-		});
+		super.connectedCallback(), this.#a();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeItemListeners(), this.menuItems = void 0;
-	}
-	focus() {
-		let e = this.querySelector("[autofocus]:not([slot=\"anchor\"])");
-		e instanceof HTMLElement ? e.focus() : this.setFocus(0);
-	}
-	collapseExpandedItem() {
-		this.expandedItem !== null && (this.expandedItem.expanded = !1, this.expandedItem = null);
-	}
-	handleMenuKeyDown(e) {
-		if (!(e.defaultPrevented || this.menuItems === void 0)) switch (e.key) {
-			case m:
-				this.setFocus(this.focusIndex + 1);
-				return;
-			case f:
-				this.setFocus(this.focusIndex - 1);
-				return;
-			case "End":
-				this.setFocus(this.menuItems.length - 1);
-				return;
-			case p:
-				this.setFocus(0);
-				return;
-			default: return !0;
-		}
-	}
-	domChildren() {
-		return Array.from(this.children).filter((e) => !e.hasAttribute("hidden")).filter((e) => !e.hasAttribute("slot"));
-	}
-	setFocus(e) {
-		if (this.menuItems !== void 0 && e >= 0 && e < this.menuItems.length) {
-			let t = this.menuItems[e];
-			this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1 && this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.focusIndex = e, t.setAttribute("tabindex", "0"), t.focus();
-		}
-	}
-	get #e() {
-		return this.trigger ?? "auto";
-	}
-	openChanged(e, t) {
-		t && this._popupEl?.show().then(() => this.focus()), t ? this.$emit("open", void 0, { bubbles: !1 }) : this.$emit("close", void 0, { bubbles: !1 }), this._anchorEl && this.#n(this._anchorEl);
+		super.disconnectedCallback(), this.#a();
 	}
 	_anchorElChanged(e, t) {
 		e && this.#r(e), t && this.#t(t);
 	}
 	#t(e) {
-		e.addEventListener("click", this.#i, !0), e.addEventListener("focusout", this._onFocusout), e.ariaHasPopup = "menu", this.#n(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.ariaExpanded = this.open.toString(), e.dataset.expanded = this.open.toString();
+		e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
 	}
 	#r(e) {
-		e.removeEventListener("click", this.#i, !0), e.removeEventListener("focusout", this._onFocusout), e.ariaHasPopup = null, e.ariaExpanded = null, delete e.dataset.expanded;
+		/* v8 ignore else -- @preserve */
+		e.removeEventListener("click", this.#i, !0), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.ariaLabel &&= this.#e;
 	}
 	#i = () => {
-		if (this.#e === "off" || this.#e === "legacy" && this.open) return;
-		let t = !this.open;
-		e.enqueue(() => this.open = t);
+		this.open || t.enqueue(() => this.open = !0);
 	};
-	_onBodyChange(e) {
-		if (this.menuItems === void 0 || !(e.target instanceof Element)) return;
-		this.#e === "auto" && !O(e.target) && (this.open = !1);
-		let t = this.domChildren(), n = t.indexOf(e.target);
-		if (n !== -1) {
-			if (k(e.target) && e.target.checked) {
-				for (let e = n - 1; e >= 0; --e) {
-					let n = t[e];
-					if (k(n) && (n.checked = !1), A(n)) break;
-				}
-				for (let e = n + 1; e <= t.length - 1; ++e) {
-					let n = t[e];
-					if (k(n) && (n.checked = !1), A(n)) break;
-				}
-			}
-			return !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) => {
+		/* v8 ignore else -- @preserve */
+		e.key === "Escape" && (this.open = !1);
+	};
 };
-u([r({
-	attribute: "offset",
-	converter: s
-})], M.prototype, "offset", void 0), u([t], M.prototype, "items", void 0), u([r({ mode: "fromView" })], M.prototype, "placement", void 0), u([r], M.prototype, "trigger", void 0), u([r({
-	mode: "boolean",
-	attribute: "auto-dismiss"
-})], M.prototype, "autoDismiss", void 0), u([r({
-	mode: "fromView",
-	attribute: "position-strategy"
-})], M.prototype, "positionStrategy", void 0), u([r({ mode: "boolean" })], M.prototype, "open", void 0), u([t], M.prototype, "headerSlottedContent", void 0), u([t], M.prototype, "actionItemsSlottedContent", void 0), u([t], M.prototype, "_popupOffset", void 0);
-//#endregion
-//#region src/lib/menu/menu.template.ts
-var N = ({ headerSlottedContent: e, actionItemsSlottedContent: t, items: n }) => d("base", ["hide-header", !e?.length], ["hide-actions", !t?.length], ["hide-body", n && !n.length]);
-function P(e, t) {
-	return e.open && _(t) && (e.open = !1), !0;
-}
+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/menu/definition.ts
-var F = i(S, M, (e) => {
-	let t = e.tagFor(v), r = w();
-	function i(e, t, n) {
-		t.stopPropagation(), e.open = n;
-	}
+//#region src/lib/toggletip/toggletip.template.ts
+var _ = (e) => l("control"), v = i("toggletip", g, (e) => {
+	let t = e.tagFor(u);
 	return n`
-		<template @focusout="${(e, t) => e._onFocusout(t.event)}">
-			${r}
-			<${t}
-				${c("_popupEl")}
-				:placement=${(e) => e.placement}
-				:open=${(e) => e.open}
-				:anchor=${(e) => e._anchorEl}
-				:strategy="${(e) => e.positionStrategy}"
-				:offset=${(e) => e.offset || e._popupOffset}
-				@keydown="${(e, t) => P(e, t.event)}"
-				@vwc-popup:open="${(e, t) => i(e, t.event, !0)}"
-				@vwc-popup:close="${(e, t) => i(e, t.event, !1)}"
-			>
-			<div class="${N}">
-				<div class="header">
-					<slot name="header" ${l("headerSlottedContent")}></slot>
-				</div>
-				<div
-					class="body"
-					${h({ role: "menu" })}
-					@change="${(e, t) => e._onBodyChange(t.event)}"
-					@keydown="${(e, t) => e.handleMenuKeyDown(t.event)}"
-					@focusout="${(e, t) => e.handleFocusOut(t.event)}"
-				>
-					<slot ${l("items")}></slot>
-				</div>
-				<footer class="action-items"><slot name="action-items"  ${l("actionItemsSlottedContent")}></slot></footer>
+		${f()}
+		<${t}
+			@keydown="${(e, { event: t }) => !(e.open && m(t))}"
+			class="${_}"
+			arrow
+			:anchor="${(e) => e._anchorEl}"
+			:open="${(e) => e.open}"
+			?alternate="${(e) => !e.alternate}"
+			placement="${(e) => e.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${s((e) => e.headline, n`<h2 class="headline">${(e) => e.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
 		</${t}>
-	</template>`;
-}, [y, C], { styles: D }), I = a(F);
+	`;
+}, [d], { styles: h }), y = a(v);
 //#endregion
-export { I as n, M as r, F as t };
+export { v as n, g as r, y as t };

package/bundled/definition11.cjs

@@ -1,19 +1,10 @@
-const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./slotted.cjs`),r=require(`./definition2.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./delegates-aria.cjs`),s=require(`./form-associated.cjs`),c=require(`./form-element.cjs`),l=require(`./with-success-text.cjs`),u=require(`./with-error-text.cjs`),d=require(`./mixins.cjs`);var f=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,p=class extends o.t(d.t(u.t(l.t(c.t(s.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t==1?`true`:`false`,e!==void 0&&this.$emit(`input`)}};i.t([e.l({attribute:`tabindex`})],p.prototype,`tabindex`,void 0),i.t([e.l],p.prototype,`connotation`,void 0),i.t([e.l({attribute:`readonly`,mode:`boolean`})],p.prototype,`readOnly`,void 0),i.t([e.T],p.prototype,`defaultSlottedNodes`,void 0),i.t([e.l({attribute:`indeterminate`,mode:`boolean`})],p.prototype,`indeterminate`,void 0),i.t([e.T],p.prototype,`slottedContent`,void 0);var m=({connotation:e,readOnly:t,checked:n,disabled:r,indeterminate:i,errorValidationMessage:o,successText:s,label:c,slottedContent:l})=>a.t(`base`,[`connotation-${e}`,!!e],[`readonly`,!!t],[`checked`,!!n||!!i],[`disabled`,!!r],[`error connotation-alert`,!!o],[`success connotation-success`,!!s],[`hide-label`,!c&&!l?.length]),h=e.o(`checkbox`,p,i=>{let a=i.tagFor(r.r);return e.d`<template>
-		<div
-			class="${m}"
-			aria-describedby="${e=>e._feedbackDescribedBy}"
-			${o.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly})}
-			tabindex="${e=>e.tabindex===null?e.disabled?null:0:e.tabindex}"
-			@keypress="${(e,t)=>e.keypressHandler(t.event)}"
-			@click="${(e,t)=>e.clickHandler(t.event)}"
-		>
-			<div class="control">
-				${t.t(e=>e.checked&&!e.indeterminate,e.d`<${a} name="check-solid" class="icon"></${a}>`)}
-				${t.t(e=>e.indeterminate,e.d`<${a} name="minus-solid" class="icon"></${a}>`)}
-			</div>
-			${e.d`<label
-				>${e=>e.label}<slot ${n.t(`slottedContent`)}></slot
-			></label>`}
-		</div>
-		${e=>e._getFeedbackTemplate(i)}
-	</template>`},[r.t,d.a],{styles:f,shadowOptions:{delegatesFocus:!0}}),g=e.s(h);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});
+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`
+		<${r} class="base" exportparts="vvd-theme-alternate">
+			<button class="${o}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${a} name="help-solid"></${a}>
+        </slot>
+			</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}});

package/bundled/definition11.js

@@ -1,78 +1,29 @@
-import { T as e, d as t, l as n, o as r, s as i, t as a } from "./vivid-element.js";
-import { t as o } from "./when.js";
-import { t as s } from "./slotted.js";
-import { r as c, t as l } from "./definition2.js";
-import { t as u } from "./decorate.js";
-import { t as d } from "./class-names.js";
-import { n as f, t as p } from "./delegates-aria.js";
-import { t as m } from "./form-associated.js";
-import { t as h } from "./form-element.js";
-import { t as g } from "./with-success-text.js";
-import { t as _ } from "./with-error-text.js";
-import { a as v, t as y } from "./mixins.js";
-//#region src/lib/checkbox/checkbox.scss?inline
-var b = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}", x = class extends p(y(_(g(h(m(a)))))) {
-	readOnlyChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
-	}
-	constructor() {
-		super(), this.tabindex = null, this.proxy = document.createElement("input"), this.initialValue = "on", this.defaultSlottedNodes = [], this.indeterminate = !1, this.keypressHandler = (e) => {
-			if (e.target instanceof HTMLAnchorElement) return !0;
-			if (!this.disabled && !this.readOnly) switch (e.key) {
-				case " ":
-					this.indeterminate &&= !1, this.checked = !this.checked;
-					break;
-			}
-			return !1;
-		}, this.clickHandler = (e) => e.target instanceof HTMLAnchorElement ? !0 : (!this.disabled && !this.readOnly && (this.indeterminate &&= !1, this.checked = !this.checked), !1), this.proxy.setAttribute("type", "checkbox");
-	}
-	ariaCheckedChanged(e, t) {
-		super.ariaCheckedChanged(e, t), this.ariaChecked === "mixed" ? this.indeterminate = !0 : (this.indeterminate = !1, this.checked = this.ariaChecked === "true");
-	}
-	checkedChanged(e, t) {
-		super.checkedChanged(e, t), this.ariaChecked = t == 1 ? "true" : "false", e !== void 0 && this.$emit("input");
+import { d as e, l as t, o as n, s as r, t 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 {
+	constructor(...e) {
+		super(...e), this.placement = "right";
 	}
 };
-u([n({ attribute: "tabindex" })], x.prototype, "tabindex", void 0), u([n], x.prototype, "connotation", void 0), u([n({
-	attribute: "readonly",
-	mode: "boolean"
-})], x.prototype, "readOnly", void 0), u([e], x.prototype, "defaultSlottedNodes", void 0), u([n({
-	attribute: "indeterminate",
-	mode: "boolean"
-})], x.prototype, "indeterminate", void 0), u([e], x.prototype, "slottedContent", void 0);
+a([t({ mode: "fromView" })], d.prototype, "placement", void 0);
 //#endregion
-//#region src/lib/checkbox/checkbox.template.ts
-var S = ({ connotation: e, readOnly: t, checked: n, disabled: r, indeterminate: i, errorValidationMessage: a, successText: o, label: s, slottedContent: c }) => d("base", [`connotation-${e}`, !!e], ["readonly", !!t], ["checked", !!n || !!i], ["disabled", !!r], ["error connotation-alert", !!a], ["success connotation-success", !!o], ["hide-label", !s && !c?.length]), C = r("checkbox", x, (e) => {
-	let n = e.tagFor(c);
-	return t`<template>
-		<div
-			class="${S}"
-			aria-describedby="${(e) => e._feedbackDescribedBy}"
-			${f({
-		role: "checkbox",
-		ariaChecked: (e) => e.indeterminate ? "mixed" : e.checked,
-		ariaRequired: (e) => e.required,
-		ariaDisabled: (e) => e.disabled,
-		ariaReadOnly: (e) => e.readOnly
-	})}
-			tabindex="${(e) => e.tabindex === null ? e.disabled ? null : 0 : e.tabindex}"
-			@keypress="${(e, t) => e.keypressHandler(t.event)}"
-			@click="${(e, t) => e.clickHandler(t.event)}"
-		>
-			<div class="control">
-				${o((e) => e.checked && !e.indeterminate, t`<${n} name="check-solid" class="icon"></${n}>`)}
-				${o((e) => e.indeterminate, t`<${n} name="minus-solid" class="icon"></${n}>`)}
-			</div>
-			${t`<label
-				>${(e) => e.label}<slot ${s("slottedContent")}></slot
-			></label>`}
-		</div>
-		${(t) => t._getFeedbackTemplate(e)}
-	</template>`;
-}, [l, v], {
-	styles: b,
-	shadowOptions: { delegatesFocus: !0 }
-}), w = i(C);
+//#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">
+			<button class="${f}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${r} name="help-solid"></${r}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${n}>
+	`;
+}, [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);
 //#endregion
-export { w as n, x as r, C as t };
+export { m as n, p as t };

package/bundled/definition12.cjs

@@ -1,19 +1,73 @@
-const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./definition2.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./dom.cjs`),o=require(`./affix.cjs`),s=require(`./host-semantics.cjs`);function c(e){return a.t(e)&&(e.getAttribute(`role`)===`option`||e instanceof HTMLOptionElement||e instanceof l)}var l=class extends s.t(o.n(e.t)){defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(e){this.defaultSelected=e}selectedChanged(){this.dirtySelected||=!0,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!=`string`){this.value=``;return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(e){this._label=e}set text(e){this._text=e}get text(){return this._text??``}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:``}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){let e=this.matchedText??this._vvdSearchText;if(e){let t=this.text.toLowerCase().indexOf(e.toLowerCase());return t===-1?{from:0,to:0}:{from:t,to:t+e.length}}return{from:0,to:0}}constructor(e,t,n,r){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value=``,this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText=``,this._isNotMatching=!1,e&&(this.text=e),t&&(this.value=t),n&&(this.defaultSelected=n),r&&(this.selected=r),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}connectedCallback(){super.connectedCallback(),this.dirtySelected||=(this.selected=this.defaultSelected,!1)}};r.t([e.l({converter:{fromView:e=>{if(e===!0||e===`true`)return!0;if(e===!1||e===`false`)return!1},toView:e=>e}})],l.prototype,`checked`,void 0),r.t([e.l({attribute:`selected`,mode:`boolean`})],l.prototype,`defaultSelected`,void 0),r.t([e.l({mode:`boolean`})],l.prototype,`disabled`,void 0),r.t([e.l({attribute:`current-selected`,mode:`boolean`})],l.prototype,`selected`,void 0),r.t([e.l({attribute:`value`})],l.prototype,`value`,void 0),r.t([e.l({attribute:`label`})],l.prototype,`_label`,void 0),r.t([e.l({attribute:`text`})],l.prototype,`_text`,void 0),r.t([e.l({attribute:`text-secondary`})],l.prototype,`textSecondary`,void 0),r.t([e.T],l.prototype,`_highlighted`,void 0),r.t([e.T],l.prototype,`_displayCheckmark`,void 0),r.t([e.l({attribute:`matched-text`})],l.prototype,`matchedText`,void 0),r.t([e.T],l.prototype,`_vvdSearchText`,void 0),r.t([e.E],l.prototype,`_hasMatchedText`,null),r.t([e.T],l.prototype,`_isNotMatching`,void 0),r.t([e.E],l.prototype,`_matchedRange`,null),r.t([e.l],l.prototype,`connotation`,void 0),r.t([e.l({attribute:`tag-connotation`})],l.prototype,`tagConnotation`,void 0);var u=e=>i.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`disabled`,e.disabled],[`selected`,!!e.selected],[`hover`,!!e._highlighted],[`active`,!!e.checked],[`icon`,!!e.icon],[`two-lines`,!!e.text?.length&&!!e.textSecondary?.length]);function d(){return e.d`${t.t(e=>e.text||e.textSecondary,e.d`<span class="text">
-			${t.t(e=>e.text,e.d`<span class="text-primary">
-					${t.t(e=>e._hasMatchedText,e.d`${e=>e.text.slice(0,e._matchedRange.from)}<span class="match"
-								>${e=>e.text.slice(e._matchedRange.from,e._matchedRange.to)}</span
-							>`)}${e=>e.text.slice(e._matchedRange.to)}
-				</span>`)}
-			${t.t(e=>e.textSecondary,e.d`<span class="text-secondary">${e=>e.textSecondary}</span>`)}
-		</span>`)}`}var f=e.o(`option`,l,r=>{let i=o.a(r),a=r.tagFor(n.r);return e.d`
-		<template
-			${s.n({role:`option`,ariaChecked:e=>e.checked,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
-			style="${e=>e._isNotMatching?`display: none`:``}"
-		>
-			<div class="${u}">
-				${e=>i(e.icon,o.i.Slot)} ${d()}
-				<slot name="trailing-meta"></slot>
-				${t.t(e=>e._displayCheckmark&&e.selected,e.d`<${a} class="checkmark" name="check-line"></${a}>`)}
+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([`
+	._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))}
+			<div
+				class="label-wrapper"
+				?hidden=${e=>!e.label&&!e._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
+				<slot
+					name="contextual-help"
+					${r.t(`_contextualHelpSlottedContent`)}
+				></slot>
 			</div>
-		</template>
-	`},[n.t],{styles:`:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-option-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-option-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-option-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-option-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-option-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-option-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-option-accent-dim,var(--vvd-color-neutral-200))}.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)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.active{--focus-stroke-color:var(--vvd-color-cta-500);--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}`}),p=e.s(f);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+			${g.r(e.d`
+				${n.t(e=>e.label,e.d`
+						<label slot="_label" for="${e=>C(e._uniqueId)}">
+							${e=>e.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${r.t(`leadingActionItemsSlottedContent`)}
+					></slot>
+					${e=>a(e.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${g.r(e.d`<input
+							slot="_control"
+							id="${e=>C(e._uniqueId)}"
+							class="_vvd-3-text-field-safari-workaround"
+							@input="${(e,t)=>e.handleTextInput(t.event)}"
+							@change="${e=>e.handleChange()}"
+							@blur="${e=>{e.$emit(`blur`,void 0,{bubbles:!1})}}"
+							@focus="${e=>{e.$emit(`focus`,void 0,{bubbles:!1})}}"
+							?autofocus="${e=>e.autofocus}"
+							?disabled="${e=>e.disabled}"
+							?readonly="${e=>e.readOnly}"
+							?required="${e=>e.required}"
+							?spellcheck="${e=>e.spellcheck}"
+							list="${e=>e.list}"
+							maxlength="${e=>e.maxlength}"
+							minlength="${e=>e.minlength}"
+							pattern="${e=>e.pattern}"
+							placeholder="${e=>e.placeholder}"
+							size="${e=>e.size}"
+							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`)}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${r.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}});