@patternfly/elements 4.1.0 → 4.2.0

package/pf-modal/pf-modal.js

@@ -11,7 +11,202 @@ import { bound, initializer, observes } from '@patternfly/pfe-core/decorators.js
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const style = css `:host {\n\tdisplay: block;\n\tposition: relative;\n  --_spacer-align-top: var(--pf-c-modal-box--m-align-top--spacer,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --_height-offset: min(var(--_spacer-align-top), var(--pf-global--spacer--2xl, 3rem));\n}\n\n[hidden] {\n  display: none !important;\n}\n\nsection {\n  display: flex;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--pf-c-modal-box--ZIndex,\n    var(--pf-global--ZIndex--xl,\n      500));\n}\n\n#container {\n  position: relative;\n  max-height: inherit;\n}\n\n[part=overlay] {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  background-color: var(--pf-c-backdrop--BackgroundColor,\n      var(--pf-global--BackgroundColor--dark-transparent-100,\n        rgba(3, 3, 3, 0.62)));\n}\n\n[part=dialog] {\n  position: relative;\n  margin: 0 auto;\n\n  width: var(--pf-c-modal-box--Width,\n    calc(100% - var(--pf-global--spacer--xl,2rem)));\n\n  max-width: var(--pf-c-modal-box--MaxWidth,\n    calc(100% - var(--pf-global--spacer--xl,2rem)));\n\n  max-height: var(--pf-c-modal-box--MaxHeight,\n    calc(100% - var(--pf-global--spacer--2xl,3rem)));\n\n  box-shadow: var(--pf-c-modal-box--BoxShadow,\n    var(--pf-global--BoxShadow--xl,\n      0 1rem 2rem 0 rgba(3, 3, 3, 0.16),\n      0 0 0.5rem 0 rgba(3, 3, 3, 0.1)));\n\n\tbackground-color: var(--pf-c-modal-box--BackgroundColor,\n    var(--pf-global--BackgroundColor--100,\n      var(--pf-global--BackgroundColor--100, #fff)));\n\n  padding: var(--pf-global--spacer--lg, 1.5rem);\n  margin-inline: var(--pf-global--spacer--md, 1rem);\n}\n\n:host([width]) [part=dialog],\n:host([variant]) [part=dialog] {\n  margin-inline: 0;\n}\n\n:host([width="small"]) [part=dialog],\n:host([variant="small"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem);\n}\n\n:host([width="medium"]) [part=dialog],\n:host([variant="medium"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width, 52.5rem);\n}\n\n:host([width="large"]) [part=dialog],\n:host([variant="large"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem);\n}\n\n[part=content] {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  max-height: var(--pf-c-modal-box--MaxHeight,\n    calc(100vh - var(--pf-global--spacer--2xl,\n      3rem)));\n\n  box-sizing: border-box;\n}\n\n[part=content] ::slotted([slot="header"]) {\n  margin-top: 0 !important;\n}\n\nheader {\n  position: sticky;\n  top: 0;\n\tbackground-color: var(--pf-c-modal-box--BackgroundColor,\n    var(--pf-global--BackgroundColor--100,\n      var(--pf-global--BackgroundColor--100,\n        #fff)));\n}\n\nheader ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) {\n  font-size: var(--pf-c-modal-box__title--FontSize,\n    var(--pf-global--FontSize--2xl,\n      1.5rem));\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  font-family: var(--pf-c-modal-box__title--FontFamily,\n    var(--pf-global--FontFamily--heading--sans-serif,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)));\n}\n\n[part=close-button] {\n  background-color: transparent;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n\n  position: absolute;\n  cursor: pointer;\n  line-height: 24px;\n  padding-block:\n    var(--pf-c-button--PaddingTop,\n      var(--pf-global--spacer--form-element, 0.375rem));\n  padding-inline:\n    var(--pf-c-button--PaddingRight,\n      var(--pf-global--spacer--md, 1rem));\n  top: 0;\n  right: calc(var(--pf-global--spacer--lg, 1.5rem) / -3);\n  color: var(--pf-c-button--m-plain--Color,\n    var(--pf-global--Color--200,\n      #6a6e73));\n  font-size: var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md,\n      1rem));\n}\n\n[part=close-button]:is(:focus-within, :focus-visible, :hover) {\n  color: var(--pf-c-button--m-plain--focus--Color, var(--pf-global--Color--100, #151515));\n}\n\n[part=close-button] > svg {\n  font-size: 16px;\n  width: var(--pf-global--spacer--md, 1rem);\n  aspect-ratio: 1/1;\n}\n\n:host([position="top"]) #dialog {\n  align-self: start;\n\n  margin-block: var(--pf-c-modal-box--m-align-top--MarginTop,\n    var(--pf-c-modal-box--m-align-top--spacer,\n      2rem));\n\n  margin-inline: var(--pf-global--spacer--md, 1rem);\n\n  width: 100%;\n\n  max-width: var(--pf-c-modal-box--m-align-top--MaxWidth,\n    calc(100% - min(\n      var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2,\n      var(--pf-global--spacer--xl, 2rem))));\n\n  max-height: var(--pf-c-modal-box--m-align-top--MaxHeight,\n    calc(100% - var(--_height-offset) - var(--_spacer-align-top)));\n}\n\nfooter {\n  display: flex;\n  align-items: center;\n  gap: var(--pf-global--spacer--xl, 0.5rem);\n}\n`;
+const style = css `:host {
+\tdisplay: block;
+\tposition: relative;
+  --_spacer-align-top: var(--pf-c-modal-box--m-align-top--spacer,
+    var(--pf-global--spacer--sm, 0.5rem));
+  --_height-offset: min(var(--_spacer-align-top), var(--pf-global--spacer--2xl, 3rem));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+section {
+  display: flex;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  /** Z-index for modal box */
+  z-index: var(--pf-c-modal-box--ZIndex,
+    var(--pf-global--ZIndex--xl,
+      500));
+}
+
+#container {
+  position: relative;
+  max-height: inherit;
+}
+
+[part=overlay] {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--pf-c-backdrop--BackgroundColor,
+      var(--pf-global--BackgroundColor--dark-transparent-100,
+        rgba(3, 3, 3, 0.62)));
+}
+
+[part=dialog] {
+  position: relative;
+  margin: 0 auto;
+
+  /** Width of modal */
+  width: var(--pf-c-modal-box--Width,
+    calc(100% - var(--pf-global--spacer--xl,2rem)));
+
+  /** Max width of modal */
+  max-width: var(--pf-c-modal-box--MaxWidth,
+    calc(100% - var(--pf-global--spacer--xl,2rem)));
+
+  /** Max height of modal */
+  max-height: var(--pf-c-modal-box--MaxHeight,
+    calc(100% - var(--pf-global--spacer--2xl,3rem)));
+
+  /** Box shadow for modal */
+  box-shadow: var(--pf-c-modal-box--BoxShadow,
+    var(--pf-global--BoxShadow--xl,
+      0 1rem 2rem 0 rgba(3, 3, 3, 0.16),
+      0 0 0.5rem 0 rgba(3, 3, 3, 0.1)));
+
+\t/** Background color for modal */
+\tbackground-color: var(--pf-c-modal-box--BackgroundColor,
+    var(--pf-global--BackgroundColor--100,
+      var(--pf-global--BackgroundColor--100, #fff)));
+
+  padding: var(--pf-global--spacer--lg, 1.5rem);
+  margin-inline: var(--pf-global--spacer--md, 1rem);
+}
+
+:host([width]) [part=dialog],
+:host([variant]) [part=dialog] {
+  margin-inline: 0;
+}
+
+:host([width="small"]) [part=dialog],
+:host([variant="small"]) [part=dialog] {
+  /** Max width for small modal */
+  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem);
+}
+
+:host([width="medium"]) [part=dialog],
+:host([variant="medium"]) [part=dialog] {
+  /** Max width for medium modal */
+  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width, 52.5rem);
+}
+
+:host([width="large"]) [part=dialog],
+:host([variant="large"]) [part=dialog] {
+  /** Max width for large modal */
+  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem);
+}
+
+[part=content] {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  max-height: var(--pf-c-modal-box--MaxHeight,
+    calc(100vh - var(--pf-global--spacer--2xl,
+      3rem)));
+
+  box-sizing: border-box;
+}
+
+[part=content] ::slotted([slot="header"]) {
+  margin-top: 0 !important;
+}
+
+header {
+  position: sticky;
+  top: 0;
+\tbackground-color: var(--pf-c-modal-box--BackgroundColor,
+    var(--pf-global--BackgroundColor--100,
+      var(--pf-global--BackgroundColor--100,
+        #fff)));
+}
+
+header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) {
+  /** Font size for modal title */
+  font-size: var(--pf-c-modal-box__title--FontSize,
+    var(--pf-global--FontSize--2xl,
+      1.5rem));
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+  /** Font family for modal title */
+  font-family: var(--pf-c-modal-box__title--FontFamily,
+    var(--pf-global--FontFamily--heading--sans-serif,
+      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
+        "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)));
+}
+
+[part=close-button] {
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+
+  position: absolute;
+  cursor: pointer;
+  line-height: 24px;
+  padding-block:
+    var(--pf-c-button--PaddingTop,
+      var(--pf-global--spacer--form-element, 0.375rem));
+  padding-inline:
+    var(--pf-c-button--PaddingRight,
+      var(--pf-global--spacer--md, 1rem));
+  top: 0;
+  right: calc(var(--pf-global--spacer--lg, 1.5rem) / -3);
+  color: var(--pf-c-button--m-plain--Color,
+    var(--pf-global--Color--200,
+      #6a6e73));
+  font-size: var(--pf-c-button--FontSize,
+    var(--pf-global--FontSize--md,
+      1rem));
+}
+
+[part=close-button]:is(:focus-within, :focus-visible, :hover) {
+  color: var(--pf-c-button--m-plain--focus--Color, var(--pf-global--Color--100, #151515));
+}
+
+[part=close-button] > svg {
+  font-size: 16px;
+  width: var(--pf-global--spacer--md, 1rem);
+  aspect-ratio: 1/1;
+}
+
+:host([position="top"]) #dialog {
+  align-self: start;
+
+  margin-block: var(--pf-c-modal-box--m-align-top--MarginTop,
+    var(--pf-c-modal-box--m-align-top--spacer,
+      2rem));
+
+  margin-inline: var(--pf-global--spacer--md, 1rem);
+
+  width: 100%;
+
+  max-width: var(--pf-c-modal-box--m-align-top--MaxWidth,
+    calc(100% - min(
+      var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2,
+      var(--pf-global--spacer--xl, 2rem))));
+
+  max-height: var(--pf-c-modal-box--m-align-top--MaxHeight,
+    calc(100% - var(--_height-offset) - var(--_spacer-align-top)));
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-global--spacer--xl, 0.5rem);
+}
+`;
 export class ModalCancelEvent extends ComposedEvent {
     constructor() {
         super('cancel');
@@ -57,7 +252,9 @@ let PfModal = class PfModal extends LitElement {
         const hasFooter = __classPrivateFieldGet(this, _PfModal_slots, "f").hasSlotted('footer');
         return html `
       <section ?hidden=${!this.open}>
+        <!-- summary: The modal overlay which lies under the dialog and above the page body -->
         <div id="overlay" part="overlay" ?hidden=${!this.open}></div>
+        <!-- summary: The dialog element -->
         <div id="dialog"
             part="dialog"
             tabindex="0"
@@ -66,18 +263,34 @@ let PfModal = class PfModal extends LitElement {
             aria-label=${ifDefined(headerLabel)}
             ?hidden="${!this.open}">
           <div id="container">
+            <!-- summary: The container for the dialog content -->
             <div id="content" part="content" class=${classMap({ hasHeader, hasDescription, hasFooter })}>
+              <!-- summary: The container for the optional dialog header -->
               <header part="header">
+                <!-- summary: Heading tag
+                     description: |
+                       The header is an optional slot that appears at the top of the modal window.
+                       It should be a heading tag (h2-h6). -->
                 <slot name="header"></slot>
+                <!-- summary: The container for the optional dialog description in the header -->
                 <div part="description" ?hidden=${!hasDescription}>
                   <slot name="description"></slot>
                 </div>
               </header>
+              <!--
+                summary: Modal dialog content
+                description: |
+                  The default slot can contain any type of content. When the header is not present,
+                  this unnamed slot appear at the top of the modal window (to the left of the close
+                  button). Otherwise it will appear beneath the header. -->
               <slot></slot>
+              <!-- summary: Actions footer container -->
               <footer ?hidden=${!hasFooter} part="footer">
+                <!-- summary: Optional footer content. Good place to put action buttons. -->
                 <slot name="footer"></slot>
               </footer>
             </div>
+            <!-- summary: The modal's close button -->
             <button id="close-button"
                 part="close-button"
                 aria-label="Close dialog"
@@ -242,7 +455,7 @@ PfModal.shadowRootOptions = {
 PfModal.styles = [style];
 /** Should the dialog close when user clicks outside the dialog? */
 PfModal.closeOnOutsideClick = false;
-PfModal.version = "4.1.0";
+PfModal.version = "4.2.0";
 __decorate([
     property({ reflect: true })
 ], PfModal.prototype, "variant", void 0);

package/pf-modal/pf-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["pf-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { bound, initializer, observes } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-modal.css';\n\nexport class ModalCancelEvent extends ComposedEvent {\n  constructor() {\n    super('cancel');\n  }\n}\n\nexport class ModalCloseEvent extends ComposedEvent {\n  constructor() {\n    super('close');\n  }\n}\n\nexport class ModalOpenEvent extends ComposedEvent {\n  constructor(\n    /** The trigger element which triggered the modal to open */\n    public trigger: HTMLElement | null\n  ) {\n    super('open');\n  }\n}\n\n/**\n * A **modal** displays important information to a user without requiring them to navigate\n * to a new page.\n * @summary Displays information or helps a user focus on a task\n * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.\n * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).\n * @slot footer - Optional footer content. Good place to put action buttons.\n * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.\n * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.\n * @csspart overlay - The modal overlay which lies under the dialog and above the page body\n * @csspart dialog - The dialog element\n * @csspart content - The container for the dialog content\n * @csspart header - The container for the optional dialog header\n * @csspart description - The container for the optional dialog description in the header\n * @csspart close-button - The modal's close button\n * @csspart footer - Actions footer container\n * @cssprop {<length>} [--pf-c-modal-box--ZIndex=500]\n * @cssprop {<length>} [--pf-c-modal-box--Width=calc(100 - 2rem)] - Width of the modal\n * @cssprop {<length>} [--pf-c-modal-box--MaxWidth=calc(100 - 2rem)] - Max width of the modal\n * @cssprop {<length>} [--pf-c-modal-box--m-sm--sm--MaxWidth=35rem] - Max width of the small variant modal\n * @cssprop {<length>} [--pf-c-modal-box--m-md--MaxWidth=52.5rem] - Max width of the small variant modal\n * @cssprop {<length>} [--pf-c-modal-box--m-lg--lg--MaxWidth=70rem] - Max width of the large variant modal\n * @cssprop {<length>} [--pf-c-modal-box--MaxHeight=calc(100 - 3rem)] - Max height of the modal\n * @cssprop {<length>} [--pf-c-modal-box--BoxShadow=var(--pf-global--BoxShadow--xl)] -\n * @cssprop {<length>} [--pf-c-modal-box__title--FontSize=1.5rem] -\n * @cssprop {<length>} [--pf-c-modal-box--m-align-top--MarginTop=2rem] -\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight\n * @cssprop {<color>} [--pf-c-modal-box--BackgroundColor=#fff] -\n * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings\n */\n@customElement('pf-modal')\nexport class PfModal extends LitElement implements HTMLDialogElement {\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** Should the dialog close when user clicks outside the dialog? */\n  protected static closeOnOutsideClick = false;\n\n  /**\n   * The `variant` controls the width of the modal.\n   * There are three options: `small`, `medium` and `large`. The default is `large`.\n   */\n  @property({ reflect: true }) variant?: 'small' | 'medium' | 'large';\n\n  /**\n   * `position=\"top\"` aligns the dialog with the top of the page\n   */\n  @property({ reflect: true }) position?: 'top';\n\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @property() trigger?: string;\n\n  /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */\n  public returnValue = '';\n\n  @query('#overlay') private overlay?: HTMLElement | null;\n  @query('#dialog') private dialog?: HTMLElement | null;\n  @query('#close-button') private closeButton?: HTMLElement | null;\n\n  #headerId = getRandomId();\n  #triggerElement: HTMLElement | null = null;\n  #header: HTMLElement | null = null;\n  #body: Element[] = [];\n  #headings: Element[] = [];\n  #cancelling = false;\n\n  #slots = new SlotController(this, null, 'header', 'description', 'footer');\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render(): TemplateResult<1> {\n    const headerId = (this.#header || this.#headings.length) ? this.#headerId : undefined;\n    const headerLabel = this.#triggerElement ? this.#triggerElement.innerText : undefined;\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasDescription = this.#slots.hasSlotted('description');\n    const hasFooter = this.#slots.hasSlotted('footer');\n\n    return html`\n      <section ?hidden=${!this.open}>\n        <div id=\"overlay\" part=\"overlay\" ?hidden=${!this.open}></div>\n        <div id=\"dialog\"\n            part=\"dialog\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-labelledby=${ifDefined(headerId)}\n            aria-label=${ifDefined(headerLabel)}\n            ?hidden=\"${!this.open}\">\n          <div id=\"container\">\n            <div id=\"content\" part=\"content\" class=${classMap({ hasHeader, hasDescription, hasFooter })}>\n              <header part=\"header\">\n                <slot name=\"header\"></slot>\n                <div part=\"description\" ?hidden=${!hasDescription}>\n                  <slot name=\"description\"></slot>\n                </div>\n              </header>\n              <slot></slot>\n              <footer ?hidden=${!hasFooter} part=\"footer\">\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n            <button id=\"close-button\"\n                part=\"close-button\"\n                aria-label=\"Close dialog\"\n                @keydown=${this.onKeydown}\n                @click=${this.close}>\n              <svg fill=\"currentColor\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.onKeydown);\n\n    this.#triggerElement?.removeEventListener('click', this.onTriggerClick);\n  }\n\n  @initializer()\n  protected async _init(): Promise<void> {\n    await this.updateComplete;\n    this.#header = this.querySelector(`[slot$=\"header\"]`);\n    this.#body = [...this.querySelectorAll(`*:not([slot])`)];\n    this.#headings = this.#body.filter(el => el.tagName.slice(0, 1) === 'H');\n\n    if (this.#triggerElement) {\n      this.#triggerElement.addEventListener('click', this.onTriggerClick);\n      this.removeAttribute('hidden');\n    }\n\n    if (this.#header) {\n      this.#header.id = this.#headerId;\n    } else if (this.#headings.length > 0) {\n      // Get the first heading in the modal if it exists\n      this.#headings[0].id = this.#headerId;\n    }\n  }\n\n  @observes('open')\n  protected async openChanged(oldValue?: boolean, newValue?: boolean): Promise<void> {\n    // loosening types to prevent running these effects in unexpected circumstances\n    // eslint-disable-next-line eqeqeq\n    if (oldValue == null || newValue == null || oldValue == newValue) {\n      return;\n    } else if (this.open) {\n      // This prevents background scroll\n      document.body.style.overflow = 'hidden';\n      await this.updateComplete;\n      // Set the focus to the container\n      this.dialog?.focus();\n      this.dispatchEvent(new ModalOpenEvent(this.#triggerElement));\n    } else {\n      // Return scrollability\n      document.body.style.overflow = 'auto';\n\n      await this.updateComplete;\n\n      if (this.#triggerElement) {\n        this.#triggerElement.focus();\n      }\n\n      this.dispatchEvent(this.#cancelling ? new ModalCancelEvent() : new ModalCloseEvent());\n    }\n  }\n\n  @observes('trigger')\n  protected triggerChanged(): void {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot)\n          .getElementById(this.trigger);\n      this.#triggerElement?.addEventListener('click', this.onTriggerClick);\n    }\n  }\n\n  @bound private onTriggerClick(event: MouseEvent) {\n    event.preventDefault();\n    // TODO: in non-modal case, toggle the dialog\n    this.showModal();\n  }\n\n  @bound private onClick(event: MouseEvent) {\n    const { open, overlay, dialog } = this;\n    if (open) {\n      const path = event.composedPath();\n      const { closeOnOutsideClick } = this.constructor as typeof PfModal;\n\n      if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) {\n        event.preventDefault();\n        this.cancel();\n      }\n    }\n  }\n\n  @bound private onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Tab':\n        if (event.target === this.closeButton) {\n          event.preventDefault();\n          this.dialog?.focus();\n        }\n        return;\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.cancel();\n        return;\n      case 'Enter':\n        if (event.target === this.#triggerElement) {\n          event.preventDefault();\n          this.showModal();\n        }\n        return;\n    }\n  }\n\n  private async cancel() {\n    this.#cancelling = true;\n    this.open = false;\n    await this.updateComplete;\n    this.#cancelling = false;\n  }\n\n  setTrigger(element: HTMLElement): void {\n    this.#triggerElement = element;\n    this.#triggerElement.addEventListener('click', this.onTriggerClick);\n  }\n\n  /**\n   * Manually toggles the modal.\n   * ```js\n   * modal.toggle();\n   * ```\n   */\n  @bound toggle(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show(): void {\n    this.open = true;\n  }\n\n  @bound showModal(): void {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   * @param returnValue dialog return value\n   */\n  @bound close(returnValue?: string): void {\n    if (typeof returnValue === 'string') {\n      this.returnValue = returnValue;\n    }\n\n    this.open = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-modal': PfModal;\n  }\n}\n"]}
+{"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["pf-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { bound, initializer, observes } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-modal.css';\n\nexport class ModalCancelEvent extends ComposedEvent {\n  constructor() {\n    super('cancel');\n  }\n}\n\nexport class ModalCloseEvent extends ComposedEvent {\n  constructor() {\n    super('close');\n  }\n}\n\nexport class ModalOpenEvent extends ComposedEvent {\n  constructor(\n    /** The trigger element which triggered the modal to open */\n    public trigger: HTMLElement | null\n  ) {\n    super('open');\n  }\n}\n\n/**\n * A **modal** displays important information to a user without requiring them to navigate\n * to a new page.\n * @summary Displays information or helps a user focus on a task\n * @alias Modal\n * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.\n * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.\n */\n@customElement('pf-modal')\nexport class PfModal extends LitElement implements HTMLDialogElement {\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** Should the dialog close when user clicks outside the dialog? */\n  protected static closeOnOutsideClick = false;\n\n  /**\n   * The `variant` controls the width of the modal.\n   * There are three options: `small`, `medium` and `large`. The default is `large`.\n   */\n  @property({ reflect: true }) variant?: 'small' | 'medium' | 'large';\n\n  /**\n   * `position=\"top\"` aligns the dialog with the top of the page\n   */\n  @property({ reflect: true }) position?: 'top';\n\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @property() trigger?: string;\n\n  /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */\n  public returnValue = '';\n\n  @query('#overlay') private overlay?: HTMLElement | null;\n  @query('#dialog') private dialog?: HTMLElement | null;\n  @query('#close-button') private closeButton?: HTMLElement | null;\n\n  #headerId = getRandomId();\n  #triggerElement: HTMLElement | null = null;\n  #header: HTMLElement | null = null;\n  #body: Element[] = [];\n  #headings: Element[] = [];\n  #cancelling = false;\n\n  #slots = new SlotController(this, null, 'header', 'description', 'footer');\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render(): TemplateResult<1> {\n    const headerId = (this.#header || this.#headings.length) ? this.#headerId : undefined;\n    const headerLabel = this.#triggerElement ? this.#triggerElement.innerText : undefined;\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasDescription = this.#slots.hasSlotted('description');\n    const hasFooter = this.#slots.hasSlotted('footer');\n\n    return html`\n      <section ?hidden=${!this.open}>\n        <!-- summary: The modal overlay which lies under the dialog and above the page body -->\n        <div id=\"overlay\" part=\"overlay\" ?hidden=${!this.open}></div>\n        <!-- summary: The dialog element -->\n        <div id=\"dialog\"\n            part=\"dialog\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-labelledby=${ifDefined(headerId)}\n            aria-label=${ifDefined(headerLabel)}\n            ?hidden=\"${!this.open}\">\n          <div id=\"container\">\n            <!-- summary: The container for the dialog content -->\n            <div id=\"content\" part=\"content\" class=${classMap({ hasHeader, hasDescription, hasFooter })}>\n              <!-- summary: The container for the optional dialog header -->\n              <header part=\"header\">\n                <!-- summary: Heading tag\n                     description: |\n                       The header is an optional slot that appears at the top of the modal window.\n                       It should be a heading tag (h2-h6). -->\n                <slot name=\"header\"></slot>\n                <!-- summary: The container for the optional dialog description in the header -->\n                <div part=\"description\" ?hidden=${!hasDescription}>\n                  <slot name=\"description\"></slot>\n                </div>\n              </header>\n              <!--\n                summary: Modal dialog content\n                description: |\n                  The default slot can contain any type of content. When the header is not present,\n                  this unnamed slot appear at the top of the modal window (to the left of the close\n                  button). Otherwise it will appear beneath the header. -->\n              <slot></slot>\n              <!-- summary: Actions footer container -->\n              <footer ?hidden=${!hasFooter} part=\"footer\">\n                <!-- summary: Optional footer content. Good place to put action buttons. -->\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n            <!-- summary: The modal's close button -->\n            <button id=\"close-button\"\n                part=\"close-button\"\n                aria-label=\"Close dialog\"\n                @keydown=${this.onKeydown}\n                @click=${this.close}>\n              <svg fill=\"currentColor\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.onKeydown);\n\n    this.#triggerElement?.removeEventListener('click', this.onTriggerClick);\n  }\n\n  @initializer()\n  protected async _init(): Promise<void> {\n    await this.updateComplete;\n    this.#header = this.querySelector(`[slot$=\"header\"]`);\n    this.#body = [...this.querySelectorAll(`*:not([slot])`)];\n    this.#headings = this.#body.filter(el => el.tagName.slice(0, 1) === 'H');\n\n    if (this.#triggerElement) {\n      this.#triggerElement.addEventListener('click', this.onTriggerClick);\n      this.removeAttribute('hidden');\n    }\n\n    if (this.#header) {\n      this.#header.id = this.#headerId;\n    } else if (this.#headings.length > 0) {\n      // Get the first heading in the modal if it exists\n      this.#headings[0].id = this.#headerId;\n    }\n  }\n\n  @observes('open')\n  protected async openChanged(oldValue?: boolean, newValue?: boolean): Promise<void> {\n    // loosening types to prevent running these effects in unexpected circumstances\n    // eslint-disable-next-line eqeqeq\n    if (oldValue == null || newValue == null || oldValue == newValue) {\n      return;\n    } else if (this.open) {\n      // This prevents background scroll\n      document.body.style.overflow = 'hidden';\n      await this.updateComplete;\n      // Set the focus to the container\n      this.dialog?.focus();\n      this.dispatchEvent(new ModalOpenEvent(this.#triggerElement));\n    } else {\n      // Return scrollability\n      document.body.style.overflow = 'auto';\n\n      await this.updateComplete;\n\n      if (this.#triggerElement) {\n        this.#triggerElement.focus();\n      }\n\n      this.dispatchEvent(this.#cancelling ? new ModalCancelEvent() : new ModalCloseEvent());\n    }\n  }\n\n  @observes('trigger')\n  protected triggerChanged(): void {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot)\n          .getElementById(this.trigger);\n      this.#triggerElement?.addEventListener('click', this.onTriggerClick);\n    }\n  }\n\n  @bound private onTriggerClick(event: MouseEvent) {\n    event.preventDefault();\n    // TODO: in non-modal case, toggle the dialog\n    this.showModal();\n  }\n\n  @bound private onClick(event: MouseEvent) {\n    const { open, overlay, dialog } = this;\n    if (open) {\n      const path = event.composedPath();\n      const { closeOnOutsideClick } = this.constructor as typeof PfModal;\n\n      if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) {\n        event.preventDefault();\n        this.cancel();\n      }\n    }\n  }\n\n  @bound private onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Tab':\n        if (event.target === this.closeButton) {\n          event.preventDefault();\n          this.dialog?.focus();\n        }\n        return;\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.cancel();\n        return;\n      case 'Enter':\n        if (event.target === this.#triggerElement) {\n          event.preventDefault();\n          this.showModal();\n        }\n        return;\n    }\n  }\n\n  private async cancel() {\n    this.#cancelling = true;\n    this.open = false;\n    await this.updateComplete;\n    this.#cancelling = false;\n  }\n\n  setTrigger(element: HTMLElement): void {\n    this.#triggerElement = element;\n    this.#triggerElement.addEventListener('click', this.onTriggerClick);\n  }\n\n  /**\n   * Manually toggles the modal.\n   * ```js\n   * modal.toggle();\n   * ```\n   */\n  @bound toggle(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show(): void {\n    this.open = true;\n  }\n\n  @bound showModal(): void {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   * @param returnValue dialog return value\n   */\n  @bound close(returnValue?: string): void {\n    if (typeof returnValue === 'string') {\n      this.returnValue = returnValue;\n    }\n\n    this.open = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-modal': PfModal;\n  }\n}\n"]}

package/pf-panel/pf-panel.css

@@ -1,33 +1,62 @@
 :host {
   /* NB: upstream sets these on the container, which is why we do not use fallbacks here. */
+  /** Width of panel */
   --pf-c-panel--Width: auto;
+  /** Minimum width of panel */
   --pf-c-panel--MinWidth: auto;
+  /** Maximum width of panel */
   --pf-c-panel--MaxWidth: none;
+  /** Z-index of panel */
   --pf-c-panel--ZIndex: auto;
+  /** Background color of panel */
   --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+  /** Box shadow of panel */
   --pf-c-panel--BoxShadow: none;
+  /** Border width of panel before element */
   --pf-c-panel--before--BorderWidth: 0;
+  /** Border color of panel before element */
   --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Border width of bordered panel before element */
   --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Box shadow of raised panel */
   --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+  /** Z-index of raised panel */
   --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);
+  /** Top padding of panel header */
   --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel header */
   --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel header */
   --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel header */
   --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Maximum height of panel main */
   --pf-c-panel__main--MaxHeight: none;
+  /** Overflow of panel main */
   --pf-c-panel__main--Overflow: visible;
+  /** Top padding of panel main body */
   --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel main body */
   --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel main body */
   --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel main body */
   --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Top padding of panel footer */
   --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
+  /** Right padding of panel footer */
   --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Bottom padding of panel footer */
   --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+  /** Left padding of panel footer */
   --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Box shadow of panel footer */
   --pf-c-panel__footer--BoxShadow: none;
+  /** Maximum height of scrollable panel main */
   --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
+  /** Overflow of scrollable panel main */
   --pf-c-panel--m-scrollable__main--Overflow: auto;
+  /** Box shadow of scrollable panel footer */
   --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
   position: relative;
   z-index: var(--pf-c-panel--ZIndex);

package/pf-panel/pf-panel.d.ts

@@ -4,38 +4,7 @@ import { LitElement, type TemplateResult } from 'lit';
  * be used to house other components such as fields, forms, videos, buttons, and more.
  * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
  * component, which allows you to surface information via a collapsable container.
- * @slot header - Place header content here
- * @slot - Place main content here
- * @slot footer - Place footer content here
- * @cssprop [--pf-c-panel--Width=auto]
- * @cssprop [--pf-c-panel--MinWidth=auto]
- * @cssprop [--pf-c-panel--MaxWidth=none]
- * @cssprop [--pf-c-panel--ZIndex=auto]
- * @cssprop [--pf-c-panel--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
- * @cssprop [--pf-c-panel--BoxShadow=none]
- * @cssprop [--pf-c-panel--before--BorderWidth=0]
- * @cssprop [--pf-c-panel--before--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-panel--m-bordered--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-panel--m-raised--BoxShadow=var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))]
- * @cssprop [--pf-c-panel--m-raised--ZIndex=var(--pf-global--ZIndex--sm, 200)]
- * @cssprop [--pf-c-panel__header--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__header--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__header--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__header--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main--MaxHeight=none]
- * @cssprop [--pf-c-panel__main--Overflow=visible]
- * @cssprop [--pf-c-panel__main-body--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__main-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-panel__footer--BoxShadow=none]
- * @cssprop [--pf-c-panel--m-scrollable__main--MaxHeight=18.75rem]
- * @cssprop [--pf-c-panel--m-scrollable__main--Overflow=auto]
- * @cssprop [--pf-c-panel--m-scrollable__footer--BoxShadow=0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)]
+ * @alias Panel
  */
 export declare class PfPanel extends LitElement {
     #private;