@mediquo/elements 0.0.0-pr-383-20261029152148

package/dist/chunks/index-mf2T4jWX.js

@@ -0,0 +1 @@
+import{_ as t,c as e}from"./custom-element-D2ziPxYE.js";import{e as i}from"./provide-BwI4DDGF.js";import{c as o}from"./consume-CovVqBjI.js";import{A as n}from"./api-client-context-BXGqBAlO.js";import{i as a,a as s,x as r}from"./lit-element-B5-nYi7k.js";import{n as l}from"./property-C1CmBSnw.js";import{r as h}from"./state-Br45Av8Z.js";import"../ui/mq-checkbox.js";import"../ui/mq-button.js";import{M as c}from"./mutation-controller-CR2qcqhH.js";import{setEnv as d}from"../env.js";import{c as m,n as p}from"./api-chat-client-CcYgqPdC.js";const g=a`.page-header{box-sizing:border-box;width:100%;display:none}.page-title{font-family:var(--font-body);font-size:var(--text-2xl);line-height:var(--text-2xl--line-height);font-weight:var(--font-weight-bold);color:var(--color-neutrals-text-default)}.page-title ::slotted(*){margin:0;margin-bottom:var(--sp-2);font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}.page-subtitle{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--text-base--line-height);font-weight:var(--font-weight-normal);color:var(--color-neutrals-text-subtle)}.page-subtitle ::slotted(*){margin:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}.terms-section{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:var(--sp-6);background-color:var(--color-neutrals-background-weak);padding:var(--sp-6);border-radius:var(--border-radius-md)}.terms-title{font-family:var(--font-titles);font-size:var(--text-2xl);line-height:var(--text-2xl--line-height);font-weight:var(--font-weight-bold);color:var(--color-neutrals-text-default)}.terms-title ::slotted(*){margin:0;margin-bottom:var(--sp-2);font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}.terms-description{font-family:var(--font-body);font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-weight:var(--font-weight-normal);color:var(--color-neutrals-text-default)}.terms-description ::slotted(*){margin:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}.checkbox-container{display:flex;gap:var(--sp-3);align-items:flex-start;cursor:pointer}.checkbox-label{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--text-base--line-height);font-weight:var(--font-weight-normal);color:var(--color-neutrals-text-default);flex:1}@media (min-width:768px){.page-header{display:block;margin-bottom:var(--sp-10)}.page-title{font-size:var(--text-3xl);line-height:var(--text-3xl--line-height)}.page-title ::slotted(*){font-size:inherit;line-height:inherit}.page-subtitle{font-size:var(--text-base);line-height:var(--text-base--line-height)}.page-subtitle ::slotted(*){font-size:inherit;line-height:inherit}.terms-title{font-size:var(--text-2xl);line-height:var(--text-2xl--line-height)}.terms-title ::slotted(*){font-size:inherit;line-height:inherit}.terms-description{font-size:var(--text-base);line-height:var(--text-base--line-height)}.terms-description ::slotted(*){font-size:inherit;line-height:inherit}.checkbox-label{font-size:var(--text-base);line-height:var(--text-base--line-height)}}`;let v=class MqTermsAndConditions extends s{constructor(){super(...arguments),this.disabled=!1,this.hasCommercialCommunications=!1,this._accepted=!1,this.apiClient=m(),this.acceptLegalConsentMutation=new c(this,{mutationFn:async t=>this.apiClient.profile.acceptLegalConsent(t),onSuccess:()=>{this.dispatchEvent(new CustomEvent("continue"))}})}static{this.styles=g}willUpdate(t){t.has("env")&&this.env&&d(this.env);const e=p(t,{env:this.env,apiKey:this.apiKey,token:this.token},this.inheritedApiClient);e&&(this.apiClient=e)}handleCheckboxChange(t){this._accepted=t.detail.checked}handleContinue(){this._accepted&&!this.disabled&&this.acceptLegalConsentMutation.run({terms_accepted:!0,privacy_accepted:!0,commercial_accepted:this.hasCommercialCommunications})}render(){const t=!this._accepted||this.disabled;return r`<div class="page-header"><div class="page-title"><slot name="page-title"></slot></div><div class="page-subtitle"><slot name="page-subtitle"></slot></div></div><div class="terms-section"><div><div class="terms-title"><slot name="terms-title"></slot></div><div class="terms-description"><slot name="terms-description"></slot></div></div><div class="checkbox-container"><mq-checkbox id="terms-checkbox" @change="${this.handleCheckboxChange}" ?disabled="${this.disabled}"></mq-checkbox><label class="checkbox-label" for="terms-checkbox"><slot name="checkbox-label"></slot></label></div><mq-button variant="primary" size="md" fullwidth ?disabled="${this.acceptLegalConsentMutation.isPending||t}" @click="${this.handleContinue}"><slot name="button-text"></slot></mq-button></div>`}};t([l({type:Boolean})],v.prototype,"disabled",void 0),t([l({type:Boolean})],v.prototype,"hasCommercialCommunications",void 0),t([l({type:String,attribute:"api-key"})],v.prototype,"apiKey",void 0),t([l({type:String,attribute:"token"})],v.prototype,"token",void 0),t([l({type:String,attribute:"env"})],v.prototype,"env",void 0),t([h()],v.prototype,"_accepted",void 0),t([o({context:n,subscribe:!0}),h()],v.prototype,"inheritedApiClient",void 0),t([i({context:n}),h()],v.prototype,"apiClient",void 0),v=t([e("mq-terms-and-conditions")],v);export{v as M};

package/dist/chunks/index-ov4Ad6vl.d.ts

@@ -0,0 +1,55 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+import { M as MediquoApiChatClient } from './index.d-k8r5vUZn.js';
+import '../ui/mq-checkbox.js';
+import '../ui/mq-button.js';
+import { Env } from '../env.js';
+
+type TermsAndConditionsAcceptEvent = CustomEvent<{
+    accepted: boolean;
+}>;
+type TermsAndConditionsContinueEvent = CustomEvent<void>;
+/**
+ * @fires continue - Fired when the continue button is clicked
+ *
+ * @slot - Default slot for checkbox label content (can include links)
+ * @slot page-title - Slot for the main page title (can include any HTML)
+ * @slot page-subtitle - Slot for the main page subtitle (can include any HTML)
+ * @slot terms-title - Slot for the terms section title (can include any HTML)
+ * @slot terms-description - Slot for the terms section description (can include any HTML)
+ * @slot checkbox-label - Slot for the checkbox label (can include any HTML)
+ * @slot button-text - Slot for the button text (can include any HTML)
+ */
+declare class MqTermsAndConditions extends LitElement {
+    static styles: lit.CSSResult;
+    disabled: boolean;
+    hasCommercialCommunications: boolean;
+    /** Mediquo API key. Required when used standalone (outside mq-router). */
+    apiKey?: string;
+    /** Already-exchanged access token. Required when used standalone. */
+    token?: string;
+    /** Environment override ("development" | "production"). Optional. */
+    env?: Env;
+    private _accepted;
+    /** The organization scope this element was mounted under, if any. */
+    private inheritedApiClient?;
+    /**
+     * This element's own transport, bound to its `api-key` and provided to every
+     * descendant. Never shared with another element.
+     */
+    apiClient: MediquoApiChatClient;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private handleCheckboxChange;
+    private acceptLegalConsentMutation;
+    private handleContinue;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-terms-and-conditions": MqTermsAndConditions;
+    }
+}
+
+export { MqTermsAndConditions as M };
+export type { TermsAndConditionsContinueEvent as T, TermsAndConditionsAcceptEvent as a };

package/dist/chunks/index-xi0bxKot.js

@@ -0,0 +1,341 @@
+import{e,t}from"./custom-element-CiOhPWP1-DPpsGZrV.js";import{i,a as o,E as s,x as a,r}from"./lit-element-B5-nYi7k.js";import{n}from"./property-C1CmBSnw.js";import{r as l}from"./state-Br45Av8Z.js";const d="rgb(0 0 0 / 0.5)",h="4px",c="0px 8px 16px 0px rgb(0 0 0 / 0.1)",m="rgb(0 0 0 / 0.05)",g="200ms",u="0.5rem",b="3.75rem",p="0.75rem",v="1.25rem",f="1rem",y="0.625rem",w="25rem",x="12rem",q=["a[href]","area[href]","button",'input:not([type="hidden"])',"select","textarea","iframe","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])',"[tabindex]"].join(",");function S(e){if(!e)return 0;const t=getComputedStyle(e).transitionDuration.split(",");return Math.max(0,...t.map(e=>{const t=Number.parseFloat(e);return Number.isNaN(t)?0:e.trim().endsWith("ms")?t:1e3*t}))}let $=0,k="",C="";function N(){if(0===$){const e=document.documentElement,t=window.innerWidth-e.clientWidth;if(k=e.style.overflow,C=e.style.paddingRight,e.style.overflow="hidden",e.clientWidth>0&&t>0){const i=Number.parseFloat(getComputedStyle(e).paddingRight);e.style.paddingRight=`${(Number.isNaN(i)?0:i)+t}px`}}$+=1}function E(){if(0!==$&&($-=1,0===$)){const e=document.documentElement;e.style.overflow=k,e.style.paddingRight=C}}function A(e,t){(function(e){if(!(e instanceof HTMLElement))return!1;if(!e.matches(q))return!1;if(e.hasAttribute("disabled")||e.hasAttribute("inert"))return!1;if("true"===e.getAttribute("aria-hidden"))return!1;const t=e.getAttribute("tabindex");return!(null!==t&&Number(t)<0)&&(null!==e.offsetParent||e.getClientRects().length>0)})(e)&&t.push(e);const i=e.shadowRoot?e.shadowRoot.children:e instanceof HTMLSlotElement?e.assignedElements({flatten:!0}):e.children;for(const e of i)A(e,t)}function D(e,t){if("Tab"!==e.key||!t)return;const i=[];A(t,i);const o=i[0],s=i[i.length-1];if(!o||!s)return void e.preventDefault();const a=function(){let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e}();e.shiftKey||a!==s?e.shiftKey&&a===o&&(e.preventDefault(),s.focus()):(e.preventDefault(),o.focus())}const M=(e,t)=>r(`var(--dialog-${e}, ${t})`),F=M("underlay",d),T=M("underlay-blur",h),z=M("shadow",c),O=M("close-hover-bg",m),R=M("transition-duration",g),H=M("radius",u),j=M("header-height",b),P=M("padding-inline",p),L=M("padding-block",v),W=M("gap",f),I=M("actions-gap",y),B=i`
+  :host {
+    display: contents;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  dialog.root {
+    /* Reset user-agent dialog styles */
+    padding: 0;
+    border: none;
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    /* Full-viewport underlay so clicks outside the card hit the dialog */
+    position: fixed;
+    inset: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    background: ${F};
+    backdrop-filter: blur(${T});
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity ${R} ease;
+  }
+
+  dialog.root:not([open]) {
+    display: none;
+  }
+
+  /* The dim is the dialog's own background, so it can animate via .active */
+  dialog.root::backdrop {
+    background: transparent;
+  }
+
+  .dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    /* 1rem of air on each side on phones, inside the safe area */
+    width: calc(
+      100% - 2rem - var(--mq-safe-left, 0px) - var(--mq-safe-right, 0px)
+    );
+    max-width: ${M("max-width",w)};
+    /* vh first for browsers without dvh; dvh wins where it exists, so the
+       card never grows under a mobile browser's toolbars. */
+    max-height: calc(
+      100vh - 2rem - var(--mq-safe-top, 0px) - var(--mq-safe-bottom, 0px)
+    );
+    max-height: calc(
+      100dvh - 2rem - var(--mq-safe-top, 0px) - var(--mq-safe-bottom, 0px)
+    );
+    margin-top: var(--mq-safe-top, 0px);
+    margin-bottom: var(--mq-safe-bottom, 0px);
+    margin-left: var(--mq-safe-left, 0px);
+    margin-right: var(--mq-safe-right, 0px);
+    border: none;
+    border-radius: ${H};
+    background: var(
+      --mq-surface-surface,
+      var(--color-neutrals-background-extraWeak, #ffffff)
+    );
+    color: var(--mq-text-primary, var(--color-neutrals-text-default, #0a0a23));
+    font-family: var(--mq-typography-family-sans, var(--font-body, inherit));
+    box-shadow: ${z};
+    outline: none;
+    overflow: hidden;
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity ${R} ease,
+      transform ${R} ease;
+  }
+
+  dialog.root.active {
+    opacity: 1;
+  }
+
+  dialog.root.active .dialog {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* Image, header and body scroll together; the close button and the actions
+     stay put. */
+  .scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  /* Focusable only while it overflows, so a keyboard user can scroll it —
+     Safari does not make scrollers focusable on its own. */
+  .scroll:focus-visible {
+    outline: 2px solid var(--mq-border-focus, var(--color-primary, #4a1ea7));
+    outline-offset: -2px;
+  }
+
+  .image {
+    line-height: 0;
+  }
+
+  .image ::slotted(img),
+  .image ::slotted(picture),
+  .image ::slotted(video),
+  .image ::slotted(svg) {
+    display: block;
+    width: 100%;
+    max-height: ${M("image-max-height",x)};
+    object-fit: cover;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: ${j};
+    /* The end side leaves room for the close button sitting in the band. */
+    padding: var(--mq-spacing-2, 0.5rem) var(--mq-spacing-12, 3rem)
+      var(--mq-spacing-2, 0.5rem) ${P};
+    background: var(--mq-surface-surface-raised, var(--color-muted, #f8f7fa));
+  }
+
+  /* Over an image the close button sits on the image, not in the band. */
+  .dialog.with-image .header {
+    padding-inline-end: ${P};
+  }
+
+  .heading {
+    font-family: var(--mq-typography-family-sans, var(--font-titles, inherit));
+    font-size: var(--mq-typography-size-base, 1rem);
+    font-weight: var(--mq-typography-weight-medium, 500);
+    line-height: 1.25rem;
+    color: var(--mq-text-brand, var(--color-primary, #4a1ea7));
+  }
+
+  .body {
+    display: grid;
+    gap: ${W};
+    padding: ${L} ${P};
+  }
+
+  /* No header band to hold the close button: keep the body clear of it. */
+  .dialog:not(.with-heading):not(.with-image) .body {
+    padding-inline-end: var(--mq-spacing-12, 3rem);
+  }
+
+  .subheading {
+    font-size: var(--mq-typography-size-xs, 0.75rem);
+    font-weight: var(--mq-typography-weight-normal, 400);
+    line-height: 1rem;
+    /* ≈ Figma's #6d658b on white, and still readable in dark mode;
+       --mq-text-secondary would fall under 4.5:1. */
+    color: var(
+      --color-neutrals-text-medium,
+      color-mix(in srgb, var(--mq-text-primary, #0a0a23) 64%, transparent)
+    );
+  }
+
+  /* Headings bring their own UA margins and sizes; start from the design's.
+     Styles the owner gives its own heading still win over these. */
+  .heading ::slotted(*),
+  .subheading ::slotted(*) {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  .footer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${I};
+    padding: var(--mq-spacing-3, 0.75rem) ${P}
+      var(--mq-spacing-4, 1rem);
+    border-top: var(--mq-size-border-default, 1px) solid
+      var(--mq-border-default, var(--color-border, #edecf1));
+  }
+
+  .close-btn {
+    position: absolute;
+    /* Centred in the header band: (band - button) / 2 */
+    top: calc((${j} - var(--mq-size-control-sm, 2rem)) / 2);
+    right: var(--mq-spacing-2, 0.5rem);
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--mq-size-control-sm, 2rem);
+    height: var(--mq-size-control-sm, 2rem);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--mq-radius-md, 0.375rem);
+    background: transparent;
+    /* Not --mq-text-secondary: grey.500 is 2.79:1 on the band, under the 3:1 a
+       control's icon needs. Same derivation as the subheading. */
+    color: var(
+      --color-neutrals-text-medium,
+      color-mix(in srgb, var(--mq-text-primary, #0a0a23) 64%, transparent)
+    );
+    cursor: pointer;
+    transition: background-color ${R} ease;
+  }
+
+  .close-btn svg {
+    width: var(--mq-size-icon-lg, 1.5rem);
+    height: var(--mq-size-icon-lg, 1.5rem);
+    pointer-events: none;
+  }
+
+  .close-btn:hover {
+    background: ${O};
+  }
+
+  .close-btn:focus-visible {
+    outline: 2px solid var(--mq-border-focus, var(--color-primary, #4a1ea7));
+    outline-offset: 2px;
+  }
+
+  /* Over a photo the bare glyph can vanish; give it a chip to sit on. */
+  .dialog.with-image .close-btn {
+    top: var(--mq-spacing-3, 0.75rem);
+    right: var(--mq-spacing-3, 0.75rem);
+    border-radius: var(--mq-radius-full, 9999px);
+    background: var(
+      --mq-surface-surface,
+      var(--color-neutrals-background-extraWeak, #ffffff)
+    );
+    opacity: 0.9;
+  }
+
+  .dialog.with-image .close-btn:hover {
+    opacity: 1;
+  }
+
+  .close-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .dialog {
+      border: 1px solid CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    dialog.root,
+    .dialog,
+    .close-btn {
+      transition: none;
+    }
+
+    .dialog {
+      transform: none;
+    }
+  }
+`;class MqDialogCloseEvent extends Event{static{this.eventName="mq-close"}constructor(){super(MqDialogCloseEvent.eventName,{bubbles:!0,composed:!0,cancelable:!0})}}let K=class MqDialog extends o{constructor(){super(...arguments),this.open=!1,this.dismissable=!0,this.alert=!1,this.label="",this.closeLabel="Close dialog",this.isActive=!1,this.hasImage=!1,this.hasHeading=!1,this.hasSubheading=!1,this.hasFooter=!1,this.isModal=!1,this.scrollable=!1,this.enterFrame=null,this.slotObserver=null,this.scrollObserver=null,this.closeTimer=null,this.lockedScroll=!1,this.backdropPointerDown=!1,this.warnedAboutName=!1,this.detaching=!1,this.onSlotChange=()=>{this.readSlots()},this.onDialogPointerDown=e=>{this.backdropPointerDown=e.target===this.dialogEl},this.onDialogClick=e=>{const t=this.backdropPointerDown&&e.target===this.dialogEl;this.backdropPointerDown=!1,t&&this.dismissable&&this.requestClose()},this.onCancel=e=>{e.preventDefault(),this.dismissable&&this.requestClose()},this.onNativeClose=()=>{this.detaching||(this.open?this.dismissable||!this.isConnected?(this.releaseScroll(),this.dispatchEvent(new MqDialogCloseEvent),this.open=!1):this.openNative():this.releaseScroll())},this.onCloseClick=()=>{this.dismissable&&this.requestClose()},this.onKeyDown=e=>{D(e,this.shadowRoot?.querySelector(".dialog")??null)}}static{this.styles=[B]}get dialogEl(){return this.shadowRoot?.querySelector("dialog")??null}connectedCallback(){super.connectedCallback(),this.readSlots(),this.slotObserver=new MutationObserver(()=>this.readSlots()),this.slotObserver.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot"]}),this.hasUpdated&&(this.observeScroll(),this.open&&this.openNative())}disconnectedCallback(){this.slotObserver?.disconnect(),this.slotObserver=null,this.scrollObserver?.disconnect(),this.scrollObserver=null,this.cancelEnterFrame(),this.closeTimer&&(window.clearTimeout(this.closeTimer),this.closeTimer=null),this.detaching=!0,this.closeNative(),this.detaching=!1,this.isActive=!1,super.disconnectedCallback()}firstUpdated(){this.observeScroll()}observeScroll(){if(this.scrollObserver||"undefined"==typeof ResizeObserver)return;const e=this.shadowRoot?.querySelector(".scroll");if(!e)return;this.scrollObserver=new ResizeObserver(()=>this.measureScroll()),this.scrollObserver.observe(e);const t=this.shadowRoot?.querySelector(".scroll > .body");t&&this.scrollObserver.observe(t)}updated(e){if(!e.has("open"))return;if(!this.dialogEl)return;if(this.open)return this.closeTimer&&(window.clearTimeout(this.closeTimer),this.closeTimer=null),this.openNative(),void this.warnAboutMissingName();if(this.cancelEnterFrame(),this.isActive=!1,!this.dialogEl.open)return void this.releaseScroll();this.closeTimer&&window.clearTimeout(this.closeTimer);const t=this.shadowRoot?.querySelector(".dialog");this.closeTimer=window.setTimeout(()=>{this.closeNative(),this.closeTimer=null},S(t))}openNative(){const e=this.dialogEl;e&&(e.open||("function"==typeof e.showModal?(e.showModal(),this.isModal=!0):(e.setAttribute("open",""),this.isModal=!1)),this.holdScroll(),this.measureScroll(),this.cancelEnterFrame(),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=null,this.open&&(this.isActive=!0)}))}cancelEnterFrame(){null!==this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=null)}measureScroll(){const e=this.shadowRoot?.querySelector(".scroll");e&&(this.scrollable=e.scrollHeight>e.clientHeight+1)}closeNative(){const e=this.dialogEl;e?.open&&("function"==typeof e.close?e.close():e.removeAttribute("open")),this.releaseScroll()}holdScroll(){this.lockedScroll||(N(),this.lockedScroll=!0)}releaseScroll(){this.lockedScroll&&(E(),this.lockedScroll=!1)}warnAboutMissingName(){this.hasHeading||this.label||this.warnedAboutName||(this.warnedAboutName=!0,console.warn('mq-dialog: nothing is in the "heading" slot and no label was set, so the dialog has no accessible name and a screen reader will announce it as just "dialog". Add a heading or pass a label attribute.'))}hasSlotted(e,t){const i=Array.from(this.querySelectorAll(`:scope > [slot="${e}"]`));return t?i.some(e=>""!==(e.textContent??"").trim()):i.length>0}readSlots(){this.hasImage=this.hasSlotted("image",!1),this.hasHeading=this.hasSlotted("heading",!0),this.hasSubheading=this.hasSlotted("subheading",!0),this.hasFooter=this.hasSlotted("footer",!1),this.measureScroll(),this.open&&this.warnAboutMissingName()}requestClose(){this.dispatchEvent(new MqDialogCloseEvent)&&(this.open=!1)}render(){const e=["dialog",this.hasImage?"with-image":"",this.hasHeading?"with-heading":""].filter(Boolean).join(" ");return a`
+      <dialog
+        class="root ${this.isActive?"active":""}"
+        role=${this.alert?"alertdialog":s}
+        aria-modal=${this.isModal?"true":s}
+        closedby=${this.dismissable?"closerequest":"none"}
+        aria-labelledby=${this.hasHeading?"dialog-heading":s}
+        aria-label=${!this.hasHeading&&this.label?this.label:s}
+        aria-describedby=${this.hasSubheading?"dialog-subheading":s}
+        @pointerdown=${this.onDialogPointerDown}
+        @click=${this.onDialogClick}
+        @keydown=${this.onKeyDown}
+        @cancel=${this.onCancel}
+        @close=${this.onNativeClose}
+      >
+        <div class=${e} part="dialog">
+          <button
+            class="close-btn"
+            part="close"
+            type="button"
+            aria-label=${this.closeLabel}
+            title=${this.closeLabel}
+            ?disabled=${!this.dismissable}
+            @click=${this.onCloseClick}
+          >
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+          <div
+            class="scroll"
+            part="scroll"
+            tabindex=${this.scrollable?"0":s}
+            role=${this.scrollable?"region":s}
+            aria-labelledby=${this.scrollable&&this.hasHeading?"dialog-heading":s}
+            aria-label=${this.scrollable&&!this.hasHeading&&this.label?this.label:s}
+          >
+            <div class="image" part="image" ?hidden=${!this.hasImage}>
+              <slot name="image" @slotchange=${this.onSlotChange}></slot>
+            </div>
+            <div class="header" part="header" ?hidden=${!this.hasHeading}>
+              <div class="heading" part="heading" id="dialog-heading">
+                <slot name="heading" @slotchange=${this.onSlotChange}></slot>
+              </div>
+            </div>
+            <div class="body" part="body">
+              <div
+                class="subheading"
+                part="subheading"
+                id="dialog-subheading"
+                ?hidden=${!this.hasSubheading}
+              >
+                <slot name="subheading" @slotchange=${this.onSlotChange}></slot>
+              </div>
+              <div class="content" part="content"><slot></slot></div>
+            </div>
+          </div>
+          <div class="footer" part="footer" ?hidden=${!this.hasFooter}>
+            <slot name="footer" @slotchange=${this.onSlotChange}></slot>
+          </div>
+        </div>
+      </dialog>
+    `}};e([n({type:Boolean,reflect:!0})],K.prototype,"open",void 0),e([n({type:Boolean,reflect:!0})],K.prototype,"dismissable",void 0),e([n({type:Boolean,reflect:!0})],K.prototype,"alert",void 0),e([n({type:String})],K.prototype,"label",void 0),e([n({type:String,attribute:"close-label"})],K.prototype,"closeLabel",void 0),e([l()],K.prototype,"isActive",void 0),e([l()],K.prototype,"hasImage",void 0),e([l()],K.prototype,"hasHeading",void 0),e([l()],K.prototype,"hasSubheading",void 0),e([l()],K.prototype,"hasFooter",void 0),e([l()],K.prototype,"isModal",void 0),e([l()],K.prototype,"scrollable",void 0),K=e([t("mq-dialog")],K);export{K as D,MqDialogCloseEvent as M,E as a,S as e,D as l,N as r};