@vonage/vivid 4.13.0 → 4.14.0

package/shared/definition45.cjs

@@ -1,14 +1,10 @@
 'use strict';
 
+const defineVividComponent = require('./defineVividComponent.cjs');
 const index = require('./index.cjs');
-const definition = require('./definition15.cjs');
-const definition$1 = require('./definition41.cjs');
-const enums = require('./enums.cjs');
-const radio$1 = require('./radio.cjs');
-const classNames = require('./class-names.cjs');
+const vividElement = require('./vivid-element.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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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)}";
+const classNames = require('./class-names.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,133 +15,114 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class SelectableBox extends index.FoundationElement {
+class SideDrawer extends vividElement.VividElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.checked = false;
-    this.clickable = false;
-    this.clickableBox = false;
-    this.tight = false;
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+    this.trailing = false;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case "open": {
+        this.open ? this.#open() : this.#close();
+      }
+    }
+  }
+  #close() {
+    this.$emit("close", void 0, { bubbles: false });
+  }
+  #open() {
+    this.$emit("open", void 0, { bubbles: false });
   }
   /**
    * @internal
    */
-  _handleCheckedChange() {
-    if (this.controlType === "radio" && this.checked) return;
-    this.checked = !this.checked;
-    if (this.clickableBox || this.clickable) this.$emit("change");
+  _onKeydown(event) {
+    if (index.handleEscapeKeyAndStopPropogation(event)) {
+      this._handleCloseRequest();
+      return void 0;
+    } else {
+      return true;
+    }
   }
   /**
    * @internal
    */
-  _handleKeydown(event) {
-    if ((event.code === "Space" || event.code === "Enter") && (this.clickableBox || this.clickable))
-      return this._handleCheckedChange();
-    return true;
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
   }
 }
 __decorateClass([
-  index.attr({ attribute: "aria-label" })
-], SelectableBox.prototype, "ariaLabel");
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], SelectableBox.prototype, "checked");
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], SelectableBox.prototype, "clickable");
-__decorateClass([
-  index.attr({ attribute: "clickable-box", mode: "boolean" })
-], SelectableBox.prototype, "clickableBox");
+  defineVividComponent.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "alternate");
 __decorateClass([
-  index.attr
-], SelectableBox.prototype, "connotation");
+  defineVividComponent.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "modal");
 __decorateClass([
-  index.attr({ attribute: "control-type" })
-], SelectableBox.prototype, "controlType");
+  defineVividComponent.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "open");
 __decorateClass([
-  index.attr({ mode: "boolean" })
-], SelectableBox.prototype, "tight");
+  defineVividComponent.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "trailing");
 
-const getClasses = ({
-  connotation,
-  tight,
-  checked,
-  clickableBox,
-  clickable
-}) => classNames.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["tight", tight],
-  ["selected", checked],
-  ["clickable", clickableBox || clickable],
-  ["readonly", !clickableBox && !clickable]
+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-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}";
+
+const getClasses = ({ modal, open, trailing }) => classNames.classNames(
+  "control",
+  ["modal", modal],
+  ["open", open],
+  ["trailing", trailing]
 );
-function handleControlChange(x) {
-  if (!x.clickableBox) x._handleCheckedChange();
-}
-function checkbox(context) {
-  const checkboxTag = context.tagFor(definition.Checkbox);
-  return index.html`${when.when(
-    (x) => x.controlType !== "radio",
-    index.html`
-		<${checkboxTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
-			@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 || x.clickable ? true : null}"
-		></${checkboxTag}>`
-  )} `;
-}
-function radio(context) {
-  const radioTag = context.tagFor(radio$1.Radio);
-  return index.html`${when.when(
-    (x) => x.controlType === "radio",
-    index.html`
-		<${radioTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
-			@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 || x.clickable ? true : null}"
-		></${radioTag}>`
-  )} `;
-}
-const SelectableBoxTemplate = (context) => {
-  return index.html`<template role="presentation">
-		<div
-			class="${getClasses}"
-			tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
-			role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
-			aria-pressed="${(x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null}"
-			aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
-			@keydown="${(x, c) => x._handleKeydown(c.event)}"
-			@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
-		>
-			${checkbox(context)} ${radio(context)}
-			<slot></slot>
-		</div>
-	</template>`;
-};
+const getScrimClasses = ({ open }) => classNames.classNames("scrim", ["open", open]);
+const sideDrawerTemplate = defineVividComponent.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>
 
-const selectableBoxDefinition = SelectableBox.compose({
-  baseName: "selectable-box",
-  template: SelectableBoxTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+	${when.when(
+  (x) => x.modal,
+  defineVividComponent.html`<div
+			class="${getScrimClasses}"
+			@click="${(x) => x._handleCloseRequest()}"
+		></div>`
+)}
+`;
+
+const sideDrawerDefinition = defineVividComponent.defineVividComponent(
+  "side-drawer",
+  SideDrawer,
+  sideDrawerTemplate,
+  [],
+  {
+    styles
   }
-});
-const selectableBoxRegistries = [
-  selectableBoxDefinition(),
-  ...definition.checkboxRegistries,
-  ...definition$1.radioRegistries
-];
-const registerSelectableBox = index.registerFactory(selectableBoxRegistries);
+);
+const registerSideDrawer = defineVividComponent.createRegisterFunction(sideDrawerDefinition);
 
-exports.registerSelectableBox = registerSelectableBox;
-exports.selectableBoxDefinition = selectableBoxDefinition;
-exports.selectableBoxRegistries = selectableBoxRegistries;
+exports.registerSideDrawer = registerSideDrawer;
+exports.sideDrawerDefinition = sideDrawerDefinition;

package/shared/definition45.js

@@ -1,12 +1,8 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { C as Checkbox, a as checkboxRegistries } from './definition15.js';
-import { a as radioRegistries } from './definition41.js';
-import { C as Connotation } from './enums.js';
-import { R as Radio } from './radio.js';
-import { c as classNames } from './class-names.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
+import { V as VividElement } from './vivid-element.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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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)}";
+import { c as classNames } from './class-names.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,131 +13,113 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class SelectableBox extends FoundationElement {
+class SideDrawer extends VividElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.checked = false;
-    this.clickable = false;
-    this.clickableBox = false;
-    this.tight = false;
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+    this.trailing = false;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case "open": {
+        this.open ? this.#open() : this.#close();
+      }
+    }
+  }
+  #close() {
+    this.$emit("close", void 0, { bubbles: false });
+  }
+  #open() {
+    this.$emit("open", void 0, { bubbles: false });
   }
   /**
    * @internal
    */
-  _handleCheckedChange() {
-    if (this.controlType === "radio" && this.checked) return;
-    this.checked = !this.checked;
-    if (this.clickableBox || this.clickable) this.$emit("change");
+  _onKeydown(event) {
+    if (handleEscapeKeyAndStopPropogation(event)) {
+      this._handleCloseRequest();
+      return void 0;
+    } else {
+      return true;
+    }
   }
   /**
    * @internal
    */
-  _handleKeydown(event) {
-    if ((event.code === "Space" || event.code === "Enter") && (this.clickableBox || this.clickable))
-      return this._handleCheckedChange();
-    return true;
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
   }
 }
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], SelectableBox.prototype, "ariaLabel");
-__decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "checked");
-__decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "clickable");
-__decorateClass([
-  attr({ attribute: "clickable-box", mode: "boolean" })
-], SelectableBox.prototype, "clickableBox");
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "alternate");
 __decorateClass([
-  attr
-], SelectableBox.prototype, "connotation");
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "modal");
 __decorateClass([
-  attr({ attribute: "control-type" })
-], SelectableBox.prototype, "controlType");
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "open");
 __decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "tight");
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "trailing");
 
-const getClasses = ({
-  connotation,
-  tight,
-  checked,
-  clickableBox,
-  clickable
-}) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["tight", tight],
-  ["selected", checked],
-  ["clickable", clickableBox || clickable],
-  ["readonly", !clickableBox && !clickable]
+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-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}";
+
+const getClasses = ({ modal, open, trailing }) => classNames(
+  "control",
+  ["modal", modal],
+  ["open", open],
+  ["trailing", trailing]
 );
-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}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
-			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
-		></${checkboxTag}>`
-  )} `;
-}
-function radio(context) {
-  const radioTag = context.tagFor(Radio);
-  return html`${when(
-    (x) => x.controlType === "radio",
-    html`
-		<${radioTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
-			@change="${(x) => handleControlChange(x)}"
-			class="control radio"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
-		></${radioTag}>`
-  )} `;
-}
-const SelectableBoxTemplate = (context) => {
-  return html`<template role="presentation">
-		<div
-			class="${getClasses}"
-			tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
-			role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
-			aria-pressed="${(x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null}"
-			aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
-			@keydown="${(x, c) => x._handleKeydown(c.event)}"
-			@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
-		>
-			${checkbox(context)} ${radio(context)}
-			<slot></slot>
-		</div>
-	</template>`;
-};
+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>
 
-const selectableBoxDefinition = SelectableBox.compose({
-  baseName: "selectable-box",
-  template: SelectableBoxTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+	${when(
+  (x) => x.modal,
+  html`<div
+			class="${getScrimClasses}"
+			@click="${(x) => x._handleCloseRequest()}"
+		></div>`
+)}
+`;
+
+const sideDrawerDefinition = defineVividComponent(
+  "side-drawer",
+  SideDrawer,
+  sideDrawerTemplate,
+  [],
+  {
+    styles
   }
-});
-const selectableBoxRegistries = [
-  selectableBoxDefinition(),
-  ...checkboxRegistries,
-  ...radioRegistries
-];
-const registerSelectableBox = registerFactory(selectableBoxRegistries);
+);
+const registerSideDrawer = createRegisterFunction(sideDrawerDefinition);
 
-export { selectableBoxRegistries as a, registerSelectableBox as r, selectableBoxDefinition as s };
+export { registerSideDrawer as r, sideDrawerDefinition as s };