@vonage/vivid 5.15.1 → 5.16.0

package/selectable-box/index.js

@@ -1,144 +1,83 @@
-import { C as h, c as u } from "../bundled/definition8.js";
-import { R as _, a as x } from "../bundled/definition18.js";
-import { V as m, a as r, h as i, c as k, d as g } from "../bundled/vivid-element.js";
-import { D as $, d as p } from "../bundled/delegates-aria.js";
-import { C as s } from "../bundled/enums.js";
-import { w as v } from "../bundled/when.js";
-import { c as y } from "../bundled/class-names.js";
-const B = ":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)}@media(hover:hover){.base: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.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.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)}@media(hover:hover){.base.selected: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.selected.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:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.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%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
-var C = Object.defineProperty, c = (a, o, e, d) => {
-  for (var l = void 0, n = a.length - 1, b; n >= 0; n--)
-    (b = a[n]) && (l = b(o, e, l) || l);
-  return l && C(o, e, l), l;
+import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { t as a } from "../bundled/when.js";
+import "../bundled/definition2.js";
+import { t as o } from "../bundled/decorate.js";
+import { t as s } from "../bundled/class-names.js";
+import { n as c, t as l } from "../bundled/delegates-aria.js";
+import { n as u } from "../bundled/enums.js";
+import { r as d, t as f } from "../bundled/definition11.js";
+import { r as p, t as m } from "../bundled/definition17.js";
+//#region src/lib/selectable-box/selectable-box.scss?inline
+var h = ":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)}@media (hover:hover){.base: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.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.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)}@media (hover:hover){.base.selected: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.selected.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:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}", g = class extends l(i) {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1, this.disabled = !1;
+	}
+	_handleCheckedChange() {
+		this.disabled || this.controlType === "radio" && this.checked || (this.checked = !this.checked, this.clickableBox && this.$emit("change"));
+	}
+	_handleKeydown(e) {
+		return this.disabled ? !0 : (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
+	}
 };
-class t extends $(m) {
-  constructor() {
-    super(...arguments), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1, this.disabled = !1;
-  }
-  /**
-   * @internal
-   */
-  _handleCheckedChange() {
-    this.disabled || this.controlType === "radio" && this.checked || (this.checked = !this.checked, this.clickableBox && this.$emit("change"));
-  }
-  /**
-   * @internal
-   */
-  _handleKeydown(o) {
-    return this.disabled ? !0 : (o.code === "Space" || o.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
-  }
+o([t({ mode: "boolean" })], g.prototype, "checked", void 0), o([t({
+	attribute: "clickable-box",
+	mode: "boolean"
+})], g.prototype, "clickableBox", void 0), o([t], g.prototype, "connotation", void 0), o([t({ attribute: "control-type" })], g.prototype, "controlType", void 0), o([t({
+	attribute: "control-placement",
+	mode: "fromView"
+})], g.prototype, "controlPlacement", void 0), o([t({ mode: "boolean" })], g.prototype, "tight", void 0), o([t({ mode: "boolean" })], g.prototype, "disabled", void 0);
+//#endregion
+//#region src/lib/selectable-box/selectable-box.template.ts
+var _ = ({ connotation: e, tight: t, checked: n, clickableBox: r, controlPlacement: i, disabled: a }) => s("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
+function v(e) {
+	e.clickableBox || e._handleCheckedChange();
 }
-c([
-  r({ mode: "boolean" })
-], t.prototype, "checked");
-c([
-  r({ attribute: "clickable-box", mode: "boolean" })
-], t.prototype, "clickableBox");
-c([
-  r
-], t.prototype, "connotation");
-c([
-  r({ attribute: "control-type" })
-], t.prototype, "controlType");
-c([
-  r({ attribute: "control-placement", mode: "fromView" })
-], t.prototype, "controlPlacement");
-c([
-  r({ mode: "boolean" })
-], t.prototype, "tight");
-c([
-  r({ mode: "boolean" })
-], t.prototype, "disabled");
-const w = ({
-  connotation: a,
-  tight: o,
-  checked: e,
-  clickableBox: d,
-  controlPlacement: l,
-  disabled: n
-}) => y(
-  "base",
-  [`connotation-${a}`, !!a],
-  ["tight", o],
-  ["selected", e],
-  ["clickable", d],
-  ["readonly", !d],
-  [`control-placement-${l}`, !!l],
-  ["disabled", n]
-);
-function f(a) {
-  a.clickableBox || a._handleCheckedChange();
-}
-function T(a) {
-  const o = a.tagFor(h);
-  return i`${v(
-    (e) => e.controlType !== "radio",
-    i`
-		<${o}
-			${p(
-      {
-        ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null
-      },
-      { onlySpecified: !0 }
-    )}
-			@change="${(e) => f(e)}"
+function y(t) {
+	let n = t.tagFor(d);
+	return e`${a((e) => e.controlType !== "radio", e`
+		<${n}
+			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
+			@change="${(e) => v(e)}"
 			class="control checkbox ${(e) => e.controlPlacement}"
-			connotation="${(e) => e.connotation === "cta" ? s.CTA : s.Accent}"
+			connotation="${(e) => e.connotation === "cta" ? u.CTA : u.Accent}"
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"
-		></${o}>`
-  )} `;
+		></${n}>`)} `;
 }
-function L(a) {
-  const o = a.tagFor(_);
-  return i`${v(
-    (e) => e.controlType === "radio",
-    i`
-		<${o}
-			${p(
-      {
-        ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null
-      },
-      { onlySpecified: !0 }
-    )}
-			@change="${(e) => f(e)}"
+function b(t) {
+	let n = t.tagFor(p);
+	return e`${a((e) => e.controlType === "radio", e`
+		<${n}
+			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
+			@change="${(e) => v(e)}"
 			class="control radio ${(e) => e.controlPlacement}"
-			connotation="${(e) => e.connotation === "cta" ? s.CTA : s.Accent}"
+			connotation="${(e) => e.connotation === "cta" ? u.CTA : u.Accent}"
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"
-		></${o}>`
-  )} `;
+		></${n}>`)} `;
 }
-const A = (a) => i`<template>
+//#endregion
+//#region src/lib/selectable-box/index.ts
+r(n("selectable-box", g, (t) => e`<template>
 		<div
-			class="${w}"
-			tabindex="${(o) => o.clickableBox && !o.disabled ? "0" : null}"
-			${p({
-  role: (o) => o.clickableBox ? "button" : null,
-  ariaPressed: (o) => o.clickableBox ? o.checked ? "true" : "false" : null,
-  ariaLabel: (o) => o.clickableBox ? o.ariaLabel : null,
-  ariaDisabled: (o) => o.clickableBox && o.disabled ? "true" : null
+			class="${_}"
+			tabindex="${(e) => e.clickableBox && !e.disabled ? "0" : null}"
+			${c({
+	role: (e) => e.clickableBox ? "button" : null,
+	ariaPressed: (e) => e.clickableBox ? e.checked ? "true" : "false" : null,
+	ariaLabel: (e) => e.clickableBox ? e.ariaLabel : null,
+	ariaDisabled: (e) => e.clickableBox && e.disabled ? "true" : null
 })}
-			@keydown="${(o, e) => o._handleKeydown(e.event)}"
-			@click="${(o) => o.clickableBox ? o._handleCheckedChange() : null}"
+			@keydown="${(e, t) => e._handleKeydown(t.event)}"
+			@click="${(e) => e.clickableBox ? e._handleCheckedChange() : null}"
 		>
-			${T(a)} ${L(a)}
+			${y(t)} ${b(t)}
 			<slot></slot>
 		</div>
-	</template>`, D = g(
-  "selectable-box",
-  t,
-  A,
-  [u, x],
-  {
-    styles: B,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), P = k(
-  D
-);
-P();
+	</template>`, [f, m], {
+	styles: h,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion

package/side-drawer/definition.cjs

@@ -1,130 +1,5 @@
-'use strict';
-
-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) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class SideDrawer extends vividElement.VividElement {
-  constructor() {
-    super(...arguments);
-    this.alternate = false;
-    this.modal = false;
-    this.open = false;
-    this.trailing = false;
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    switch (name) {
-      case "open": {
-        this.open ? this.#open() : this.#close();
-      }
-    }
-  }
-  #close() {
-    this.$emit("close", void 0, { bubbles: false });
-  }
-  #open() {
-    this.$emit("open", void 0, { bubbles: false });
-  }
-  /**
-   * @internal
-   */
-  _onKeydown(event) {
-    if (index.handleEscapeKeyAndStopPropogation(event)) {
-      this._handleCloseRequest();
-      return void 0;
-    } else {
-      return true;
-    }
-  }
-  /**
-   * @internal
-   */
-  _handleCloseRequest() {
-    if (this.$emit("cancel", void 0, {
-      bubbles: false,
-      cancelable: true
-    })) {
-      this.open = false;
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "alternate");
-__decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "modal");
-__decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "open");
-__decorateClass([
-  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 }) => fastWebUtilities.classNames(
-  "control",
-  ["modal", modal],
-  ["open", open],
-  ["trailing", trailing]
-);
-const getScrimClasses = ({ open }) => fastWebUtilities.classNames("scrim", ["open", open]);
-const sideDrawerTemplate = fastElement.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>
-
-	${fastElement.when(
-  (x) => x.modal,
-  fastElement.html`<div
-			class="${getScrimClasses}"
-			@click="${(x) => x._handleCloseRequest()}"
-		></div>`
-)}
-`;
-
-const sideDrawerDefinition = vividElement.defineVividComponent(
-  "side-drawer",
-  SideDrawer,
-  sideDrawerTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerSideDrawer = vividElement.createRegisterFunction(sideDrawerDefinition);
-
-exports.VwcSideDrawerElement = SideDrawer;
-exports.registerSideDrawer = registerSideDrawer;
-exports.sideDrawerDefinition = sideDrawerDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition61.cjs");
+exports.VwcSideDrawerElement = require_definition.SideDrawer;
+exports.registerSideDrawer = require_definition.registerSideDrawer;
+exports.sideDrawerDefinition = require_definition.sideDrawerDefinition;

package/side-drawer/definition.js

@@ -1,124 +1,2 @@
-import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } 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) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class SideDrawer extends VividElement {
-  constructor() {
-    super(...arguments);
-    this.alternate = false;
-    this.modal = false;
-    this.open = false;
-    this.trailing = false;
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    switch (name) {
-      case "open": {
-        this.open ? this.#open() : this.#close();
-      }
-    }
-  }
-  #close() {
-    this.$emit("close", void 0, { bubbles: false });
-  }
-  #open() {
-    this.$emit("open", void 0, { bubbles: false });
-  }
-  /**
-   * @internal
-   */
-  _onKeydown(event) {
-    if (handleEscapeKeyAndStopPropogation(event)) {
-      this._handleCloseRequest();
-      return void 0;
-    } else {
-      return true;
-    }
-  }
-  /**
-   * @internal
-   */
-  _handleCloseRequest() {
-    if (this.$emit("cancel", void 0, {
-      bubbles: false,
-      cancelable: true
-    })) {
-      this.open = false;
-    }
-  }
-}
-__decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "alternate");
-__decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "modal");
-__decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "open");
-__decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "trailing");
-
-const styles = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media(prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}";
-
-const getClasses = ({ modal, open, trailing }) => classNames(
-  "control",
-  ["modal", modal],
-  ["open", open],
-  ["trailing", trailing]
-);
-const getScrimClasses = ({ open }) => classNames("scrim", ["open", open]);
-const sideDrawerTemplate = html`
-	<div
-		class="${getClasses}"
-		?inert="${(x) => !x.open}"
-		part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
-		@keydown="${(x, c) => x._onKeydown(c.event)}"
-	>
-		<slot></slot>
-	</div>
-
-	<div class="side-drawer-app-content" ?inert="${(x) => x.open && x.modal}">
-		<slot name="app-content"></slot>
-	</div>
-
-	${when(
-  (x) => x.modal,
-  html`<div
-			class="${getScrimClasses}"
-			@click="${(x) => x._handleCloseRequest()}"
-		></div>`
-)}
-`;
-
-const sideDrawerDefinition = defineVividComponent(
-  "side-drawer",
-  SideDrawer,
-  sideDrawerTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerSideDrawer = createRegisterFunction(sideDrawerDefinition);
-
+import { n as sideDrawerDefinition, r as SideDrawer, t as registerSideDrawer } from "../unbundled/definition61.js";
 export { SideDrawer as VwcSideDrawerElement, registerSideDrawer, sideDrawerDefinition };

package/side-drawer/index.cjs

@@ -1,9 +1,9 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/index.cjs"),v=require("../bundled/when.cjs"),d=require("../bundled/class-names.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){super.attributeChangedCallback(o,t,i),o==="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`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/dialog.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(e,t,n){switch(super.attributeChangedCallback(e,t,n),e){case`open`:this.open?this.#t():this.#e()}}#e(){this.$emit(`close`,void 0,{bubbles:!1})}#t(){this.$emit(`open`,void 0,{bubbles:!1})}_onKeydown(e){if(i.t(e)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}};n.t([e.l({mode:`boolean`})],a.prototype,`alternate`,void 0),n.t([e.l({mode:`boolean`})],a.prototype,`modal`,void 0),n.t([e.l({mode:`boolean`})],a.prototype,`open`,void 0),n.t([e.l({mode:`boolean`})],a.prototype,`trailing`,void 0);var o=`: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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;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}`,s=e.d`
 	<div
-		class="${u}"
+		class="${({modal:e,open:t,trailing:n})=>r.t(`control`,[`modal`,e],[`open`,t],[`trailing`,n])}"
 		?inert="${e=>!e.open}"
-		part="base ${e=>e.alternate?"vvd-theme-alternate":""}"
-		@keydown="${(e,o)=>e._onKeydown(o.event)}"
+		part="base ${e=>e.alternate?`vvd-theme-alternate`:``}"
+		@keydown="${(e,t)=>e._onKeydown(t.event)}"
 	>
 		<slot></slot>
 	</div>
@@ -12,8 +12,8 @@
 		<slot name="app-content"></slot>
 	</div>
 
-	${v.when(e=>e.modal,r.html`<div
-			class="${h}"
+	${t.t(e=>e.modal,e.d`<div
+			class="${({open:e})=>r.t(`scrim`,[`open`,e])}"
 			@click="${e=>e._handleCloseRequest()}"
 		></div>`)}
-`,g=r.defineVividComponent("side-drawer",n,f,[],{styles:m}),w=r.createRegisterFunction(g);w();
+`,c=e.o(`side-drawer`,a,s,[],{styles:o});e.s(c)();