@vonage/vivid 5.15.1 → 5.16.0

package/dialog/definition.js

@@ -1,343 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, observable, when, slotted, html } from '@microsoft/fast-element';
-import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width>=600px){.base{--_dialog-default-max-inline-size: 90vw}}@media(width>=600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{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))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
-
-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 Dialog extends Localized(DelegatesAria(VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.fullWidthBody = false;
-    this.dismissButtonAriaLabel = null;
-    this.noLightDismiss = false;
-    this.noDismissOnEsc = false;
-    this.noDismissButton = false;
-    this.nonDismissible = false;
-    this.modal = false;
-    this.scrollableBody = false;
-    this._openedAsModal = false;
-    this.#handleScrimClick = (event) => {
-      if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
-        return;
-      }
-      const rect = this.#dialog.getBoundingClientRect();
-      const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
-      if (!clickedInDialog) {
-        this._handleCloseRequest();
-      }
-    };
-    this.#handleInternalFormSubmit = (event) => {
-      if (event.target.method !== "dialog") {
-        return;
-      }
-      this.open = false;
-    };
-  }
-  /**
-   * @internal
-   */
-  modalChanged(_, newValue) {
-    if (this.open) {
-      this._openedAsModal = newValue;
-      if (this.$fastController.isConnected) {
-        this.#closeDialog();
-        this.#showDialog();
-      }
-    }
-  }
-  set returnValue(value) {
-    if (this.#dialog) {
-      this.#dialog.returnValue = value;
-    }
-  }
-  get returnValue() {
-    return this.#dialog?.returnValue;
-  }
-  #dialogElement;
-  get #dialog() {
-    if (!this.#dialogElement) {
-      this.#dialogElement = this.shadowRoot.querySelector(
-        "dialog"
-      );
-    }
-    return this.#dialogElement;
-  }
-  /**
-   * @internal
-   */
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) {
-      return;
-    }
-    if (!newValue) {
-      this._openedAsModal = false;
-      if (this.$fastController.isConnected) {
-        this.#closeDialog();
-      }
-      this.$emit("close", this.returnValue, { bubbles: false });
-    } else {
-      this._openedAsModal = this._openedAsModal || this.modal;
-      if (this.$fastController.isConnected) {
-        this.#showDialog();
-      }
-      this.$emit("open", void 0, { bubbles: false });
-    }
-  }
-  get _showDismissButton() {
-    return this.#isDismissibleVia("dismiss-button");
-  }
-  #isDismissibleVia(method) {
-    if (this.nonDismissible) {
-      return false;
-    }
-    switch (method) {
-      case "escape":
-        return !this.noDismissOnEsc;
-      case "dismiss-button":
-        return !this.noDismissButton;
-      case "light-dismiss":
-        return !this.noLightDismiss;
-    }
-  }
-  #handleScrimClick;
-  #handleInternalFormSubmit;
-  /**
-   * @internal
-   */
-  _onKeyDown(event) {
-    if (handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
-      if (this.#isDismissibleVia("escape")) {
-        this._handleCloseRequest();
-      }
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _handleCloseRequest() {
-    if (this.$emit("cancel", void 0, {
-      bubbles: false,
-      cancelable: true
-    })) {
-      this.open = false;
-    }
-  }
-  close() {
-    this.open = false;
-  }
-  show() {
-    if (this._openedAsModal && !this.modal) {
-      throw new DOMException(
-        "Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.",
-        "InvalidStateError"
-      );
-    }
-    this.open = true;
-  }
-  showModal() {
-    if (this.open && !this._openedAsModal) {
-      throw new DOMException(
-        "Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.",
-        "InvalidStateError"
-      );
-    }
-    this._openedAsModal = true;
-    this.open = true;
-  }
-  #closeDialog() {
-    this.#dialog.close();
-  }
-  #showDialog() {
-    if (this._openedAsModal) {
-      this.#dialog.showModal();
-    } else {
-      this.#dialog.show();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.open) {
-      this.#showDialog();
-    }
-    this.#dialog.addEventListener("mousedown", this.#handleScrimClick);
-    this.#dialog.addEventListener("submit", this.#handleInternalFormSubmit);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.open) {
-      this.#closeDialog();
-    }
-    this.#dialog.removeEventListener("mousedown", this.#handleScrimClick);
-    this.#dialog.removeEventListener("submit", this.#handleInternalFormSubmit);
-  }
-}
-__decorateClass([
-  attr({ mode: "boolean" })
-], Dialog.prototype, "open");
-__decorateClass([
-  attr
-], Dialog.prototype, "icon");
-__decorateClass([
-  attr({ attribute: "icon-placement" })
-], Dialog.prototype, "iconPlacement");
-__decorateClass([
-  attr
-], Dialog.prototype, "subtitle");
-__decorateClass([
-  attr
-], Dialog.prototype, "headline");
-__decorateClass([
-  attr({ attribute: "full-width-body", mode: "boolean" })
-], Dialog.prototype, "fullWidthBody");
-__decorateClass([
-  attr({ attribute: "dismiss-button-aria-label" })
-], Dialog.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  attr({ attribute: "no-light-dismiss", mode: "boolean" })
-], Dialog.prototype, "noLightDismiss");
-__decorateClass([
-  attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
-], Dialog.prototype, "noDismissOnEsc");
-__decorateClass([
-  attr({ attribute: "no-dismiss-button", mode: "boolean" })
-], Dialog.prototype, "noDismissButton");
-__decorateClass([
-  attr({ attribute: "non-dismissible", mode: "boolean" })
-], Dialog.prototype, "nonDismissible");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Dialog.prototype, "modal");
-__decorateClass([
-  attr({ mode: "boolean", attribute: "scrollable-body" })
-], Dialog.prototype, "scrollableBody");
-__decorateClass([
-  observable
-], Dialog.prototype, "_openedAsModal");
-__decorateClass([
-  observable
-], Dialog.prototype, "bodySlottedContent");
-__decorateClass([
-  observable
-], Dialog.prototype, "footerSlottedContent");
-__decorateClass([
-  observable
-], Dialog.prototype, "actionItemsSlottedContent");
-
-const getClasses = ({
-  iconPlacement,
-  bodySlottedContent,
-  footerSlottedContent,
-  actionItemsSlottedContent,
-  _openedAsModal,
-  scrollableBody
-}) => classNames(
-  "base",
-  [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
-  ["hide-body", !bodySlottedContent?.length],
-  [
-    "hide-footer",
-    !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
-  ],
-  ["modal", _openedAsModal],
-  ["scrollable-body", Boolean(scrollableBody)]
-);
-function icon(iconTag) {
-  return html`
-		<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
-	`;
-}
-function headline() {
-  return html`
-		<h2 class="headline" id="dialog-headline">${(x) => x.headline}</h2>
-	`;
-}
-function subtitle() {
-  return html` <h3 class="subtitle">${(x) => x.subtitle}</h3> `;
-}
-function renderHeaderText() {
-  return html`
-		<div class="header-text">${headline()} ${subtitle()}</div>
-	`;
-}
-function renderDismissButton(buttonTag) {
-  return html`
-	<${buttonTag}
-		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.dialog.dismissButtonLabel}"
-		size="condensed"
-		class="dismiss-button"
-		icon="close-line"
-		@click="${(x) => x._handleCloseRequest()}"
-	></${buttonTag}>`;
-}
-const DialogTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  const iconTag = context.tagFor(Icon);
-  const buttonTag = context.tagFor(Button);
-  return html`
-	<${elevationTag} dp="8" not-relative>
-		<dialog class="${getClasses}"
-				@keydown="${(x, c) => x._onKeyDown(c.event)}"
-				@cancel="${(_, c) => c.event.preventDefault()}"
-				${delegateAria({
-    ariaModal: (x) => String(x._openedAsModal)
-  })}
-				aria-labelledby="${(x) => x.headline ? "dialog-headline" : null}"
-		>
-			<slot name="main">
-				<div class="main-wrapper">
-					<div class="header ${(x) => x.subtitle ? "border" : ""}">
-							<slot name="graphic">
-								${when((x) => x.icon, icon(iconTag))}
-							</slot>
-							${when((x) => x.headline && x.subtitle, renderHeaderText())}
-							${when((x) => x.headline && !x.subtitle, headline())}
-							${when((x) => x.subtitle && !x.headline, subtitle())}
-							${when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
-					</div>
-					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
-						<slot name="body" ${slotted("bodySlottedContent")}></slot>
-					</div>
-					<div class="footer">
-						<div>
-							<slot name="footer" ${slotted("footerSlottedContent")}></slot>
-						</div>
-						<div class="actions">
-							<slot name="action-items" ${slotted("actionItemsSlottedContent")}></slot>
-						</div>
-					</div>
-				</div>
-			</slot>
-		</dialog>
-	</${elevationTag}>`;
-};
-
-const dialogDefinition = defineVividComponent(
-  "dialog",
-  Dialog,
-  DialogTemplate,
-  [iconDefinition, buttonDefinition, elevationDefinition],
-  {
-    styles
-  }
-);
-const registerDialog = createRegisterFunction(dialogDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerDialog, r as Dialog, t as dialogDefinition } from "../unbundled/definition39.js";
 export { Dialog as VwcDialogElement, dialogDefinition, registerDialog };

package/dialog/index.cjs

@@ -1,47 +1,47 @@
-"use strict";const h=require("../bundled/definition2.cjs"),p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/delegates-aria.cjs"),y=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),c=require("../bundled/slotted.cjs"),x=require("../bundled/class-names.cjs"),w='.base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width>=600px){.base{--_dialog-default-max-inline-size: 90vw}}@media(width>=600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{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))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:"";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}';var k=Object.defineProperty,l=(i,o,s,r)=>{for(var e=void 0,n=i.length-1,b;n>=0;n--)(b=i[n])&&(e=b(o,s,e)||e);return e&&k(o,s,e),e};class a extends y.Localized(m.DelegatesAria(t.VividElement)){constructor(){super(...arguments),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1,this.#i=o=>{if(o.target!==this.#e||!this.#t("light-dismiss"))return;const s=this.#e.getBoundingClientRect();s.top<=o.clientY&&o.clientY<=s.top+s.height&&s.left<=o.clientX&&o.clientX<=s.left+s.width||this._handleCloseRequest()},this.#a=o=>{o.target.method==="dialog"&&(this.open=!1)}}modalChanged(o,s){this.open&&(this._openedAsModal=s,this.$fastController.isConnected&&(this.#s(),this.#l()))}set returnValue(o){this.#e&&(this.#e.returnValue=o)}get returnValue(){return this.#e?.returnValue}#o;get#e(){return this.#o||(this.#o=this.shadowRoot.querySelector("dialog")),this.#o}openChanged(o,s){o!==void 0&&(s?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#l(),this.$emit("open",void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#s(),this.$emit("close",this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#t("dismiss-button")}#t(o){if(this.nonDismissible)return!1;switch(o){case"escape":return!this.noDismissOnEsc;case"dismiss-button":return!this.noDismissButton;case"light-dismiss":return!this.noLightDismiss}}#i;#a;_onKeyDown(o){return v.handleEscapeKeyAndStopPropogation(o)&&this._openedAsModal?(this.#t("escape")&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException("Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.","InvalidStateError");this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException("Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.","InvalidStateError");this._openedAsModal=!0,this.open=!0}#s(){this.#e.close()}#l(){this._openedAsModal?this.#e.showModal():this.#e.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#l(),this.#e.addEventListener("mousedown",this.#i),this.#e.addEventListener("submit",this.#a)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#s(),this.#e.removeEventListener("mousedown",this.#i),this.#e.removeEventListener("submit",this.#a)}}l([t.attr({mode:"boolean"})],a.prototype,"open");l([t.attr],a.prototype,"icon");l([t.attr({attribute:"icon-placement"})],a.prototype,"iconPlacement");l([t.attr],a.prototype,"subtitle");l([t.attr],a.prototype,"headline");l([t.attr({attribute:"full-width-body",mode:"boolean"})],a.prototype,"fullWidthBody");l([t.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");l([t.attr({attribute:"no-light-dismiss",mode:"boolean"})],a.prototype,"noLightDismiss");l([t.attr({attribute:"no-dismiss-on-esc",mode:"boolean"})],a.prototype,"noDismissOnEsc");l([t.attr({attribute:"no-dismiss-button",mode:"boolean"})],a.prototype,"noDismissButton");l([t.attr({attribute:"non-dismissible",mode:"boolean"})],a.prototype,"nonDismissible");l([t.attr({mode:"boolean"})],a.prototype,"modal");l([t.attr({mode:"boolean",attribute:"scrollable-body"})],a.prototype,"scrollableBody");l([t.observable],a.prototype,"_openedAsModal");l([t.observable],a.prototype,"bodySlottedContent");l([t.observable],a.prototype,"footerSlottedContent");l([t.observable],a.prototype,"actionItemsSlottedContent");const $=({iconPlacement:i,bodySlottedContent:o,footerSlottedContent:s,actionItemsSlottedContent:r,_openedAsModal:e,scrollableBody:n})=>x.classNames("base",[`icon-placement-${i}`,!!i],["hide-body",!o?.length],["hide-footer",!(s?.length||r?.length)],["modal",e],["scrollable-body",!!n]);function D(i){return t.html`
-		<${i} class="icon" name="${o=>o.icon}"></${i}>
-	`}function g(){return t.html`
-		<h2 class="headline" id="dialog-headline">${i=>i.headline}</h2>
-	`}function f(){return t.html` <h3 class="subtitle">${i=>i.subtitle}</h3> `}function z(){return t.html`
-		<div class="header-text">${g()} ${f()}</div>
-	`}function C(i){return t.html`
-	<${i}
-		aria-label="${o=>o.dismissButtonAriaLabel||o.locale.dialog.dismissButtonLabel}"
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`),c=require(`../bundled/definition6.cjs`),l=require(`../bundled/definition7.cjs`),u=require(`../bundled/dialog.cjs`);var d=`.base{white-space:initial;box-sizing:border-box;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size,var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size,280px);background-color:#0000;border:none;border-radius:8px;padding:0}@media not all and (width>=600px){.base{--_dialog-default-max-inline-size:90vw}}@media (width>=600px){.base{--_dialog-default-max-inline-size:560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size,calc(100vh - 64px))}.base:not(.modal){z-index:var(--dialog-z-index,1);inset-block:var(--dialog-inset-block,auto);inset-inline:var(--dialog-inset-inline,0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5}.base:focus-visible{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))}.main-wrapper{box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px;display:flex}.main-wrapper>*{box-sizing:border-box}.header{justify-content:space-between;align-items:flex-start;inline-size:100%;padding-inline:24px;display:grid}.base:not(.icon-placement-side) .header{grid-template-rows:auto auto auto;grid-template-columns:1fr auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));grid-area:1/1/2/2;margin-block-end:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));line-height:1}.base.icon-placement-side .header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto}.base.icon-placement-side .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-area:1/1/-1/2;margin-inline-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.header.border{position:relative}.header.border:after{background-color:var(--vvd-color-neutral-200);content:"";block-size:1px;inline-size:100%;position:absolute;bottom:-24px;left:0}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{max-block-size:var(--dialog-body-max-block-size,300px);--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;overflow:hidden auto}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.footer{justify-content:space-between;align-items:center;gap:24px;padding-inline:24px;display:flex}.hide-footer .footer{display:none}.footer .actions{align-self:flex-end;gap:8px;display:flex}.dismiss-button{flex-shrink:0;grid-area:1/-2/-1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4);margin:0}.subtitle{font:var(--vvd-typography-base);margin:0}slot[name=main]{--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}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}slot[name=main]{max-width:inherit;max-height:inherit;border-radius:inherit;display:block;overflow:hidden auto}`,f=class extends e.t(s.t(t.t)){constructor(...e){super(...e),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1}modalChanged(e,t){this.open&&(this._openedAsModal=t,this.$fastController.isConnected&&(this.#a(),this.#o()))}set returnValue(e){this.#t&&(this.#t.returnValue=e)}get returnValue(){return this.#t?.returnValue}#e;get#t(){return this.#e||=this.shadowRoot.querySelector(`dialog`),this.#e}openChanged(e,t){e!==void 0&&(t?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#o(),this.$emit(`open`,void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#a(),this.$emit(`close`,this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#n(`dismiss-button`)}#n(e){if(this.nonDismissible)return!1;switch(e){case`escape`:return!this.noDismissOnEsc;case`dismiss-button`:return!this.noDismissButton;case`light-dismiss`:return!this.noLightDismiss}}#r=e=>{if(e.target!==this.#t||!this.#n(`light-dismiss`))return;let t=this.#t.getBoundingClientRect();t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||this._handleCloseRequest()};#i=e=>{e.target.method===`dialog`&&(this.open=!1)};_onKeyDown(e){return u.t(e)&&this._openedAsModal?(this.#n(`escape`)&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException(`Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.`,`InvalidStateError`);this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException(`Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.`,`InvalidStateError`);this._openedAsModal=!0,this.open=!0}#a(){this.#t.close()}#o(){this._openedAsModal?this.#t.showModal():this.#t.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#o(),this.#t.addEventListener(`mousedown`,this.#r),this.#t.addEventListener(`submit`,this.#i)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#a(),this.#t.removeEventListener(`mousedown`,this.#r),this.#t.removeEventListener(`submit`,this.#i)}};a.t([t.l({mode:`boolean`})],f.prototype,`open`,void 0),a.t([t.l],f.prototype,`icon`,void 0),a.t([t.l({attribute:`icon-placement`})],f.prototype,`iconPlacement`,void 0),a.t([t.l],f.prototype,`subtitle`,void 0),a.t([t.l],f.prototype,`headline`,void 0),a.t([t.l({attribute:`full-width-body`,mode:`boolean`})],f.prototype,`fullWidthBody`,void 0),a.t([t.l({attribute:`dismiss-button-aria-label`})],f.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.l({attribute:`no-light-dismiss`,mode:`boolean`})],f.prototype,`noLightDismiss`,void 0),a.t([t.l({attribute:`no-dismiss-on-esc`,mode:`boolean`})],f.prototype,`noDismissOnEsc`,void 0),a.t([t.l({attribute:`no-dismiss-button`,mode:`boolean`})],f.prototype,`noDismissButton`,void 0),a.t([t.l({attribute:`non-dismissible`,mode:`boolean`})],f.prototype,`nonDismissible`,void 0),a.t([t.l({mode:`boolean`})],f.prototype,`modal`,void 0),a.t([t.l({mode:`boolean`,attribute:`scrollable-body`})],f.prototype,`scrollableBody`,void 0),a.t([t.T],f.prototype,`_openedAsModal`,void 0),a.t([t.T],f.prototype,`bodySlottedContent`,void 0),a.t([t.T],f.prototype,`footerSlottedContent`,void 0),a.t([t.T],f.prototype,`actionItemsSlottedContent`,void 0);var p=({iconPlacement:e,bodySlottedContent:t,footerSlottedContent:n,actionItemsSlottedContent:r,_openedAsModal:i,scrollableBody:a})=>o.t(`base`,[`icon-placement-${e}`,!!e],[`hide-body`,!t?.length],[`hide-footer`,!(n?.length||r?.length)],[`modal`,i],[`scrollable-body`,!!a]);function m(e){return t.d`
+		<${e} class="icon" name="${e=>e.icon}"></${e}>
+	`}function h(){return t.d`
+		<h2 class="headline" id="dialog-headline">${e=>e.headline}</h2>
+	`}function g(){return t.d` <h3 class="subtitle">${e=>e.subtitle}</h3> `}function _(){return t.d`
+		<div class="header-text">${h()} ${g()}</div>
+	`}function v(e){return t.d`
+	<${e}
+		aria-label="${e=>e.dismissButtonAriaLabel||e.locale.dialog.dismissButtonLabel}"
 		size="condensed"
 		class="dismiss-button"
 		icon="close-line"
-		@click="${o=>o._handleCloseRequest()}"
-	></${i}>`}const _=i=>{const o=i.tagFor(u.Elevation),s=i.tagFor(h.Icon),r=i.tagFor(p.Button);return t.html`
-	<${o} dp="8" not-relative>
-		<dialog class="${$}"
-				@keydown="${(e,n)=>e._onKeyDown(n.event)}"
-				@cancel="${(e,n)=>n.event.preventDefault()}"
-				${m.delegateAria({ariaModal:e=>String(e._openedAsModal)})}
-				aria-labelledby="${e=>e.headline?"dialog-headline":null}"
+		@click="${e=>e._handleCloseRequest()}"
+	></${e}>`}var y=t.o(`dialog`,f,e=>{let a=e.tagFor(l.r),o=e.tagFor(i.r),u=e.tagFor(c.i);return t.d`
+	<${a} dp="8" not-relative>
+		<dialog class="${p}"
+				@keydown="${(e,t)=>e._onKeyDown(t.event)}"
+				@cancel="${(e,t)=>t.event.preventDefault()}"
+				${s.n({ariaModal:e=>String(e._openedAsModal)})}
+				aria-labelledby="${e=>e.headline?`dialog-headline`:null}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">
-					<div class="header ${e=>e.subtitle?"border":""}">
+					<div class="header ${e=>e.subtitle?`border`:``}">
 							<slot name="graphic">
-								${d.when(e=>e.icon,D(s))}
+								${n.t(e=>e.icon,m(o))}
 							</slot>
-							${d.when(e=>e.headline&&e.subtitle,z())}
-							${d.when(e=>e.headline&&!e.subtitle,g())}
-							${d.when(e=>e.subtitle&&!e.headline,f())}
-							${d.when(e=>e._showDismissButton,C(r))}
+							${n.t(e=>e.headline&&e.subtitle,_())}
+							${n.t(e=>e.headline&&!e.subtitle,h())}
+							${n.t(e=>e.subtitle&&!e.headline,g())}
+							${n.t(e=>e._showDismissButton,v(u))}
 					</div>
-					<div class="body ${e=>e.fullWidthBody?"full-width":""}" >
-						<slot name="body" ${c.slotted("bodySlottedContent")}></slot>
+					<div class="body ${e=>e.fullWidthBody?`full-width`:``}" >
+						<slot name="body" ${r.t(`bodySlottedContent`)}></slot>
 					</div>
 					<div class="footer">
 						<div>
-							<slot name="footer" ${c.slotted("footerSlottedContent")}></slot>
+							<slot name="footer" ${r.t(`footerSlottedContent`)}></slot>
 						</div>
 						<div class="actions">
-							<slot name="action-items" ${c.slotted("actionItemsSlottedContent")}></slot>
+							<slot name="action-items" ${r.t(`actionItemsSlottedContent`)}></slot>
 						</div>
 					</div>
 				</div>
 			</slot>
 		</dialog>
-	</${o}>`},A=t.defineVividComponent("dialog",a,_,[h.iconDefinition,p.buttonDefinition,u.elevationDefinition],{styles:w}),B=t.createRegisterFunction(A);B();
+	</${a}>`},[i.t,c.t,l.t],{styles:d});t.s(y)();