@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition45.cjs

@@ -1,12 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition26.cjs');
-const affix = require('./affix.cjs');
-require('./index2.cjs');
-const localized = require('./localized.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const ref = require('./ref.cjs');
+const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
 var __defProp = Object.defineProperty;
@@ -20,132 +15,97 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class SplitButton extends index.FoundationElement {
+class SideDrawer extends index.FoundationElement {
   constructor() {
     super(...arguments);
-    this.splitIndicator = "chevron-down-line";
-    this.disabled = false;
-    this.ariaLabel = null;
-    this.ariaExpanded = null;
-    this.indicatorAriaLabel = null;
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+    this.trailing = false;
   }
-  get action() {
-    return this._action;
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case "open": {
+        this.open ? this.#open() : this.#close();
+      }
+    }
   }
-  get indicator() {
-    return this._indicator;
+  #close() {
+    this.$emit("close", void 0, { bubbles: false });
+  }
+  #open() {
+    this.$emit("open", void 0, { bubbles: false });
   }
 }
 __decorateClass([
-  index.attr
-], SplitButton.prototype, "connotation", 2);
-__decorateClass([
-  index.attr
-], SplitButton.prototype, "shape", 2);
-__decorateClass([
-  index.attr
-], SplitButton.prototype, "appearance", 2);
-__decorateClass([
-  index.attr
-], SplitButton.prototype, "size", 2);
-__decorateClass([
-  index.attr
-], SplitButton.prototype, "label", 2);
-__decorateClass([
-  index.attr
-], SplitButton.prototype, "icon", 2);
-__decorateClass([
-  index.attr({ attribute: "split-indicator", mode: "fromView" })
-], SplitButton.prototype, "splitIndicator", 2);
-__decorateClass([
-  index.attr({ attribute: "disabled", mode: "boolean" })
-], SplitButton.prototype, "disabled", 2);
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "alternate", 2);
 __decorateClass([
-  index.attr({ attribute: "aria-label" })
-], SplitButton.prototype, "ariaLabel", 2);
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "modal", 2);
 __decorateClass([
-  index.attr({ attribute: "aria-expanded" })
-], SplitButton.prototype, "ariaExpanded", 2);
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "open", 2);
 __decorateClass([
-  index.attr({ attribute: "indicator-aria-label" })
-], SplitButton.prototype, "indicatorAriaLabel", 2);
-applyMixins.applyMixins(SplitButton, affix.AffixIcon, localized.Localized);
+  index.attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "trailing", 2);
 
-const styles = ":host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_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-filled,.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined,.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)),.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-filled,.indicator:where(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-outlined,.indicator:where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled),.indicator:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled,.indicator:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined,.indicator:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,.active):where(:not(:disabled,.disabled)),.indicator:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{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))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{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))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}\n";
+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 = ({
-  connotation,
-  appearance,
-  shape,
-  disabled,
-  size,
-  label,
-  icon,
-  iconSlottedContent
-}) => classNames.classNames(
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["disabled", disabled],
-  [`shape-${shape}`, Boolean(shape)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)]
+const getClasses = ({ modal, open, trailing }) => classNames.classNames(
+  "control",
+  ["modal", modal],
+  ["open", open],
+  ["trailing", trailing]
 );
-function actionButton(context) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`
-	<button
-		${ref.ref("_action")}
-		class="control ${getClasses}"
-		aria-label="${(x) => x.ariaLabel}"
-		?disabled="${(x) => x.disabled}"
-		@click="${(x) => x.$emit("action-click", void 0, {
-    bubbles: false
-  })}"
+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)}"
 	>
-			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-		<span class="text">${(x) => x.label}</span>
-	</button>
-	`;
-}
-function indicatorButton(context) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`
-	<button
-		${ref.ref("_indicator")}
-		class="indicator ${getClasses}"
-		?disabled="${(x) => x.disabled}"
-		aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		@click="${(x) => x.$emit("indicator-click", void 0, {
-    bubbles: false
-  })}"
-	>
-			${(x) => affixIconTemplate(x.splitIndicator)}
-	</button>
-	`;
-}
-const SplitButtonTemplate = (context) => {
-  return index.html`
-		<template role="presentation">
-			<div class="base" role="group">
-				${actionButton(context)}
-				${indicatorButton(context)}
-				<slot></slot>
-			</div>
-		</template>`;
-};
+		<slot></slot>
+	</div>
 
-const splitButtonDefinition = SplitButton.compose({
-  baseName: "split-button",
-  template: SplitButtonTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+	<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 splitButtonRegistries = [splitButtonDefinition(), ...definition.iconRegistries];
-const registerSplitButton = index.registerFactory(splitButtonRegistries);
+const sideDrawerRegistries = [sideDrawerDefinition()];
+const registerSideDrawer = index.registerFactory(sideDrawerRegistries);
 
-exports.registerSplitButton = registerSplitButton;
-exports.splitButtonDefinition = splitButtonDefinition;
-exports.splitButtonRegistries = splitButtonRegistries;
+exports.registerSideDrawer = registerSideDrawer;
+exports.sideDrawerDefinition = sideDrawerDefinition;
+exports.sideDrawerRegistries = sideDrawerRegistries;

package/shared/definition45.js

@@ -1,10 +1,5 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition26.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import './index2.js';
-import { L as Localized } from './localized.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { r as ref } from './ref.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
 var __defProp = Object.defineProperty;
@@ -18,130 +13,95 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class SplitButton extends FoundationElement {
+class SideDrawer extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.splitIndicator = "chevron-down-line";
-    this.disabled = false;
-    this.ariaLabel = null;
-    this.ariaExpanded = null;
-    this.indicatorAriaLabel = null;
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+    this.trailing = false;
   }
-  get action() {
-    return this._action;
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case "open": {
+        this.open ? this.#open() : this.#close();
+      }
+    }
   }
-  get indicator() {
-    return this._indicator;
+  #close() {
+    this.$emit("close", void 0, { bubbles: false });
+  }
+  #open() {
+    this.$emit("open", void 0, { bubbles: false });
   }
 }
 __decorateClass([
-  attr
-], SplitButton.prototype, "connotation", 2);
-__decorateClass([
-  attr
-], SplitButton.prototype, "shape", 2);
-__decorateClass([
-  attr
-], SplitButton.prototype, "appearance", 2);
-__decorateClass([
-  attr
-], SplitButton.prototype, "size", 2);
-__decorateClass([
-  attr
-], SplitButton.prototype, "label", 2);
-__decorateClass([
-  attr
-], SplitButton.prototype, "icon", 2);
-__decorateClass([
-  attr({ attribute: "split-indicator", mode: "fromView" })
-], SplitButton.prototype, "splitIndicator", 2);
-__decorateClass([
-  attr({ attribute: "disabled", mode: "boolean" })
-], SplitButton.prototype, "disabled", 2);
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "alternate", 2);
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], SplitButton.prototype, "ariaLabel", 2);
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "modal", 2);
 __decorateClass([
-  attr({ attribute: "aria-expanded" })
-], SplitButton.prototype, "ariaExpanded", 2);
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "open", 2);
 __decorateClass([
-  attr({ attribute: "indicator-aria-label" })
-], SplitButton.prototype, "indicatorAriaLabel", 2);
-applyMixins(SplitButton, AffixIcon, Localized);
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "trailing", 2);
 
-const styles = ":host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_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-filled,.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined,.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)),.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-filled,.indicator:where(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-outlined,.indicator:where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled),.indicator:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled,.indicator:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined,.indicator:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,.active):where(:not(:disabled,.disabled)),.indicator:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{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))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{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))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}\n";
+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 = ({
-  connotation,
-  appearance,
-  shape,
-  disabled,
-  size,
-  label,
-  icon,
-  iconSlottedContent
-}) => classNames(
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["disabled", disabled],
-  [`shape-${shape}`, Boolean(shape)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)]
+const getClasses = ({ modal, open, trailing }) => classNames(
+  "control",
+  ["modal", modal],
+  ["open", open],
+  ["trailing", trailing]
 );
-function actionButton(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-	<button
-		${ref("_action")}
-		class="control ${getClasses}"
-		aria-label="${(x) => x.ariaLabel}"
-		?disabled="${(x) => x.disabled}"
-		@click="${(x) => x.$emit("action-click", void 0, {
-    bubbles: false
-  })}"
+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) => handleKeydown(x, c.event)}"
 	>
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-		<span class="text">${(x) => x.label}</span>
-	</button>
-	`;
-}
-function indicatorButton(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-	<button
-		${ref("_indicator")}
-		class="indicator ${getClasses}"
-		?disabled="${(x) => x.disabled}"
-		aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		@click="${(x) => x.$emit("indicator-click", void 0, {
-    bubbles: false
-  })}"
-	>
-			${(x) => affixIconTemplate(x.splitIndicator)}
-	</button>
-	`;
-}
-const SplitButtonTemplate = (context) => {
-  return html`
-		<template role="presentation">
-			<div class="base" role="group">
-				${actionButton(context)}
-				${indicatorButton(context)}
-				<slot></slot>
-			</div>
-		</template>`;
-};
+		<slot></slot>
+	</div>
 
-const splitButtonDefinition = SplitButton.compose({
-  baseName: "split-button",
-  template: SplitButtonTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+	<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.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 splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries];
-const registerSplitButton = registerFactory(splitButtonRegistries);
+const sideDrawerRegistries = [sideDrawerDefinition()];
+const registerSideDrawer = registerFactory(sideDrawerRegistries);
 
-export { splitButtonRegistries as a, registerSplitButton as r, splitButtonDefinition as s };
+export { sideDrawerRegistries as a, registerSideDrawer as r, sideDrawerDefinition as s };