@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition26.cjs

@@ -0,0 +1,137 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition = require("./definition10.cjs");
+const require_anchored = require("./anchored.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/tooltip/tooltip.ts
+/**
+* @public
+* @component tooltip
+* @slot anchor - Used to set the anchor element for the tooltip.
+* @testSelector byText byText
+* @testQuery open open true
+* @testQuery closed open false
+*/
+var Tooltip = class extends require_anchored.Anchored(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#updateListeners();
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	#setupAnchor(a) {
+		a.addEventListener("mouseover", this.#show);
+		a.addEventListener("mouseout", this.#hide);
+		a.addEventListener("focusin", this.#show);
+		a.addEventListener("focusout", this.#hide);
+		a.setAttribute("aria-haspopup", "true");
+		a.setAttribute("aria-expanded", String(this.open));
+	}
+	#cleanupAnchor(a) {
+		a.removeEventListener("mouseover", this.#show);
+		a.removeEventListener("mouseout", this.#hide);
+		a.removeEventListener("focusin", this.#show);
+		a.removeEventListener("focusout", this.#hide);
+		a.removeAttribute("aria-haspopup");
+		a.removeAttribute("aria-expanded");
+	}
+	#show = () => {
+		this.open = true;
+		this.#updateAnchorExpanded();
+	};
+	#hide = () => {
+		this.open = false;
+		this.#updateAnchorExpanded();
+	};
+	#updateAnchorExpanded() {
+		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
+	}
+	#updateListeners() {
+		document.removeEventListener("keydown", this.#closeOnEscape);
+		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
+	}
+	#closeOnEscape = (e) => {
+		/* v8 ignore else -- @preserve */
+		if (e.key === "Escape") this.#hide();
+	};
+	/**
+	* @internal
+	*/
+	openChanged(oldValue) {
+		if (oldValue === void 0) return;
+		this.#updateListeners();
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Tooltip.prototype, "text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Tooltip.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
+//#endregion
+//#region src/lib/tooltip/tooltip.scss?inline
+var tooltip_default = ":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);padding:8px 12px}";
+//#endregion
+//#region src/lib/tooltip/tooltip.template.ts
+var getClasses = ({ open }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", Boolean(open)]);
+var TooltipTemplate = (context) => {
+	const popupTag = context.tagFor(require_definition.Popup);
+	return _microsoft_fast_element.html`
+${require_anchored.anchorSlotTemplateFactory()}
+<${popupTag} class="${getClasses}" arrow alternate
+	:placement=${(x) => x.placement}
+	:anchor="${(x) => x._anchorEl}"
+	:open="${(x) => x.open}"
+	@keydown="${(x, c) => {
+		if (x.open && require_dialog.handleEscapeKeyAndStopPropogation(c.event)) x.open = false;
+	}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		${(x) => x.text}
+  </div>
+</${popupTag}>`;
+};
+//#endregion
+//#region src/lib/tooltip/definition.ts
+/**
+* @internal
+*/
+var tooltipDefinition = require_vivid_element.defineVividComponent("tooltip", Tooltip, TooltipTemplate, [require_definition.popupDefinition], { styles: tooltip_default });
+/**
+* Registers the tooltip elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTooltip = require_vivid_element.createRegisterFunction(tooltipDefinition);
+//#endregion
+Object.defineProperty(exports, "Tooltip", {
+	enumerable: true,
+	get: function() {
+		return Tooltip;
+	}
+});
+Object.defineProperty(exports, "registerTooltip", {
+	enumerable: true,
+	get: function() {
+		return registerTooltip;
+	}
+});
+Object.defineProperty(exports, "tooltipDefinition", {
+	enumerable: true,
+	get: function() {
+		return tooltipDefinition;
+	}
+});

package/unbundled/definition26.js

@@ -0,0 +1,119 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
+import { attr, html } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/tooltip/tooltip.ts
+/**
+* @public
+* @component tooltip
+* @slot anchor - Used to set the anchor element for the tooltip.
+* @testSelector byText byText
+* @testQuery open open true
+* @testQuery closed open false
+*/
+var Tooltip = class extends Anchored(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#updateListeners();
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	#setupAnchor(a) {
+		a.addEventListener("mouseover", this.#show);
+		a.addEventListener("mouseout", this.#hide);
+		a.addEventListener("focusin", this.#show);
+		a.addEventListener("focusout", this.#hide);
+		a.setAttribute("aria-haspopup", "true");
+		a.setAttribute("aria-expanded", String(this.open));
+	}
+	#cleanupAnchor(a) {
+		a.removeEventListener("mouseover", this.#show);
+		a.removeEventListener("mouseout", this.#hide);
+		a.removeEventListener("focusin", this.#show);
+		a.removeEventListener("focusout", this.#hide);
+		a.removeAttribute("aria-haspopup");
+		a.removeAttribute("aria-expanded");
+	}
+	#show = () => {
+		this.open = true;
+		this.#updateAnchorExpanded();
+	};
+	#hide = () => {
+		this.open = false;
+		this.#updateAnchorExpanded();
+	};
+	#updateAnchorExpanded() {
+		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
+	}
+	#updateListeners() {
+		document.removeEventListener("keydown", this.#closeOnEscape);
+		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
+	}
+	#closeOnEscape = (e) => {
+		/* v8 ignore else -- @preserve */
+		if (e.key === "Escape") this.#hide();
+	};
+	/**
+	* @internal
+	*/
+	openChanged(oldValue) {
+		if (oldValue === void 0) return;
+		this.#updateListeners();
+	}
+};
+__decorate([attr], Tooltip.prototype, "text", void 0);
+__decorate([attr({ mode: "fromView" })], Tooltip.prototype, "placement", void 0);
+__decorate([attr({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
+//#endregion
+//#region src/lib/tooltip/tooltip.scss?inline
+var tooltip_default = ":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);padding:8px 12px}";
+//#endregion
+//#region src/lib/tooltip/tooltip.template.ts
+var getClasses = ({ open }) => classNames("control", ["open", Boolean(open)]);
+var TooltipTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	return html`
+${anchorSlotTemplateFactory()}
+<${popupTag} class="${getClasses}" arrow alternate
+	:placement=${(x) => x.placement}
+	:anchor="${(x) => x._anchorEl}"
+	:open="${(x) => x.open}"
+	@keydown="${(x, c) => {
+		if (x.open && handleEscapeKeyAndStopPropogation(c.event)) x.open = false;
+	}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		${(x) => x.text}
+  </div>
+</${popupTag}>`;
+};
+//#endregion
+//#region src/lib/tooltip/definition.ts
+/**
+* @internal
+*/
+var tooltipDefinition = defineVividComponent("tooltip", Tooltip, TooltipTemplate, [popupDefinition], { styles: tooltip_default });
+/**
+* Registers the tooltip elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTooltip = createRegisterFunction(tooltipDefinition);
+//#endregion
+export { tooltipDefinition as n, Tooltip as r, registerTooltip as t };

package/unbundled/definition27.cjs

@@ -0,0 +1,235 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_affix = require("./affix.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/option/option.ts
+/**
+* Determines if the element is a {@link (ListboxOption:class)}
+*
+* @param element - the element to test.
+* @public
+*/
+function isListboxOption(el) {
+	return (0, _microsoft_fast_web_utilities.isHTMLElement)(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
+}
+/**
+* An Option Custom HTML Element.
+* Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+*
+* @public
+* @component option
+* @slot icon - The preferred way to add an icon to the component.
+* @slot tag-icon - Icon to be displayed in the tag when selected inside of Searchable Select.
+* @slot trailing-meta - For additional elements at the end of the Option.
+* @testAction click click #locator
+*/
+var ListboxOption = class extends require_host_semantics.HostSemantics(require_affix.AffixIconWithTrailing(require_vivid_element.VividElement)) {
+	defaultSelectedChanged() {
+		if (!this.dirtySelected) {
+			this.selected = this.defaultSelected;
+			if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.defaultSelected;
+		}
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.defaultSelected = this.defaultSelected;
+	}
+	disabledChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.disabled = this.disabled;
+	}
+	/**
+	* @deprecated Use `defaultSelected` instead.
+	*/
+	get selectedAttribute() {
+		return this.defaultSelected;
+	}
+	set selectedAttribute(value) {
+		this.defaultSelected = value;
+	}
+	selectedChanged() {
+		if (!this.dirtySelected) this.dirtySelected = true;
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.selected;
+	}
+	valueChanged() {
+		if (typeof this.value !== "string") {
+			this.value = "";
+			return;
+		}
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.value = this.value;
+	}
+	get label() {
+		return this._label ?? this.text;
+	}
+	set label(value) {
+		this._label = value;
+	}
+	set text(value) {
+		this._text = value;
+	}
+	get text() {
+		return this._text ?? "";
+	}
+	/**
+	* Provides an accessible name for use by parent components.
+	* Note: Does not implement full accessible name computation, e.g. slotted content is missed.
+	* @internal
+	*/
+	_getAccessibleName() {
+		return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+	}
+	get form() {
+		return null;
+	}
+	get _hasMatchedText() {
+		return Boolean(this.matchedText ?? this._vvdSearchText);
+	}
+	/**
+	* From is inclusive, to is exclusive.
+	* @internal
+	*/
+	get _matchedRange() {
+		const matchedText = this.matchedText ?? this._vvdSearchText;
+		if (matchedText) {
+			const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
+			return matchIndex === -1 ? {
+				from: 0,
+				to: 0
+			} : {
+				from: matchIndex,
+				to: matchIndex + matchedText.length
+			};
+		}
+		return {
+			from: 0,
+			to: 0
+		};
+	}
+	constructor(text, value, defaultSelected, selected) {
+		super();
+		this.defaultSelected = false;
+		this.dirtySelected = false;
+		this.value = "";
+		this._highlighted = false;
+		this._displayCheckmark = false;
+		this._vvdSearchText = "";
+		this._isNotMatching = false;
+		if (text) this.text = text;
+		if (value) this.value = value;
+		if (defaultSelected) this.defaultSelected = defaultSelected;
+		if (selected) this.selected = selected;
+		this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected);
+		this.proxy.disabled = this.disabled;
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.dirtySelected) {
+			this.selected = this.defaultSelected;
+			this.dirtySelected = false;
+		}
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: {
+	fromView: (value) => {
+		if (value === true || value === "true") return true;
+		if (value === false || value === "false") return false;
+	},
+	toView: (value) => value
+} })], ListboxOption.prototype, "checked", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "defaultSelected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], ListboxOption.prototype, "disabled", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "current-selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "selected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "value" })], ListboxOption.prototype, "value", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "label" })], ListboxOption.prototype, "_label", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text" })], ListboxOption.prototype, "_text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], ListboxOption.prototype, "textSecondary", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_highlighted", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_displayCheckmark", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "matched-text" })], ListboxOption.prototype, "matchedText", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_vvdSearchText", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_hasMatchedText", null);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_isNotMatching", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_matchedRange", null);
+require_decorate.__decorate([_microsoft_fast_element.attr], ListboxOption.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
+//#endregion
+//#region src/lib/option/option.template.ts
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", Boolean(x.selected)], ["hover", Boolean(x._highlighted)], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
+function text() {
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.text || x.textSecondary, _microsoft_fast_element.html`<span class="text">
+			${(0, _microsoft_fast_element.when)((x) => x.text, _microsoft_fast_element.html`<span class="text-primary">
+					${(0, _microsoft_fast_element.when)((x) => x._hasMatchedText, _microsoft_fast_element.html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
+								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
+							>`)}${(x) => x.text.slice(x._matchedRange.to)}
+				</span>`)}
+			${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`)}
+		</span>`)}`;
+}
+var ListboxOptionTemplate = (context) => {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	const iconTag = context.tagFor(require_definition.Icon);
+	return _microsoft_fast_element.html`
+		<template
+			${require_host_semantics.applyHostSemantics({
+		role: "option",
+		ariaChecked: (x) => x.checked,
+		ariaSelected: (x) => x.selected,
+		ariaDisabled: (x) => x.disabled
+	})}
+			style="${(x) => x._isNotMatching ? "display: none" : ""}"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)} ${text()}
+				<slot name="trailing-meta"></slot>
+				${(0, _microsoft_fast_element.when)((x) => x._displayCheckmark && x.selected, _microsoft_fast_element.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`)}
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/option/definition.ts
+/**
+* @internal
+*/
+var listboxOptionDefinition = require_vivid_element.defineVividComponent("option", ListboxOption, ListboxOptionTemplate, [require_definition.iconDefinition], { 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)}" });
+/**
+* Registers the listbox-option elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerOption = require_vivid_element.createRegisterFunction(listboxOptionDefinition);
+//#endregion
+Object.defineProperty(exports, "ListboxOption", {
+	enumerable: true,
+	get: function() {
+		return ListboxOption;
+	}
+});
+Object.defineProperty(exports, "isListboxOption", {
+	enumerable: true,
+	get: function() {
+		return isListboxOption;
+	}
+});
+Object.defineProperty(exports, "listboxOptionDefinition", {
+	enumerable: true,
+	get: function() {
+		return listboxOptionDefinition;
+	}
+});
+Object.defineProperty(exports, "registerOption", {
+	enumerable: true,
+	get: function() {
+		return registerOption;
+	}
+});