@patternfly/elements 2.0.0-rc.4 → 2.0.0-rc.6

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 } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.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, deprecation, initializer, observed } 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 * Modals display information in a window or help a user focus on a task without navigating them away from the page.\n * A user can’t perform other actions until the modal is dismissed.\n *\n * @summary Displays information or helps a user focus on a task\n *\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 *\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 * @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 *\n * @cssprop {<length>} --pf-c-modal-box--ZIndex {@default 500}\n * @cssprop {<length>} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--m-sm--sm--MaxWidth - Max width of the small variant modal {@default 35rem}\n * @cssprop {<length>} --pf-c-modal-box--m-md--MaxWidth - Max width of the small variant modal {@default 52.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-lg--lg--MaxWidth - Max width of the large variant modal {@default 70rem}\n * @cssprop {<length>} --pf-c-modal-box--MaxHeight - Max height of the modal {@default calc(100% - 3rem)}\n * @cssprop {<length>} --pf-c-modal-box--BoxShadow - {@default var(--pf-global--BoxShadow--xl)}\n * @cssprop {<length>} --pf-c-modal-box__title--FontSize - {@default 1.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MarginTop - {@default 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 - {@default #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 readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static readonly styles = [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  @deprecation({ alias: 'variant', attribute: 'width' }) width?: '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  @observed\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @observed\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() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render() {\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() {\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() {\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  protected async _openChanged(oldValue?: boolean, newValue?: boolean) {\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  protected _triggerChanged() {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot).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      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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) {\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() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show() {\n    this.open = true;\n  }\n\n  @bound showModal() {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   */\n  @bound close(returnValue?: string) {\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 } 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, deprecation, initializer, observed } 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 * Modals display information in a window or help a user focus on a task without navigating them away from the page.\n * A user can’t perform other actions until the modal is dismissed.\n *\n * @summary Displays information or helps a user focus on a task\n *\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 *\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 * @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 *\n * @cssprop {<length>} --pf-c-modal-box--ZIndex {@default 500}\n * @cssprop {<length>} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--m-sm--sm--MaxWidth - Max width of the small variant modal {@default 35rem}\n * @cssprop {<length>} --pf-c-modal-box--m-md--MaxWidth - Max width of the small variant modal {@default 52.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-lg--lg--MaxWidth - Max width of the large variant modal {@default 70rem}\n * @cssprop {<length>} --pf-c-modal-box--MaxHeight - Max height of the modal {@default calc(100% - 3rem)}\n * @cssprop {<length>} --pf-c-modal-box--BoxShadow - {@default var(--pf-global--BoxShadow--xl)}\n * @cssprop {<length>} --pf-c-modal-box__title--FontSize - {@default 1.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MarginTop - {@default 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 - {@default #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 readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static readonly styles = [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  @deprecation({ alias: 'variant', attribute: 'width' }) width?: '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  @observed\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @observed\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() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render() {\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() {\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() {\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  protected async _openChanged(oldValue?: boolean, newValue?: boolean) {\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  protected _triggerChanged() {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot).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      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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) {\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() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show() {\n    this.open = true;\n  }\n\n  @bound showModal() {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   */\n  @bound close(returnValue?: string) {\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/README.md

@@ -0,0 +1,10 @@
+# Panel
+Panel contains content with optional header and footer content.
+
+## Usage
+
+```html
+<pf-panel>
+  <p>Panel content</p>
+</pf-panel>
+```

package/pf-panel/pf-panel.js

@@ -1,10 +1,11 @@
 var _PfPanel_slots;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const styles = css `:host {\n  /* NB: upstream sets these on the container, which is why we do not use fallbacks here. */\n  --pf-c-panel--Width: auto;\n  --pf-c-panel--MinWidth: auto;\n  --pf-c-panel--MaxWidth: none;\n  --pf-c-panel--ZIndex: auto;\n  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n  --pf-c-panel--BoxShadow: none;\n  --pf-c-panel--before--BorderWidth: 0;\n  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-panel--m-raised--BoxShadow: pfglobalvar(--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));\n  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);\n  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main--MaxHeight: none;\n  --pf-c-panel__main--Overflow: visible;\n  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--BoxShadow: none;\n  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;\n  --pf-c-panel--m-scrollable__main--Overflow: auto;\n  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);\n  position: relative;\n  z-index: var(--pf-c-panel--ZIndex);\n  width: var(--pf-c-panel--Width);\n  min-width: var(--pf-c-panel--MinWidth);\n  max-width: var(--pf-c-panel--MaxWidth);\n  background-color: var(--pf-c-panel--BackgroundColor);\n  box-shadow: var(--pf-c-panel--BoxShadow);\n}\n\n:host([variant="bordered"])::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  border:\n    var(--pf-c-panel--before--BorderWidth,\n      var(--pf-c-panel--m-bordered--before--BorderWidth,\n        var(--pf-global--BorderWidth--sm, 1px)))\n    solid\n    var(--pf-c-panel--before--BorderColor,\n      var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([variant="raised"]) {\n  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,\n    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)));\n  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex,\n    var(--pf-global--ZIndex--sm, 200));\n}\n\n:host([scrollable]) {\n  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);\n  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);\n  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot {\n  display: block;\n}\n\nslot:not([name]) {\n  max-height: var(--pf-c-panel__main--MaxHeight);\n  overflow: var(--pf-c-panel__main--Overflow);\n  padding:\n    var(--pf-c-panel__main-body--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n}\n\nslot[name="header"] {\n  padding:\n    var(--pf-c-panel__header--PaddingTop)\n    var(--pf-c-panel__header--PaddingRight)\n    var(--pf-c-panel__header--PaddingBottom)\n    var(--pf-c-panel__header--PaddingLeft);\n}\n\nslot[name="footer"] {\n  padding:\n    var(--pf-c-panel__footer--PaddingTop)\n    var(--pf-c-panel__footer--PaddingRight)\n    var(--pf-c-panel__footer--PaddingBottom)\n    var(--pf-c-panel__footer--PaddingLeft);\n  box-shadow: var(--pf-c-panel__footer--BoxShadow);\n}\n\nhr {\n  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);\n  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);\n  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);\n  --pf-c-divider--after--FlexBasis: 100%;\n  --pf-c-divider--after--Inset: 0%;\n  --pf-c-divider--m-vertical--after--FlexBasis: 100%;\n  --pf-c-divider--m-horizontal--Display: flex;\n  --pf-c-divider--m-horizontal--FlexDirection: row;\n  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);\n  --pf-c-divider--m-horizontal--after--Width: auto;\n  --pf-c-divider--m-vertical--Display: inline-flex;\n  --pf-c-divider--m-vertical--FlexDirection: column;\n  --pf-c-divider--m-vertical--after--Height: auto;\n  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);\n  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);\n  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);\n  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);\n  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);\n  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);\n  width: 100%;\n  height: auto;\n  display: var(--pf-c-divider--Display);\n  flex-direction: var(--pf-c-divider--FlexDirection);\n  align-items: center;\n  align-self: stretch;\n  flex-shrink: 0;\n  justify-content: center;\n  border: 0;\n}\n\nhr::after {\n  align-self: stretch;\n  width: var(--pf-c-divider--after--Width);\n  height: var(--pf-c-divider--after--Height);\n  content: "";\n  background-color: var(--pf-c-divider--after--BackgroundColor);\n  justify-self: center;\n  padding: 0;\n  margin: 0;\n  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):first-of-type) {\n  margin-block-start: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):last-of-type) {\n  margin-block-end: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):is(:last-of-type, :first-of-type)) {\n  margin-block: 0;\n}\n`;
+const styles = css `:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:pfglobalvar(--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));--pf-c-panel--m-raised--ZIndex:var(--pf-global--ZIndex--sm, 200);--pf-c-panel__header--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main--MaxHeight:none;--pf-c-panel__main--Overflow:visible;--pf-c-panel__main-body--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--BoxShadow:none;--pf-c-panel--m-scrollable__main--MaxHeight:18.75rem;--pf-c-panel--m-scrollable__main--Overflow:auto;--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);width:var(--pf-c-panel--Width);min-width:var(--pf-c-panel--MinWidth);max-width:var(--pf-c-panel--MaxWidth);background-color:var(--pf-c-panel--BackgroundColor);box-shadow:var(--pf-c-panel--BoxShadow)}:host([variant=bordered])::before{position:absolute;inset:0;pointer-events:none;content:"";border:var(--pf-c-panel--before--BorderWidth,var(--pf-c-panel--m-bordered--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px))) solid var(--pf-c-panel--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([variant=raised]){--pf-c-panel--BoxShadow:var(--pf-c-panel--m-raised--BoxShadow,\n    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)));--pf-c-panel--ZIndex:var(--pf-c-panel--m-raised--ZIndex,\n    var(--pf-global--ZIndex--sm, 200))}:host([scrollable]){--pf-c-panel__main--MaxHeight:var(--pf-c-panel--m-scrollable__main--MaxHeight);--pf-c-panel__main--Overflow:var(--pf-c-panel--m-scrollable__main--Overflow);--pf-c-panel__footer--BoxShadow:var(--pf-c-panel--m-scrollable__footer--BoxShadow)}[hidden]{display:none!important}slot{display:block}slot:not([name]){max-height:var(--pf-c-panel__main--MaxHeight);overflow:var(--pf-c-panel__main--Overflow);padding:var(--pf-c-panel__main-body--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}slot[name=header]{padding:var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft)}slot[name=footer]{padding:var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);box-shadow:var(--pf-c-panel__footer--BoxShadow)}hr{--pf-c-divider--BorderWidth--base:var(--pf-global--BorderWidth--sm, 1px);--pf-c-divider--BorderColor--base:var(--pf-c-divider--BackgroundColor);--pf-c-divider--Height:var(--pf-c-divider--BorderWidth--base);--pf-c-divider--BackgroundColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-divider--after--BackgroundColor:var(--pf-c-divider--BorderColor--base);--pf-c-divider--after--FlexBasis:100%;--pf-c-divider--after--Inset:0%;--pf-c-divider--m-vertical--after--FlexBasis:100%;--pf-c-divider--m-horizontal--Display:flex;--pf-c-divider--m-horizontal--FlexDirection:row;--pf-c-divider--m-horizontal--after--Height:var(--pf-c-divider--Height);--pf-c-divider--m-horizontal--after--Width:auto;--pf-c-divider--m-vertical--Display:inline-flex;--pf-c-divider--m-vertical--FlexDirection:column;--pf-c-divider--m-vertical--after--Height:auto;--pf-c-divider--m-vertical--after--Width:var(--pf-c-divider--BorderWidth--base);--pf-hidden-visible--visible--Display:var(--pf-c-divider--Display);--pf-c-divider--Display:var(--pf-c-divider--m-horizontal--Display);--pf-c-divider--FlexDirection:var(--pf-c-divider--m-horizontal--FlexDirection);--pf-c-divider--after--Width:var(--pf-c-divider--m-horizontal--after--Width);--pf-c-divider--after--Height:var(--pf-c-divider--m-horizontal--after--Height);width:100%;height:auto;display:var(--pf-c-divider--Display);flex-direction:var(--pf-c-divider--FlexDirection);align-items:center;align-self:stretch;flex-shrink:0;justify-content:center;border:0}hr::after{align-self:stretch;width:var(--pf-c-divider--after--Width);height:var(--pf-c-divider--after--Height);content:"";background-color:var(--pf-c-divider--after--BackgroundColor);justify-self:center;padding:0;margin:0;flex-basis:calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2)}::slotted(:is(p,h1,h2,h3,h4,h5,h6):first-of-type){margin-block-start:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):last-of-type){margin-block-end:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):is(:last-of-type,:first-of-type)){margin-block:0}`;
 /**
  * Panel
  * @slot header - Place header content here

package/pf-panel/pf-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;;;;GAKG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;IAY9D,CAAC;IAVC,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;mDACoC,CAAC,SAAS;yCACpB,CAAC,SAAS;;mDAEA,CAAC,SAAS;KACxD,CAAC;IACJ,CAAC;;;AAjBe,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA+B;AALhD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmBnB;SAnBY,OAAO","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * Panel\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised'|'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <slot name=\"header\" role=\"region\" ?hidden=\"${!hasHeader}\"></slot>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <slot></slot>\n      <slot name=\"footer\" role=\"region\" ?hidden=\"${!hasFooter}\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;;;;GAKG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;IAY9D,CAAC;IAVC,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;mDACoC,CAAC,SAAS;yCACpB,CAAC,SAAS;;mDAEA,CAAC,SAAS;KACxD,CAAC;IACJ,CAAC;;;AAjBe,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA+B;AALhD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmBnB;SAnBY,OAAO","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * Panel\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised'|'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <slot name=\"header\" role=\"region\" ?hidden=\"${!hasHeader}\"></slot>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <slot></slot>\n      <slot name=\"footer\" role=\"region\" ?hidden=\"${!hasFooter}\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}

package/pf-progress-stepper/README.md

@@ -0,0 +1,41 @@
+# PatternFly Elements Progress Stepper
+
+A component that gives the user a visual representation of the current state of 
+their progress through an application (typically a multistep form).
+
+Read more about Progress Stepper in the [PatternFly Elements Progress Steps 
+documentation][docs].
+
+##  Installation
+
+Load `<pf-progress-stepper>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js';
+```
+
+## Usage
+
+```html
+<pf-progress-stepper>
+  <pf-progress-step variant="success">Completed</pf-progress-step>
+  <pf-progress-step variant="warning">Issue</pf-progress-step>
+  <pf-progress-step variant="danger">Failure</pf-progress-step>
+  <pf-progress-step current variant="info">Running</pf-progress-step>
+  <pf-progress-step>Last</pf-progress-step>
+</pf-progress-stepper>
+```
+
+[docs]: https://patternflyelements.org/components/progress-stepper

package/pf-progress-stepper/pf-progress-step.js

@@ -2,13 +2,14 @@ var _PfProgressStep_slots, _PfProgressStep_internals;
 var PfProgressStep_1;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
-const style = css `[hidden] {\n  display: none !important;\n}\n\n#icon {\n  z-index: var(--pf-c-progress-stepper__step-icon--ZIndex);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--pf-c-progress-stepper__step-icon--Width);\n  height: var(--pf-c-progress-stepper__step-icon--Height);\n  color: var(--pf-c-progress-stepper__step-icon--Color);\n  background-color: var(--pf-c-progress-stepper__step-icon--BackgroundColor);\n  border: var(--pf-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-c-progress-stepper__step-icon--BorderColor);\n  border-radius: 50%;\n  font-size: var(--pf-c-progress-stepper__step-icon--FontSize);\n  --pf-icon--size: 1.125em;\n}\n\n#main {\n  position: var(--pf-c-progress-stepper__step-main--Position, initial);\n  min-width: 0;\n  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);\n  text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);\n  overflow-wrap: anywhere;\n}\n\n:host(:not([current])) #main.compact {\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  margin-bottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);\n}\n\n:host([current]) #main.compact {\n  grid-column: 1/-1;\n  grid-row: 1/2;\n}\n\n#title {\n  font-size: var(--pf-c-progress-stepper__step-title--FontSize);\n  font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);\n  color: var(--pf-c-progress-stepper__step-title--Color);\n  text-align: var(--pf-c-progress-stepper__step-title--TextAlign);\n  border: 0;\n}\n\n#description {\n  margin-top: var(--pf-c-progress-stepper__step-description--MarginTop);\n  font-size: var(--pf-c-progress-stepper__step-description--FontSize);\n  color: var(--pf-c-progress-stepper__step-description--Color);\n  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);\n  display: block;\n}\n\n:host {\n  display: contents;\n}\n\n#connector {\n  position: relative;\n  display: flex;\n  justify-content: var(--pf-c-progress-stepper__step-connector--JustifyContent);\n  width: 100%;\n}\n\n#connector.compact {\n  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);\n  grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);\n  padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);\n}\n\n:host(:not(:last-of-type)) #main::before {\n  content: var(--pf-c-progress-stepper__step-main--before--Content);\n  position: absolute;\n  top: calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));\n  left: calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);\n  width: auto;\n  height: calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));\n  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);\n}\n\n:host(:not(:last-of-type)) #connector::before {\n  position: absolute;\n  top: var(--pf-c-progress-stepper__step-connector--before--Top);\n  left: var(--pf-c-progress-stepper__step-connector--before--Left);\n  width: var(--pf-c-progress-stepper__step-connector--before--Width);\n  height: var(--pf-c-progress-stepper__step-connector--before--Height);\n  content: var(--pf-c-progress-stepper__step-connector--before--Content);\n  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);\n  border-bottom: var(--pf-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderBottomColor);\n  transform: var(--pf-c-progress-stepper__step-connector--before--Transform);\n}\n\n:host([current]) {\n  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-c-progress-stepper__step--m-current__step-title--FontWeight);\n  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-current__step-title--Color);\n}\n\n:host([variant="success"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--success-color--100, #3e8635);\n}\n\n:host([variant="info"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100, #2b9af3);\n}\n\n:host([variant="warning"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--warning-color--100, #f0ab00);\n}\n\n:host([variant="danger"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor);\n}\n`;
+const style = css `[hidden]{display:none!important}#icon{z-index:var(--pf-c-progress-stepper__step-icon--ZIndex);display:flex;align-items:center;justify-content:center;width:var(--pf-c-progress-stepper__step-icon--Width);height:var(--pf-c-progress-stepper__step-icon--Height);color:var(--pf-c-progress-stepper__step-icon--Color);background-color:var(--pf-c-progress-stepper__step-icon--BackgroundColor);border:var(--pf-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-c-progress-stepper__step-icon--BorderColor);border-radius:50%;font-size:var(--pf-c-progress-stepper__step-icon--FontSize);--pf-icon--size:1.125em}#main{position:var(--pf-c-progress-stepper__step-main--Position,initial);min-width:0;margin:var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);text-align:var(--pf-c-progress-stepper--step-main--TextAlign,auto);overflow-wrap:anywhere}:host(:not([current])) #main.compact{position:fixed;top:0;left:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin-bottom:var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom)}:host([current]) #main.compact{grid-column:1/-1;grid-row:1/2}#title{font-size:var(--pf-c-progress-stepper__step-title--FontSize);font-weight:var(--pf-c-progress-stepper__step-title--FontWeight);color:var(--pf-c-progress-stepper__step-title--Color);text-align:var(--pf-c-progress-stepper__step-title--TextAlign);border:0}#description{margin-top:var(--pf-c-progress-stepper__step-description--MarginTop);font-size:var(--pf-c-progress-stepper__step-description--FontSize);color:var(--pf-c-progress-stepper__step-description--Color);text-align:var(--pf-c-progress-stepper__step-description--TextAlign);display:block}:host{display:contents}#connector{position:relative;display:flex;justify-content:var(--pf-c-progress-stepper__step-connector--JustifyContent);width:100%}#connector.compact{min-width:var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);grid-row:var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);padding-bottom:var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom)}:host(:not(:last-of-type)) #main::before{content:var(--pf-c-progress-stepper__step-main--before--Content);position:absolute;top:calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));left:calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth)/ 2);width:auto;height:calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));border-right:var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor)}:host(:not(:last-of-type)) #connector::before{position:absolute;top:var(--pf-c-progress-stepper__step-connector--before--Top);left:var(--pf-c-progress-stepper__step-connector--before--Left);width:var(--pf-c-progress-stepper__step-connector--before--Width);height:var(--pf-c-progress-stepper__step-connector--before--Height);content:var(--pf-c-progress-stepper__step-connector--before--Content);border-right:var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);border-bottom:var(--pf-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderBottomColor);transform:var(--pf-c-progress-stepper__step-connector--before--Transform)}:host([current]){--pf-c-progress-stepper__step-title--FontWeight:var(--pf-c-progress-stepper__step--m-current__step-title--FontWeight);--pf-c-progress-stepper__step-title--Color:var(--pf-c-progress-stepper__step--m-current__step-title--Color)}:host([variant=success]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--success-color--100, #3e8635)}:host([variant=info]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--info-color--100, #2b9af3)}:host([variant=warning]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--warning-color--100, #f0ab00)}:host([variant=danger]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step-title--Color:var(--pf-c-progress-stepper__step--m-danger__step-title--Color);--pf-c-progress-stepper__step-title--m-help-text--hover--Color:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);--pf-c-progress-stepper__step-title--m-help-text--focus--Color:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor);--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor)}`;
 const ICONS = new Map(Object.entries({
     success: { icon: 'circle-check' },
     danger: { icon: 'circle-exclamation' },

package/pf-progress-stepper/pf-progress-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending'|'info'|'success'|'warning'|'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending'|'info'|'success'|'warning'|'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}

package/pf-progress-stepper/pf-progress-stepper.js

@@ -2,10 +2,11 @@ var _PfProgressStepper_instances, _PfProgressStepper_internals, _PfProgressStepp
 var PfProgressStepper_1;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { observed } from '@patternfly/pfe-core/decorators/observed.js';
 import { css } from "lit";
-const style = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;\n  --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;\n  --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl, 2rem);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;\n  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;\n  --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;\n  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;\n  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;\n  --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;\n  --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;\n  --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);\n  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;\n  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;\n  --pf-c-progress-stepper--m-compact--GridAutoFlow: row;\n  --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;\n  --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;\n  --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;\n  --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);\n  --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;\n  --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;\n  --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;\n  --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;\n  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;\n  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-center__step-main--TextAlign: center;\n  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;\n  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;\n  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;\n  --pf-c-progress-stepper__step-connector--JustifyContent: start;\n  --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs, 100);\n  --pf-c-progress-stepper__step-icon--Width: 1.75rem;\n  --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);\n  --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--FontSize--md, 1rem);\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);\n  --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-progress-stepper__pficon--MarginTop: 3px;\n  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;\n  --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--TextAlign: left;\n  --pf-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md, 1rem);\n  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-global--FontWeight--bold, 700);\n  --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200, #6a6e73);\n  --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200, #8a8d90);\n  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;\n  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step-description--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200, #6a6e73);\n  --pf-c-progress-stepper__step-description--TextAlign: left;\n  --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);\n  --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);\n  --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);\n  --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);\n  --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);\n  --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);\n  --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);\n  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);\n  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);\n  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);\n  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);\n  --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);\n  --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);\n  --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);\n  --pf-c-progress-stepper--m-center__step-connector--before--Content: none;\n  --pf-c-progress-stepper--m-center__step-main--before--Content: '';\n  --pf-c-progress-stepper__step-connector--before--Content: '';\n  --pf-c-progress-stepper__step-main--before--Content: none;\n  position: relative;\n  display: grid;\n  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);\n  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);\n  grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);\n  grid-auto-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n  :host {\n    --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow, column);\n    --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns, initial);\n    --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);\n    --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);\n    --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);\n    --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);\n    --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);\n    --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);\n    --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);\n    --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);\n    --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);\n    --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);\n    --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);\n    --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);\n    --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);\n    --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);\n    --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);\n    --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);\n    --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n    --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n    --pf-c-progress-stepper--m-center__step-connector--before--Content: '';\n    --pf-c-progress-stepper--m-center__step-main--before--Content: none;\n  }\n}\n\n:host([center]) {\n  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);\n  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);\n  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);\n  --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);\n  --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);\n  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);\n  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);\n  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);\n  --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n  --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);\n\n  grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);\n}\n\n:host([center]:not([compact])) {\n  --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n  --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n}\n\n:host([vertical]) ::slotted(pf-progress-step) {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n:host([vertical]) {\n  --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);\n  --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);\n  --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);\n  --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);\n  --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);\n  --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);\n  --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);\n  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);\n  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);\n  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);\n  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);\n  --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);\n  --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);\n  --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);\n  --pf-c-progress-stepper__step-connector--before--Content: '';\n  --pf-c-progress-stepper__step-main--before--Content: none;\n  --pf-c-progress-stepper--m-center__step-connector--before--Content: none;\n  --pf-c-progress-stepper--m-center__step-main--before--Content: '';\n  --pf-c-progress-stepper__step-main--Position: relative;\n}\n\n:host([vertical][center]) {\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);\n}\n\n:host([compact]) {\n  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);\n  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);\n  --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);\n  --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);\n  --pf-c-progress-stepper__step-title--FontSize: var(--pf-c-progress-stepper--m-compact__step-title--FontSize);\n  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);\n  --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);\n  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);\n  display: inline-grid;\n  grid-template-columns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);\n  grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);\n}\n`;
+const style = css `[hidden]{display:none!important}:host{--pf-c-progress-stepper--m-vertical--GridAutoFlow:row;--pf-c-progress-stepper--m-vertical--GridTemplateColumns:auto 1fr;--pf-c-progress-stepper--m-vertical__step-connector--before--Top:0;--pf-c-progress-stepper--m-vertical__step-connector--before--Left:calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);--pf-c-progress-stepper--m-vertical__step-connector--before--Width:auto;--pf-c-progress-stepper--m-vertical__step-connector--before--Height:100%;--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth:0;--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor:transparent;--pf-c-progress-stepper--m-vertical__step-connector--before--Transform:translateX(-50%);--pf-c-progress-stepper--m-vertical__step-main--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical__step-main--MarginBottom:var(--pf-global--spacer--xl, 2rem);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns:1fr;--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow:auto;--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft:0;--pf-c-progress-stepper--m-horizontal--GridAutoFlow:column;--pf-c-progress-stepper--m-horizontal--GridTemplateColumns:initial;--pf-c-progress-stepper--m-horizontal__step-connector--before--Top:calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);--pf-c-progress-stepper--m-horizontal__step-connector--before--Left:0;--pf-c-progress-stepper--m-horizontal__step-connector--before--Width:100%;--pf-c-progress-stepper--m-horizontal__step-connector--before--Height:auto;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth:0;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor:unset;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform:translateY(-50%);--pf-c-progress-stepper--m-horizontal__step-main--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-horizontal__step-main--MarginRight:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom:0;--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft:0;--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns:repeat(auto-fill, 1.75rem);--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom:0;--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow:2;--pf-c-progress-stepper--m-compact--GridAutoFlow:row;--pf-c-progress-stepper--m-compact__step-main--MarginTop:0;--pf-c-progress-stepper--m-compact__step-main--MarginBottom:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-compact__step-connector--MinWidth:1.75rem;--pf-c-progress-stepper--m-compact__step-icon--Width:1.125rem;--pf-c-progress-stepper--m-compact__step-icon--FontSize:var(--pf-global--icon--FontSize--sm, 0.625rem);--pf-c-progress-stepper--m-compact__step-title--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress-stepper--m-compact__step-title--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-progress-stepper--m-compact__pficon--MarginTop:2px;--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop:-3px;--pf-c-progress-stepper--m-center__step-connector--before--Left:50%;--pf-c-progress-stepper--m-center--GridTemplateColumns:1fr;--pf-c-progress-stepper--m-center__step-connector--JustifyContent:center;--pf-c-progress-stepper--m-center__step-main--MarginRight:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-center__step-main--MarginLeft:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-center__step-main--TextAlign:center;--pf-c-progress-stepper--m-center__step-description--MarginRight:0;--pf-c-progress-stepper--m-center__step-description--MarginLeft:0;--pf-c-progress-stepper--GridTemplateRows:auto 1fr;--pf-c-progress-stepper__step-connector--JustifyContent:start;--pf-c-progress-stepper__step-icon--ZIndex:var(--pf-global--ZIndex--xs, 100);--pf-c-progress-stepper__step-icon--Width:1.75rem;--pf-c-progress-stepper__step-icon--Height:var(--pf-c-progress-stepper__step-icon--Width);--pf-c-progress-stepper__step-icon--FontSize:var(--pf-global--FontSize--md, 1rem);--pf-c-progress-stepper__step-icon--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-icon--BackgroundColor:var(--pf-global--BackgroundColor--light-200, #fafafa);--pf-c-progress-stepper__step-icon--BorderWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper__step-icon--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper__pficon--MarginTop:3px;--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop:-5px;--pf-c-progress-stepper__step-title--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--TextAlign:left;--pf-c-progress-stepper__step-title--FontSize:var(--pf-global--FontSize--md, 1rem);--pf-c-progress-stepper__step-title--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-progress-stepper__step--m-current__step-title--FontWeight:var(--pf-global--FontWeight--bold, 700);--pf-c-progress-stepper__step--m-current__step-title--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step--m-pending__step-title--Color:var(--pf-global--Color--200, #6a6e73);--pf-c-progress-stepper__step--m-danger__step-title--Color:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor:var(--pf-global--BorderColor--200, #8a8d90);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness:var(--pf-global--BorderWidth--sm, 1px);--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset:0.25rem;--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--hover--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--focus--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step-description--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper__step-description--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress-stepper__step-description--Color:var(--pf-global--Color--200, #6a6e73);--pf-c-progress-stepper__step-description--TextAlign:left;--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper--m-center__step-connector--before--Content:none;--pf-c-progress-stepper--m-center__step-main--before--Content:'';--pf-c-progress-stepper__step-connector--before--Content:'';--pf-c-progress-stepper__step-main--before--Content:none;position:relative;display:grid;grid-auto-flow:var(--pf-c-progress-stepper--GridAutoFlow);grid-template-columns:var(--pf-c-progress-stepper--GridTemplateColumns);grid-template-rows:var(--pf-c-progress-stepper--GridTemplateRows);grid-auto-columns:1fr}@media (min-width:768px){:host{--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow, column);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns, initial);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content);--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper--m-center__step-connector--before--Content:'';--pf-c-progress-stepper--m-center__step-main--before--Content:none}}:host([center]){--pf-c-progress-stepper__step-connector--JustifyContent:var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-center__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);--pf-c-progress-stepper--step-main--TextAlign:var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);--pf-c-progress-stepper__step-title--TextAlign:var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);--pf-c-progress-stepper__step-description--MarginRight:var(--pf-c-progress-stepper--m-center__step-description--MarginRight);--pf-c-progress-stepper__step-description--MarginLeft:var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);--pf-c-progress-stepper__step-description--TextAlign:var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content);--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-center__step-connector--before--Left);grid-template-columns:var(--pf-c-progress-stepper--m-center--GridTemplateColumns)}:host([center]:not([compact])){--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content)}:host([vertical]) ::slotted(pf-progress-step){flex-direction:row;align-items:flex-start}:host([vertical]){--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper__step-connector--before--Content:'';--pf-c-progress-stepper__step-main--before--Content:none;--pf-c-progress-stepper--m-center__step-connector--before--Content:none;--pf-c-progress-stepper--m-center__step-main--before--Content:'';--pf-c-progress-stepper__step-main--Position:relative}:host([vertical][center]){--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-center__step-connector--before--Left)}:host([compact]){--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);--pf-c-progress-stepper__step-icon--Width:var(--pf-c-progress-stepper--m-compact__step-icon--Width);--pf-c-progress-stepper__step-icon--FontSize:var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);--pf-c-progress-stepper__step-title--FontSize:var(--pf-c-progress-stepper--m-compact__step-title--FontSize);--pf-c-progress-stepper__step--m-current__step-title--FontWeight:var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);--pf-c-progress-stepper__pficon--MarginTop:var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop:var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);display:inline-grid;grid-template-columns:var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);grid-auto-flow:var(--pf-c-progress-stepper--m-compact--GridAutoFlow)}`;
 import { PfProgressStep } from './pf-progress-step.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';

package/pf-progress-stepper/pf-progress-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEI,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IA2B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,8BAAY,GAAG,kBAAkB,CAAC;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,gCAAc,GAAG,IAAI,CAAC;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEI,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IA2B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,8BAAY,GAAG,kBAAkB,CAAC;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,gCAAc,GAAG,IAAI,CAAC;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}

package/pf-spinner/BaseSpinner.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: inline-block;\n  width: min-content;\n  min-height: 0;\n  aspect-ratio: 1 / 1;\n}\n\nsvg {\n  overflow: hidden;\n}\n\ncircle {\n  width: 100%;\n  height: 100%;\n  transform-origin: 50% 50%;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n}\n\n`;
+const styles = css `:host{display:inline-block;width:min-content;min-height:0;aspect-ratio:1/1}svg{overflow:hidden}circle{width:100%;height:100%;transform-origin:50% 50%;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:280}`;
 /**
  * Base spinner class
  *

package/pf-spinner/BaseSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;;;AAW7C;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAwD","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px'|'%'|'rem'|'em'|'fr'|'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAwD","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px'|'%'|'rem'|'em'|'fr'|'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}

package/pf-spinner/README.md

@@ -0,0 +1,46 @@
+# PatternFly Elements Spinner
+     
+`<pf-spinner>` is used to indicate to users that an action is in progress.
+
+Read more about Spinner in the [PatternFly Elements Spinner documentation](https://patternflyelements.org/components/spinner)
+
+##  Installation
+
+Load `<pf-spinner>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-spinner/pf-spinner.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-spinner/pf-spinner.js';
+```
+
+## Usage
+```html
+<pf-spinner>Loading...</pf-spinner>
+```
+
+### Size variations
+
+```html
+<pf-spinner size="sm">Loading...</pf-spinner>
+<pf-spinner size="md">Loading...</pf-spinner>
+<pf-spinner size="lg">Loading...</pf-spinner>
+<pf-spinner size="xl">Loading...</pf-spinner>
+```
+
+### Custom size
+
+```html
+<pf-spinner diameter="80px">Loading...</pf-spinner>
+```
+

package/pf-spinner/pf-spinner.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { BaseSpinner } from './BaseSpinner.js';
 import { css } from "lit";
-const styles = css `[hidden] {\n  display: none !important;\n}\n\ndiv {\n  display: contents;\n}\n\nsvg {\n  width: var(--pf-c-spinner--Width,\n    var(--pf-c-spinner--diameter,\n      var(--pf-global--icon--FontSize--xl, 3.375rem)));\n  height: var(--pf-c-spinner--Height,\n    var(--pf-c-spinner--diameter,\n      var(--pf-global--icon--FontSize--xl, 3.375rem)));\n  animation:\n    pf-c-spinner-animation-rotate\n    calc(var(--pf-c-spinner--AnimationDuration, 1.4s) * 2)\n    var(--pf-c-spinner--AnimationTimingFunction, linear) infinite;\n}\n\n:host([size="sm"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter,\n    var(--pf-global--icon--FontSize--sm, 0.625rem));\n}\n\n:host([size="md"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter,\n    var(--pf-global--icon--FontSize--md, 1.125rem));\n}\n\n:host([size="lg"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter,\n    var(--pf-global--icon--FontSize--lg, 1.5rem));\n}\n\n:host([size="xl"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,\n    var(--pf-global--icon--FontSize--xl, 3.375rem));\n}\n\ncircle {\n  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));\n  stroke-width: var(--pf-c-spinner--stroke-width, 10);\n  animation:\n    pf-c-spinner-animation-dash\n    var(--pf-c-spinner--AnimationDuration, 1.4s)\n    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;\n}\n\n@keyframes pf-c-spinner-animation-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes pf-c-spinner-animation-dash {\n  0% {\n    stroke-dashoffset: 280;\n    transform: rotate(0);\n  }\n  15% {\n    stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth, 10) - 4);\n  }\n  40% {\n    stroke-dashoffset: 150;\n    stroke-dasharray: 220;\n  }\n  100% {\n    stroke-dashoffset: 280;\n    transform: rotate(720deg);\n  }\n}\n`;
+const styles = css `[hidden]{display:none!important}div{display:contents}svg{width:var(--pf-c-spinner--Width,var(--pf-c-spinner--diameter,var(--pf-global--icon--FontSize--xl,3.375rem)));height:var(--pf-c-spinner--Height,var(--pf-c-spinner--diameter,var(--pf-global--icon--FontSize--xl,3.375rem)));animation:pf-c-spinner-animation-rotate calc(var(--pf-c-spinner--AnimationDuration,1.4s) * 2) var(--pf-c-spinner--AnimationTimingFunction,linear) infinite}:host([size=sm]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-sm--diameter,\n    var(--pf-global--icon--FontSize--sm, 0.625rem))}:host([size=md]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-md--diameter,\n    var(--pf-global--icon--FontSize--md, 1.125rem))}:host([size=lg]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-lg--diameter,\n    var(--pf-global--icon--FontSize--lg, 1.5rem))}:host([size=xl]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-xl--diameter,\n    var(--pf-global--icon--FontSize--xl, 3.375rem))}circle{stroke:var(--pf-c-spinner--Color,var(--pf-global--primary-color--100,#06c));stroke-width:var(--pf-c-spinner--stroke-width,10);animation:pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration,1.4s) var(--pf-c-spinner__path--AnimationTimingFunction,ease-in-out) infinite}@keyframes pf-c-spinner-animation-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes pf-c-spinner-animation-dash{0%{stroke-dashoffset:280;transform:rotate(0)}15%{stroke-width:calc(var(--pf-c-spinner__path--StrokeWidth,10) - 4)}40%{stroke-dashoffset:150;stroke-dasharray:220}100%{stroke-dashoffset:280;transform:rotate(720deg)}}`;
 /**
  * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}

package/pf-spinner/pf-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;GAeG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAHe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}
+{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;GAeG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAHe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}

package/pf-switch/BaseSwitch.js

@@ -1,9 +1,9 @@
 var _BaseSwitch_instances, _BaseSwitch_internals, _BaseSwitch_initiallyDisabled, _BaseSwitch_onClick, _BaseSwitch_onKeyup, _BaseSwitch_toggle, _BaseSwitch_updateLabels;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: inline-block;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host(:disabled) {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n:host(:disabled) #container {\n  cursor: not-allowed;\n}\n\n:host(:disabled:focus-within) #container {\n  outline: none;\n}\n\n#container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n#container::before {\n  position: absolute;\n  display: block;\n  content: "";\n}\n`;
+const styles = css `:host{display:inline-block}svg{fill:currentcolor}[hidden]{display:none!important}:host(:disabled){pointer-events:none;cursor:not-allowed}:host(:disabled) #container{cursor:not-allowed}:host(:disabled:focus-within) #container{outline:0}#container{position:relative;display:inline-flex;align-items:center}#container::before{position:absolute;display:block;content:""}`;
 /**
  * Switch
  */

package/pf-switch/BaseSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.js","sourceRoot":"","sources":["BaseSwitch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './BaseSwitch.css';\n\n/**\n * Switch\n */\nexport abstract class BaseSwitch extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = this.attachInternals();\n\n  #initiallyDisabled = this.hasAttribute('disabled');\n\n  @property({ reflect: true }) label?: string;\n\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  disabled = this.#initiallyDisabled;\n\n  get labels(): NodeListOf<HTMLLabelElement> {\n    return this.#internals.labels as NodeListOf<HTMLLabelElement>;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'checkbox');\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.#updateLabels();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n    this.requestUpdate();\n  }\n\n  override render() {\n    return html`\n      <div id=\"container\" tabindex=\"0\">\n        <svg id=\"toggle\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 512 512\">\n          <path ?hidden=${!this.showCheckIcon} d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  override updated() {\n    this.#internals.ariaChecked = String(this.checked);\n    this.#internals.ariaDisabled = String(this.disabled);\n  }\n\n  #onClick(event: Event) {\n    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label\n    const { originalTarget, explicitOriginalTarget } = event;\n    if (explicitOriginalTarget) {\n      let labels: HTMLLabelElement[];\n      if (\n        originalTarget === event.target &&\n        !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) &&\n        labels.includes(this.closest('label') as HTMLLabelElement)\n      ) {\n        return;\n      }\n    }\n    this.#toggle();\n  }\n\n  #onKeyup(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        this.#toggle();\n    }\n  }\n\n  #toggle() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.#updateLabels();\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #updateLabels() {\n    const labelState = this.checked ? 'on' : 'off';\n    if (this.labels.length > 1) {\n      for (const label of this.labels) {\n        label.hidden = label.dataset.state !== labelState;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"BaseSwitch.js","sourceRoot":"","sources":["BaseSwitch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport styles from './BaseSwitch.css';\n\n/**\n * Switch\n */\nexport abstract class BaseSwitch extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = this.attachInternals();\n\n  #initiallyDisabled = this.hasAttribute('disabled');\n\n  @property({ reflect: true }) label?: string;\n\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  disabled = this.#initiallyDisabled;\n\n  get labels(): NodeListOf<HTMLLabelElement> {\n    return this.#internals.labels as NodeListOf<HTMLLabelElement>;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'checkbox');\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.#updateLabels();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n    this.requestUpdate();\n  }\n\n  override render() {\n    return html`\n      <div id=\"container\" tabindex=\"0\">\n        <svg id=\"toggle\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 512 512\">\n          <path ?hidden=${!this.showCheckIcon} d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  override updated() {\n    this.#internals.ariaChecked = String(this.checked);\n    this.#internals.ariaDisabled = String(this.disabled);\n  }\n\n  #onClick(event: Event) {\n    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label\n    const { originalTarget, explicitOriginalTarget } = event;\n    if (explicitOriginalTarget) {\n      let labels: HTMLLabelElement[];\n      if (\n        originalTarget === event.target &&\n        !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) &&\n        labels.includes(this.closest('label') as HTMLLabelElement)\n      ) {\n        return;\n      }\n    }\n    this.#toggle();\n  }\n\n  #onKeyup(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        this.#toggle();\n    }\n  }\n\n  #toggle() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.#updateLabels();\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #updateLabels() {\n    const labelState = this.checked ? 'on' : 'off';\n    if (this.labels.length > 1) {\n      for (const label of this.labels) {\n        label.hidden = label.dataset.state !== labelState;\n      }\n    }\n  }\n}\n"]}