@vonage/vivid 5.24.0 → 5.27.0

package/bundled/definition8.js

@@ -1,161 +1,105 @@
-import { A as e, d as t, h as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
-import { t as s } from "./ref.js";
-import { t as c } from "./when.js";
-import { t as l } from "./decorate.js";
-import { t as u } from "./class-names.js";
-import { i as d, t as f } from "./definition6.js";
-import { r as p, t as m } from "./definition7.js";
-import { a as h, c as g, i as _, l as v, n as y, o as b, r as x, s as S, t as C, u as w } from "./floating-ui.dom.js";
-//#region src/lib/popup/popup.ts
-var T = {
-	Flip: "flip",
-	AutoPlacementHorizontal: "auto-placement-horizontal",
-	AutoPlacementVertical: "auto-placement-vertical"
-}, E = {
-	[T.Flip]: h(),
-	[T.AutoPlacementHorizontal]: y({ allowedPlacements: [
-		"bottom",
-		"top",
-		"bottom-start",
-		"bottom-end",
-		"top-start",
-		"top-end"
-	] }),
-	[T.AutoPlacementVertical]: y({ allowedPlacements: [
-		"left",
-		"right",
-		"left-start",
-		"left-end",
-		"right-start",
-		"right-end"
-	] })
-}, D = class extends a {
+import { A as e, P as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
+import { r as s, t as c } from "./slotted.js";
+import { t as l } from "./when.js";
+import { t as u } from "./decorate.js";
+import { t as d } from "./class-names.js";
+import { i as f, t as p } from "./definition7.js";
+import { n as m, t as h } from "./anchored.js";
+import { t as g } from "./kbd-shortcut.js";
+import { n as _, t as v } from "./render-in-light-dom.js";
+import { t as y } from "./dialog.js";
+//#region src/lib/tooltip/tooltip.scss?inline
+var b = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}", x = class extends g(h(a)) {
 	constructor(...e) {
-		super(...e), this.open = !1, this.dismissible = !1, this.arrow = !1, this.alternate = !1, this.placementStrategy = T.Flip, this.animationFrame = !1, this.shiftCrossAxis = !1, this.strategy = "fixed", this.offset = null, this.#a = () => (this.#i = this.updatePosition(), this.#i);
-	}
-	get #e() {
-		let e = [
-			S(),
-			E[this.placementStrategy],
-			v({ crossAxis: this.shiftCrossAxis }),
-			b(),
-			w({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
-				Object.assign(n.floating.style, {
-					maxWidth: `${e}px`,
-					maxHeight: `${t}px`
-				});
-			} })
-		], t = this.offset ?? 0;
-		return this.arrow && (t += 12, e = [...e, C({
-			element: this.arrowEl,
-			padding: 10
-		})]), t > 0 && e.unshift(g(t)), e;
-	}
-	#t;
-	openChanged(e, t) {
-		this.#r(), this.#n(), this.$emit(t ? "vwc-popup:open" : "vwc-popup:close");
-	}
-	animationFrameChanged() {
-		this.#n();
-	}
-	shiftCrossAxisChanged() {
-		this.#n();
-	}
-	anchorChanged() {
-		this.#n();
-	}
-	strategyChanged() {
-		this.#r();
+		super(...e), this.open = !1, this._descriptionId = `vwc-tooltip-desc-${_()}`, this._descriptionSecondaryId = `vwc-tooltip-desc-secondary-${_()}`, this._defaultSlotContent = [], this.#i = () => {
+			this.open = !0;
+		}, this.#a = () => {
+			this.open = !1;
+		}, this.#s = (e) => {
+			/* v8 ignore else -- @preserve */
+			e.key === "Escape" && this.#a();
+		};
+	}
+	_defaultSlotContentChanged() {
+		for (let e of this._defaultSlotContent) e.id ||= `vwc-tooltip-content-${_()}`;
+		this._anchorEl && this.#t(this._anchorEl);
+	}
+	_kbdAriaShortcutsValueChanged() {
+		this._anchorEl && t.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#r(), this.#n();
+		super.connectedCallback(), this.#o();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#n();
+		super.disconnectedCallback(), this.#o();
 	}
-	#n() {
-		this.#t?.(), this.isConnected && (this.open && this.controlEl && this.controlEl.classList.add("open"), this.anchorEl && this.open && this.popupEl && (this.#t = x(this.anchorEl, this.popupEl, () => void this.#a(), { animationFrame: this.animationFrame })));
+	_anchorElChanged(e, t) {
+		e && this.#r(e), t && this.#n(t);
 	}
-	#r() {
-		this.popupEl && this.strategy === "fixed" && (this.open ? this.popupEl.showPopover() : this.popupEl.hidePopover());
+	#e() {
+		return [
+			this._descriptionId,
+			this._descriptionSecondaryId,
+			...this._defaultSlotContent.map((e) => e.id).filter(Boolean)
+		];
 	}
-	#i;
-	#a;
-	async updatePosition() {
-		if (!this.open || !this.anchorEl) return;
-		let e = await _(this.anchorEl, this.popupEl, {
-			placement: this.placement,
-			strategy: this.strategy,
-			middleware: this.#e
-		});
-		this.#o(e), this.arrow && this.#s(e);
-	}
-	#o(e) {
-		let { x: t, y: n } = e, { referenceHidden: r } = e.middlewareData.hide;
-		Object.assign(this.popupEl.style, {
-			left: `${t}px`,
-			top: `${n}px`,
-			visibility: r ? "hidden" : "visible"
-		});
+	#t(e) {
+		let t = e.getAttribute("aria-describedby") ?? e.ariaDescribedBy ?? "", n = new Set(this.#e()), r = t.split(" ").filter((e) => e && !n.has(e));
+		e.setAttribute("aria-describedby", [...r, ...this.#e()].join(" "));
 	}
-	#s(e) {
-		let { x: t, y: n } = e.middlewareData.arrow, r = {
-			left: "calc(100% - 4px)",
-			right: "-4px",
-			top: "calc(100% - 4px)",
-			bottom: "-4px"
-		}, i = e.placement.split("-")[0];
-		Object.assign(this.arrowEl.style, {
-			left: t ? `${t}px` : r[i],
-			top: n ? `${n}px` : r[i]
-		});
+	#n(e) {
+		e.addEventListener("mouseover", this.#i), e.addEventListener("mouseout", this.#a), e.addEventListener("focusin", this.#i), e.addEventListener("focusout", this.#a), this.#t(e), t.setAttribute(e, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
-	get anchorEl() {
-		return this.anchor ?? null;
+	#r(e) {
+		e.removeEventListener("mouseover", this.#i), e.removeEventListener("mouseout", this.#a), e.removeEventListener("focusin", this.#i), e.removeEventListener("focusout", this.#a);
+		let n = e.getAttribute("aria-describedby") ?? e.ariaDescribedBy ?? "", r = new Set(this.#e()), i = n.split(" ").filter((e) => e && !r.has(e)), a = i.length ? i.join(" ") : null;
+		e.hasAttribute("aria-describedby") ? t.setAttribute(e, "aria-describedby", a) : e.ariaDescribedBy = a, e.removeAttribute("aria-keyshortcuts");
 	}
-	show() {
-		return this.open = !0, this.#i ?? Promise.resolve();
+	#i;
+	#a;
+	#o() {
+		document.removeEventListener("keydown", this.#s), this.open && this.isConnected && document.addEventListener("keydown", this.#s);
 	}
-	hide() {
-		this.open = !1;
+	#s;
+	openChanged(e) {
+		e !== void 0 && this.#o();
 	}
 };
-l([r({ mode: "boolean" })], D.prototype, "open", void 0), l([r({ mode: "boolean" })], D.prototype, "dismissible", void 0), l([r({ mode: "boolean" })], D.prototype, "arrow", void 0), l([r({ mode: "boolean" })], D.prototype, "alternate", void 0), l([r({ mode: "fromView" })], D.prototype, "placement", void 0), l([r({
-	mode: "boolean",
-	attribute: "animation-frame"
-})], D.prototype, "animationFrame", void 0), l([r({
-	mode: "boolean",
-	attribute: "shift-cross-axis"
-})], D.prototype, "shiftCrossAxis", void 0), l([r({ mode: "fromView" })], D.prototype, "strategy", void 0), l([r({
-	attribute: "offset",
-	converter: n
-})], D.prototype, "offset", void 0), l([e], D.prototype, "anchor", void 0);
-//#endregion
-//#region src/lib/popup/popup.scss?inline
-var O = ":host{display:var(--_popup-display,inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popup-wrapper{z-index:var(--_popup-z-index,10);border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;overflow:visible}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{color:var(--vvd-color-canvas-text);display:grid}.dismissible .popup-content{grid-template-columns:1fr auto;align-content:start}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
-//#endregion
-//#region src/lib/popup/popup.template.ts
-function k(e) {
-	return e.strategy && e.strategy === "fixed" ? "manual" : null;
-}
+u([r], x.prototype, "text", void 0), u([r({ attribute: "text-secondary" })], x.prototype, "textSecondary", void 0), u([r({ mode: "fromView" })], x.prototype, "placement", void 0), u([r({ mode: "boolean" })], x.prototype, "open", void 0), u([e], x.prototype, "_defaultSlotContent", void 0);
 //#endregion
-//#region src/lib/popup/definition.ts
-var A = o("popup", D, (e) => {
-	let t = e.tagFor(p), n = e.tagFor(d);
+//#region src/lib/tooltip/definition.ts
+var S = o("tooltip", x, (e) => {
+	let t = e.tagFor(f), n = m();
 	return i`
-  <${t}>
-		<div popover="${k}" class="popup-wrapper ${(e) => e.strategy}" ${s("popupEl")} part="popup-base">
-			<div ${s("controlEl")} class="${(e) => u("control", ["open", e.open], ["dismissible", e.dismissible], ["alternate", e.alternate])}" aria-hidden="${(e) => e.open ? "false" : "true"}"
-				part="${(e) => e.alternate ? "vvd-theme-alternate" : ""}">
-				<div class="popup-content">
-					<slot></slot>
-					${c((e) => e.dismissible, i`<${n} size="condensed" @click="${(e) => e.open = !1}"
-						class="dismissible-button" icon="close-small-solid" shape="pill"></${n}>`)}
-				</div>
-				${c((e) => e.arrow, i`<div class="arrow" ${s("arrowEl")}></div>`)}
-			</div>
-    </div>
-  </${t}>`;
-}, [m, f], { styles: O }), j = t(A);
+${n}
+${v(i`<span slot="_description" id="${(e) => e._descriptionId}">${(e) => e.text}</span><span slot="_description-secondary" id="${(e) => e._descriptionSecondaryId}">${(e) => e.textSecondary}</span>`)}
+<${t} class="${(e) => d("control", ["open", e.open])}" arrow alternate
+	:placement=${(e) => e.placement}
+	:anchor="${(e) => e._anchorEl}"
+	:open="${(e) => e.open}"
+	@keydown="${(e, t) => {
+		e.open && y(t.event) && (e.open = !1);
+	}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		<span class="text"><slot name="_description"></slot></span>
+		${l((e) => e.textSecondary, i`<span class="text-secondary"
+				><slot name="_description-secondary"></slot
+			></span>`)}
+		<slot
+			${c({
+		property: "_defaultSlotContent",
+		filter: s()
+	})}
+		></slot>
+		<slot name="kbd-shortcut"
+			${c({
+		property: "_kbdShortcutSlotted",
+		filter: s()
+	})}
+		></slot>
+  </div>
+</${t}>`;
+}, [p], { styles: b }), C = n(S);
 //#endregion
-export { D as i, j as n, T as r, A as t };
+export { S as n, x as r, C as t };

package/bundled/definition9.cjs

@@ -1,16 +1,20 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./definition8.cjs`),a=require(`./anchored.cjs`),o=require(`./kbd-shortcut.cjs`),s=require(`./render-in-light-dom.cjs`),c=require(`./dialog.cjs`);var l=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}`,u=class extends o.t(a.t(e.t)){constructor(...e){super(...e),this.open=!1,this._descriptionId=`vwc-tooltip-desc-${s.n()}`,this.#n=()=>{this.open=!0},this.#r=()=>{this.open=!1},this.#a=e=>{e.key===`Escape`&&this.#r()}}_kbdAriaShortcutsValueChanged(){this._anchorEl&&e.P.setAttribute(this._anchorEl,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,t){e&&this.#t(e),t&&this.#e(t)}#e(t){t.addEventListener(`mouseover`,this.#n),t.addEventListener(`mouseout`,this.#r),t.addEventListener(`focusin`,this.#n),t.addEventListener(`focusout`,this.#r);let n=t.getAttribute(`aria-describedby`)??t.ariaDescribedBy;t.setAttribute(`aria-describedby`,n?`${n} ${this._descriptionId}`:this._descriptionId),e.P.setAttribute(t,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}#t(t){t.removeEventListener(`mouseover`,this.#n),t.removeEventListener(`mouseout`,this.#r),t.removeEventListener(`focusin`,this.#n),t.removeEventListener(`focusout`,this.#r);let n=(t.getAttribute(`aria-describedby`)??t.ariaDescribedBy??``).split(` `).filter(e=>e!==this._descriptionId),r=n.length?n.join(` `):null;t.hasAttribute(`aria-describedby`)?e.P.setAttribute(t,`aria-describedby`,r):t.ariaDescribedBy=r,t.removeAttribute(`aria-keyshortcuts`)}#n;#r;#i(){document.removeEventListener(`keydown`,this.#a),this.open&&this.isConnected&&document.addEventListener(`keydown`,this.#a)}#a;openChanged(e){e!==void 0&&this.#i()}};n.t([e.m],u.prototype,`text`,void 0),n.t([e.m({mode:`fromView`})],u.prototype,`placement`,void 0),n.t([e.m({mode:`boolean`})],u.prototype,`open`,void 0);var d=e.u(`tooltip`,u,n=>{let o=n.tagFor(i.i);return e.p`
-${a.n()}
-${s.t(e.p`<span slot="_description" id="${e=>e._descriptionId}">${e=>e.text}</span>`)}
-<${o} class="${e=>r.t(`control`,[`open`,e.open])}" arrow alternate
-	:placement=${e=>e.placement}
-	:anchor="${e=>e._anchorEl}"
-	:open="${e=>e.open}"
-	@keydown="${(e,t)=>{e.open&&c.t(t.event)&&(e.open=!1)}}"
-  exportparts="vvd-theme-alternate">
-  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
-		<span class="text"><slot name="_description"></slot></span>
-		<slot name="kbd-shortcut"
-			${t.t({property:`_kbdShortcutSlotted`,filter:t.r()})}
-		></slot>
-  </div>
-</${o}>`},[i.t],{styles:l}),f=e.d(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+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("./definition7.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}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start: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()),o.i(e,this.open)}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),o.r(e),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({attribute:`text-secondary`})],l.prototype,`textSecondary`,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),i=o.n();return t.p`
+		${i}
+		<${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.p`<h2 class="headline">${e=>e.headline}</h2>`)}
+				${n.t(e=>e.textSecondary,t.p`<p class="text-secondary">${e=>e.textSecondary}</p>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${r}>
+	`},[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/definition9.js

@@ -1,82 +1,79 @@
-import { P as e, d as t, m as n, p as r, t as i, u as a } from "./vivid-element.js";
-import { r as o, t as s } from "./slotted.js";
+import { t as e } from "./localized.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";
-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 "./kbd-shortcut.js";
-import { n as h, t as g } from "./render-in-light-dom.js";
-import { t as _ } from "./dialog.js";
-//#region src/lib/tooltip/tooltip.scss?inline
-var v = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}", y = class extends m(p(i)) {
+import { i as u, t as d } from "./definition7.js";
+import { i as f, n as p, r as m, t as h } from "./anchored.js";
+import { t as g } from "./dialog.js";
+//#region src/lib/toggletip/toggletip.scss?inline
+var _ = ":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}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", v = class extends e(h(a)) {
 	constructor(...e) {
-		super(...e), this.open = !1, this._descriptionId = `vwc-tooltip-desc-${h()}`, this.#n = () => {
-			this.open = !0;
-		}, this.#r = () => {
-			this.open = !1;
-		}, this.#a = (e) => {
+		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.#r();
+			e.key === "Escape" && (this.open = !1);
 		};
 	}
-	_kbdAriaShortcutsValueChanged() {
-		this._anchorEl && e.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
+	#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.#i();
+		super.connectedCallback(), this.#a();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#i();
+		super.disconnectedCallback(), this.#a();
 	}
 	_anchorElChanged(e, t) {
-		e && this.#t(e), t && this.#e(t);
+		e && this.#r(e), t && this.#t(t);
 	}
-	#e(t) {
-		t.addEventListener("mouseover", this.#n), t.addEventListener("mouseout", this.#r), t.addEventListener("focusin", this.#n), t.addEventListener("focusout", this.#r);
-		let n = t.getAttribute("aria-describedby") ?? t.ariaDescribedBy;
-		t.setAttribute("aria-describedby", n ? `${n} ${this._descriptionId}` : this._descriptionId), e.setAttribute(t, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
+	#t(e) {
+		e.addEventListener("click", this.#i, !0), this.#e = e.ariaLabel, e.ariaLabel = this.locale.toggletip.anchorLabel(e.ariaLabel || ""), this.#n(e);
 	}
-	#t(t) {
-		t.removeEventListener("mouseover", this.#n), t.removeEventListener("mouseout", this.#r), t.removeEventListener("focusin", this.#n), t.removeEventListener("focusout", this.#r);
-		let n = (t.getAttribute("aria-describedby") ?? t.ariaDescribedBy ?? "").split(" ").filter((e) => e !== this._descriptionId), r = n.length ? n.join(" ") : null;
-		t.hasAttribute("aria-describedby") ? e.setAttribute(t, "aria-describedby", r) : t.ariaDescribedBy = r, t.removeAttribute("aria-keyshortcuts");
+	#n(e) {
+		e.setAttribute("aria-expanded", this.open.toString()), f(e, this.open);
 	}
-	#n;
-	#r;
-	#i() {
-		document.removeEventListener("keydown", this.#a), this.open && this.isConnected && document.addEventListener("keydown", this.#a);
+	#r(e) {
+		/* v8 ignore else -- @preserve */
+		e.removeEventListener("click", this.#i, !0), e.removeAttribute("aria-expanded"), m(e), e.ariaLabel &&= this.#e;
 	}
-	#a;
-	openChanged(e) {
-		e !== void 0 && this.#i();
+	#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;
 };
-c([n], y.prototype, "text", void 0), c([n({ mode: "fromView" })], y.prototype, "placement", void 0), c([n({ mode: "boolean" })], y.prototype, "open", void 0);
+c([r], v.prototype, "headline", void 0), c([r({ attribute: "text-secondary" })], v.prototype, "textSecondary", void 0), c([r({ mode: "boolean" })], v.prototype, "alternate", void 0), c([r({ mode: "fromView" })], v.prototype, "placement", void 0), c([r({ mode: "boolean" })], v.prototype, "open", void 0);
 //#endregion
-//#region src/lib/tooltip/definition.ts
-var b = a("tooltip", y, (e) => {
-	let t = e.tagFor(u);
-	return r`
-${f()}
-${g(r`<span slot="_description" id="${(e) => e._descriptionId}">${(e) => e.text}</span>`)}
-<${t} class="${(e) => l("control", ["open", e.open])}" arrow alternate
-	:placement=${(e) => e.placement}
-	:anchor="${(e) => e._anchorEl}"
-	:open="${(e) => e.open}"
-	@keydown="${(e, t) => {
-		e.open && _(t.event) && (e.open = !1);
-	}}"
-  exportparts="vvd-theme-alternate">
-  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
-		<span class="text"><slot name="_description"></slot></span>
-		<slot name="kbd-shortcut"
-			${s({
-		property: "_kbdShortcutSlotted",
-		filter: o()
-	})}
-		></slot>
-  </div>
-</${t}>`;
-}, [d], { styles: v }), x = t(b);
+//#region src/lib/toggletip/toggletip.template.ts
+var y = (e) => l("control"), b = o("toggletip", v, (e) => {
+	let t = e.tagFor(u), n = p();
+	return i`
+		${n}
+		<${t}
+			@keydown="${(e, { event: t }) => !(e.open && g(t))}"
+			class="${y}"
+			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, i`<h2 class="headline">${(e) => e.headline}</h2>`)}
+				${s((e) => e.textSecondary, i`<p class="text-secondary">${(e) => e.textSecondary}</p>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${t}>
+	`;
+}, [d], { styles: _ }), x = n(b);
 //#endregion
-export { b as n, y as r, x as t };
+export { b as n, v as r, x as t };

package/bundled/delegates-aria.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./aria-binding-directive.cjs`);function n(n={},r={}){return new t.t({boundProperties:n,forwardedValueProperties:new Set((r.onlySpecified?[]:e.a).filter(e=>!(e in n))),forwardedIdrefsProperties:new Set((r.onlySpecified?[]:e.i).filter(e=>!(e in n)))})}var r=n=>{class r extends n{constructor(...e){super(...e),this._vividAriaBehaviour=`delegate`}}for(let n of e.i)r.prototype[`${n}Changed`]=function(){t.n.for(this,n).setAttribute(this[n])},Object.defineProperty(r.prototype,`${n}Elements`,{get(){return t.n.resolvedElements(this,n)},set(e){t.n.for(this,n).setElements(e)}});return r};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
+const e=require("./vivid-element.cjs"),t=require("./aria-binding-directive.cjs");function n(n={},r={}){let i=new Set((r.onlySpecified?[]:e.a).filter(e=>!(e in n))),a=new Set((r.onlySpecified?[]:e.i).filter(e=>!(e in n)));return new t.t({boundProperties:n,forwardedValueProperties:i,forwardedIdrefsProperties:a})}var r=n=>{class r extends n{constructor(...e){super(...e),this._vividAriaBehaviour=`delegate`}}for(let n of e.i)r.prototype[`${n}Changed`]=function(){t.n.for(this,n).setAttribute(this[n])},Object.defineProperty(r.prototype,`${n}Elements`,{get(){return t.n.resolvedElements(this,n)},set(e){t.n.for(this,n).setElements(e)}});return r};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return r}});

package/bundled/delegates-aria.js

@@ -2,10 +2,11 @@ import { a as e, i as t } from "./vivid-element.js";
 import { n, t as r } from "./aria-binding-directive.js";
 //#region src/shared/aria/delegates-aria.ts
 function i(n = {}, i = {}) {
+	let a = new Set((i.onlySpecified ? [] : e).filter((e) => !(e in n))), o = new Set((i.onlySpecified ? [] : t).filter((e) => !(e in n)));
 	return new r({
 		boundProperties: n,
-		forwardedValueProperties: new Set((i.onlySpecified ? [] : e).filter((e) => !(e in n))),
-		forwardedIdrefsProperties: new Set((i.onlySpecified ? [] : t).filter((e) => !(e in n)))
+		forwardedValueProperties: a,
+		forwardedIdrefsProperties: o
 	});
 }
 var a = (e) => {

package/bundled/dialog.cjs

@@ -1 +1 @@
-function e(e){return e.key===`Escape`?(e.stopPropagation(),!0):!1}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});
+function e(e){return e.key===`Escape`&&(e.stopPropagation(),!0)}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/bundled/dialog.js

@@ -1,6 +1,6 @@
 //#region src/shared/dialog/index.ts
 function e(e) {
-	return e.key === "Escape" ? (e.stopPropagation(), !0) : !1;
+	return e.key === "Escape" && (e.stopPropagation(), !0);
 }
 //#endregion
 export { e as t };

package/bundled/divider.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./enums.cjs`),n=require(`./decorate.cjs`),r=require(`./aria.cjs`),i=require(`./host-semantics.cjs`);var a={separator:`separator`,presentation:`presentation`},o=class extends i.t(e.t){constructor(...e){super(...e),this.role=a.separator,this.orientation=r.t.horizontal,this.appearance=t.t.Ghost}};n.t([e.m],o.prototype,`orientation`,void 0),n.t([e.m],o.prototype,`appearance`,void 0),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+const e=require("./vivid-element.cjs"),t=require("./decorate.cjs"),n=require("./aria.cjs"),r=require("./host-semantics.cjs");var i=require("./component-enum.cjs").t([`ghost`,`subtle`],`ghost`),a={separator:`separator`,presentation:`presentation`},o=class extends r.t(e.t){constructor(...e){super(...e),this.role=a.separator,this.orientation=n.t.horizontal}};t.t([e.m],o.prototype,`orientation`,void 0),t.t([e.m],o.prototype,`appearance`,void 0),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/bundled/divider.js

@@ -1,17 +1,17 @@
 import { m as e, t } from "./vivid-element.js";
-import { t as n } from "./enums.js";
-import { t as r } from "./decorate.js";
-import { t as i } from "./aria.js";
-import { t as a } from "./host-semantics.js";
+import { t as n } from "./decorate.js";
+import { t as r } from "./aria.js";
+import { t as i } from "./host-semantics.js";
+import { t as a } from "./component-enum.js";
 //#region src/lib/divider/divider.ts
-var o = {
+var o = a(["ghost", "subtle"], "ghost"), s = {
 	separator: "separator",
 	presentation: "presentation"
-}, s = class extends a(t) {
+}, c = class extends i(t) {
 	constructor(...e) {
-		super(...e), this.role = o.separator, this.orientation = i.horizontal, this.appearance = n.Ghost;
+		super(...e), this.role = s.separator, this.orientation = r.horizontal;
 	}
 };
-r([e], s.prototype, "orientation", void 0), r([e], s.prototype, "appearance", void 0);
+n([e], c.prototype, "orientation", void 0), n([e], c.prototype, "appearance", void 0);
 //#endregion
-export { o as n, s as t };
+export { s as n, o as r, c as t };

package/bundled/dom.cjs

@@ -1 +1 @@
-function e(...e){return e.every(e=>e instanceof HTMLElement)}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});
+function e(...e){return e.every(e=>e instanceof HTMLElement)}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/bundled/enums.cjs

@@ -1 +1 @@
-var e=function(e){return e.Accent=`accent`,e.CTA=`cta`,e.Success=`success`,e.Alert=`alert`,e.Warning=`warning`,e.Information=`information`,e.Announcement=`announcement`,e}({}),t=function(e){return e.Rounded=`rounded`,e.Pill=`pill`,e.Circled=`circled`,e.Sharp=`sharp`,e}({}),n=function(e){return e.Filled=`filled`,e.Outlined=`outlined`,e.Duotone=`duotone`,e.Fieldset=`fieldset`,e.Subtle=`subtle`,e.SubtleLight=`subtle-light`,e.Ghost=`ghost`,e.GhostLight=`ghost-light`,e.OutlinedLight=`outlined-light`,e.Listitem=`listitem`,e.Elevated=`elevated`,e}({}),r=function(e){return e.UltraCondensed=`ultra-condensed`,e.SuperCondensed=`super-condensed`,e.ExtraCondensed=`extra-condensed`,e.SemiCondensed=`semi-condensed`,e.Condensed=`condensed`,e.Normal=`normal`,e.SemiExpanded=`semi-expanded`,e.Expanded=`expanded`,e.ExtraExpanded=`extra-expanded`,e.SuperExpanded=`super-expanded`,e.UltraExpanded=`ultra-expanded`,e}({}),i=function(e){return e.Zero=`0`,e.Five=`5`,e.Ten=`10`,e.Thirty=`30`,e}({}),a=function(e){return e.None=`none`,e.Header=`header`,e.Column=`column`,e.All=`all`,e}({});Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});
+var e=function(e){return e.Accent=`accent`,e.CTA=`cta`,e.Success=`success`,e.Alert=`alert`,e.Warning=`warning`,e.Information=`information`,e.Announcement=`announcement`,e}({}),t=function(e){return e.Rounded=`rounded`,e.Pill=`pill`,e.Circled=`circled`,e.Sharp=`sharp`,e}({}),n=function(e){return e.Filled=`filled`,e.Outlined=`outlined`,e.Duotone=`duotone`,e.Fieldset=`fieldset`,e.Subtle=`subtle`,e.SubtleLight=`subtle-light`,e.Ghost=`ghost`,e.GhostLight=`ghost-light`,e.OutlinedLight=`outlined-light`,e.Listitem=`listitem`,e.Elevated=`elevated`,e}({}),r=function(e){return e.UltraCondensed=`ultra-condensed`,e.SuperCondensed=`super-condensed`,e.ExtraCondensed=`extra-condensed`,e.SemiCondensed=`semi-condensed`,e.Condensed=`condensed`,e.Normal=`normal`,e.SemiExpanded=`semi-expanded`,e.Expanded=`expanded`,e.ExtraExpanded=`extra-expanded`,e.SuperExpanded=`super-expanded`,e.UltraExpanded=`ultra-expanded`,e}({}),i=function(e){return e.Zero=`0`,e.Five=`5`,e.Ten=`10`,e.Thirty=`30`,e}({}),a=function(e){return e.None=`none`,e.Header=`header`,e.Column=`column`,e.All=`all`,e}({});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});

package/bundled/extractOptions.cjs

@@ -1 +1 @@
-const e=require(`./definition17.cjs`),t=require(`./definition18.cjs`);function n(n){let r=[];for(let i of n)if(e.i(i))r.push(i);else if(t.r(i))for(let t of Array.from(i.children))e.i(t)&&r.push(t);return r}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});
+const e=require("./option.cjs"),t=require("./optgroup.cjs");function n(n){let r=[];for(let i of n)if(e.n(i))r.push(i);else if(t.n(i))for(let t of Array.from(i.children))e.n(t)&&r.push(t);return r}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});

package/bundled/extractOptions.js

@@ -1,5 +1,5 @@
-import { i as e } from "./definition17.js";
-import { r as t } from "./definition18.js";
+import { n as e } from "./option.js";
+import { n as t } from "./optgroup.js";
 //#region src/shared/foundation/listbox/extractOptions.ts
 function n(n) {
 	let r = [];

package/bundled/feedback-message.cjs

@@ -0,0 +1,8 @@
+const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require("./when.cjs"),r=require("./definition.cjs"),i=require("./decorate.cjs"),a=require("./class-names.cjs"),o=require("./definition2.cjs"),s=require("./icon.cjs");var c=`:host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}`,l=class extends e.t(t.t){constructor(...e){super(...e),this.type=`none`}};i.t([t.m],l.prototype,`type`,void 0);function u(e,n,r){let i=e.tagFor(s.t);return t.p`<${i} class="icon" name="${n}" label="${e=>e.locale.feedbackMessage[r]}"></${i}>`}function d(e){let n={none:``,helper:``,error:u(e,`info-line`,`errorIconText`),success:u(e,`check-circle-line`,`successIconText`)};return t.p`${e=>n[e.type]}`}var f=e=>e===`error`,p=t.u(`feedback-message`,l,e=>{let r=t.p`<div
+		class="${e=>a.t(`message`,`${e.type}-message`)}"
+	>
+		${d(e)}<slot></slot>
+	</div>`;return t.p`${n.t(e=>!f(e.type),r)}
+		<span class="announcement" role="status" aria-live="polite">
+			${n.t(e=>f(e.type),r)}
+		</span>`},[o.t,r.n],{styles:c});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});

package/bundled/feedback-message.js

@@ -0,0 +1,41 @@
+import { t as e } from "./localized.js";
+import { m as t, p as n, t as r, u as i } from "./vivid-element.js";
+import { t as a } from "./when.js";
+import { n as o } from "./definition.js";
+import { t as s } from "./decorate.js";
+import { t as c } from "./class-names.js";
+import { t as l } from "./definition2.js";
+import { t as u } from "./icon.js";
+//#region src/shared/feedback/feedback-message.scss?inline
+var d = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}", f = class extends e(r) {
+	constructor(...e) {
+		super(...e), this.type = "none";
+	}
+};
+s([t], f.prototype, "type", void 0);
+function p(e, t, r) {
+	let i = e.tagFor(u);
+	return n`<${i} class="icon" name="${t}" label="${(e) => e.locale.feedbackMessage[r]}"></${i}>`;
+}
+function m(e) {
+	let t = {
+		none: "",
+		helper: "",
+		error: p(e, "info-line", "errorIconText"),
+		success: p(e, "check-circle-line", "successIconText")
+	};
+	return n`${(e) => t[e.type]}`;
+}
+var h = (e) => e === "error", g = i("feedback-message", f, (e) => {
+	let t = n`<div
+		class="${(e) => c("message", `${e.type}-message`)}"
+	>
+		${m(e)}<slot></slot>
+	</div>`;
+	return n`${a((e) => !h(e.type), t)}
+		<span class="announcement" role="status" aria-live="polite">
+			${a((e) => h(e.type), t)}
+		</span>`;
+}, [l, o], { styles: d });
+//#endregion
+export { g as n, f as t };