@vonage/vivid 5.15.1 → 5.17.0

package/unbundled/definition28.cjs

@@ -0,0 +1,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_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("./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");
+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/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";
+	}
+};
+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 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
+* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
+*/
+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.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
+	*/
+	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
+	*/
+	openChanged(_oldValue, newValue) {
+		if (newValue && this.isConnected) requestAnimationFrame(() => {
+			this._refreshCanvasColor();
+		});
+	}
+	/**
+	* @internal
+	*/
+	savedColorsKeyChanged() {
+		this.savedColors = this._loadSavedColors();
+	}
+	/**
+	* @internal
+	*/
+	get _savedColorsStorageKey() {
+		if (this.savedColorsKey) return this.savedColorsKey;
+		return `vvd-saved-colors:${this.tagName.toLowerCase()}`;
+	}
+	/**
+	* @internal
+	*/
+	_handleColorSaving() {
+		this._saveCurrentColor();
+	}
+	/**
+	* @internal
+	*/
+	_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);
+	}
+	/**
+	* @internal
+	*/
+	_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 [];
+		}
+	}
+	/**
+	* @internal
+	*/
+	_setSavedColors(swatches) {
+		try {
+			localStorage.setItem(this._savedColorsStorageKey, JSON.stringify(swatches));
+		} catch {}
+	}
+	/**
+	* 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);
+	}
+	/**
+	* @internal
+	*/
+	get _maxSwatchesNormalized() {
+		return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
+	}
+	/**
+	* @internal
+	*/
+	maxSwatchesChanged() {
+		const maxCount = this._maxSwatchesNormalized;
+		if (this.savedColors?.length > maxCount) {
+			this.savedColors = this.savedColors.slice(0, maxCount);
+			this._setSavedColors(this.savedColors);
+		}
+	}
+	/**
+	* @internal
+	*/
+	_onPickerColorChanged(e) {
+		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
+	}
+	/**
+	* @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
+	*/
+	_onTextFieldInput(event) {
+		this.value = event.currentTarget.value;
+	}
+	/**
+	* @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
+	*/
+	_onButtonClick() {
+		this.open = !this.open;
+	}
+	/**
+	* @internal
+	*/
+	_handleCloseRequest() {
+		this.open = false;
+	}
+	/**
+	* @internal
+	*/
+	_isInPath(e, el) {
+		if (!el) return false;
+		const path = e.composedPath?.();
+		return !!(path && path.includes(el));
+	}
+	/**
+	* @internal
+	*/
+	#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;
+	/**
+	* @internal
+	*/
+	_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);
+	}
+	/**
+	* @internal
+	*/
+	_onBaseKeydown(event) {
+		if (this.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) {
+			this.open = false;
+			return false;
+		}
+		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
+		return true;
+	}
+	/**
+	* @internal
+	*/
+	_focusableElsWithinDialog() {
+		return this._popupEl.querySelectorAll("button:not([role=\"gridcell\"]), [data-vvd-component=\"button\"], vwc-button:not([role=\"gridcell\"])");
+	}
+	/**
+	* @internal
+	*/
+	_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
+	*/
+	_handleSwatchSelection(value) {
+		/* v8 ignore else -- @preserve */
+		if (this.value !== value) this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
+		super._handleSwatchSelection(value);
+	}
+};
+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: "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: "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/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")}
+		>
+			<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
+				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>
+	`;
+}
+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")}
+				>
+					<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>
+	`;
+}
+function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
+	return _microsoft_fast_element.html`
+		<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="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>
+		</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/color-picker/definition.ts
+var colorPickerDefinition = require_vivid_element.defineVividComponent("color-picker", ColorPicker, ColorPickerTemplate, [
+	require_definition$2.popupDefinition,
+	require_definition.iconDefinition,
+	require_definition$3.textFieldDefinition,
+	require_definition$1.buttonDefinition,
+	require_definition$4.tooltipDefinition,
+	require_mixins.feedbackMessageDefinition
+], { styles: color_picker_default });
+/**
+* Registers the color-picker element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerColorPicker = require_vivid_element.createRegisterFunction(colorPickerDefinition);
+//#endregion
+Object.defineProperty(exports, "ColorPicker", {
+	enumerable: true,
+	get: function() {
+		return ColorPicker;
+	}
+});
+Object.defineProperty(exports, "colorPickerDefinition", {
+	enumerable: true,
+	get: function() {
+		return colorPickerDefinition;
+	}
+});
+Object.defineProperty(exports, "registerColorPicker", {
+	enumerable: true,
+	get: function() {
+		return registerColorPicker;
+	}
+});