@vonage/vivid 5.0.0 → 5.1.0

package/shared/picker-field/mixins/time-selection-picker.template.d.ts

@@ -12,12 +12,12 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#21@#clockChangeHandler": {
+    "__#22@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#21@#clockChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#21@#startObservingClockChanges"(): void;
-    "__#21@#stopObservingClockChanges"(): void;
+    "__#22@#clockChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
+    "__#22@#startObservingClockChanges"(): void;
+    "__#22@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -39,20 +39,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _textFieldEl: import("../../..").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../../..").VwcButtonElement;
-    "__#18@#onFocusIn": () => void;
-    "__#18@#onFocusOut": () => void;
+    "__#19@#onFocusIn": () => void;
+    "__#19@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#18@#localeChangeHandler": {
+    "__#19@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#18@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#18@#startObservingLocaleChanges"(): void;
-    "__#18@#stopObservingLocaleChanges"(): void;
+    "__#19@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
+    "__#19@#startObservingLocaleChanges"(): void;
+    "__#19@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#18@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#18@#openPopupIfPossible"(): void;
+    "__#19@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#19@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -112,7 +112,6 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -485,7 +484,6 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
     removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void;
     removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-    dropzone: import("dropzone");
     readonly attributes: NamedNodeMap;
     readonly classList: DOMTokenList;
     className: string;
@@ -891,20 +889,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#18@#onFocusIn": () => void;
-    "__#18@#onFocusOut": () => void;
+    "__#19@#onFocusIn": () => void;
+    "__#19@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#18@#localeChangeHandler": {
+    "__#19@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#18@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#18@#startObservingLocaleChanges"(): void;
-    "__#18@#stopObservingLocaleChanges"(): void;
+    "__#19@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
+    "__#19@#startObservingLocaleChanges"(): void;
+    "__#19@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#18@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#18@#openPopupIfPossible"(): void;
+    "__#19@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#19@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -965,7 +963,6 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -1338,7 +1335,6 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
     removeEventListener<K_27 extends keyof HTMLElementEventMap>(type: K_27, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_27]) => any, options?: boolean | EventListenerOptions | undefined): void;
     removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-    dropzone: import("dropzone");
     readonly attributes: NamedNodeMap;
     readonly classList: DOMTokenList;
     className: string;

package/shared/picker-field/picker-field.d.ts

@@ -40,7 +40,6 @@ declare const PickerField_base: {
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -461,7 +460,6 @@ declare const PickerField_base: {
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -876,7 +874,6 @@ declare const PickerField_base: {
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_27 extends keyof HTMLElementEventMap>(type: K_27, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_27]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -1254,7 +1251,6 @@ declare const PickerField_base: {
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_36 extends keyof HTMLElementEventMap>(type: K_36, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_36]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -1632,7 +1628,6 @@ declare const PickerField_base: {
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_45 extends keyof HTMLElementEventMap>(type: K_45, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_45]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -2042,7 +2037,6 @@ declare const PickerField_base: {
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_54 extends keyof HTMLElementEventMap>(type: K_54, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_54]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        dropzone: import("dropzone");
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;

package/{shared/definition48.cjs → side-drawer/definition.cjs}

@@ -1,9 +1,11 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const index = require('./index.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const index = require('../unbundled/index.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -60,36 +62,36 @@ class SideDrawer extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "alternate");
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "modal");
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "open");
 __decorateClass([
-  vividElement.attr({
+  fastElement.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}";
 
-const getClasses = ({ modal, open, trailing }) => classNames.classNames(
+const getClasses = ({ modal, open, trailing }) => fastWebUtilities.classNames(
   "control",
   ["modal", modal],
   ["open", open],
   ["trailing", trailing]
 );
-const getScrimClasses = ({ open }) => classNames.classNames("scrim", ["open", open]);
-const sideDrawerTemplate = vividElement.html`
+const getScrimClasses = ({ open }) => fastWebUtilities.classNames("scrim", ["open", open]);
+const sideDrawerTemplate = fastElement.html`
 	<div
 		class="${getClasses}"
 		?inert="${(x) => !x.open}"
@@ -103,9 +105,9 @@ const sideDrawerTemplate = vividElement.html`
 		<slot name="app-content"></slot>
 	</div>
 
-	${when.when(
+	${fastElement.when(
   (x) => x.modal,
-  vividElement.html`<div
+  fastElement.html`<div
 			class="${getScrimClasses}"
 			@click="${(x) => x._handleCloseRequest()}"
 		></div>`
@@ -123,6 +125,6 @@ const sideDrawerDefinition = vividElement.defineVividComponent(
 );
 const registerSideDrawer = vividElement.createRegisterFunction(sideDrawerDefinition);
 
-exports.SideDrawer = SideDrawer;
+exports.VwcSideDrawerElement = SideDrawer;
 exports.registerSideDrawer = registerSideDrawer;
 exports.sideDrawerDefinition = sideDrawerDefinition;

package/{shared/definition48.js → side-drawer/definition.js}

@@ -1,7 +1,7 @@
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, when, html } from '@microsoft/fast-element';
+import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
+import { classNames } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -121,4 +121,4 @@ const sideDrawerDefinition = defineVividComponent(
 );
 const registerSideDrawer = createRegisterFunction(sideDrawerDefinition);
 
-export { SideDrawer as S, registerSideDrawer as r, sideDrawerDefinition as s };
+export { SideDrawer as VwcSideDrawerElement, registerSideDrawer, sideDrawerDefinition };

package/side-drawer/index.cjs

@@ -1,5 +1,19 @@
-'use strict';
+"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/index.cjs"),d=require("../bundled/class-names.cjs"),v=require("../bundled/when.cjs");var b=Object.defineProperty,l=(e,o,t,i)=>{for(var a=void 0,s=e.length-1,c;s>=0;s--)(c=e[s])&&(a=c(o,t,a)||a);return a&&b(o,t,a),a};class n extends r.VividElement{constructor(){super(...arguments),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(o,t,i){switch(super.attributeChangedCallback(o,t,i),o){case"open":this.open?this.#o():this.#e()}}#e(){this.$emit("close",void 0,{bubbles:!1})}#o(){this.$emit("open",void 0,{bubbles:!1})}_onKeydown(o){if(p.handleEscapeKeyAndStopPropogation(o)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}}l([r.attr({mode:"boolean"})],n.prototype,"alternate");l([r.attr({mode:"boolean"})],n.prototype,"modal");l([r.attr({mode:"boolean"})],n.prototype,"open");l([r.attr({mode:"boolean"})],n.prototype,"trailing");const m=":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}",u=({modal:e,open:o,trailing:t})=>d.classNames("control",["modal",e],["open",o],["trailing",t]),h=({open:e})=>d.classNames("scrim",["open",e]),f=r.html`
+	<div
+		class="${u}"
+		?inert="${e=>!e.open}"
+		part="base ${e=>e.alternate?"vvd-theme-alternate":""}"
+		@keydown="${(e,o)=>e._onKeydown(o.event)}"
+	>
+		<slot></slot>
+	</div>
 
-const definition = require('../shared/definition48.cjs');
+	<div class="side-drawer-app-content" ?inert="${e=>e.open&&e.modal}">
+		<slot name="app-content"></slot>
+	</div>
 
-definition.registerSideDrawer();
+	${v.when(e=>e.modal,r.html`<div
+			class="${h}"
+			@click="${e=>e._handleCloseRequest()}"
+		></div>`)}
+`,g=r.defineVividComponent("side-drawer",n,f,[],{styles:m}),w=r.createRegisterFunction(g);w();

package/side-drawer/index.js

@@ -1,3 +1,101 @@
-import { r as registerSideDrawer } from '../shared/definition48.js';
+import { V as v, a as n, h as d, c as b, d as m } from "../bundled/vivid-element.js";
+import { h } from "../bundled/index.js";
+import { c as p } from "../bundled/class-names.js";
+import { w as f } from "../bundled/when.js";
+var u = Object.defineProperty, l = (o, e, r, i) => {
+  for (var t = void 0, s = o.length - 1, c; s >= 0; s--)
+    (c = o[s]) && (t = c(e, r, t) || t);
+  return t && u(e, r, t), t;
+};
+class a extends v {
+  constructor() {
+    super(...arguments), this.alternate = !1, this.modal = !1, this.open = !1, this.trailing = !1;
+  }
+  attributeChangedCallback(e, r, i) {
+    switch (super.attributeChangedCallback(e, r, i), e) {
+      case "open":
+        this.open ? this.#e() : this.#o();
+    }
+  }
+  #o() {
+    this.$emit("close", void 0, { bubbles: !1 });
+  }
+  #e() {
+    this.$emit("open", void 0, { bubbles: !1 });
+  }
+  /**
+   * @internal
+   */
+  _onKeydown(e) {
+    if (h(e)) {
+      this._handleCloseRequest();
+      return;
+    } else
+      return !0;
+  }
+  /**
+   * @internal
+   */
+  _handleCloseRequest() {
+    this.$emit("cancel", void 0, {
+      bubbles: !1,
+      cancelable: !0
+    }) && (this.open = !1);
+  }
+}
+l([
+  n({
+    mode: "boolean"
+  })
+], a.prototype, "alternate");
+l([
+  n({
+    mode: "boolean"
+  })
+], a.prototype, "modal");
+l([
+  n({
+    mode: "boolean"
+  })
+], a.prototype, "open");
+l([
+  n({
+    mode: "boolean"
+  })
+], a.prototype, "trailing");
+const g = ":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}", w = ({ modal: o, open: e, trailing: r }) => p(
+  "control",
+  ["modal", o],
+  ["open", e],
+  ["trailing", r]
+), k = ({ open: o }) => p("scrim", ["open", o]), y = d`
+	<div
+		class="${w}"
+		?inert="${(o) => !o.open}"
+		part="base ${(o) => o.alternate ? "vvd-theme-alternate" : ""}"
+		@keydown="${(o, e) => o._onKeydown(e.event)}"
+	>
+		<slot></slot>
+	</div>
 
-registerSideDrawer();
+	<div class="side-drawer-app-content" ?inert="${(o) => o.open && o.modal}">
+		<slot name="app-content"></slot>
+	</div>
+
+	${f(
+  (o) => o.modal,
+  d`<div
+			class="${k}"
+			@click="${(o) => o._handleCloseRequest()}"
+		></div>`
+)}
+`, x = m(
+  "side-drawer",
+  a,
+  y,
+  [],
+  {
+    styles: g
+  }
+), C = b(x);
+C();