@vonage/vivid 3.47.0 → 3.49.0-preview.0

package/shared/definition41.js

@@ -12,7 +12,6 @@ import { F as FormAssociated } from './form-associated.js';
 import { S as SelectPosition } from './select.options.js';
 import { u as uniqueId } from './strings.js';
 import { c as keyTab, b as keyEscape, k as keyEnter, d as keyEnd, g as keyHome, a as keySpace, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
-import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
@@ -515,7 +514,7 @@ __decorate([
 applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
 applyMixins(Select$1, StartEnd, DelegatesARIASelect);
 
-const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.connotation-success{--_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));--_connotation-color-backdrop: var(--vvd-select-success-backdrop, var(--vvd-color-success-50));--_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));--_connotation-color-backdrop: var(--vvd-select-alert-backdrop, var(--vvd-color-alert-50));--_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600))}.control:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-backdrop: var(--vvd-select-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}.focus-indicator{--focus-stroke-gap-color: transparent;border-radius:var(--_select-control-border-radius);pointer-events:none}:host(:not(:focus-visible)) .focus-indicator{display:none}:host([multiple]) .focus-indicator{--_select-control-border-radius: 8px}\n";
+const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.connotation-success{--_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));--_connotation-color-backdrop: var(--vvd-select-success-backdrop, var(--vvd-color-success-50));--_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));--_connotation-color-backdrop: var(--vvd-select-alert-backdrop, var(--vvd-color-alert-50));--_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600))}.control:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-backdrop: var(--vvd-select-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -614,7 +613,6 @@ function renderPlaceholder(context) {
 }
 function selectValue(context) {
   const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
   return html`
 		<div class="control ${getStateClasses}" ${ref("_anchor")}
 			id="control" ?disabled="${(x) => x.disabled}">
@@ -624,14 +622,12 @@ function selectValue(context) {
 				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
 			</div>
 			${() => affixIconTemplate("chevron-down-line")}
-			${() => focusTemplate}
 		</div>`;
 }
 function setFixedDropdownVarWidth(x) {
   return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
 }
 function renderControl(context) {
-  const focusTemplate = focusTemplateFactory(context);
   const popupTag = context.tagFor(Popup);
   return html`
 			${when((x) => x.label, renderLabel())}
@@ -650,7 +646,6 @@ function renderControl(context) {
 						?hidden="${(x) => x.collapsible ? !x.open : false}"
 						${ref("listbox")}>
 						${when((x) => x.placeholder, renderPlaceholder(context))}
-						${when((x) => x.multiple, focusTemplate)}
 						<slot
 							${slotted({ filter: Listbox$1.slottedOptionFilter, flatten: true, property: "slottedOptions" })}>
 						</slot>

package/shared/definition42.cjs

@@ -0,0 +1,152 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition15.cjs');
+const definition$1 = require('./definition58.cjs');
+const definition$2 = require('./definition40.cjs');
+const focus = require('./focus2.cjs');
+const enums = require('./enums.cjs');
+const radio$1 = require('./radio.cjs');
+const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
+
+const styles = "@supports selector(:focus-visible){.base:focus-visible{outline:none}}:host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, 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: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_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);--_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);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent;--focus-inset: -1px;pointer-events:none}.base:not(:focus-visible)>.focus-indicator{display:none}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class SelectableBox extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+    this.checked = false;
+    this.clickable = false;
+    this.clickableBox = false;
+    this.tight = false;
+  }
+  /**
+   * @internal
+   */
+  _handleCheckedChange() {
+    if (this.controlType === "radio" && this.checked)
+      return;
+    this.checked = !this.checked;
+    if (this.clickableBox || this.clickable)
+      this.$emit("change");
+  }
+  /**
+   * @internal
+   */
+  _handleKeydown(event) {
+    if ((event.code === "Space" || event.code === "Enter") && (this.clickableBox || this.clickable))
+      return this._handleCheckedChange();
+    return true;
+  }
+}
+__decorateClass([
+  index.attr({ attribute: "aria-label" })
+], SelectableBox.prototype, "ariaLabel", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], SelectableBox.prototype, "checked", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], SelectableBox.prototype, "clickable", 2);
+__decorateClass([
+  index.attr({ attribute: "clickable-box", mode: "boolean" })
+], SelectableBox.prototype, "clickableBox", 2);
+__decorateClass([
+  index.attr
+], SelectableBox.prototype, "connotation", 2);
+__decorateClass([
+  index.attr({ attribute: "control-type" })
+], SelectableBox.prototype, "controlType", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], SelectableBox.prototype, "tight", 2);
+
+const getClasses = ({ connotation, tight, checked, clickableBox, clickable }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["tight", tight],
+  ["selected", checked],
+  ["clickable", clickableBox || clickable],
+  ["readonly", !clickableBox && !clickable]
+);
+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) => {
+  const focusTemplate = focus.focusTemplateFactory(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 ? x.checked : 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}"
+	>
+		${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
+		${checkbox(context)}
+		${radio(context)}
+		<slot></slot>
+	</div>
+</template>`;
+};
+
+const selectableBoxDefinition = SelectableBox.compose({
+  baseName: "selectable-box",
+  template: SelectableBoxTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const selectableBoxRegistries = [
+  selectableBoxDefinition(),
+  ...definition.checkboxRegistries,
+  ...definition$1.focusRegistries,
+  ...definition$2.radioRegistries
+];
+const registerSelectableBox = index.registerFactory(selectableBoxRegistries);
+
+exports.registerSelectableBox = registerSelectableBox;
+exports.selectableBoxDefinition = selectableBoxDefinition;
+exports.selectableBoxRegistries = selectableBoxRegistries;

package/shared/definition43.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+const index = require('./index.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class SideDrawer extends index.FoundationElement {
+  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 });
+  }
+}
+__decorateClass([
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "alternate", 2);
+__decorateClass([
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "modal", 2);
+__decorateClass([
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "open", 2);
+__decorateClass([
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "trailing", 2);
+
+const styles = ":host{display:block}.side-drawer-app-content{block-size:100%}.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}\n";
+
+const getClasses = ({
+  modal,
+  open,
+  trailing
+}) => classNames.classNames(
+  "control",
+  ["modal", modal],
+  ["open", open],
+  ["trailing", trailing]
+);
+const getScrimClasses = ({
+  open
+}) => classNames.classNames(
+  "scrim",
+  ["open", open]
+);
+const sideDrawerTemplate = () => index.html`
+	<div class="${getClasses}" ?inert="${(x) => !x.open}" part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
+	 @keydown="${(x, c) => handleKeydown(x, 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,
+  index.html`<div class="${getScrimClasses}" @click="${(x) => x.open = false}"></div>`
+)}
+`;
+const handleKeydown = (x, { key }) => {
+  if (key === "Escape") {
+    x.open = false;
+  } else {
+    return true;
+  }
+};
+
+const sideDrawerDefinition = SideDrawer.compose({
+  baseName: "side-drawer",
+  template: sideDrawerTemplate,
+  styles
+});
+const sideDrawerRegistries = [sideDrawerDefinition()];
+const registerSideDrawer = index.registerFactory(sideDrawerRegistries);
+
+exports.registerSideDrawer = registerSideDrawer;
+exports.sideDrawerDefinition = sideDrawerDefinition;
+exports.sideDrawerRegistries = sideDrawerRegistries;