@crowdstrike/glide-core 0.29.2 → 0.30.1

package/dist/menu.styles.js

@@ -1,35 +1,51 @@
-import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";export default[css`
-    ${opacityAndScaleAnimation(".default-slot:popover-open")}
-  `,css`
-    :host {
-      /* Contains elements with "padding", "margin", and "width". Inline by default. */
-      display: inline-block;
-    }
-
-    .component {
-      color: var(--glide-core-color-static-text-default);
-      display: flex;
-    }
-
+import { css } from 'lit';
+import opacityAndScaleAnimation from './styles/opacity-and-scale-animation.js';
+export default [
+    css `
+    ${opacityAndScaleAnimation('.default-slot:popover-open')}
+  `,
+    css `
     .target-slot {
-      display: flex;
-      position: relative;
+      &::slotted(:is([disabled], [aria-disabled='true'])) {
+        color: var(--glide-core-color-interactive-icon-default--disabled);
+        cursor: default;
+      }
     }
 
     .default-slot {
       background-color: var(
         --glide-core-private-color-dialog-and-modal-surface-container
       );
-      border: 1px solid
-        var(--glide-core-color-static-surface-container-secondary);
+      border: 1px solid var(--glide-core-color-static-stroke-secondary);
       border-radius: var(--glide-core-rounding-base-radius-sm);
       box-shadow: var(--glide-core-effect-floating);
       box-sizing: border-box;
+      color: var(--glide-core-color-static-text-default);
+
+      /*
+        For submenus, which will inherit "cursor: pointer" from their Option(s).
+        "cursor: default" tells the user that clicking the padding around the
+        default slot won't select an Option.
+      */
+      cursor: default;
       inline-size: max-content;
       inset: unset;
       margin-block: 0;
       min-inline-size: 9.375rem;
-      padding: var(--glide-core-spacing-base-xxxs);
+      padding-block-end: 0;
+      padding-block-start: var(--glide-core-spacing-base-xxxs);
+      padding-inline: var(--glide-core-spacing-base-xxxs);
       position: absolute;
+
+      /*
+        This little hack replaces "padding-block-end", which the last option overlaps
+        when the Option(s) overflow and scroll.
+      */
+      &::slotted(glide-core-options)::after {
+        block-size: var(--glide-core-spacing-base-xxxs);
+        content: '';
+        display: block;
+      }
     }
-  `];
+  `,
+];

package/dist/modal.d.ts

@@ -7,6 +7,7 @@ declare global {
 /**
  * @attr {string} label
  * @attr {boolean} [back-button=false]
+ * @attr {string} [description]
  * @attr {boolean} [open=false]
  * @attr {'critical'|'informational'|'medium'} [severity]
  * @attr {'small'|'medium'|'large'|'xlarge'} [size='medium']
@@ -28,6 +29,7 @@ export default class Modal extends LitElement {
     static styles: import("lit").CSSResult[];
     label?: string;
     backButton: boolean;
+    description?: string;
     /**
      * @default false
      */
@@ -43,4 +45,6 @@ export default class Modal extends LitElement {
     private hasPrimarySlotContent;
     private hasSecondarySlotContent;
     private hasTertiarySlotContent;
+    private isScrolledFromBottom;
+    private isScrolledFromTop;
 }

package/dist/modal.icon-button.js

@@ -1 +1,60 @@
-var __decorate=this&&this.__decorate||function(t,o,e,r){var i,n=arguments.length,l=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,o,e,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(l=(n<3?i(l):n>3?i(o,e,l):i(o,e))||l);return n>3&&l&&Object.defineProperty(o,e,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./modal.icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let ModalIconButton=class ModalIconButton extends LitElement{constructor(){super(...arguments),this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot ${assertSlot()}></slot></glide-core-icon-button>`}};__decorate([property({reflect:!0}),required],ModalIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],ModalIconButton.prototype,"version",void 0),ModalIconButton=__decorate([customElement("glide-core-modal-icon-button"),final],ModalIconButton);export default ModalIconButton;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './icon-button.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './modal.icon-button.styles.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element} - An icon
+ */
+let ModalIconButton = class ModalIconButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.version = packageJson.version;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <glide-core-icon-button label=${ifDefined(this.label)} variant="tertiary">
+        <slot ${assertSlot()}>
+          <!--
+            An icon
+            @required
+            @type {Element}
+          -->
+        </slot>
+      </glide-core-icon-button>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], ModalIconButton.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], ModalIconButton.prototype, "version", void 0);
+ModalIconButton = __decorate([
+    customElement('glide-core-modal-icon-button'),
+    final
+], ModalIconButton);
+export default ModalIconButton;

package/dist/modal.icon-button.styles.js

@@ -1,8 +1,11 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     ::slotted(*) {
       --private-size: 1.125rem;
 
       block-size: 1.125rem;
       inline-size: 1.125rem;
     }
-  `];
+  `,
+];

package/dist/modal.js

@@ -1 +1,473 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var n,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(n=e[r])&&(l=(s<3?n(l):s>3?n(t,o,l):n(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import ModalIconButton from"./modal.icon-button.js";import Button from"./button.js";import Tooltip from"./tooltip.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import final from"./library/final.js";import required from"./library/required.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  .private-glide-core-modal-lock-scroll {\n    scrollbar-gutter: stable !important;\n    overflow: hidden !important;\n  }\n");let Modal=class Modal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.hasPrimarySlotContent=!1,this.hasSecondarySlotContent=!1,this.hasTertiarySlotContent=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=createRef(),this.#n=createRef(),this.#s=!1,this.#l=!1,this.#r=new LocalizeController(this),this.#a=createRef(),this.#c=createRef(),this.#d=createRef(),this.#m=()=>{this.#s=!0},this.#h=()=>{this.#s=!0},this.#p=()=>{const e=this.open;setTimeout((()=>{this.#s?setTimeout((()=>{this.#s=!1})):e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#l}set open(e){const t=e!==this.#l;this.#l=e,e&&t?(this.#y(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#u(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#p,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#p,{capture:!0})}firstUpdated(){this.open&&this.#y(),this.#i.value?.addEventListener("click",this.#m,{capture:!0}),this.#i.value?.addEventListener("mouseup",this.#h)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#f}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#i)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.severity,(()=>html`<span aria-label="${this.#r.term("informational"===this.severity?"severityInformational":"critical"===this.severity?"severityCritical":"severityMedium")} - " class="${classMap({severity:!0,critical:"critical"===this.severity,informational:"informational"===this.severity,medium:"medium"===this.severity})}" data-test="severity">${this.severity&&icons[this.severity]}</span>`))} ${when(this.backButton&&!this.severity,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#r.term("close")}" @click="${this.#v}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" ${assertSlot([ModalIconButton],!0)} ${ref(this.#n)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#r.term("close")}" @click="${this.#v}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot ${assertSlot()}></slot></article><footer><menu aria-hidden="${!this.hasTertiarySlotContent&&!this.hasSecondarySlotContent&&!this.hasPrimarySlotContent}" class="actions"><li aria-hidden="${!this.hasTertiarySlotContent}" class="action"><slot class="tertiary-slot" name="tertiary" @slotchange="${this.#C}" ${assertSlot([Button,Tooltip],!0)} ${ref(this.#d)}></slot></li><li aria-hidden="${!this.hasSecondarySlotContent}" class="action"><slot name="secondary" @slotchange="${this.#S}" ${assertSlot([Button],!0)} ${ref(this.#c)}></slot></li><li aria-hidden="${!this.hasPrimarySlotContent}" class="action"><slot name="primary" @slotchange="${this.#b}" ${assertSlot([Button],!0)} ${ref(this.#a)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#i;#n;#s;#l;#r;#a;#c;#d;#m;#h;#p;#u(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#v(){this.open=!1}#f(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#b(){this.hasPrimarySlotContent=Boolean(this.#a.value?.assignedElements().length)}#S(){this.hasSecondarySlotContent=Boolean(this.#c.value?.assignedElements().length)}#C(){this.hasTertiarySlotContent=Boolean(this.#d.value?.assignedElements().length)}#y(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({reflect:!0}),required],Modal.prototype,"label",void 0),__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],Modal.prototype,"backButton",void 0),__decorate([property({reflect:!0,type:Boolean})],Modal.prototype,"open",null),__decorate([property({reflect:!0})],Modal.prototype,"severity",void 0),__decorate([property({reflect:!0,useDefault:!0})],Modal.prototype,"size",void 0),__decorate([property({reflect:!0})],Modal.prototype,"version",void 0),__decorate([state()],Modal.prototype,"hasPrimarySlotContent",void 0),__decorate([state()],Modal.prototype,"hasSecondarySlotContent",void 0),__decorate([state()],Modal.prototype,"hasTertiarySlotContent",void 0),Modal=__decorate([customElement("glide-core-modal"),final],Modal);export default Modal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,critical:severityCriticalIcon,informational:severityInformationalIcon,medium:severityMediumIcon};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import { LocalizeController } from './library/localize.js';
+import ModalIconButton from './modal.icon-button.js';
+import Button from './button.js';
+import Tooltip from './tooltip.js';
+import styles from './modal.styles.js';
+import xIcon from './icons/x.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import severityInformationalIcon from './icons/severity-informational.js';
+import severityMediumIcon from './icons/severity-medium.js';
+import severityCriticalIcon from './icons/severity-critical.js';
+import final from './library/final.js';
+import required from './library/required.js';
+import onResize from './library/on-resize.js';
+const globalStylesheet = new CSSStyleSheet();
+globalStylesheet.insertRule(`
+  .private-glide-core-modal-lock-scroll {
+    scrollbar-gutter: stable !important;
+    overflow: hidden !important;
+  }
+`);
+/**
+ * @attr {string} label
+ * @attr {boolean} [back-button=false]
+ * @attr {string} [description]
+ * @attr {boolean} [open=false]
+ * @attr {'critical'|'informational'|'medium'} [severity]
+ * @attr {'small'|'medium'|'large'|'xlarge'} [size='medium']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string}
+ * @slot {ModalIconButton} [header-actions]
+ * @slot {Button} [primary]
+ * @slot {Button} [secondary]
+ * @slot {Button | Tooltip} [tertiary]
+ *
+ * @fires {Event} toggle
+ */
+let Modal = class Modal extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.backButton = false;
+        this.size = 'medium';
+        this.version = packageJson.version;
+        this.hasPrimarySlotContent = false;
+        this.hasSecondarySlotContent = false;
+        this.hasTertiarySlotContent = false;
+        this.isScrolledFromBottom = false;
+        this.isScrolledFromTop = false;
+        this.#backButtonElementRef = createRef();
+        this.#bodyElementRef = createRef();
+        this.#closeButtonElementRef = createRef();
+        this.#componentElementRef = createRef();
+        this.#containerElementRef = createRef();
+        this.#headerActionsSlotElementRef = createRef();
+        this.#isContainerClick = false;
+        this.#isOpen = false;
+        this.#localize = new LocalizeController(this);
+        this.#primarySlotElementRef = createRef();
+        this.#secondarySlotElementRef = createRef();
+        this.#tertiarySlotElementRef = createRef();
+        // An arrow function field instead of a method so `this` is closed over and
+        // set to the component instead of `document`.
+        this.#onContainerClick = () => {
+            this.#isContainerClick = true;
+        };
+        // An arrow function field instead of a method so `this` is closed over and
+        // set to the component instead of `document`.
+        this.#onDocumentClick = () => {
+            const isOpen = this.open;
+            // There's a comment in `firstUpdated()` explaining the timeout.
+            setTimeout(() => {
+                if (this.#isContainerClick) {
+                    // This handler will be called twice for a single click if the element clicked was
+                    // a `<label>`. Because clicking a `<label>` produces two "click" events.
+                    //
+                    // If we immediately set `#isContainerClick` to `false`, Modal will close when this
+                    // handler is called the second time. So we wait a tick to ensure both "click"
+                    // events have been dispatched.
+                    setTimeout(() => {
+                        this.#isContainerClick = false;
+                    });
+                    // The click may be a result of the user clicking a button to open Modal.
+                    // If so then `this.open` will have been set to `true` in the frame between
+                    // when this handler was called and this timeout. And we don't want to
+                    // immediately close Modal after the user has opened it. So we only close
+                    // Modal if the state of `this.open` hasn't changed.
+                }
+                else if (isOpen === this.open) {
+                    this.open = false;
+                }
+            });
+        };
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get open() {
+        return this.#isOpen;
+    }
+    set open(isOpen) {
+        const hasChanged = isOpen !== this.#isOpen;
+        this.#isOpen = isOpen;
+        if (isOpen && hasChanged) {
+            this.#show();
+            this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+        }
+        else if (hasChanged) {
+            this.#hide();
+            this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const isAdopted = document.adoptedStyleSheets.includes(globalStylesheet);
+        if (!isAdopted) {
+            document.adoptedStyleSheets.push(globalStylesheet);
+        }
+        // 1. The consumer has a click handler on a button.
+        // 2. The user clicks the button.
+        // 3. The button's click handler is called and sets `this.open` to `true`.
+        // 4. The "click" event bubbles up and is handled by `#onDocumentClick`.
+        // 5. That handler sets `open` to `false` because the click came from outside
+        //    Modal.
+        // 6. Modal is opened then closed in the same frame and so never opens.
+        //
+        // `capture` ensures `#onDocumentClick` is called before #3, so the button click
+        // handler setting `open` to `true` isn't overwritten by this handler setting
+        // `open` to `false`.
+        document.addEventListener('click', this.#onDocumentClick, {
+            capture: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.documentElement.classList.remove('private-glide-core-modal-lock-scroll');
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter((stylesheet) => {
+            return stylesheet !== globalStylesheet;
+        });
+        document.removeEventListener('click', this.#onDocumentClick, {
+            capture: true,
+        });
+    }
+    firstUpdated() {
+        if (this.open) {
+            this.#show();
+        }
+        // Modals's "click" handler on `document` listens for clicks in the capture
+        // phase. There's a comment explaining why. `#isContainerClick` must be set
+        // by this handler before that handler is called. That handler will be called
+        // first because events travel down instead of up the `document` during their
+        // capture phase. But this "click" handler, because it listens in the capture
+        // phase, will be called in the same frame. So the `document` handler checks
+        // `#isContainerClick` after a timeout to give this handler a chance to be called.
+        //
+        // In short, we have to listen in the capture phase here because the `document`
+        // listener listens in the capture phase.
+        this.#containerElementRef.value?.addEventListener('click', this.#onContainerClick, { capture: true });
+    }
+    // The contents `<dialog>` are wrapped in a `<div>` so we can separate backdrop
+    // clicks from non-backdrop ones. We add "click" listeners to the `<div>` and the
+    // `document`. The former listener sets a boolean that the latter has a condition
+    // for. If the boolean is `false`, then we know the click came from the backdrop.
+    // That's also why the padding is on the `<div>`, so padding clicks come from
+    // inside it and Modal remains open.
+    render() {
+        return html `<dialog
+      class=${classMap({
+            component: true,
+            small: this.size === 'small',
+            medium: this.size === 'medium',
+            large: this.size === 'large',
+            xlarge: this.size === 'xlarge',
+        })}
+      data-test="component"
+      @keydown=${this.#onComponentKeyDown}
+      ${ref(this.#componentElementRef)}
+      ${onResize(this.#onScrollAndResize.bind(this))})}
+    >
+      <div
+        class="container"
+        @mouseup=${this.#onContainerMouseup}
+        ${ref(this.#containerElementRef)}
+      >
+        <header
+          class=${classMap({ header: true, shadow: this.isScrolledFromTop })}
+        >
+          <div class="label-and-actions">
+            <h2 class="label" data-test="heading" id="heading">
+              ${when(this.severity, () => html `<span
+                    aria-label="${this.#localize.term(this.severity === 'informational'
+            ? 'severityInformational'
+            : this.severity === 'critical'
+                ? 'severityCritical'
+                : 'severityMedium')} - "
+                    class=${classMap({
+            severity: true,
+            critical: this.severity === 'critical',
+            informational: this.severity === 'informational',
+            medium: this.severity === 'medium',
+        })}
+                    data-test="severity"
+                  >
+                    ${this.severity && icons[this.severity]}
+                  </span>`)}
+              ${when(this.backButton && !this.severity, () => html `<glide-core-modal-icon-button
+                    class="back-button"
+                    data-test="back-button"
+                    label=${this.#localize.term('close')}
+                    @click=${this.#onCloseButtonClick}
+                    ${ref(this.#backButtonElementRef)}
+                  >
+                    ${icons.back}
+                  </glide-core-modal-icon-button>`)}
+              ${this.label}
+            </h2>
+
+            <div class="header-actions" role="toolbar">
+              <slot
+                name="header-actions"
+                ${assertSlot([ModalIconButton], true)}
+                ${ref(this.#headerActionsSlotElementRef)}
+              >
+                <!-- @type {ModalIconButton} -->
+              </slot>
+
+              <glide-core-modal-icon-button
+                class="close-button"
+                data-test="close-button"
+                label=${this.#localize.term('close')}
+                @click=${this.#onCloseButtonClick}
+                ${ref(this.#closeButtonElementRef)}
+              >
+                ${xIcon}
+              </glide-core-modal-icon-button>
+            </div>
+          </div>
+
+          ${when(this.description, () => html `<h3
+                class="description"
+                data-test="description"
+                id="description"
+              >
+                ${this.description}
+              </h3>`)}
+        </header>
+
+        <div
+          aria-labelledby=${this.description
+            ? 'heading description'
+            : 'heading'}
+          class="body"
+          role="region"
+          @scroll=${this.#onScrollAndResize}
+          ${ref(this.#bodyElementRef)}
+        >
+          <slot ${assertSlot()}>
+            <!-- @type {Element | string} -->
+          </slot>
+        </div>
+
+        <footer
+          class=${classMap({
+            footer: true,
+            shadow: this.isScrolledFromBottom,
+        })}
+        >
+          <menu
+            aria-hidden=${!this.hasTertiarySlotContent &&
+            !this.hasSecondarySlotContent &&
+            !this.hasPrimarySlotContent}
+            class="actions"
+          >
+            <li aria-hidden=${!this.hasTertiarySlotContent} class="action">
+              <slot
+                class="tertiary-slot"
+                name="tertiary"
+                @slotchange=${this.#onTertiarySlotChange}
+                ${assertSlot([Button, Tooltip], true)}
+                ${ref(this.#tertiarySlotElementRef)}
+              >
+                <!-- @type {Button | Tooltip} -->
+              </slot>
+            </li>
+
+            <li aria-hidden=${!this.hasSecondarySlotContent} class="action">
+              <slot
+                name="secondary"
+                @slotchange=${this.#onSecondarySlotChange}
+                ${assertSlot([Button], true)}
+                ${ref(this.#secondarySlotElementRef)}
+              >
+                <!-- @type {Button} -->
+              </slot>
+            </li>
+
+            <li aria-hidden=${!this.hasPrimarySlotContent} class="action">
+              <slot
+                name="primary"
+                @slotchange=${this.#onPrimarySlotChange}
+                ${assertSlot([Button], true)}
+                ${ref(this.#primarySlotElementRef)}
+              >
+                <!-- @type {Button} -->
+              </slot>
+            </li>
+          </menu>
+        </footer>
+      </div>
+    </dialog>`;
+    }
+    #backButtonElementRef;
+    #bodyElementRef;
+    #closeButtonElementRef;
+    #componentElementRef;
+    #containerElementRef;
+    #headerActionsSlotElementRef;
+    #isContainerClick;
+    #isOpen;
+    #localize;
+    #primarySlotElementRef;
+    #secondarySlotElementRef;
+    #tertiarySlotElementRef;
+    // An arrow function field instead of a method so `this` is closed over and
+    // set to the component instead of `document`.
+    #onContainerClick;
+    // An arrow function field instead of a method so `this` is closed over and
+    // set to the component instead of `document`.
+    #onDocumentClick;
+    #hide() {
+        document.documentElement.classList.remove('private-glide-core-modal-lock-scroll');
+        this.#componentElementRef.value?.close();
+    }
+    #onCloseButtonClick() {
+        this.open = false;
+    }
+    #onComponentKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.open = false;
+            // Prevent Safari from leaving full screen.
+            event.preventDefault();
+        }
+    }
+    // For the case where the user accidentally mouses down on the Modal's backdrop,
+    // then moves the mouse inside Modal before mousing up. Without this handler, Modal
+    // would close instead of remaining open. The reason it's needed in addition to
+    // the "click" handler is because programmatic clicks don't generate "mousedown"
+    // events. And we ran into a case where a consumer was calling `click()` on an
+    // element inside Modal, inadvertently closing it. Otherwise, this event handler
+    // would suffice.
+    #onContainerMouseup() {
+        this.#isContainerClick = true;
+    }
+    #onPrimarySlotChange() {
+        this.hasPrimarySlotContent = Boolean(this.#primarySlotElementRef.value?.assignedElements().length);
+    }
+    #onScrollAndResize() {
+        if (this.open && this.#bodyElementRef.value) {
+            if (this.#bodyElementRef.value.scrollHeight >
+                this.#bodyElementRef.value.clientHeight) {
+                this.isScrolledFromTop = this.#bodyElementRef.value.scrollTop > 0;
+                this.isScrolledFromBottom =
+                    this.#bodyElementRef.value.scrollHeight -
+                        this.#bodyElementRef.value.scrollTop -
+                        this.#bodyElementRef.value.clientHeight >
+                        0;
+            }
+            else {
+                this.isScrolledFromTop = false;
+                this.isScrolledFromBottom = false;
+            }
+        }
+    }
+    #onSecondarySlotChange() {
+        this.hasSecondarySlotContent = Boolean(this.#secondarySlotElementRef.value?.assignedElements().length);
+    }
+    #onTertiarySlotChange() {
+        this.hasTertiarySlotContent = Boolean(this.#tertiarySlotElementRef.value?.assignedElements().length);
+    }
+    #show() {
+        document.documentElement.classList.add('private-glide-core-modal-lock-scroll');
+        this.#componentElementRef.value?.showModal();
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Modal.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'back-button', type: Boolean, reflect: true })
+], Modal.prototype, "backButton", void 0);
+__decorate([
+    property({ reflect: true })
+], Modal.prototype, "description", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Modal.prototype, "open", null);
+__decorate([
+    property({ reflect: true })
+], Modal.prototype, "severity", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Modal.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], Modal.prototype, "version", void 0);
+__decorate([
+    state()
+], Modal.prototype, "hasPrimarySlotContent", void 0);
+__decorate([
+    state()
+], Modal.prototype, "hasSecondarySlotContent", void 0);
+__decorate([
+    state()
+], Modal.prototype, "hasTertiarySlotContent", void 0);
+__decorate([
+    state()
+], Modal.prototype, "isScrolledFromBottom", void 0);
+__decorate([
+    state()
+], Modal.prototype, "isScrolledFromTop", void 0);
+Modal = __decorate([
+    customElement('glide-core-modal'),
+    final
+], Modal);
+export default Modal;
+const icons = {
+    back: html `
+    <svg
+      style=${styleMap({
+        height: '1.25rem',
+        width: '1.25rem',
+    })}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7 6L3 10L7 14"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+    critical: severityCriticalIcon,
+    informational: severityInformationalIcon,
+    medium: severityMediumIcon,
+};