@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition66.cjs

@@ -1,109 +1,145 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_dialog = require("./dialog.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("./definition59.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
+//#region src/lib/selectable-box/selectable-box.scss?inline
+var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.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/selectable-box/selectable-box.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.
+* @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 SideDrawer = class extends require_vivid_element.VividElement {
+var SelectableBox = class extends require_delegates_aria.DelegatesAria(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": if (this.open) this.#open();
-			else this.#close();
-		}
-	}
-	#close() {
-		this.$emit("close", void 0, { bubbles: false });
-	}
-	#open() {
-		this.$emit("open", void 0, { bubbles: false });
+		this.checked = false;
+		this.clickableBox = false;
+		this.controlPlacement = "end-stacked";
+		this.tight = false;
+		this.disabled = false;
 	}
 	/** @internal */
-	_onKeydown(event) {
-		if (require_dialog.handleEscapeKeyAndStopPropogation(event)) {
-			this._handleCloseRequest();
-			return;
-		} else return true;
+	_handleCheckedChange() {
+		if (this.disabled) return;
+		if (this.controlType === "radio" && this.checked) return;
+		this.checked = !this.checked;
+		if (this.clickableBox) this.$emit("change");
 	}
 	/** @internal */
-	_handleCloseRequest() {
-		if (this.$emit("cancel", void 0, {
-			bubbles: false,
-			cancelable: true
-		})) this.open = false;
+	_handleKeydown(event) {
+		if (this.disabled) return true;
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
+			this._handleCheckedChange();
+			return;
+		}
+		return true;
 	}
 };
-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}";
+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: "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/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>`)}
-`;
+//#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-${x.connotation}`, Boolean(x.connotation)], ["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}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
+};
 //#endregion
-//#region src/lib/side-drawer/definition.ts
+//#region src/lib/selectable-box/definition.ts
 /** @internal */
-var sideDrawerDefinition = require_vivid_element.defineVividComponent("side-drawer", SideDrawer, sideDrawerTemplate, [], { styles: side_drawer_default });
+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 side-drawer elements with the design system.
+* Registers the selectable-box element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSideDrawer = require_vivid_element.createRegisterFunction(sideDrawerDefinition);
+var registerSelectableBox = require_vivid_element.createRegisterFunction(selectableBoxDefinition);
 //#endregion
-Object.defineProperty(exports, "SideDrawer", {
+Object.defineProperty(exports, "SelectableBox", {
 	enumerable: true,
 	get: function() {
-		return SideDrawer;
+		return SelectableBox;
 	}
 });
-Object.defineProperty(exports, "registerSideDrawer", {
+Object.defineProperty(exports, "registerSelectableBox", {
 	enumerable: true,
 	get: function() {
-		return registerSideDrawer;
+		return registerSelectableBox;
 	}
 });
-Object.defineProperty(exports, "sideDrawerDefinition", {
+Object.defineProperty(exports, "selectableBoxDefinition", {
 	enumerable: true,
 	get: function() {
-		return sideDrawerDefinition;
+		return selectableBoxDefinition;
 	}
 });

package/unbundled/definition66.js

@@ -1,85 +1,127 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { t as handleEscapeKeyAndStopPropogation } from "./dialog.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 "./definition59.js";
 import { attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/side-drawer/side-drawer.ts
+//#region src/lib/selectable-box/selectable-box.scss?inline
+var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.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/selectable-box/selectable-box.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.
+* @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 SideDrawer = class extends VividElement {
+var SelectableBox = class extends DelegatesAria(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": if (this.open) this.#open();
-			else this.#close();
-		}
-	}
-	#close() {
-		this.$emit("close", void 0, { bubbles: false });
-	}
-	#open() {
-		this.$emit("open", void 0, { bubbles: false });
+		this.checked = false;
+		this.clickableBox = false;
+		this.controlPlacement = "end-stacked";
+		this.tight = false;
+		this.disabled = false;
 	}
 	/** @internal */
-	_onKeydown(event) {
-		if (handleEscapeKeyAndStopPropogation(event)) {
-			this._handleCloseRequest();
-			return;
-		} else return true;
+	_handleCheckedChange() {
+		if (this.disabled) return;
+		if (this.controlType === "radio" && this.checked) return;
+		this.checked = !this.checked;
+		if (this.clickableBox) this.$emit("change");
 	}
 	/** @internal */
-	_handleCloseRequest() {
-		if (this.$emit("cancel", void 0, {
-			bubbles: false,
-			cancelable: true
-		})) this.open = false;
+	_handleKeydown(event) {
+		if (this.disabled) return true;
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
+			this._handleCheckedChange();
+			return;
+		}
+		return true;
 	}
 };
-__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);
+__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
+__decorate([attr({
+	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/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-${x.connotation}`, Boolean(x.connotation)], ["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}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
+};
 //#endregion
-//#region src/lib/side-drawer/definition.ts
+//#region src/lib/selectable-box/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}" });
+var selectableBoxDefinition = defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [checkboxDefinition, radioDefinition], {
+	styles: selectable_box_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the side-drawer elements with the design system.
+* Registers the selectable-box element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSideDrawer = createRegisterFunction(sideDrawerDefinition);
+var registerSelectableBox = createRegisterFunction(selectableBoxDefinition);
 //#endregion
-export { sideDrawerDefinition as n, SideDrawer as r, registerSideDrawer as t };
+export { selectableBoxDefinition as n, SelectableBox as r, registerSelectableBox as t };