@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition66.cjs

@@ -1,217 +1,109 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.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_definition$2 = 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/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
+//#region src/lib/side-drawer/side-drawer.ts
 /**
 * @public
-* @component simple-color-picker
-* @slot anchor - Slot for attaching the toggle button
-* @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`
+* @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 SimpleColorPicker = class extends require_anchored.Anchored(require_base_color_picker.BaseColorPicker(require_vivid_element.VividElement)) {
+var SideDrawer = class extends require_vivid_element.VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.placement = "top-start";
-		this.swatchesPerRow = 7;
-		this.#openedByKeyboard = false;
-		this.#openPopup = () => {
-			if (!this.open) {
-				this.#openedByKeyboard = false;
-				_microsoft_fast_element.Updates.enqueue(() => this.open = true);
-			}
-		};
-		this.#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();
-			}
-		};
-		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();
+		this.alternate = false;
+		this.modal = false;
+		this.open = false;
+		this.trailing = false;
 	}
-	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);
+	attributeChangedCallback(name, oldValue, newValue) {
+		super.attributeChangedCallback(name, oldValue, newValue);
+		switch (name) {
+			case "open": if (this.open) this.#open();
+			else this.#close();
 		}
 	}
-	/**
-	* @internal
-	*/
-	_getFocusReturnEl() {
-		return this._anchorEl ?? null;
-	}
-	/**
-	* @internal
-	*/
-	_anchorElChanged(oldValue, newValue) {
-		if (oldValue) this.#cleanupAnchor(oldValue);
-		if (newValue) this.#setupAnchor(newValue);
+	#close() {
+		this.$emit("close", void 0, { bubbles: false });
 	}
-	/**
-	* @internal
-	*/
-	#updateAnchor(a) {
-		a.setAttribute("aria-expanded", this.open.toString());
-		a.setAttribute("data-expanded", this.open.toString());
+	#open() {
+		this.$emit("open", void 0, { bubbles: false });
 	}
-	/**
-	* @internal
-	*/
-	#setupAnchor(a) {
-		this.#updateAnchor(a);
-		a.addEventListener("click", this.#openPopup, true);
-		a.addEventListener("keydown", this.#handleAnchorKeydown);
-		a.setAttribute("aria-haspopup", "true");
+	/** @internal */
+	_onKeydown(event) {
+		if (require_dialog.handleEscapeKeyAndStopPropogation(event)) {
+			this._handleCloseRequest();
+			return;
+		} else return 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 */
+	_handleCloseRequest() {
+		if (this.$emit("cancel", void 0, {
+			bubbles: false,
+			cancelable: true
+		})) this.open = false;
 	}
-	/**
-	* @internal
-	*/
-	#openedByKeyboard;
-	/**
-	* @internal
-	*/
-	#openPopup;
-	/**
-	* @internal
-	*/
-	#handleAnchorKeydown;
 };
-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);
+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/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}>
-	`;
-};
+//#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 sideDrawerTemplate = _microsoft_fast_element.html`
+	<div
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["modal", x.modal], ["open", x.open], ["trailing", x.trailing])}"
+		?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="${(x) => (0, _microsoft_fast_web_utilities.classNames)("scrim", ["open", x.open])}"
+			@click="${(x) => x._handleCloseRequest()}"
+		></div>`)}
+`;
 //#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 });
+//#region src/lib/side-drawer/definition.ts
+/** @internal */
+var sideDrawerDefinition = require_vivid_element.defineVividComponent("side-drawer", SideDrawer, sideDrawerTemplate, [], { styles: side_drawer_default });
 /**
-* Registers the simple-color-picker element with the design system.
+* Registers the side-drawer elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSimpleColorPicker = require_vivid_element.createRegisterFunction(simpleColorPickerDefinition);
+var registerSideDrawer = require_vivid_element.createRegisterFunction(sideDrawerDefinition);
 //#endregion
-Object.defineProperty(exports, "SimpleColorPicker", {
+Object.defineProperty(exports, "SideDrawer", {
 	enumerable: true,
 	get: function() {
-		return SimpleColorPicker;
+		return SideDrawer;
 	}
 });
-Object.defineProperty(exports, "registerSimpleColorPicker", {
+Object.defineProperty(exports, "registerSideDrawer", {
 	enumerable: true,
 	get: function() {
-		return registerSimpleColorPicker;
+		return registerSideDrawer;
 	}
 });
-Object.defineProperty(exports, "simpleColorPickerDefinition", {
+Object.defineProperty(exports, "sideDrawerDefinition", {
 	enumerable: true,
 	get: function() {
-		return simpleColorPickerDefinition;
+		return sideDrawerDefinition;
 	}
 });

package/unbundled/definition66.js

@@ -1,199 +1,85 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.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 { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
-import { t as BaseColorPicker } from "./base-color-picker.js";
-import { Updates, attr, html, nullableNumberConverter, repeat } from "@microsoft/fast-element";
+import { attr, html, when } 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
+//#region src/lib/side-drawer/side-drawer.ts
 /**
 * @public
-* @component simple-color-picker
-* @slot anchor - Slot for attaching the toggle button
-* @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`
+* @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 SimpleColorPicker = class extends Anchored(BaseColorPicker(VividElement)) {
+var SideDrawer = class extends VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.placement = "top-start";
-		this.swatchesPerRow = 7;
-		this.#openedByKeyboard = false;
-		this.#openPopup = () => {
-			if (!this.open) {
-				this.#openedByKeyboard = false;
-				Updates.enqueue(() => this.open = true);
-			}
-		};
-		this.#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();
-			}
-		};
-		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();
+		this.alternate = false;
+		this.modal = false;
+		this.open = false;
+		this.trailing = false;
 	}
-	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);
+	attributeChangedCallback(name, oldValue, newValue) {
+		super.attributeChangedCallback(name, oldValue, newValue);
+		switch (name) {
+			case "open": if (this.open) this.#open();
+			else this.#close();
 		}
 	}
-	/**
-	* @internal
-	*/
-	_getFocusReturnEl() {
-		return this._anchorEl ?? null;
-	}
-	/**
-	* @internal
-	*/
-	_anchorElChanged(oldValue, newValue) {
-		if (oldValue) this.#cleanupAnchor(oldValue);
-		if (newValue) this.#setupAnchor(newValue);
+	#close() {
+		this.$emit("close", void 0, { bubbles: false });
 	}
-	/**
-	* @internal
-	*/
-	#updateAnchor(a) {
-		a.setAttribute("aria-expanded", this.open.toString());
-		a.setAttribute("data-expanded", this.open.toString());
+	#open() {
+		this.$emit("open", void 0, { bubbles: false });
 	}
-	/**
-	* @internal
-	*/
-	#setupAnchor(a) {
-		this.#updateAnchor(a);
-		a.addEventListener("click", this.#openPopup, true);
-		a.addEventListener("keydown", this.#handleAnchorKeydown);
-		a.setAttribute("aria-haspopup", "true");
+	/** @internal */
+	_onKeydown(event) {
+		if (handleEscapeKeyAndStopPropogation(event)) {
+			this._handleCloseRequest();
+			return;
+		} else return 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 */
+	_handleCloseRequest() {
+		if (this.$emit("cancel", void 0, {
+			bubbles: false,
+			cancelable: true
+		})) this.open = false;
 	}
-	/**
-	* @internal
-	*/
-	#openedByKeyboard;
-	/**
-	* @internal
-	*/
-	#openPopup;
-	/**
-	* @internal
-	*/
-	#handleAnchorKeydown;
-};
-__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}>
-	`;
 };
+__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/simple-color-picker/definition.ts
-var simpleColorPickerDefinition = defineVividComponent("simple-color-picker", SimpleColorPicker, SimpleColorPickerTemplate, [
-	popupDefinition,
-	iconDefinition,
-	tooltipDefinition
-], { styles: simple_color_picker_default });
+//#region src/lib/side-drawer/definition.ts
+/** @internal */
+var sideDrawerDefinition = defineVividComponent("side-drawer", SideDrawer, html`
+	<div
+		class="${(x) => classNames("control", ["modal", x.modal], ["open", x.open], ["trailing", x.trailing])}"
+		?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="${(x) => classNames("scrim", ["open", x.open])}"
+			@click="${(x) => x._handleCloseRequest()}"
+		></div>`)}
+`, [], { styles: ":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}" });
 /**
-* Registers the simple-color-picker element with the design system.
+* Registers the side-drawer elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSimpleColorPicker = createRegisterFunction(simpleColorPickerDefinition);
+var registerSideDrawer = createRegisterFunction(sideDrawerDefinition);
 //#endregion
-export { simpleColorPickerDefinition as n, SimpleColorPicker as r, registerSimpleColorPicker as t };
+export { sideDrawerDefinition as n, SideDrawer as r, registerSideDrawer as t };