@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/definition61.cjs

@@ -0,0 +1,116 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_dialog = require("./dialog.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/side-drawer/side-drawer.ts
+/**
+* @public
+* @component side-drawer
+* @slot - Sets assigned nodes to the side drawer itself.
+* @slot app-content - Sets assigned nodes to the main application content, the side drawer is opened next to.
+* @event {CustomEvent<undefined>} close - Fired when the side drawer is closed.
+* @event {CustomEvent<undefined>} open - Fired when the side drawer is opened.
+* @event {CustomEvent<undefined>} cancel - Fired when the user requests to close the side-drawer. You can prevent the side drawer from closing by calling `.preventDefault()` on the event.
+*/
+var SideDrawer = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.alternate = false;
+		this.modal = false;
+		this.open = false;
+		this.trailing = false;
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		super.attributeChangedCallback(name, oldValue, newValue);
+		switch (name) {
+			case "open": this.open ? this.#open() : this.#close();
+		}
+	}
+	#close() {
+		this.$emit("close", void 0, { bubbles: false });
+	}
+	#open() {
+		this.$emit("open", void 0, { bubbles: false });
+	}
+	/**
+	* @internal
+	*/
+	_onKeydown(event) {
+		if (require_dialog.handleEscapeKeyAndStopPropogation(event)) {
+			this._handleCloseRequest();
+			return;
+		} else return true;
+	}
+	/**
+	* @internal
+	*/
+	_handleCloseRequest() {
+		if (this.$emit("cancel", void 0, {
+			bubbles: false,
+			cancelable: true
+		})) this.open = false;
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SideDrawer.prototype, "alternate", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SideDrawer.prototype, "modal", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SideDrawer.prototype, "open", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SideDrawer.prototype, "trailing", void 0);
+//#endregion
+//#region src/lib/side-drawer/side-drawer.scss?inline
+var side_drawer_default = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset,280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset,280px)}@media (prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}";
+//#endregion
+//#region src/lib/side-drawer/side-drawer.template.ts
+var getClasses = ({ modal, open, trailing }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["modal", modal], ["open", open], ["trailing", trailing]);
+var getScrimClasses = ({ open }) => (0, _microsoft_fast_web_utilities.classNames)("scrim", ["open", open]);
+var sideDrawerTemplate = _microsoft_fast_element.html`
+	<div
+		class="${getClasses}"
+		?inert="${(x) => !x.open}"
+		part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
+		@keydown="${(x, c) => x._onKeydown(c.event)}"
+	>
+		<slot></slot>
+	</div>
+
+	<div class="side-drawer-app-content" ?inert="${(x) => x.open && x.modal}">
+		<slot name="app-content"></slot>
+	</div>
+
+	${(0, _microsoft_fast_element.when)((x) => x.modal, _microsoft_fast_element.html`<div
+			class="${getScrimClasses}"
+			@click="${(x) => x._handleCloseRequest()}"
+		></div>`)}
+`;
+//#endregion
+//#region src/lib/side-drawer/definition.ts
+/**
+* @internal
+*/
+var sideDrawerDefinition = require_vivid_element.defineVividComponent("side-drawer", SideDrawer, sideDrawerTemplate, [], { styles: side_drawer_default });
+/**
+* Registers the side-drawer elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerSideDrawer = require_vivid_element.createRegisterFunction(sideDrawerDefinition);
+//#endregion
+Object.defineProperty(exports, "SideDrawer", {
+	enumerable: true,
+	get: function() {
+		return SideDrawer;
+	}
+});
+Object.defineProperty(exports, "registerSideDrawer", {
+	enumerable: true,
+	get: function() {
+		return registerSideDrawer;
+	}
+});
+Object.defineProperty(exports, "sideDrawerDefinition", {
+	enumerable: true,
+	get: function() {
+		return sideDrawerDefinition;
+	}
+});

package/unbundled/definition61.js

@@ -0,0 +1,97 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/side-drawer/side-drawer.ts
+/**
+* @public
+* @component side-drawer
+* @slot - Sets assigned nodes to the side drawer itself.
+* @slot app-content - Sets assigned nodes to the main application content, the side drawer is opened next to.
+* @event {CustomEvent<undefined>} close - Fired when the side drawer is closed.
+* @event {CustomEvent<undefined>} open - Fired when the side drawer is opened.
+* @event {CustomEvent<undefined>} cancel - Fired when the user requests to close the side-drawer. You can prevent the side drawer from closing by calling `.preventDefault()` on the event.
+*/
+var SideDrawer = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.alternate = false;
+		this.modal = false;
+		this.open = false;
+		this.trailing = false;
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		super.attributeChangedCallback(name, oldValue, newValue);
+		switch (name) {
+			case "open": this.open ? this.#open() : this.#close();
+		}
+	}
+	#close() {
+		this.$emit("close", void 0, { bubbles: false });
+	}
+	#open() {
+		this.$emit("open", void 0, { bubbles: false });
+	}
+	/**
+	* @internal
+	*/
+	_onKeydown(event) {
+		if (handleEscapeKeyAndStopPropogation(event)) {
+			this._handleCloseRequest();
+			return;
+		} else return true;
+	}
+	/**
+	* @internal
+	*/
+	_handleCloseRequest() {
+		if (this.$emit("cancel", void 0, {
+			bubbles: false,
+			cancelable: true
+		})) this.open = false;
+	}
+};
+__decorate([attr({ mode: "boolean" })], SideDrawer.prototype, "alternate", void 0);
+__decorate([attr({ mode: "boolean" })], SideDrawer.prototype, "modal", void 0);
+__decorate([attr({ mode: "boolean" })], SideDrawer.prototype, "open", void 0);
+__decorate([attr({ mode: "boolean" })], SideDrawer.prototype, "trailing", void 0);
+//#endregion
+//#region src/lib/side-drawer/side-drawer.scss?inline
+var side_drawer_default = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset,280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset,280px)}@media (prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}";
+//#endregion
+//#region src/lib/side-drawer/side-drawer.template.ts
+var getClasses = ({ modal, open, trailing }) => classNames("control", ["modal", modal], ["open", open], ["trailing", trailing]);
+var getScrimClasses = ({ open }) => classNames("scrim", ["open", open]);
+//#endregion
+//#region src/lib/side-drawer/definition.ts
+/**
+* @internal
+*/
+var sideDrawerDefinition = defineVividComponent("side-drawer", SideDrawer, html`
+	<div
+		class="${getClasses}"
+		?inert="${(x) => !x.open}"
+		part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
+		@keydown="${(x, c) => x._onKeydown(c.event)}"
+	>
+		<slot></slot>
+	</div>
+
+	<div class="side-drawer-app-content" ?inert="${(x) => x.open && x.modal}">
+		<slot name="app-content"></slot>
+	</div>
+
+	${when((x) => x.modal, html`<div
+			class="${getScrimClasses}"
+			@click="${(x) => x._handleCloseRequest()}"
+		></div>`)}
+`, [], { styles: side_drawer_default });
+/**
+* Registers the side-drawer elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerSideDrawer = createRegisterFunction(sideDrawerDefinition);
+//#endregion
+export { sideDrawerDefinition as n, SideDrawer as r, registerSideDrawer as t };

package/unbundled/definition62.cjs

@@ -0,0 +1,213 @@
+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_dialog = require("./dialog.cjs");
+const require_definition$1 = require("./definition10.cjs");
+const require_anchored = require("./anchored.cjs");
+const require_base_color_picker = require("./base-color-picker.cjs");
+const require_definition$2 = require("./definition26.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/simple-color-picker/simple-color-picker.scss?inline
+var simple_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 :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}";
+//#endregion
+//#region src/lib/simple-color-picker/simple-color-picker.ts
+/**
+* @public
+* @component simple-color-picker
+* @slot anchor - Slot for attaching the toggle button
+* @event {CustomEvent<undefined>} change - Fires when the value changes
+* @vueModel modelValue value input `event.currentTarget.value`
+*/
+var SimpleColorPicker = class extends require_anchored.Anchored(require_base_color_picker.BaseColorPicker(require_vivid_element.VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "top-start";
+		this.swatchesPerRow = 7;
+		this._closeOnClickOutside = (e) => {
+			const clickedOutside = !this.contains(e.target);
+			const clickedOnAnchor = this._anchorEl?.contains(e.target);
+			/* v8 ignore else -- @preserve */
+			if (clickedOutside || clickedOnAnchor) this.open = false;
+		};
+		this._closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.open = false;
+		};
+	}
+	/**
+	* @internal
+	*/
+	openChanged(_oldValue, newValue) {
+		this._updateListeners();
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
+		if (newValue && this.isConnected) requestAnimationFrame(() => {
+			this._refreshCanvasColor();
+			if (this.#openedByKeyboard) {
+				const selectedIndex = this.swatches.findIndex((swatch) => swatch.value === this.value);
+				const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
+				this._focusSwatchByIndex(targetIndex);
+			}
+			this.#openedByKeyboard = false;
+		});
+	}
+	/**
+	* @internal
+	*/
+	_getRowLength() {
+		return this.swatchesPerRow;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._updateListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._updateListeners();
+	}
+	/**
+	* @internal
+	*/
+	_updateListeners() {
+		document.removeEventListener("click", this._closeOnClickOutside);
+		document.removeEventListener("keydown", this._closeOnEscape);
+		if (this.open && this.isConnected) {
+			document.addEventListener("click", this._closeOnClickOutside);
+			document.addEventListener("keydown", this._closeOnEscape);
+		}
+	}
+	/**
+	* @internal
+	*/
+	_getFocusReturnEl() {
+		return this._anchorEl ?? null;
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	/**
+	* @internal
+	*/
+	#updateAnchor(a) {
+		a.setAttribute("aria-expanded", this.open.toString());
+		a.setAttribute("data-expanded", this.open.toString());
+	}
+	/**
+	* @internal
+	*/
+	#setupAnchor(a) {
+		this.#updateAnchor(a);
+		a.addEventListener("click", this.#openPopup, true);
+		a.addEventListener("keydown", this.#handleAnchorKeydown);
+		a.setAttribute("aria-haspopup", "true");
+	}
+	/**
+	* @internal
+	*/
+	#cleanupAnchor(a) {
+		a.removeEventListener("click", this.#openPopup, true);
+		a.removeEventListener("keydown", this.#handleAnchorKeydown);
+		a.removeAttribute("aria-expanded");
+		a.removeAttribute("data-expanded");
+		a.removeAttribute("aria-haspopup");
+	}
+	/**
+	* @internal
+	*/
+	#openedByKeyboard = false;
+	/**
+	* @internal
+	*/
+	#openPopup = () => {
+		if (!this.open) {
+			this.#openedByKeyboard = false;
+			_microsoft_fast_element.Updates.enqueue(() => this.open = true);
+		}
+	};
+	/**
+	* @internal
+	*/
+	#handleAnchorKeydown = (event) => {
+		/* v8 ignore next -- @preserve */
+		if (event.key === "Enter" || event.key === " ") {
+			if (!this.open) {
+				this.#openedByKeyboard = true;
+				_microsoft_fast_element.Updates.enqueue(() => this.open = true);
+			}
+			event.preventDefault();
+		}
+	};
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], SimpleColorPicker.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "swatches-per-row",
+	mode: "fromView",
+	converter: _microsoft_fast_element.nullableNumberConverter
+})], SimpleColorPicker.prototype, "swatchesPerRow", void 0);
+//#endregion
+//#region src/lib/simple-color-picker/simple-color-picker.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+var SimpleColorPickerTemplate = (context) => {
+	const popupTag = context.tagFor(require_definition$1.Popup);
+	const iconTag = context.tagFor(require_definition.Icon);
+	const tooltipTag = context.tagFor(require_definition$2.Tooltip);
+	return _microsoft_fast_element.html`
+		${require_anchored.anchorSlotTemplateFactory()}
+		<${popupTag}
+			class="${getClasses}"
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			placement="${(x) => x.placement}"
+			offset="4"
+			@keydown="${(x, { event }) => {
+		if (x.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) return false;
+		return true;
+	}}"
+		>
+			<div class="palette" role="grid" 
+				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x._getRowLength())}"
+				aria-colcount="${(x) => x._getRowLength()}"
+				style="--swatches-per-row: ${(x) => x._getRowLength()};"
+				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
+				${(0, _microsoft_fast_element.repeat)((x) => x.swatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
+			</div>
+		</${popupTag}>
+	`;
+};
+//#endregion
+//#region src/lib/simple-color-picker/definition.ts
+var simpleColorPickerDefinition = require_vivid_element.defineVividComponent("simple-color-picker", SimpleColorPicker, SimpleColorPickerTemplate, [
+	require_definition$1.popupDefinition,
+	require_definition.iconDefinition,
+	require_definition$2.tooltipDefinition
+], { styles: simple_color_picker_default });
+/**
+* Registers the simple-color-picker element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerSimpleColorPicker = require_vivid_element.createRegisterFunction(simpleColorPickerDefinition);
+//#endregion
+Object.defineProperty(exports, "SimpleColorPicker", {
+	enumerable: true,
+	get: function() {
+		return SimpleColorPicker;
+	}
+});
+Object.defineProperty(exports, "registerSimpleColorPicker", {
+	enumerable: true,
+	get: function() {
+		return registerSimpleColorPicker;
+	}
+});
+Object.defineProperty(exports, "simpleColorPickerDefinition", {
+	enumerable: true,
+	get: function() {
+		return simpleColorPickerDefinition;
+	}
+});

package/unbundled/definition62.js

@@ -0,0 +1,195 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
+import { t as BaseColorPicker } from "./base-color-picker.js";
+import { n as tooltipDefinition, r as Tooltip } from "./definition26.js";
+import { Updates, attr, html, nullableNumberConverter, repeat } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/simple-color-picker/simple-color-picker.scss?inline
+var simple_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 :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}";
+//#endregion
+//#region src/lib/simple-color-picker/simple-color-picker.ts
+/**
+* @public
+* @component simple-color-picker
+* @slot anchor - Slot for attaching the toggle button
+* @event {CustomEvent<undefined>} change - Fires when the value changes
+* @vueModel modelValue value input `event.currentTarget.value`
+*/
+var SimpleColorPicker = class extends Anchored(BaseColorPicker(VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "top-start";
+		this.swatchesPerRow = 7;
+		this._closeOnClickOutside = (e) => {
+			const clickedOutside = !this.contains(e.target);
+			const clickedOnAnchor = this._anchorEl?.contains(e.target);
+			/* v8 ignore else -- @preserve */
+			if (clickedOutside || clickedOnAnchor) this.open = false;
+		};
+		this._closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.open = false;
+		};
+	}
+	/**
+	* @internal
+	*/
+	openChanged(_oldValue, newValue) {
+		this._updateListeners();
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
+		if (newValue && this.isConnected) requestAnimationFrame(() => {
+			this._refreshCanvasColor();
+			if (this.#openedByKeyboard) {
+				const selectedIndex = this.swatches.findIndex((swatch) => swatch.value === this.value);
+				const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
+				this._focusSwatchByIndex(targetIndex);
+			}
+			this.#openedByKeyboard = false;
+		});
+	}
+	/**
+	* @internal
+	*/
+	_getRowLength() {
+		return this.swatchesPerRow;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._updateListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._updateListeners();
+	}
+	/**
+	* @internal
+	*/
+	_updateListeners() {
+		document.removeEventListener("click", this._closeOnClickOutside);
+		document.removeEventListener("keydown", this._closeOnEscape);
+		if (this.open && this.isConnected) {
+			document.addEventListener("click", this._closeOnClickOutside);
+			document.addEventListener("keydown", this._closeOnEscape);
+		}
+	}
+	/**
+	* @internal
+	*/
+	_getFocusReturnEl() {
+		return this._anchorEl ?? null;
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	/**
+	* @internal
+	*/
+	#updateAnchor(a) {
+		a.setAttribute("aria-expanded", this.open.toString());
+		a.setAttribute("data-expanded", this.open.toString());
+	}
+	/**
+	* @internal
+	*/
+	#setupAnchor(a) {
+		this.#updateAnchor(a);
+		a.addEventListener("click", this.#openPopup, true);
+		a.addEventListener("keydown", this.#handleAnchorKeydown);
+		a.setAttribute("aria-haspopup", "true");
+	}
+	/**
+	* @internal
+	*/
+	#cleanupAnchor(a) {
+		a.removeEventListener("click", this.#openPopup, true);
+		a.removeEventListener("keydown", this.#handleAnchorKeydown);
+		a.removeAttribute("aria-expanded");
+		a.removeAttribute("data-expanded");
+		a.removeAttribute("aria-haspopup");
+	}
+	/**
+	* @internal
+	*/
+	#openedByKeyboard = false;
+	/**
+	* @internal
+	*/
+	#openPopup = () => {
+		if (!this.open) {
+			this.#openedByKeyboard = false;
+			Updates.enqueue(() => this.open = true);
+		}
+	};
+	/**
+	* @internal
+	*/
+	#handleAnchorKeydown = (event) => {
+		/* v8 ignore next -- @preserve */
+		if (event.key === "Enter" || event.key === " ") {
+			if (!this.open) {
+				this.#openedByKeyboard = true;
+				Updates.enqueue(() => this.open = true);
+			}
+			event.preventDefault();
+		}
+	};
+};
+__decorate([attr({ mode: "fromView" })], SimpleColorPicker.prototype, "placement", void 0);
+__decorate([attr({
+	attribute: "swatches-per-row",
+	mode: "fromView",
+	converter: nullableNumberConverter
+})], SimpleColorPicker.prototype, "swatchesPerRow", void 0);
+//#endregion
+//#region src/lib/simple-color-picker/simple-color-picker.template.ts
+var getClasses = (_) => classNames("control");
+var SimpleColorPickerTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	const iconTag = context.tagFor(Icon);
+	const tooltipTag = context.tagFor(Tooltip);
+	return html`
+		${anchorSlotTemplateFactory()}
+		<${popupTag}
+			class="${getClasses}"
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			placement="${(x) => x.placement}"
+			offset="4"
+			@keydown="${(x, { event }) => {
+		if (x.open && handleEscapeKeyAndStopPropogation(event)) return false;
+		return true;
+	}}"
+		>
+			<div class="palette" role="grid" 
+				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x._getRowLength())}"
+				aria-colcount="${(x) => x._getRowLength()}"
+				style="--swatches-per-row: ${(x) => x._getRowLength()};"
+				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
+				${repeat((x) => x.swatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
+			</div>
+		</${popupTag}>
+	`;
+};
+//#endregion
+//#region src/lib/simple-color-picker/definition.ts
+var simpleColorPickerDefinition = defineVividComponent("simple-color-picker", SimpleColorPicker, SimpleColorPickerTemplate, [
+	popupDefinition,
+	iconDefinition,
+	tooltipDefinition
+], { styles: simple_color_picker_default });
+/**
+* Registers the simple-color-picker element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerSimpleColorPicker = createRegisterFunction(simpleColorPickerDefinition);
+//#endregion
+export { simpleColorPickerDefinition as n, SimpleColorPicker as r, registerSimpleColorPicker as t };