@vonage/vivid 5.16.0 → 5.18.0

package/bundled/definition12.js

@@ -1,131 +1,195 @@
-import { E as e, T 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 { 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 { t as f } from "./dom.js";
-import { a as p, i as m, n as h } from "./affix.js";
-import { n as g, t as _ } from "./host-semantics.js";
-//#region src/lib/option/option.ts
-function v(e) {
-	return f(e) && (e.getAttribute("role") === "option" || e instanceof HTMLOptionElement || e instanceof y);
-}
-var y = class extends _(h(o)) {
-	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() {
+import { O as e, T as t, d as n, l as r, o as i, s as a, t as o, u as s, y as c } from "./vivid-element.js";
+import { t as l } from "./ref.js";
+import { t as u } from "./when.js";
+import { t as d } from "./slotted.js";
+import { n as f } from "./definition.js";
+import { t as p } from "./decorate.js";
+import { t as m } from "./definition2.js";
+import { a as h, t as g } from "./affix.js";
+import { t as _ } from "./form-element.js";
+import { t as v } from "./with-success-text.js";
+import { t as y } from "./with-error-text.js";
+import { t as b } from "./with-contextual-help.js";
+import { n as x, t as S } from "./delegates-aria.js";
+import { t as C } from "./char-count.js";
+import { t as w } from "./class-names.js";
+import { n as T } from "./form-associated.js";
+import { a as E, i as D, n as O, r as k } from "./mixins.js";
+import { t as A } from "./definition11.js";
+import { t as j } from "./text-field.js";
+//#region src/lib/text-field/text-field.ts
+var M = {
+	email: "email",
+	password: "password",
+	tel: "tel",
+	text: "text",
+	url: "url"
+}, N = new c(["\n	._vvd-3-text-field-safari-workaround::placeholder {\n		opacity: 1 !important;\n		-webkit-text-fill-color: var(--_low-ink-color) !important;\n	}\n"]), P = (e) => {
+	let t = e.getRootNode();
+	N.isAttachedTo(t) || N.addStylesTo(t);
+}, F = class extends b(O(C(y(v(_(g(S(T(o))))))))) {
+	constructor(...e) {
+		super(...e), this.proxy = document.createElement("input"), this.type = M.text;
+	}
+	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
+		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
 	}
-	get selectedAttribute() {
-		return this.defaultSelected;
+	autofocusChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.autofocus = this.autofocus, this.validate());
+	}
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
+	}
+	typeChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.type = this.type, this.validate());
 	}
-	set selectedAttribute(e) {
-		this.defaultSelected = e;
+	listChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.setAttribute("list", this.list), this.validate());
 	}
-	selectedChanged() {
-		this.dirtySelected ||= !0, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.selected);
+	maxlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.maxLength = this.maxlength, this.validate());
 	}
-	valueChanged() {
-		if (typeof this.value != "string") {
-			this.value = "";
-			return;
-		}
-		this.proxy instanceof HTMLOptionElement && (this.proxy.value = this.value);
+	minlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.minLength = this.minlength, this.validate());
 	}
-	get label() {
-		return this._label ?? this.text;
+	patternChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.pattern = this.pattern, this.validate());
 	}
-	set label(e) {
-		this._label = e;
+	sizeChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.size = this.size);
 	}
-	set text(e) {
-		this._text = e;
+	spellcheckChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.spellcheck = this.spellcheck);
 	}
-	get text() {
-		return this._text ?? "";
+	valueChanged(e, t) {
+		super.valueChanged(e, t), this._updateControlValueIfNeeded(), this.charCount && this.maxlength && this._updateCharCountRemaining();
 	}
-	_getAccessibleName() {
-		return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+	_updateControlValueIfNeeded() {
+		this.control && this.control.value !== this.value && (this.control.value = this.value);
 	}
-	get form() {
-		return null;
+	select() {
+		this.control.select();
 	}
-	get _hasMatchedText() {
-		return !!(this.matchedText ?? this._vvdSearchText);
+	handleTextInput(e) {
+		this.value = this.control.value, e.stopPropagation(), this.$emit("input");
 	}
-	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
-		};
+	handleChange() {
+		this.$emit("change");
 	}
-	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;
+	validate() {
+		super.validate(this.control);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.dirtySelected ||= (this.selected = this.defaultSelected, !1);
+		super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && e.enqueue(() => {
+			this.focus();
+		}), this._updateControlValueIfNeeded(), P(this), this._renderCharCountRemaining();
+	}
+	focus() {
+		this.control?.focus();
+	}
+	#e = D();
+	get _uniqueId() {
+		return this.id || this.#e;
 	}
 };
-u([r({ converter: {
-	fromView: (e) => {
-		if (e === !0 || e === "true") return !0;
-		if (e === !1 || e === "false") return !1;
-	},
-	toView: (e) => e
-} })], y.prototype, "checked", void 0), u([r({
-	attribute: "selected",
-	mode: "boolean"
-})], y.prototype, "defaultSelected", void 0), u([r({ mode: "boolean" })], y.prototype, "disabled", void 0), u([r({
-	attribute: "current-selected",
+p([r({
+	attribute: "readonly",
 	mode: "boolean"
-})], y.prototype, "selected", void 0), u([r({ attribute: "value" })], y.prototype, "value", void 0), u([r({ attribute: "label" })], y.prototype, "_label", void 0), u([r({ attribute: "text" })], y.prototype, "_text", void 0), u([r({ attribute: "text-secondary" })], y.prototype, "textSecondary", void 0), u([t], y.prototype, "_highlighted", void 0), u([t], y.prototype, "_displayCheckmark", void 0), u([r({ attribute: "matched-text" })], y.prototype, "matchedText", void 0), u([t], y.prototype, "_vvdSearchText", void 0), u([e], y.prototype, "_hasMatchedText", null), u([t], y.prototype, "_isNotMatching", void 0), u([e], y.prototype, "_matchedRange", null), u([r], y.prototype, "connotation", void 0), u([r({ attribute: "tag-connotation" })], y.prototype, "tagConnotation", void 0);
+})], F.prototype, "readOnly", void 0), p([r({ mode: "boolean" })], F.prototype, "autofocus", void 0), p([r], F.prototype, "placeholder", void 0), p([r], F.prototype, "type", void 0), p([r], F.prototype, "list", void 0), p([r({ converter: s })], F.prototype, "maxlength", void 0), p([r({ converter: s })], F.prototype, "minlength", void 0), p([r], F.prototype, "pattern", void 0), p([r({ converter: s })], F.prototype, "size", void 0), p([r({ mode: "boolean" })], F.prototype, "spellcheck", void 0), p([r], F.prototype, "appearance", void 0), p([r], F.prototype, "shape", void 0), p([r], F.prototype, "autoComplete", void 0), p([r()], F.prototype, "scale", void 0), p([r({ attribute: "inputmode" })], F.prototype, "inputMode", void 0), p([t], F.prototype, "actionItemsSlottedContent", void 0), p([t], F.prototype, "leadingActionItemsSlottedContent", void 0);
 //#endregion
-//#region src/lib/option/option.template.ts
-var b = (e) => d("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 x() {
-	return n`${s((e) => e.text || e.textSecondary, n`<span class="text">
-			${s((e) => e.text, n`<span class="text-primary">
-					${s((e) => e._hasMatchedText, n`${(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>`)}
-			${s((e) => e.textSecondary, n`<span class="text-secondary">${(e) => e.textSecondary}</span>`)}
-		</span>`)}`;
-}
-//#endregion
-//#region src/lib/option/definition.ts
-var S = i("option", y, (e) => {
-	let t = p(e), r = e.tagFor(c);
+//#region src/lib/text-field/text-field.template.ts
+var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e, disabled: t, value: n, readOnly: r, placeholder: i, appearance: a, shape: o, label: s, successText: c, actionItemsSlottedContent: l, leadingActionItemsSlottedContent: u, icon: d, scale: f }) => w(["error", !!e], ["disabled", t], ["has-value", !!n], ["readonly", r], ["placeholder", !!i], [`appearance-${a}`, !!a], [`shape-${o}`, !!o], ["no-label", !s], ["has-icon", !!d], ["success", !!c], ["action-items", !!l?.length], ["leading-action-items", !!u?.length], ["no-leading", !(u?.length || d)], [`size-${f}`, !!f]), R = i("text-field", F, (e) => {
+	let t = h(e);
 	return n`
-		<template
-			${g({
-		role: "option",
-		ariaChecked: (e) => e.checked,
-		ariaSelected: (e) => e.selected,
-		ariaDisabled: (e) => e.disabled
-	})}
-			style="${(e) => e._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${b}">
-				${(e) => t(e.icon, m.Slot)} ${x()}
-				<slot name="trailing-meta"></slot>
-				${s((e) => e._displayCheckmark && e.selected, n`<${r} class="checkmark" name="check-line"></${r}>`)}
+		<div class="base ${L}">
+			${u((e) => e.charCount && e.maxlength, (t) => t._getCharCountTemplate(e))}
+			<div
+				class="label-wrapper"
+				?hidden=${(e) => !e.label && !e._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
+				<slot
+					name="contextual-help"
+					${d("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
+			${k(n`
+				${u((e) => e.label, n`
+						<label slot="_label" for="${(e) => I(e._uniqueId)}">
+							${(e) => e.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${d("leadingActionItemsSlottedContent")}
+					></slot>
+					${(e) => t(e.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${k(n`<input
+							slot="_control"
+							id="${(e) => I(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}"
+							${x()}
+							${l("control")}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${d("actionItemsSlottedContent")}
+					></slot>
+				</div>
 			</div>
-		</template>
+			${(t) => t._getFeedbackTemplate(e)}
+		</div>
 	`;
-}, [l], { 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)}" }), C = a(S);
+}, [
+	m,
+	E,
+	f,
+	A
+], {
+	styles: j,
+	shadowOptions: { delegatesFocus: !0 }
+}), z = a(R);
 //#endregion
-export { v as i, C as n, y as r, S as t };
+export { R as n, F as r, z as t };

package/bundled/definition13.cjs

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

package/bundled/definition13.js

@@ -1,78 +1,58 @@
 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 { t as u } from "./dialog.js";
-import { i as d, t as f } from "./definition8.js";
-import { n as p, t as m } from "./anchored.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(m(o)) {
+import { T 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 "./decorate.js";
+import { t as c } from "./definition2.js";
+import { a as l, i as u, n as d } from "./affix.js";
+import { t as f } from "./class-names.js";
+import { n as p, t as m } from "./host-semantics.js";
+//#region src/lib/tab/tab.scss?inline
+var h = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}", g = class extends m(d(e(o))) {
 	constructor(...e) {
-		super(...e), this.alternate = !1, this.placement = "right", this.open = !1;
+		super(...e), this.removable = !1, this.tabIndex = "-1", this.active = !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));
+	_handleCloseClick(e) {
+		e.stopImmediatePropagation(), this.$emit("close");
 	}
-	connectedCallback() {
-		super.connectedCallback(), this.#a();
+	_onKeyDown(e) {
+		return !this.removable || e.key !== "Delete" ? !0 : (e.stopImmediatePropagation(), this.$emit("close"), !1);
 	}
-	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) {
-		/* v8 ignore else -- @preserve */
-		e.removeEventListener("click", this.#i, !0), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.ariaLabel &&= this.#e;
-	}
-	#i = () => {
-		this.open || t.enqueue(() => this.open = !0);
-	};
-	#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);
-	};
 };
-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);
+s([r({ mode: "boolean" })], g.prototype, "disabled", void 0), s([r], g.prototype, "connotation", void 0), s([r], g.prototype, "shape", void 0), s([r], g.prototype, "label", void 0), s([r({ mode: "boolean" })], g.prototype, "removable", void 0), s([r({ mode: "fromView" })], g.prototype, "tabIndex", void 0), s([t], g.prototype, "active", void 0);
+//#endregion
+//#region src/lib/tab/tab.template.ts
+var _ = ({ connotation: e, disabled: t, active: n, iconTrailing: r, shape: i, removable: a }) => f("base", [`connotation-${e}`, !!e && !!n], [`shape-${i}`, !!i], ["disabled", !!t], ["selected", !!n], ["icon-trailing", r], ["removable", a]);
+function v(e) {
+	let t = l(e);
+	return n`<button
+		aria-label="${(e) => e.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(e, t) => e._handleCloseClick(t.event)}"
+	>
+		${() => t("close-line", u.Span)}
+	</button>`;
+}
 //#endregion
-//#region src/lib/toggletip/toggletip.template.ts
-var _ = (e) => l("control"), v = i("toggletip", g, (e) => {
-	let t = e.tagFor(d);
+//#region src/lib/tab/definition.ts
+var y = i("tab", g, (e) => {
+	let t = l(e);
 	return n`
-		${p()}
-		<${t}
-			@keydown="${(e, { event: t }) => !(e.open && u(t))}"
-			class="${_}"
-			arrow
-			:anchor="${(e) => e._anchorEl}"
-			:open="${(e) => e.open}"
-			?alternate="${(e) => !e.alternate}"
-			placement="${(e) => e.placement}"
-			exportparts="vvd-theme-alternate"
+		<template
+			slot="tab"
+			?active="${(e) => e.active}"
+			${p({
+		role: "tab",
+		ariaDisabled: (e) => e.disabled,
+		ariaSelected: (e) => e.active
+	})}
+			@keydown="${(e, t) => e._onKeyDown(t.event)}"
 		>
-			<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 class="${_}">
+				${(e) => t(e.icon, u.Slot)} ${(e) => e.label}
+				${(t) => t.removable ? v(e) : null}
 			</div>
-		</${t}>
+		</template>
 	`;
-}, [f], { styles: h }), y = a(v);
+}, [c], { styles: h }), b = a(y);
 //#endregion
-export { v as n, g as r, y as t };
+export { y as n, g as r, b as t };

package/bundled/definition14.cjs

@@ -1,10 +1,5 @@
-const e=require(`./vivid-element.cjs`),t=require(`./definition2.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./definition13.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};n.t([e.l({mode:`fromView`})],a.prototype,`placement`,void 0);var o=e=>r.t(`control`),s=e.o(`contextual-help`,a,n=>{let r=n.tagFor(i.r),a=n.tagFor(t.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}>
-	`},[t.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}});
+const e=require(`./vivid-element.cjs`),t=require(`./host-semantics.cjs`);var n=class extends t.t(e.t){},r=e.d`
+	<template slot="tabpanel" ${t.n({role:`tabpanel`})}>
+		<slot></slot>
+	</template>
+`,i=e.o(`tab-panel`,n,r,[],{}),a=e.s(i);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/bundled/definition14.js

@@ -1,29 +1,11 @@
-import { d as e, l as t, o as n, s as r, t as i } from "./vivid-element.js";
-import { r as a, t as o } from "./definition2.js";
-import { t as s } from "./decorate.js";
-import { t as c } from "./class-names.js";
-import { n as l, r as u } from "./definition13.js";
-//#region src/lib/contextual-help/contextual-help.ts
-var d = class extends i {
-	constructor(...e) {
-		super(...e), this.placement = "right";
-	}
-};
-s([t({ mode: "fromView" })], d.prototype, "placement", void 0);
+import { d as e, o as t, s as n, t as r } from "./vivid-element.js";
+import { n as i, t as a } from "./host-semantics.js";
 //#endregion
-//#region src/lib/contextual-help/contextual-help.template.ts
-var f = (e) => c("control"), p = n("contextual-help", d, (t) => {
-	let n = t.tagFor(u), r = t.tagFor(a);
-	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}>
-	`;
-}, [o, 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);
+//#region src/lib/tab-panel/definition.ts
+var o = t("tab-panel", class extends a(r) {}, e`
+	<template slot="tabpanel" ${i({ role: "tabpanel" })}>
+		<slot></slot>
+	</template>
+`, [], {}), s = n(o);
 //#endregion
-export { m as n, p as t };
+export { o as n, s as t };