@vonage/vivid 5.16.0 → 5.18.0

package/unbundled/definition28.cjs

@@ -2,545 +2,538 @@ 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_form_associated = require("./form-associated.cjs");
-const require_form_element = require("./form-element.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_dialog = require("./dialog.cjs");
 const require_definition$2 = require("./definition10.cjs");
 const require_mixins = require("./mixins.cjs");
-const require_definition$3 = require("./definition27.cjs");
-const require_text_field = require("./text-field.cjs");
-const require_listbox = require("./listbox.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");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/combobox/combobox.scss?inline
-var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){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;border-radius:8px}";
+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}";
 //#endregion
-//#region src/lib/combobox/combobox.options.ts
-/**
-* Autocomplete values for combobox.
-* @public
-*/
-var ComboboxAutocomplete = {
-	inline: "inline",
-	list: "list",
-	both: "both",
-	none: "none"
+//#region src/lib/color-picker/color-picker.ts
+var VC_HEX_PICKER_TAG = "vvd-hex-picker";
+var VC_HEX_INPUT_TAG = "vvd-hex-input";
+var VvdHexPicker = class extends vanilla_colorful_hex_color_picker_js.HexColorPicker {
+	static {
+		this.displayName = "VvdHexPicker";
+	}
 };
-//#endregion
-//#region src/lib/combobox/combobox.ts
+var VvdHexInput = class extends vanilla_colorful_hex_input_js.HexInput {
+	static {
+		this.displayName = "VvdHexInput";
+	}
+};
+/* v8 ignore if -- @preserve */
+if (!customElements.get(VC_HEX_PICKER_TAG)) customElements.define(VC_HEX_PICKER_TAG, VvdHexPicker);
+/* v8 ignore if -- @preserve */
+if (!customElements.get(VC_HEX_INPUT_TAG)) customElements.define(VC_HEX_INPUT_TAG, VvdHexInput);
+var vcPickerTag = VC_HEX_PICKER_TAG;
+var vcInputTag = VC_HEX_INPUT_TAG;
 /**
 * @public
-* @component combobox
-* @slot - Default slot.
-* @slot icon - The preferred way to add an icon to the combobox control.
-* @slot meta - Slot to add meta content to the combobox control.
-* @slot helper-text - Describes how to use the combobox. Alternative to the `helper-text` attribute.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value updates
-* @vueModel modelValue value change `event.currentTarget.value`
-* @testAction fill comboboxFill
-* @testAction clear comboboxClear
-* @testAction selectOptionByText selectOptionByText
-* @testAction selectOptionByValue selectOptionByValue
-* @testRef control shadow input.control
+* @component color-picker
+* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @slot popup-text - Overrides the default "Color Picker" title of the Popup window.
+* @slot swatches-text -  Overrides the default "Saved colors:" text above color swatches.
+* @event {CustomEvent<undefined>} change - Fires when the value changes
+* @event {Event} input - Fires when the value of the element changes.
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 */
-var Combobox = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_form_element.FormElement(require_affix.AffixIcon(require_form_associated.FormAssociated(require_listbox.Listbox))))))) {
+var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_delegates_aria.DelegatesAria(require_trapped_focus.TrappedFocus(require_base_color_picker.BaseColorPicker(require_vivid_element.VividElement))))))) {
 	constructor(..._args) {
 		super(..._args);
-		this.filteredOptions = [];
-		this.filter = "";
-		this.fixedDropdown = false;
-		this.listboxId = (0, _microsoft_fast_web_utilities.uniqueId)("listbox-");
-		this.maxHeight = 0;
-		this.open = false;
-		this.proxy = document.createElement("input");
+		this.disableSavedColors = false;
+		this.savedColors = [];
+		this.maxSwatches = 6;
+		this.copyIconName = "copy-2-line";
+		this._copyValueToClipboard = async (value) => {
+			try {
+				await navigator.clipboard.writeText(value);
+				this._setTemporaryCopyIcon("check-circle-line");
+				this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(value);
+			} catch {
+				alert(this.locale.colorPicker.copyErrorText);
+				this._setTemporaryCopyIcon("error-line");
+				this._ariaLiveDescription = this.locale.colorPicker.copyErrorText;
+			}
+		};
+		this._ariaLiveDescription = "";
+	}
+	static {
+		this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
 	}
 	/**
 	* @internal
 	*/
-	formResetCallback() {
-		super.formResetCallback();
-		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
-		this.value = this.firstSelectedOption?.text || "";
-	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
-	validate() {
-		super.validate(this.control);
-	}
-	get isAutocompleteInline() {
-		return this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth;
-	}
-	get isAutocompleteList() {
-		return this.autocomplete === ComboboxAutocomplete.list || this.isAutocompleteBoth;
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
 	}
-	get isAutocompleteBoth() {
-		return this.autocomplete === ComboboxAutocomplete.both;
+	/**
+	* Change event handler for inner control.
+	* @remarks
+	* @internal
+	*/
+	handleChange() {
+		this.$emit("change");
 	}
 	/**
 	* @internal
 	*/
-	openChanged() {
-		if (this.open) this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+	openChanged(_oldValue, newValue) {
+		if (newValue && this.isConnected) requestAnimationFrame(() => {
+			this._refreshCanvasColor();
+		});
 	}
 	/**
-	* A read-only list of options.
-	*
-	* @public
-	* @remarks
-	* Overrides `Listbox.options`.
+	* @internal
 	*/
-	get options() {
-		_microsoft_fast_element.Observable.track(this, "options");
-		return this.filteredOptions.length ? this.filteredOptions : this._options;
+	savedColorsKeyChanged() {
+		this.savedColors = this._loadSavedColors();
 	}
-	set options(value) {
-		super.options = value;
+	/**
+	* @internal
+	*/
+	get _savedColorsStorageKey() {
+		if (this.savedColorsKey) return this.savedColorsKey;
+		return `vvd-saved-colors:${this.tagName.toLowerCase()}`;
 	}
 	/**
-	* Updates the placeholder on the proxy element.
 	* @internal
 	*/
-	placeholderChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
+	_handleColorSaving() {
+		this._saveCurrentColor();
 	}
 	/**
 	* @internal
 	*/
-	valueChanged(prev, next) {
-		if (this.$fastController.isConnected && this.options) {
-			const selectedIndex = this.options.findIndex((el) => el.text.toLowerCase() === next.toLowerCase());
-			this.selectedIndex = this.options[this.selectedIndex]?.text !== this.options[selectedIndex]?.text ? selectedIndex : this.selectedIndex;
-		}
-		super.valueChanged(prev, next);
+	_saveCurrentColor() {
+		const value = this.value;
+		if (typeof value !== "string" || !require_base_color_picker.isValidHexColor(value)) return;
+		const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
+		const idx = swatches.findIndex((s) => s?.value === value);
+		if (idx !== -1) swatches.splice(idx, 1);
+		swatches.unshift({ value });
+		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
+		this._setSavedColors(this.savedColors);
 	}
 	/**
-	* Handle opening and closing the listbox when the combobox is clicked.
-	*
-	* @param e - the mouse event
 	* @internal
 	*/
-	clickHandler(e) {
-		if (this.disabled || this._isFromContextualHelp(e)) return;
-		if (this.open) {
-			const capturedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
-			if (!capturedOption || capturedOption.disabled) return;
-			this.selectedOptions = [capturedOption];
-			this.control.value = capturedOption.text;
-			this.clearSelectionRange();
-			this.updateValue(true);
+	_loadSavedColors() {
+		try {
+			const savedColors = localStorage.getItem(this._savedColorsStorageKey);
+			if (!savedColors) return [];
+			const parsed = JSON.parse(savedColors);
+			if (!Array.isArray(parsed)) return [];
+			return parsed.filter((x) => x && typeof x.value === "string" && require_base_color_picker.isValidHexColor(x.value)).map((x) => ({
+				value: x.value,
+				label: typeof x.label === "string" ? x.label : void 0
+			}));
+		} catch {
+			return [];
 		}
-		this.open = !this.open;
-		if (this.open) this.control.focus();
-		return true;
 	}
 	/**
-	* Handle closing the listbox when the combobox is open and the chevron icon is clicked.
-	*
-	* @param e - the mouse event
 	* @internal
 	*/
-	_chevronIconClickHandler(e) {
-		if (!this.open) return;
-		e.stopPropagation();
-		this.open = false;
+	_setSavedColors(swatches) {
+		try {
+			localStorage.setItem(this._savedColorsStorageKey, JSON.stringify(swatches));
+		} catch {}
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.value) this.initialValue = this.value;
-		this._popup.anchor = this._anchor;
+	/**
+	* Get all color swatches combined, both from swatches property and saved colors
+	* @internal
+	*/
+	get allSwatches() {
+		const predefinedColors = Array.isArray(this.swatches) ? this.swatches : [];
+		const savedColors = Array.isArray(this.savedColors) ? this.savedColors : [];
+		const seen = /* @__PURE__ */ new Set();
+		const merged = [];
+		const appendIfUniqueAndValid = (swatch) => {
+			if (!swatch || typeof swatch.value !== "string") return;
+			if (!require_base_color_picker.isValidHexColor(swatch.value) || seen.has(swatch.value)) return;
+			seen.add(swatch.value);
+			merged.push(swatch);
+		};
+		if (!this.disableSavedColors) savedColors.forEach(appendIfUniqueAndValid);
+		predefinedColors.forEach(appendIfUniqueAndValid);
+		return merged.slice(0, this._maxSwatchesNormalized);
 	}
 	/**
-	* Filter available options by text value.
-	*
-	* @public
+	* @internal
 	*/
-	filterOptions() {
-		if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) this.filter = "";
-		this.filteredOptions = this._options.filter((o) => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
-		if (this.isAutocompleteList) this._options.forEach((o) => {
-			o.hidden = !this.filteredOptions.includes(o);
-		});
+	get _maxSwatchesNormalized() {
+		return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
 	}
 	/**
-	* Focus the control and scroll the first selected option into view.
-	*
 	* @internal
-	* @remarks
-	* Overrides: `Listbox.focusAndScrollOptionIntoView`
 	*/
-	focusAndScrollOptionIntoView() {
-		if (this.contains(document.activeElement)) {
-			this.control.focus();
-			this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+	maxSwatchesChanged() {
+		const maxCount = this._maxSwatchesNormalized;
+		if (this.savedColors?.length > maxCount) {
+			this.savedColors = this.savedColors.slice(0, maxCount);
+			this._setSavedColors(this.savedColors);
 		}
 	}
 	/**
 	* @internal
 	*/
-	enqueueScrollSelectedOptionIntoViewIfNeeded() {
-		const firstSelectedOption = this.firstSelectedOption;
-		/* v8 ignore else -- @preserve */
-		if (firstSelectedOption) requestAnimationFrame(() => {
-			firstSelectedOption.scrollIntoView({ block: "nearest" });
-		});
+	_onPickerColorChanged(e) {
+		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
 	}
 	/**
-	* Handle focus state when the element or its children lose focus.
-	*
-	* @param e - The focus event
 	* @internal
 	*/
-	focusoutHandler(e) {
-		this.syncValue();
-		if (!this.open) return true;
-		const focusTarget = e.relatedTarget;
-		if (this.isSameNode(focusTarget)) {
-			this.focus();
-			return;
-		}
-		this.open = false;
+	valueChanged(_oldVal, newVal) {
+		if (this._vcHexPickerEl && typeof newVal === "string") this._vcHexPickerEl.color = newVal;
+		if (this._vcHexInputEl && typeof newVal === "string") this._vcHexInputEl.color = newVal;
 	}
 	/**
-	* Handle content changes on the control input.
-	*
-	* @param e - the input event
 	* @internal
 	*/
-	inputHandler(e) {
-		this.filter = this.control.value;
-		this.filterOptions();
-		if (!this.isAutocompleteInline) this.selectedIndex = this.options.map((option) => option.text).indexOf(this.control.value);
-		if (e.inputType.includes("deleteContent") || !this.filter.length) return true;
-		if (this.isAutocompleteList && !this.open) this.open = true;
-		if (this.isAutocompleteInline) if (this.filteredOptions.length) {
-			this.selectedOptions = [this.filteredOptions[0]];
-			this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
-			this.setInlineSelection();
-		} else this.selectedIndex = -1;
+	_onTextFieldInput(event) {
+		this.value = event.currentTarget.value;
 	}
 	/**
-	* Handle keydown actions for listbox navigation.
-	*
-	* @param e - the keyboard event
 	* @internal
 	*/
-	keydownHandler(e) {
-		const key = e.key;
-		if (e.ctrlKey || e.shiftKey) return true;
-		switch (key) {
-			case "Enter":
-				this.syncValue();
-				/* v8 ignore else -- @preserve */
-				if (this.isAutocompleteInline) this.filter = this.value;
-				this.open = false;
-				this.clearSelectionRange();
-				break;
-			case "Escape":
-				/* v8 ignore else -- @preserve */
-				if (!this.isAutocompleteInline) this.selectedIndex = -1;
-				if (this.open) {
-					this.open = false;
-					break;
-				}
-				this.value = "";
-				this.control.value = "";
-				this.filter = "";
-				this.filterOptions();
-				break;
-			case "Tab":
-				this.setInputToSelection();
-				if (!this.open) return true;
-				e.preventDefault();
-				this.open = false;
-				break;
-			case "ArrowUp":
-			case "ArrowDown":
-				this.filterOptions();
-				if (!this.open) {
-					this.open = true;
-					break;
-				}
-				/* v8 ignore else -- @preserve */
-				if (this.filteredOptions.length > 0) super.keydownHandler(e);
-				if (this.isAutocompleteInline) this.setInlineSelection();
-				break;
-			default: return true;
-		}
+	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)";
 	}
 	/**
-	* Ensure that the selectedIndex is within the current allowable filtered range.
-	*
-	* @param prev - the previous selected index value
-	* @param next - the current selected index value
-	*
 	* @internal
 	*/
-	selectedIndexChanged(prev, next) {
-		if (this.$fastController.isConnected) {
-			next = (0, _microsoft_fast_web_utilities.limit)(-1, this.options.length - 1, next);
-			if (next !== this.selectedIndex) {
-				this.selectedIndex = next;
-				return;
-			}
-			super.selectedIndexChanged(prev, next);
-		}
+	_onButtonClick() {
+		this.open = !this.open;
 	}
 	/**
-	* Move focus to the previous selectable option.
-	*
 	* @internal
-	* @remarks
-	* Overrides `Listbox.selectPreviousOption`
 	*/
-	selectPreviousOption() {
-		if (!this.disabled && this.selectedIndex >= 0) this.selectedIndex = this.selectedIndex - 1;
-	}
-	_isDefaultSelected(option) {
-		return super._isDefaultSelected(option) || option.text !== "" && option.text === this.initialValue;
+	_handleCloseRequest() {
+		this.open = false;
 	}
 	/**
-	* Focus and set the content of the control based on the first selected option.
-	*
 	* @internal
 	*/
-	setInputToSelection() {
-		if (this.firstSelectedOption) {
-			this.control.value = this.firstSelectedOption.text;
-			this.control.focus();
-		}
+	_isInPath(e, el) {
+		if (!el) return false;
+		const path = e.composedPath?.();
+		return !!(path && path.includes(el));
 	}
 	/**
-	* Focus, set and select the content of the control based on the first selected option.
-	*
 	* @internal
 	*/
-	setInlineSelection() {
-		/* v8 ignore else -- @preserve */
-		if (this.firstSelectedOption) {
-			this.setInputToSelection();
-			this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
-		}
+	#closeOnPointerOutside = (e) => {
+		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+		this.open = false;
+	};
+	connectedCallback() {
+		super.connectedCallback();
+		this.savedColors = this._loadSavedColors();
+		document.addEventListener("mousedown", this.#closeOnPointerOutside, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
+	#iconResetTimer = null;
 	/**
-	* Determines if a value update should involve emitting a change event, then updates the value.
-	*
 	* @internal
 	*/
-	syncValue() {
-		const newValue = this.firstSelectedOption?.text ?? this.control.value;
-		this.updateValue(this.value !== newValue);
+	_setTemporaryCopyIcon(name, ms = 2e3) {
+		this.copyIconName = name;
+		if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
+		this.#iconResetTimer = setTimeout(() => {
+			this.copyIconName = "copy-2-line";
+			this.#iconResetTimer = null;
+		}, ms);
 	}
 	/**
-	* Ensure that the entire list of options is used when setting the selected property.
-	*
-	* @param prev - the previous list of selected options
-	* @param next - the current list of selected options
-	*
 	* @internal
-	* @remarks
-	* Overrides: `Listbox.selectedOptionsChanged`
 	*/
-	selectedOptionsChanged(_prev, next) {
-		if (this.$fastController.isConnected) this._options.forEach((o) => {
-			o.selected = next.includes(o);
-		});
+	_onBaseKeydown(event) {
+		if (this.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) {
+			this.open = false;
+			return false;
+		}
+		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
+		return true;
 	}
 	/**
-	* Synchronize the form-associated proxy and update the value property of the element.
-	*
-	* @param prev - the previous collection of slotted option elements
-	* @param next - the next collection of slotted option elements
-	*
 	* @internal
 	*/
-	slottedOptionsChanged(prev, next) {
-		super.slottedOptionsChanged(prev, next);
-		this.updateValue();
-		const scale = this.getAttribute("scale") || this.scale;
-		next.forEach((element) => {
-			if (scale) {
-				element.setAttribute("scale", scale);
-				element.scale = scale;
-			}
-		});
+	_focusableElsWithinDialog() {
+		return this._popupEl.querySelectorAll("button:not([role=\"gridcell\"]), [data-vvd-component=\"button\"], vwc-button:not([role=\"gridcell\"])");
 	}
 	/**
-	* Sets the value and to match the first selected option.
-	*
-	* @param shouldEmit - if true, the change event will be emitted
-	*
 	* @internal
 	*/
-	updateValue(shouldEmit) {
-		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.text || this.control.value;
-		if (shouldEmit) this.$emit("change");
+	_handleCellKeydown(event, value, index, isSaveCell) {
+		if (event.key === "Tab") {
+			event.preventDefault();
+			const focusableEls = this._focusableElsWithinDialog();
+			const idx = Array.prototype.indexOf.call(focusableEls, event.currentTarget);
+			focusableEls[event.shiftKey ? (idx - 1 + focusableEls.length) % focusableEls.length : (idx + 1) % focusableEls.length]?.focus();
+			return false;
+		}
+		return super._handleCellKeydown(event, value, index, isSaveCell);
 	}
 	/**
 	* @internal
 	*/
-	clearSelectionRange() {
-		const controlValueLength = this.control.value.length;
-		this.control.setSelectionRange(controlValueLength, controlValueLength);
+	_handleSwatchSelection(value) {
+		/* v8 ignore else -- @preserve */
+		if (this.value !== value) this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
+		super._handleSwatchSelection(value);
 	}
 };
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "autocomplete",
-	mode: "fromView"
-})], Combobox.prototype, "autocomplete", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "shape", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Combobox.prototype, "scale", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "placement", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], ColorPicker.prototype, "placeholder", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "saved-colors-key" })], ColorPicker.prototype, "savedColorsKey", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	mode: "boolean",
-	attribute: "fixed-dropdown"
-})], Combobox.prototype, "fixedDropdown", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Combobox.prototype, "metaSlottedContent", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Combobox.prototype, "maxHeight", void 0);
+	attribute: "disable-saved-colors"
+})], ColorPicker.prototype, "disableSavedColors", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.prototype, "savedColors", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "open",
-	mode: "boolean"
-})], Combobox.prototype, "open", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "placeholder", void 0);
+	attribute: "max-swatches",
+	mode: "fromView",
+	converter: _microsoft_fast_element.nullableNumberConverter
+})], ColorPicker.prototype, "maxSwatches", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.prototype, "copyIconName", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.prototype, "_ariaLiveDescription", void 0);
 //#endregion
-//#region src/lib/combobox/combobox.template.ts
-var getStateClasses = ({ icon, iconSlottedContent, metaSlottedContent, errorValidationMessage, successText, shape, scale, disabled, placeholder, label, appearance, open, _activeDescendant }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", disabled], [`shape-${shape}`, Boolean(shape)], [`size-${scale}`, Boolean(scale)], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], ["no-label", !label], ["has-icon", !!icon || Boolean(iconSlottedContent?.length)], ["has-meta", Boolean(metaSlottedContent?.length)], ["has-activedescendant", Boolean(_activeDescendant) && open], ["error", Boolean(errorValidationMessage)], ["success", !!successText]);
-function renderLabel() {
-	return _microsoft_fast_element.html` <label for="control" class="label">
-		${(x) => x.label}
-	</label>`;
-}
-function setFixedDropdownVarWidth(x) {
-	return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
-}
-function renderInput(context) {
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
-	return _microsoft_fast_element.html` <div class="${getStateClasses}" ${(0, _microsoft_fast_element.ref)("_anchor")}>
-		<div
-			class="label-wrapper"
-			?hidden=${(x) => !x.label && !x._hasContextualHelp}
+//#region src/lib/color-picker/color-picker.template.ts
+function renderTextField(textFieldTag, iconTag) {
+	const getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+	return _microsoft_fast_element.html`
+		<${textFieldTag} 
+			id="text-field"
+			class="${getClasses}"
+			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
+			maxlength="7"
+			label="${(x) => x.label}"
+			:value="${(x) => x.value}"
+			placeholder="${(x) => x.placeholder}"
+			helper-text="${(x) => x.helperText}"
+			error-text="${(x) => x.errorValidationMessage}"
+			success-text="${(x) => x.successText}"
+			?disabled="${(x) => x.disabled}"
+			?required="${(x) => x.required}"
+			@input='${(x, c) => x._onTextFieldInput(c.event)}'
+			@change="${(x) => x.handleChange()}"
+			@blur="${(x) => {
+		x.$emit("blur", void 0, { bubbles: false });
+	}}"
+			@focus="${(x) => {
+		x.$emit("focus", void 0, { bubbles: false });
+	}}"
+			${require_delegates_aria.delegateAria()}
+			${(0, _microsoft_fast_element.ref)("_textFieldEl")}
 		>
-			${(0, _microsoft_fast_element.when)((x) => x.label, renderLabel())}
+			<button 
+				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
+				aria-expanded="${(x) => x.open}"
+  			aria-haspopup="dialog"
+				class="button ${(x) => (0, _microsoft_fast_web_utilities.classNames)(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}" 
+				style="--button-color: ${(x) => x._buttonColor};" 
+				?disabled="${(x) => x.disabled}"
+				@click="${(x) => x._onButtonClick()}"
+				slot="action-items" 
+				${(0, _microsoft_fast_element.ref)("_buttonEl")}>
+				<${iconTag} name="edit-line"></${iconTag}>
+			</button>
+			<slot
+				slot="${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}"
+				name="helper-text"
+				${(0, _microsoft_fast_element.slotted)("_helperTextSlottedContent")}
+			></slot>
 			<slot
-				name="contextual-help"
+				slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+				name='contextual-help'
 				${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}
 			></slot>
+		</${textFieldTag}>
+	`;
+}
+function renderPopupHeader(buttonTag, iconTag) {
+	return _microsoft_fast_element.html`
+		<div class="header">
+			<h2 class="header-title" id="color-picker-title">
+				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
+			</h2>
+			<${buttonTag} size="condensed" 
+				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
+				@click="${(x) => x._handleCloseRequest()}">
+				<${iconTag} slot="icon" name="close-line"></${iconTag}>
+			</${buttonTag}>
 		</div>
-		<div class="fieldset">
-			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-			<div class="wrapper">
-				<input
-					id="control"
-					autocomplete="off"
-					class="control"
-					aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
-					aria-autocomplete="${(x) => x.autocomplete}"
-					aria-controls="${(x) => x.listboxId}"
-					aria-expanded="${(x) => x.open}"
-					aria-haspopup="listbox"
-					aria-describedby="${(x) => x._feedbackDescribedBy}"
-					placeholder="${(x) => x.placeholder}"
-					role="combobox"
-					type="text"
-					?disabled="${(x) => x.disabled}"
-					:value="${(x) => x.value}"
-					@input="${(x, c) => x.inputHandler(c.event)}"
-					${(0, _microsoft_fast_element.ref)("control")}
-				/>
-			</div>
-			<div class="leading-items-wrapper">
-				<slot name="meta" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot>
-				<div
-					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
+	`;
+}
+function renderPopupBody(buttonTag, iconTag, tooltipTag) {
+	return _microsoft_fast_element.html`
+		<div class="body">
+			<${_microsoft_fast_element.html.partial(vcPickerTag)}
+				part="hex-picker"
+				color="${(x) => x.value}"
+				@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
+				${(0, _microsoft_fast_element.ref)("_vcHexPickerEl")}
+			></${_microsoft_fast_element.html.partial(vcPickerTag)}>
+			<div class="hex-input-wrapper">
+				<${_microsoft_fast_element.html.partial(vcInputTag)}
+					part="hex-input"
+					prefixed
+					color="${(x) => x.value}"
+					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
+					${(0, _microsoft_fast_element.ref)("_vcHexInputEl")}
 				>
-					${chevronTemplate}
-				</div>
+					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
+						placeholder="${(x) => x.placeholder}"
+    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
+						part="input">
+				</${_microsoft_fast_element.html.partial(vcInputTag)}>
+				<${tooltipTag} placement="top" 
+					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+					exportparts="vvd-theme-alternate">
+					<${buttonTag} 
+						slot="anchor" size="normal" 
+						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+						@click="${(x) => x._copyValueToClipboard(x.value)}">
+						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
+					</${buttonTag}>
+				</${tooltipTag}>
 			</div>
 		</div>
-	</div>`;
+	`;
 }
-var comboboxTemplate = (context) => {
-	const popupTag = context.tagFor(require_definition$2.Popup);
+function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
 	return _microsoft_fast_element.html`
-		<template
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-			@focusout="${(x, c) => x.focusoutHandler(c.event)}"
-			@keydown="${(x, { event }) => {
-		x.open && require_dialog.handleEscapeKeyAndStopPropogation(event);
-		return x.keydownHandler(event);
-	}}"
-		>
-			<div class="control-wrapper">
-				${() => renderInput(context)}
-				<${popupTag} class="popup"
-					style="${setFixedDropdownVarWidth}"
-					?open="${(x) => x.open}"
-					placement="${(x) => x.placement ?? "bottom-start"}"
-					strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}"
-					${(0, _microsoft_fast_element.ref)("_popup")}>
-					<div id="${(x) => x.listboxId}"
-						class="listbox"
-						role="listbox"
-						?disabled="${(x) => x.disabled}"
-						${(0, _microsoft_fast_element.ref)("listbox")}>
-						<slot ${(0, _microsoft_fast_element.slotted)({
-		filter: require_listbox.Listbox.slottedOptionFilter,
-		flatten: true,
-		property: "slottedOptions"
-	})}>
-						</slot>
-					</div>
-				</${popupTag}>
+		<div class="footer">
+			<div class="footer-header">
+				<span class="footer-title" id="color-picker-footer-title"
+					><slot name="swatches-text"
+						>${(x) => x.locale.colorPicker.swatchesLabel}</slot
+					></span
+				>
+				${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors, renderSwatchesCount())}
 			</div>
-			<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
-				${(x) => x._getFeedbackTemplate(context)}
+			<div
+				class="palette"
+				role="grid"
+				aria-rowcount="${(x) => Math.ceil(x.allSwatches.length / x._getRowLength())}"
+				aria-colcount="${(x) => x._getRowLength()}"
+				style="--swatches-per-row: ${(x) => x._getRowLength()};"
+				aria-labelledby="color-picker-footer-title"
+			>
+				${(0, _microsoft_fast_element.repeat)((x) => x.allSwatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
+				${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors, _microsoft_fast_element.html`
+						<${tooltipTag} placement="top" 
+							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
+							exportparts="vvd-theme-alternate">
+							<${buttonTag}
+								slot="anchor"
+								appearance="outlined"
+								size="super-condensed"
+								role="gridcell"
+								tabindex="${(x) => x.allSwatches.length ? "-1" : "0"}"
+								aria-label="${(x) => x.locale.colorPicker.saveButtonLabel}"
+								@click="${(x) => x._saveCurrentColor()}"
+								@keydown="${(x, c) => x._handleCellKeydown(c.event, x.value, x.allSwatches.length, true)}">
+								<${iconTag} slot="icon" name="plus-line"></${iconTag}>
+							</${buttonTag}>
+						</${tooltipTag}>
+					`)}
 			</div>
-    </template>
+		</div>
+	`;
+}
+function renderSwatchesCount() {
+	return _microsoft_fast_element.html`
+		<span
+			id="swatches-count"
+			class="swatches-count"
+			aria-label="${(x) => x.locale.colorPicker.maxSwatchesMessage(x.allSwatches.length, x.maxSwatches)}"
+			>${(x) => `${x.allSwatches.length}/${x.maxSwatches}`}</span
+		>
+	`;
+}
+var ColorPickerTemplate = (context) => {
+	const textFieldTag = context.tagFor(require_definition$3.TextField);
+	const iconTag = context.tagFor(require_definition.Icon);
+	const popupTag = context.tagFor(require_definition$2.Popup);
+	const buttonTag = context.tagFor(require_definition$1.Button);
+	const tooltipTag = context.tagFor(require_definition$4.Tooltip);
+	return _microsoft_fast_element.html`
+		<div class="base" @keydown="${(x, { event }) => x._onBaseKeydown(event)}">
+			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
+				${(x) => x._ariaLiveDescription}
+			</span>
+			${renderTextField(textFieldTag, iconTag)}
+			<${popupTag}
+				:open="${(x) => x.open}"
+				:anchor="${(x) => x._buttonEl}"
+				placement="top"
+				offset="10" 
+				${(0, _microsoft_fast_element.ref)("_popupEl")}>
+				<div class="dialog" 
+					role="dialog" 
+					aria-modal="true" 
+					aria-labelledby="color-picker-title">
+					${renderPopupHeader(buttonTag, iconTag)}
+					${renderPopupBody(buttonTag, iconTag, tooltipTag)}
+					${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors || x.allSwatches.length > 0, renderPopupFooter(buttonTag, iconTag, tooltipTag))}
+				</div>
+			</${popupTag}>
+		</div>
 	`;
 };
 //#endregion
-//#region src/lib/combobox/definition.ts
-/**
-* @internal
-*/
-var comboboxDefinition = require_vivid_element.defineVividComponent("combobox", Combobox, comboboxTemplate, [
-	require_definition.iconDefinition,
+//#region src/lib/color-picker/definition.ts
+var colorPickerDefinition = require_vivid_element.defineVividComponent("color-picker", ColorPicker, ColorPickerTemplate, [
 	require_definition$2.popupDefinition,
-	require_definition$3.listboxOptionDefinition,
+	require_definition.iconDefinition,
+	require_definition$3.textFieldDefinition,
+	require_definition$1.buttonDefinition,
+	require_definition$4.tooltipDefinition,
 	require_mixins.feedbackMessageDefinition
-], {
-	styles: [require_text_field.text_field_default, combobox_default],
-	shadowOptions: { delegatesFocus: true }
-});
+], { styles: color_picker_default });
 /**
-* Registers the combobox elements with the design system.
+* Registers the color-picker element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCombobox = require_vivid_element.createRegisterFunction(comboboxDefinition);
+var registerColorPicker = require_vivid_element.createRegisterFunction(colorPickerDefinition);
 //#endregion
-Object.defineProperty(exports, "Combobox", {
+Object.defineProperty(exports, "ColorPicker", {
 	enumerable: true,
 	get: function() {
-		return Combobox;
+		return ColorPicker;
 	}
 });
-Object.defineProperty(exports, "comboboxDefinition", {
+Object.defineProperty(exports, "colorPickerDefinition", {
 	enumerable: true,
 	get: function() {
-		return comboboxDefinition;
+		return colorPickerDefinition;
 	}
 });
-Object.defineProperty(exports, "registerCombobox", {
+Object.defineProperty(exports, "registerColorPicker", {
 	enumerable: true,
 	get: function() {
-		return registerCombobox;
+		return registerColorPicker;
 	}
 });