@vonage/vivid 4.23.0 → 4.25.0

package/shared/definition47.cjs

@@ -1,10 +1,15 @@
 'use strict';
 
+const definition = require('./definition15.cjs');
+const definition$1 = require('./definition42.cjs');
 const vividElement = require('./vivid-element.cjs');
-const index = require('./index.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
+const enums = require('./enums.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
+const styles = ":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)}.base:where(.hover,: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:where(.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)}.base:where(.selected):where(.hover,: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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}";
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -14,115 +19,145 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class SideDrawer extends vividElement.VividElement {
+class SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElement) {
   constructor() {
     super(...arguments);
-    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 });
+    this.checked = false;
+    this.clickable = false;
+    this.clickableBox = false;
+    this.tight = false;
   }
   /**
    * @internal
    */
-  _onKeydown(event) {
-    if (index.handleEscapeKeyAndStopPropogation(event)) {
-      this._handleCloseRequest();
-      return void 0;
-    } else {
-      return true;
-    }
+  _handleCheckedChange() {
+    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 ((event.code === "Space" || event.code === "Enter") && this.clickableBox)
+      return this._handleCheckedChange();
+    return true;
   }
 }
 __decorateClass([
-  vividElement.attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "alternate");
+  vividElement.attr({ mode: "boolean" })
+], SelectableBox.prototype, "checked");
 __decorateClass([
-  vividElement.attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "modal");
+  vividElement.attr({ mode: "boolean" })
+], SelectableBox.prototype, "clickable");
 __decorateClass([
-  vividElement.attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "open");
+  vividElement.replaces({
+    deprecatedPropertyName: "clickable",
+    fromDeprecated: (v) => v
+  }),
+  vividElement.attr({ attribute: "clickable-box", mode: "boolean" })
+], SelectableBox.prototype, "clickableBox");
 __decorateClass([
-  vividElement.attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "trailing");
-
-const 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%)}.control{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{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;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}";
+  vividElement.attr
+], SelectableBox.prototype, "connotation");
+__decorateClass([
+  vividElement.attr({ attribute: "control-type" })
+], SelectableBox.prototype, "controlType");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], SelectableBox.prototype, "tight");
 
-const getClasses = ({ modal, open, trailing }) => classNames.classNames(
-  "control",
-  ["modal", modal],
-  ["open", open],
-  ["trailing", trailing]
+const getClasses = ({
+  connotation,
+  tight,
+  checked,
+  clickableBox
+}) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["tight", tight],
+  ["selected", checked],
+  ["clickable", clickableBox],
+  ["readonly", !clickableBox]
 );
-const getScrimClasses = ({ open }) => classNames.classNames("scrim", ["open", open]);
-const sideDrawerTemplate = vividElement.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.when(
-  (x) => x.modal,
-  vividElement.html`<div
-			class="${getScrimClasses}"
-			@click="${(x) => x._handleCloseRequest()}"
-		></div>`
-)}
-`;
+function handleControlChange(x) {
+  if (!x.clickableBox) x._handleCheckedChange();
+}
+function checkbox(context) {
+  const checkboxTag = context.tagFor(definition.Checkbox);
+  return vividElement.html`${when.when(
+    (x) => x.controlType !== "radio",
+    vividElement.html`
+		<${checkboxTag}
+			${delegatesAria.delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
+			@change="${(x) => handleControlChange(x)}"
+			class="control checkbox"
+			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${checkboxTag}>`
+  )} `;
+}
+function radio(context) {
+  const radioTag = context.tagFor(definition$1.Radio);
+  return vividElement.html`${when.when(
+    (x) => x.controlType === "radio",
+    vividElement.html`
+		<${radioTag}
+			${delegatesAria.delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
+			@change="${(x) => handleControlChange(x)}"
+			class="control radio"
+			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${radioTag}>`
+  )} `;
+}
+const SelectableBoxTemplate = (context) => {
+  return vividElement.html`<template>
+		<div
+			class="${getClasses}"
+			tabindex="${(x) => x.clickableBox ? "0" : null}"
+			${delegatesAria.delegateAria({
+    role: (x) => x.clickableBox ? "button" : null,
+    ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
+    ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null
+  })}
+			@keydown="${(x, c) => x._handleKeydown(c.event)}"
+			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
+};
 
-const sideDrawerDefinition = vividElement.defineVividComponent(
-  "side-drawer",
-  SideDrawer,
-  sideDrawerTemplate,
-  [],
+const selectableBoxDefinition = vividElement.defineVividComponent(
+  "selectable-box",
+  SelectableBox,
+  SelectableBoxTemplate,
+  [definition.checkboxDefinition, definition$1.radioDefinition],
   {
-    styles
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
 );
-const registerSideDrawer = vividElement.createRegisterFunction(sideDrawerDefinition);
+const registerSelectableBox = vividElement.createRegisterFunction(
+  selectableBoxDefinition
+);
 
-exports.SideDrawer = SideDrawer;
-exports.registerSideDrawer = registerSideDrawer;
-exports.sideDrawerDefinition = sideDrawerDefinition;
+exports.SelectableBox = SelectableBox;
+exports.registerSelectableBox = registerSelectableBox;
+exports.selectableBoxDefinition = selectableBoxDefinition;

package/shared/definition47.js

@@ -1,8 +1,13 @@
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
+import { C as Checkbox, c as checkboxDefinition } from './definition15.js';
+import { R as Radio, r as radioDefinition } from './definition42.js';
+import { V as VividElement, a as attr, r as replaces, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
+import { C as Connotation } from './enums.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
+const styles = ":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)}.base:where(.hover,: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:where(.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)}.base:where(.selected):where(.hover,: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{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}";
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -12,113 +17,143 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class SideDrawer extends VividElement {
+class SelectableBox extends DelegatesAria(VividElement) {
   constructor() {
     super(...arguments);
-    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 });
+    this.checked = false;
+    this.clickable = false;
+    this.clickableBox = false;
+    this.tight = false;
   }
   /**
    * @internal
    */
-  _onKeydown(event) {
-    if (handleEscapeKeyAndStopPropogation(event)) {
-      this._handleCloseRequest();
-      return void 0;
-    } else {
-      return true;
-    }
+  _handleCheckedChange() {
+    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 ((event.code === "Space" || event.code === "Enter") && this.clickableBox)
+      return this._handleCheckedChange();
+    return true;
   }
 }
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "alternate");
+  attr({ mode: "boolean" })
+], SelectableBox.prototype, "checked");
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "modal");
+  attr({ mode: "boolean" })
+], SelectableBox.prototype, "clickable");
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "open");
+  replaces({
+    deprecatedPropertyName: "clickable",
+    fromDeprecated: (v) => v
+  }),
+  attr({ attribute: "clickable-box", mode: "boolean" })
+], SelectableBox.prototype, "clickableBox");
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "trailing");
-
-const 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%)}.control{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{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;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}";
+  attr
+], SelectableBox.prototype, "connotation");
+__decorateClass([
+  attr({ attribute: "control-type" })
+], SelectableBox.prototype, "controlType");
+__decorateClass([
+  attr({ mode: "boolean" })
+], SelectableBox.prototype, "tight");
 
-const getClasses = ({ modal, open, trailing }) => classNames(
-  "control",
-  ["modal", modal],
-  ["open", open],
-  ["trailing", trailing]
+const getClasses = ({
+  connotation,
+  tight,
+  checked,
+  clickableBox
+}) => classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["tight", tight],
+  ["selected", checked],
+  ["clickable", clickableBox],
+  ["readonly", !clickableBox]
 );
-const getScrimClasses = ({ open }) => classNames("scrim", ["open", open]);
-const sideDrawerTemplate = 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>`
-)}
-`;
+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"
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			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"
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${radioTag}>`
+  )} `;
+}
+const SelectableBoxTemplate = (context) => {
+  return html`<template>
+		<div
+			class="${getClasses}"
+			tabindex="${(x) => x.clickableBox ? "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
+  })}
+			@keydown="${(x, c) => x._handleKeydown(c.event)}"
+			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
+};
 
-const sideDrawerDefinition = defineVividComponent(
-  "side-drawer",
-  SideDrawer,
-  sideDrawerTemplate,
-  [],
+const selectableBoxDefinition = defineVividComponent(
+  "selectable-box",
+  SelectableBox,
+  SelectableBoxTemplate,
+  [checkboxDefinition, radioDefinition],
   {
-    styles
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
 );
-const registerSideDrawer = createRegisterFunction(sideDrawerDefinition);
+const registerSelectableBox = createRegisterFunction(
+  selectableBoxDefinition
+);
 
-export { SideDrawer as S, registerSideDrawer as r, sideDrawerDefinition as s };
+export { SelectableBox as S, registerSelectableBox as r, selectableBoxDefinition as s };