@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition28.cjs

@@ -3,23 +3,23 @@ const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
-const require_with_error_text = require("./with-error-text.cjs");
-const require_with_contextual_help = require("./with-contextual-help.cjs");
-const require_trapped_focus = require("./trapped-focus.cjs");
-const require_definition$1 = require("./definition7.cjs");
+const require_definition$1 = require("./definition6.cjs");
 const require_dialog = require("./dialog.cjs");
-const require_definition$2 = require("./definition10.cjs");
+const require_definition$2 = require("./definition9.cjs");
 const require_mixins = require("./mixins.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
+const require_with_success_text = require("./with-success-text.cjs");
+const require_with_contextual_help = require("./with-contextual-help.cjs");
 const require_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition27.cjs");
 const require_base_color_picker = require("./base-color-picker.cjs");
+const require_trapped_focus = require("./trapped-focus.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 let vanilla_colorful_hex_color_picker_js = require("vanilla-colorful/hex-color-picker.js");
 let vanilla_colorful_hex_input_js = require("vanilla-colorful/hex-input.js");
 //#region src/lib/color-picker/color-picker.scss?inline
-var color_picker_default = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button: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))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+var color_picker_default = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button: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))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
 //#endregion
 //#region src/lib/color-picker/color-picker.ts
 var VC_HEX_PICKER_TAG = "vvd-hex-picker";
@@ -78,51 +78,38 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	static {
 		this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	placeholderChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
 	}
 	/**
 	* Change event handler for inner control.
-	* @remarks
 	* @internal
 	*/
 	handleChange() {
 		this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(_oldValue, newValue) {
 		if (newValue && this.isConnected) requestAnimationFrame(() => {
 			this._refreshCanvasColor();
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	savedColorsKeyChanged() {
 		this.savedColors = this._loadSavedColors();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _savedColorsStorageKey() {
 		if (this.savedColorsKey) return this.savedColorsKey;
 		return `vvd-saved-colors:${this.tagName.toLowerCase()}`;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleColorSaving() {
 		this._saveCurrentColor();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_saveCurrentColor() {
 		const value = this.value;
 		if (typeof value !== "string" || !require_base_color_picker.isValidHexColor(value)) return;
@@ -133,9 +120,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
 		this._setSavedColors(this.savedColors);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_loadSavedColors() {
 		try {
 			const savedColors = localStorage.getItem(this._savedColorsStorageKey);
@@ -150,9 +135,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 			return [];
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_setSavedColors(swatches) {
 		try {
 			localStorage.setItem(this._savedColorsStorageKey, JSON.stringify(swatches));
@@ -177,15 +160,11 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		predefinedColors.forEach(appendIfUniqueAndValid);
 		return merged.slice(0, this._maxSwatchesNormalized);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _maxSwatchesNormalized() {
 		return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	maxSwatchesChanged() {
 		const maxCount = this._maxSwatchesNormalized;
 		if (this.savedColors.length > maxCount) {
@@ -193,58 +172,42 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 			this._setSavedColors(this.savedColors);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onPickerColorChanged(e) {
 		if (typeof e.detail.value === "string") this.value = e.detail.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(_oldVal, newVal) {
 		if (this._vcHexPickerEl && typeof newVal === "string") this._vcHexPickerEl.color = newVal;
 		if (this._vcHexInputEl && typeof newVal === "string") this._vcHexInputEl.color = newVal;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onTextFieldInput(event) {
 		const textField = event.currentTarget;
 		this.value = textField.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _buttonColor() {
 		/* v8 ignore else -- @preserve */
 		if (!this._canvasColor) this._refreshCanvasColor();
 		if (this.value && require_base_color_picker.isValidHexColor(this.value)) return this.value;
 		return "var(--vvd-color-canvas-text)";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onButtonClick() {
 		this.open = !this.open;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleCloseRequest() {
 		this.open = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_isInPath(e, el) {
 		if (!el) return false;
 		const path = e.composedPath?.();
 		return !!(path && path.includes(el));
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
@@ -256,9 +219,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
 	#iconResetTimer;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_setTemporaryCopyIcon(name, ms = 2e3) {
 		this.copyIconName = name;
 		if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
@@ -267,9 +228,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 			this.#iconResetTimer = null;
 		}, ms);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onBaseKeydown(event) {
 		if (this.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) {
 			this.open = false;
@@ -278,15 +237,11 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_focusableElsWithinDialog() {
 		return this._popupEl.querySelectorAll("button:not([role=\"gridcell\"]), [data-vvd-component=\"button\"], vwc-button:not([role=\"gridcell\"])");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleCellKeydown(event, value, index, isSaveCell) {
 		if (event.key === "Tab") {
 			event.preventDefault();
@@ -297,9 +252,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		}
 		return super._handleCellKeydown(event, value, index, isSaveCell);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleSwatchSelection(value) {
 		/* v8 ignore else -- @preserve */
 		if (this.value !== value) this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);

package/unbundled/definition28.js

@@ -2,23 +2,23 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { t as WithSuccessText } from "./with-success-text.js";
-import { t as WithErrorText } from "./with-error-text.js";
-import { t as WithContextualHelp } from "./with-contextual-help.js";
-import { t as TrappedFocus } from "./trapped-focus.js";
-import { i as Button, t as buttonDefinition } from "./definition7.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
-import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { i as Popup, t as popupDefinition } from "./definition9.js";
 import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { n as textFieldDefinition, r as TextField } from "./definition26.js";
 import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
 import { n as isValidHexColor, t as BaseColorPicker } from "./base-color-picker.js";
+import { t as TrappedFocus } from "./trapped-focus.js";
 import { attr, html, nullableNumberConverter, observable, ref, repeat, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 import { HexColorPicker } from "vanilla-colorful/hex-color-picker.js";
 import { HexInput } from "vanilla-colorful/hex-input.js";
 //#region src/lib/color-picker/color-picker.scss?inline
-var color_picker_default = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button: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))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+var color_picker_default = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button: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))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
 //#endregion
 //#region src/lib/color-picker/color-picker.ts
 var VC_HEX_PICKER_TAG = "vvd-hex-picker";
@@ -77,51 +77,38 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	static {
 		this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	placeholderChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
 	}
 	/**
 	* Change event handler for inner control.
-	* @remarks
 	* @internal
 	*/
 	handleChange() {
 		this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged(_oldValue, newValue) {
 		if (newValue && this.isConnected) requestAnimationFrame(() => {
 			this._refreshCanvasColor();
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	savedColorsKeyChanged() {
 		this.savedColors = this._loadSavedColors();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _savedColorsStorageKey() {
 		if (this.savedColorsKey) return this.savedColorsKey;
 		return `vvd-saved-colors:${this.tagName.toLowerCase()}`;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleColorSaving() {
 		this._saveCurrentColor();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_saveCurrentColor() {
 		const value = this.value;
 		if (typeof value !== "string" || !isValidHexColor(value)) return;
@@ -132,9 +119,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
 		this._setSavedColors(this.savedColors);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_loadSavedColors() {
 		try {
 			const savedColors = localStorage.getItem(this._savedColorsStorageKey);
@@ -149,9 +134,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 			return [];
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_setSavedColors(swatches) {
 		try {
 			localStorage.setItem(this._savedColorsStorageKey, JSON.stringify(swatches));
@@ -176,15 +159,11 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		predefinedColors.forEach(appendIfUniqueAndValid);
 		return merged.slice(0, this._maxSwatchesNormalized);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _maxSwatchesNormalized() {
 		return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	maxSwatchesChanged() {
 		const maxCount = this._maxSwatchesNormalized;
 		if (this.savedColors.length > maxCount) {
@@ -192,58 +171,42 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 			this._setSavedColors(this.savedColors);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onPickerColorChanged(e) {
 		if (typeof e.detail.value === "string") this.value = e.detail.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(_oldVal, newVal) {
 		if (this._vcHexPickerEl && typeof newVal === "string") this._vcHexPickerEl.color = newVal;
 		if (this._vcHexInputEl && typeof newVal === "string") this._vcHexInputEl.color = newVal;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onTextFieldInput(event) {
 		const textField = event.currentTarget;
 		this.value = textField.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _buttonColor() {
 		/* v8 ignore else -- @preserve */
 		if (!this._canvasColor) this._refreshCanvasColor();
 		if (this.value && isValidHexColor(this.value)) return this.value;
 		return "var(--vvd-color-canvas-text)";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onButtonClick() {
 		this.open = !this.open;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleCloseRequest() {
 		this.open = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_isInPath(e, el) {
 		if (!el) return false;
 		const path = e.composedPath?.();
 		return !!(path && path.includes(el));
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
@@ -255,9 +218,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
 	#iconResetTimer;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_setTemporaryCopyIcon(name, ms = 2e3) {
 		this.copyIconName = name;
 		if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
@@ -266,9 +227,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 			this.#iconResetTimer = null;
 		}, ms);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onBaseKeydown(event) {
 		if (this.open && handleEscapeKeyAndStopPropogation(event)) {
 			this.open = false;
@@ -277,15 +236,11 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_focusableElsWithinDialog() {
 		return this._popupEl.querySelectorAll("button:not([role=\"gridcell\"]), [data-vvd-component=\"button\"], vwc-button:not([role=\"gridcell\"])");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleCellKeydown(event, value, index, isSaveCell) {
 		if (event.key === "Tab") {
 			event.preventDefault();
@@ -296,9 +251,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		}
 		return super._handleCellKeydown(event, value, index, isSaveCell);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleSwatchSelection(value) {
 		/* v8 ignore else -- @preserve */
 		if (this.value !== value) this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);

package/unbundled/definition29.cjs

@@ -11,13 +11,11 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 * 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
@@ -39,9 +37,7 @@ var ListboxOption = class extends require_host_semantics.HostSemantics(require_a
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLOptionElement) this.proxy.disabled = this.disabled;
 	}
-	/**
-	* @deprecated Use `defaultSelected` instead.
-	*/
+	/** @deprecated Use `defaultSelected` instead. */
 	get selectedAttribute() {
 		return this.defaultSelected;
 	}
@@ -123,9 +119,7 @@ var ListboxOption = class extends require_host_semantics.HostSemantics(require_a
 		this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected);
 		this.proxy.disabled = this.disabled;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.dirtySelected) {
@@ -165,7 +159,6 @@ require_decorate.__decorate([_microsoft_fast_element.attr], ListboxOption.protot
 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", x.selected], ["hover", 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">
@@ -189,7 +182,9 @@ var ListboxOptionTemplate = (context) => {
 	})}
 			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
-			<div class="${getClasses}">
+			<div
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["hover", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)])}"
+			>
 				${(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}>`)}
@@ -199,10 +194,8 @@ var ListboxOptionTemplate = (context) => {
 };
 //#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)}" });
+/** @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)}.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.
 *