@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition67.cjs

@@ -1,195 +1,146 @@
-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("./definition9.cjs");
-const require_anchored = require("./anchored.cjs");
-const require_definition$2 = require("./definition27.cjs");
-const require_base_color_picker = require("./base-color-picker.cjs");
+const require_component_enum = require("./component-enum.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_enums = require("./enums.cjs");
+const require_definition = require("./definition23.cjs");
+const require_definition$1 = require("./definition60.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)}";
+//#region src/lib/selectable-box/selectable-box.scss?inline
+var selectable_box_default = ":host{display:flex}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base: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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
 //#endregion
-//#region src/lib/simple-color-picker/simple-color-picker.ts
+//#region src/lib/selectable-box/selectable-box.ts
+var selectableBoxConnotation = require_component_enum.componentEnum(["accent", "cta"], "accent");
 /**
 * @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 selectable-box
+* @slot default - Slot for box's content.
+* @event {CustomEvent<undefined>} change - Fired when the checked state changes
+* @testAction check check #control
+* @testAction uncheck uncheck #control
+* @testQuery checked checked true
+* @testQuery unchecked checked false
+* @testRef control nestedShadow [data-vvd-component].control div.control
 */
-var SimpleColorPicker = class extends require_anchored.Anchored(require_base_color_picker.BaseColorPicker(require_vivid_element.VividElement)) {
+var SelectableBox = class extends require_delegates_aria.DelegatesAria(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;
-		};
+		this.checked = false;
+		this.clickableBox = false;
+		this.controlPlacement = "end-stacked";
+		this.tight = false;
+		this.disabled = 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;
-		});
+	_handleCheckedChange() {
+		if (this.disabled) return;
+		if (this.controlType === "radio" && this.checked) return;
+		this.checked = !this.checked;
+		if (this.clickableBox) this.$emit("change");
 	}
 	/** @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);
+	_handleKeydown(event) {
+		if (this.disabled) return true;
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
+			this._handleCheckedChange();
+			return;
 		}
+		return true;
 	}
-	/** @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;
-	/** @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)({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "clickable-box",
+	mode: "boolean"
+})], SelectableBox.prototype, "clickableBox", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], SelectableBox.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "control-type" })], SelectableBox.prototype, "controlType", 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);
+	attribute: "control-placement",
+	mode: "fromView"
+})], SelectableBox.prototype, "controlPlacement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "disabled", 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;
-	}}"
+//#region src/lib/selectable-box/selectable-box.template.ts
+function handleControlChange(x) {
+	if (!x.clickableBox) x._handleCheckedChange();
+}
+function checkbox(context) {
+	const checkboxTag = context.tagFor(require_definition.Checkbox);
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.controlType !== "radio", _microsoft_fast_element.html`
+		<${checkboxTag}
+			${require_delegates_aria.delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control checkbox ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? require_enums.Connotation.CTA : require_enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${checkboxTag}>`)} `;
+}
+function radio(context) {
+	const radioTag = context.tagFor(require_definition$1.Radio);
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.controlType === "radio", _microsoft_fast_element.html`
+		<${radioTag}
+			${require_delegates_aria.delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control radio ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? require_enums.Connotation.CTA : require_enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${radioTag}>`)} `;
+}
+var SelectableBoxTemplate = (context) => {
+	return _microsoft_fast_element.html`<template>
+		<div
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${selectableBoxConnotation.parse(x.connotation)}`, "appearance-duotone", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", "with-disabled", ["tight", x.tight], ["selected", x.checked], ["clickable", x.clickableBox], ["readonly", !x.clickableBox], [`control-placement-${x.controlPlacement}`, Boolean(x.controlPlacement)], ["disabled", x.disabled])}"
+			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
+			${require_delegates_aria.delegateAria({
+		role: (x) => x.clickableBox ? "button" : null,
+		ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
+		ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
+		ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
+	})}
+			@keydown="${(x, c) => x._handleKeydown(c.event)}"
+			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
 		>
-			<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}>
-	`;
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
 };
 //#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/selectable-box/definition.ts
+/** @internal */
+var selectableBoxDefinition = require_vivid_element.defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [require_definition.checkboxDefinition, require_definition$1.radioDefinition], {
+	styles: selectable_box_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the simple-color-picker element with the design system.
+* Registers the selectable-box element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSimpleColorPicker = require_vivid_element.createRegisterFunction(simpleColorPickerDefinition);
+var registerSelectableBox = require_vivid_element.createRegisterFunction(selectableBoxDefinition);
 //#endregion
-Object.defineProperty(exports, "SimpleColorPicker", {
+Object.defineProperty(exports, "SelectableBox", {
 	enumerable: true,
 	get: function() {
-		return SimpleColorPicker;
+		return SelectableBox;
 	}
 });
-Object.defineProperty(exports, "registerSimpleColorPicker", {
+Object.defineProperty(exports, "registerSelectableBox", {
 	enumerable: true,
 	get: function() {
-		return registerSimpleColorPicker;
+		return registerSelectableBox;
 	}
 });
-Object.defineProperty(exports, "simpleColorPickerDefinition", {
+Object.defineProperty(exports, "selectableBoxDefinition", {
 	enumerable: true,
 	get: function() {
-		return simpleColorPickerDefinition;
+		return selectableBoxDefinition;
 	}
 });

package/unbundled/definition67.js

@@ -1,177 +1,129 @@
 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 "./definition9.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 { t as componentEnum } from "./component-enum.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { r as Connotation } from "./enums.js";
+import { r as Checkbox, t as checkboxDefinition } from "./definition23.js";
+import { r as Radio, t as radioDefinition } from "./definition60.js";
+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)}";
+//#region src/lib/selectable-box/selectable-box.scss?inline
+var selectable_box_default = ":host{display:flex}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base: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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
 //#endregion
-//#region src/lib/simple-color-picker/simple-color-picker.ts
+//#region src/lib/selectable-box/selectable-box.ts
+var selectableBoxConnotation = componentEnum(["accent", "cta"], "accent");
 /**
 * @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 selectable-box
+* @slot default - Slot for box's content.
+* @event {CustomEvent<undefined>} change - Fired when the checked state changes
+* @testAction check check #control
+* @testAction uncheck uncheck #control
+* @testQuery checked checked true
+* @testQuery unchecked checked false
+* @testRef control nestedShadow [data-vvd-component].control div.control
 */
-var SimpleColorPicker = class extends Anchored(BaseColorPicker(VividElement)) {
+var SelectableBox = class extends DelegatesAria(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;
-		};
+		this.checked = false;
+		this.clickableBox = false;
+		this.controlPlacement = "end-stacked";
+		this.tight = false;
+		this.disabled = 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;
-		});
+	_handleCheckedChange() {
+		if (this.disabled) return;
+		if (this.controlType === "radio" && this.checked) return;
+		this.checked = !this.checked;
+		if (this.clickableBox) this.$emit("change");
 	}
 	/** @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);
+	_handleKeydown(event) {
+		if (this.disabled) return true;
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
+			this._handleCheckedChange();
+			return;
 		}
+		return true;
 	}
-	/** @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;
-	/** @internal */
-	#openPopup;
-	/** @internal */
-	#handleAnchorKeydown;
 };
-__decorate([attr({ mode: "fromView" })], SimpleColorPicker.prototype, "placement", void 0);
+__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
 __decorate([attr({
-	attribute: "swatches-per-row",
-	mode: "fromView",
-	converter: nullableNumberConverter
-})], SimpleColorPicker.prototype, "swatchesPerRow", void 0);
+	attribute: "clickable-box",
+	mode: "boolean"
+})], SelectableBox.prototype, "clickableBox", void 0);
+__decorate([attr], SelectableBox.prototype, "connotation", void 0);
+__decorate([attr({ attribute: "control-type" })], SelectableBox.prototype, "controlType", void 0);
+__decorate([attr({
+	attribute: "control-placement",
+	mode: "fromView"
+})], SelectableBox.prototype, "controlPlacement", void 0);
+__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0);
+__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "disabled", 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;
-	}}"
+//#region src/lib/selectable-box/selectable-box.template.ts
+function handleControlChange(x) {
+	if (!x.clickableBox) x._handleCheckedChange();
+}
+function checkbox(context) {
+	const checkboxTag = context.tagFor(Checkbox);
+	return html`${when((x) => x.controlType !== "radio", html`
+		<${checkboxTag}
+			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control checkbox ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${checkboxTag}>`)} `;
+}
+function radio(context) {
+	const radioTag = context.tagFor(Radio);
+	return html`${when((x) => x.controlType === "radio", html`
+		<${radioTag}
+			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control radio ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${radioTag}>`)} `;
+}
+var SelectableBoxTemplate = (context) => {
+	return html`<template>
+		<div
+			class="${(x) => classNames("base", `connotation-${selectableBoxConnotation.parse(x.connotation)}`, "appearance-duotone", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", "with-disabled", ["tight", x.tight], ["selected", x.checked], ["clickable", x.clickableBox], ["readonly", !x.clickableBox], [`control-placement-${x.controlPlacement}`, Boolean(x.controlPlacement)], ["disabled", x.disabled])}"
+			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
+			${delegateAria({
+		role: (x) => x.clickableBox ? "button" : null,
+		ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
+		ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
+		ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
+	})}
+			@keydown="${(x, c) => x._handleKeydown(c.event)}"
+			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
 		>
-			<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}>
-	`;
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
 };
 //#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/selectable-box/definition.ts
+/** @internal */
+var selectableBoxDefinition = defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [checkboxDefinition, radioDefinition], {
+	styles: selectable_box_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the simple-color-picker element with the design system.
+* Registers the selectable-box element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSimpleColorPicker = createRegisterFunction(simpleColorPickerDefinition);
+var registerSelectableBox = createRegisterFunction(selectableBoxDefinition);
 //#endregion
-export { simpleColorPickerDefinition as n, SimpleColorPicker as r, registerSimpleColorPicker as t };
+export { selectableBoxDefinition as n, SelectableBox as r, registerSelectableBox as t };