@m3e/web 2.1.3 → 2.2.1

package/dist/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n  static {\r\n    if (typeof window !== \"undefined\") {\r\n      const lightDomStyle = new CSSStyleSheet();\r\n      lightDomStyle.replaceSync(\r\n        css`\r\n          m3e-snackbar {\r\n            margin-inline: auto;\r\n          }\r\n        `.toString(),\r\n      );\r\n\r\n      document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];\r\n    }\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: fixed;\r\n      top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n      max-width: var(--m3e-snackbar-max-width, 42rem);\r\n      visibility: hidden;\r\n      border: none;\r\n      margin: 0;\r\n      padding: 0;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex: 1 1 auto;\r\n      box-sizing: border-box;\r\n      padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n      border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n      font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-snackbar-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-snackbar-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-snackbar-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n      --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n      --m3e-text-button-hover-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-standard-icon-button-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n    }\r\n    :host([dismissible]) .base {\r\n      padding-inline-end: 0.5rem;\r\n    }\r\n    .supporting-text {\r\n      flex: 1 1 auto;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n      margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        border-radius: ${DesignToken.shape.corner.small};\r\n        box-sizing: border-box;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n  /** @private */ #timeoutId = -1;\r\n  /** @private */ #actionTaken = false;\r\n  /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n  /** The currently open snackbar. */\r\n  static get current(): M3eSnackbarElement | null {\r\n    return M3eSnackbarElement.__current;\r\n  }\r\n\r\n  /**\r\n   * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n   * @default 3000\r\n   */\r\n  @property({ type: Number }) duration = 3000;\r\n\r\n  /**\r\n   * The label of the snackbar's action.\r\n   * @default \"\"\r\n   */\r\n  @property() action = \"\";\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the snackbar.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the snackbar.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /** Whether the user clicked the action. */\r\n  get isActionTaken(): boolean {\r\n    return this.#actionTaken;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.ariaLive = \"polite\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render() {\r\n    return html`<div class=\"base\">\r\n      <span class=\"supporting-text\"><slot></slot></span>\r\n      ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    // After render, compute the (unscaled) height of the snackbar in order\r\n    // to properly position it relative to the viewport.\r\n    // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n    this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #renderActionButton(): unknown {\r\n    return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionClick(): void {\r\n    this.#actionTaken = true;\r\n    this.hidePopover();\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    if (e.newState == \"open\") {\r\n      M3eSnackbarElement.__current?.hidePopover();\r\n      M3eSnackbarElement.__current = this;\r\n\r\n      if (this.duration > 0) {\r\n        this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n      }\r\n    } else {\r\n      if (M3eSnackbarElement.__current === this) {\r\n        M3eSnackbarElement.__current = null;\r\n      }\r\n\r\n      clearTimeout(this.#timeoutId);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n  addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-snackbar\": M3eSnackbarElement;\r\n  }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n  /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n  duration?: number;\r\n\r\n  /** The accessible label given to the close button used to dismiss the snackbar. */\r\n  closeLabel?: string;\r\n\r\n  /** The callback function invoked when the action is clicked. */\r\n  actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n *   actionCallback: () => {\r\n *     // Undo logic here\r\n *   },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n  /**\r\n   * Opens a snackbar with a message.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and action.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message, action and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  static open(\r\n    message: string,\r\n    actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n    dismissibleOrOptions?: boolean | SnackbarOptions,\r\n    options?: SnackbarOptions,\r\n  ): void {\r\n    if (isServer) return;\r\n\r\n    const snackbar = document.createElement(\"m3e-snackbar\");\r\n    snackbar.append(document.createTextNode(message));\r\n\r\n    let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n    if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n      snackbar.action = actionOrDismissibleOrOptions;\r\n    } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = actionOrDismissibleOrOptions;\r\n    } else {\r\n      actualOptions = actionOrDismissibleOrOptions;\r\n    }\r\n\r\n    if (typeof dismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = dismissibleOrOptions;\r\n    } else {\r\n      actualOptions = dismissibleOrOptions;\r\n    }\r\n\r\n    if (options) {\r\n      actualOptions = options;\r\n    }\r\n\r\n    if (actualOptions?.duration !== undefined) {\r\n      snackbar.duration = actualOptions.duration;\r\n    }\r\n    if (actualOptions?.closeLabel) {\r\n      snackbar.closeLabel = actualOptions.closeLabel;\r\n    }\r\n\r\n    snackbar.addEventListener(\"toggle\", (e) => {\r\n      if (e.newState === \"closed\") {\r\n        if (prefersReducedMotion()) {\r\n          snackbar.remove();\r\n        } else {\r\n          snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n        }\r\n\r\n        if (snackbar.isActionTaken) {\r\n          actualOptions?.actionCallback?.();\r\n        }\r\n      }\r\n    });\r\n\r\n    (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n    snackbar.showPopover();\r\n  }\r\n\r\n  /** Dismisses the currently visible snackbar. */\r\n  static dismiss(): void {\r\n    M3eSnackbarElement.current?.hidePopover();\r\n  }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n  /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n  var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","nothing","_M3eSnackbarElement_handleActionClick","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","window","lightDomStyle","CSSStyleSheet","replaceSync","css","toString","document","adoptedStyleSheets","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","createElement","append","createTextNode","actualOptions","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}
+{"version":3,"file":"snackbar.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-snackbar {\r\n        margin-inline: auto;\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: fixed;\r\n      top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n      max-width: var(--m3e-snackbar-max-width, 42rem);\r\n      visibility: hidden;\r\n      border: none;\r\n      margin: 0;\r\n      padding: 0;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex: 1 1 auto;\r\n      box-sizing: border-box;\r\n      padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n      border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n      font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-snackbar-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-snackbar-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-snackbar-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n      --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n      --m3e-text-button-hover-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-standard-icon-button-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n    }\r\n    :host([dismissible]) .base {\r\n      padding-inline-end: 0.5rem;\r\n    }\r\n    .supporting-text {\r\n      flex: 1 1 auto;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n      margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        border-radius: ${DesignToken.shape.corner.small};\r\n        box-sizing: border-box;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n  /** @private */ #timeoutId = -1;\r\n  /** @private */ #actionTaken = false;\r\n  /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n  /** The currently open snackbar. */\r\n  static get current(): M3eSnackbarElement | null {\r\n    return M3eSnackbarElement.__current;\r\n  }\r\n\r\n  /**\r\n   * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n   * @default 3000\r\n   */\r\n  @property({ type: Number }) duration = 3000;\r\n\r\n  /**\r\n   * The label of the snackbar's action.\r\n   * @default \"\"\r\n   */\r\n  @property() action = \"\";\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the snackbar.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the snackbar.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /** Whether the user clicked the action. */\r\n  get isActionTaken(): boolean {\r\n    return this.#actionTaken;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.ariaLive = \"polite\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render() {\r\n    return html`<div class=\"base\">\r\n      <span class=\"supporting-text\"><slot></slot></span>\r\n      ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    // After render, compute the (unscaled) height of the snackbar in order\r\n    // to properly position it relative to the viewport.\r\n    // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n    this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #renderActionButton(): unknown {\r\n    return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionClick(): void {\r\n    this.#actionTaken = true;\r\n    this.hidePopover();\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    if (e.newState == \"open\") {\r\n      M3eSnackbarElement.__current?.hidePopover();\r\n      M3eSnackbarElement.__current = this;\r\n\r\n      if (this.duration > 0) {\r\n        this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n      }\r\n    } else {\r\n      if (M3eSnackbarElement.__current === this) {\r\n        M3eSnackbarElement.__current = null;\r\n      }\r\n\r\n      clearTimeout(this.#timeoutId);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n  addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-snackbar\": M3eSnackbarElement;\r\n  }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n  /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n  duration?: number;\r\n\r\n  /** The accessible label given to the close button used to dismiss the snackbar. */\r\n  closeLabel?: string;\r\n\r\n  /** The callback function invoked when the action is clicked. */\r\n  actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n *   actionCallback: () => {\r\n *     // Undo logic here\r\n *   },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n  /**\r\n   * Opens a snackbar with a message.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and action.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message, action and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  static open(\r\n    message: string,\r\n    actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n    dismissibleOrOptions?: boolean | SnackbarOptions,\r\n    options?: SnackbarOptions,\r\n  ): void {\r\n    if (isServer) return;\r\n\r\n    const snackbar = document.createElement(\"m3e-snackbar\");\r\n    snackbar.append(document.createTextNode(message));\r\n\r\n    let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n    if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n      snackbar.action = actionOrDismissibleOrOptions;\r\n    } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = actionOrDismissibleOrOptions;\r\n    } else {\r\n      actualOptions = actionOrDismissibleOrOptions;\r\n    }\r\n\r\n    if (typeof dismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = dismissibleOrOptions;\r\n    } else {\r\n      actualOptions = dismissibleOrOptions;\r\n    }\r\n\r\n    if (options) {\r\n      actualOptions = options;\r\n    }\r\n\r\n    if (actualOptions?.duration !== undefined) {\r\n      snackbar.duration = actualOptions.duration;\r\n    }\r\n    if (actualOptions?.closeLabel) {\r\n      snackbar.closeLabel = actualOptions.closeLabel;\r\n    }\r\n\r\n    snackbar.addEventListener(\"toggle\", (e) => {\r\n      if (e.newState === \"closed\") {\r\n        if (prefersReducedMotion()) {\r\n          snackbar.remove();\r\n        } else {\r\n          snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n        }\r\n\r\n        if (snackbar.isActionTaken) {\r\n          actualOptions?.actionCallback?.();\r\n        }\r\n      }\r\n    });\r\n\r\n    (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n    snackbar.showPopover();\r\n  }\r\n\r\n  /** Dismisses the currently visible snackbar. */\r\n  static dismiss(): void {\r\n    M3eSnackbarElement.current?.hidePopover();\r\n  }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n  /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n  var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","nothing","_M3eSnackbarElement_handleActionClick","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","append","createTextNode","actualOptions","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}

package/dist/snackbar.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{LitElement as e,html as t,nothing as o,css as r,unsafeCSS as a,isServer as n}from"lit";import{Role as i,DesignToken as s,customElement as c,prefersReducedMotion as l}from"@m3e/web/core";import{__classPrivateFieldGet as d,__classPrivateFieldSet as m,__decorate as b}from"tslib";import{property as p}from"lit/decorators.js";import"@m3e/web/button";import"@m3e/web/icon-button";var u,h,v,g,f,k,x,y,$;let w=$=class extends(i(e,"status")){constructor(){super(...arguments),u.add(this),h.set(this,-1),v.set(this,!1),g.set(this,e=>d(this,u,"m",y).call(this,e)),this.duration=3e3,this.action="",this.dismissible=!1,this.closeLabel="Close"}static get current(){return $.__current}get isActionTaken(){return d(this,v,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("beforetoggle",d(this,g,"f")),this.setAttribute("popover","manual"),this.ariaLive="polite"}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("beforetoggle",d(this,g,"f"))}render(){return t`<div class="base"><span class="supporting-text"><slot></slot></span>${d(this,u,"m",f).call(this)} ${d(this,u,"m",k).call(this)}</div>`}updated(e){super.updated(e),this.style.setProperty("--_snackbar-height",this.getBoundingClientRect().height/.8+"px")}};h=new WeakMap,v=new WeakMap,g=new WeakMap,u=new WeakSet,f=function(){return this.action?t`<m3e-button @click="${d(this,u,"m",x)}">${this.action}</m3e-button>`:o},k=function(){return this.dismissible?t`<m3e-icon-button aria-label="${this.closeLabel}" @click="${this.hidePopover}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button>`:o},x=function(){m(this,v,!0,"f"),this.hidePopover()},y=function(e){"open"==e.newState?($.__current?.hidePopover(),$.__current=this,this.duration>0&&m(this,h,setTimeout(()=>this.hidePopover(),this.duration),"f")):($.__current===this&&($.__current=null),clearTimeout(d(this,h,"f")))},(()=>{if("undefined"!=typeof window){const e=new CSSStyleSheet;e.replaceSync(r`m3e-snackbar { margin-inline: auto; }`.toString()),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}})(),w.styles=r`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scale(0.8); transition: ${a(`opacity ${s.motion.duration.short3} ${s.motion.easing.standard}, \n        transform ${s.motion.duration.short3} ${s.motion.easing.standard}, \n        overlay ${s.motion.duration.short3} ${s.motion.easing.standard} allow-discrete,\n        visibility ${s.motion.duration.short3} ${s.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scale(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scale(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${s.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${s.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${s.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${s.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${s.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${s.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${s.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${s.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${s.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${s.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${s.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${s.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${s.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${s.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${s.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${s.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${s.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${s.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${s.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${s.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${s.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${s.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`,w.__current=null,b([p({type:Number})],w.prototype,"duration",void 0),b([p()],w.prototype,"action",void 0),b([p({type:Boolean,reflect:!0})],w.prototype,"dismissible",void 0),b([p({attribute:"close-label"})],w.prototype,"closeLabel",void 0),w=$=b([c("m3e-snackbar")],w);class S{static open(e,t,o,r){if(n)return;const a=document.createElement("m3e-snackbar");let i;a.append(document.createTextNode(e)),"string"==typeof t?a.action=t:"boolean"==typeof t?a.dismissible=t:i=t,"boolean"==typeof o?a.dismissible=o:i=o,r&&(i=r),void 0!==i?.duration&&(a.duration=i.duration),i?.closeLabel&&(a.closeLabel=i.closeLabel),a.addEventListener("toggle",e=>{"closed"===e.newState&&(l()?a.remove():a.addEventListener("transitionend",()=>a.remove(),{once:!0}),a.isActionTaken&&i?.actionCallback?.())}),(document.querySelector("m3e-theme")??document.body).append(a),a.showPopover()}static dismiss(){w.current?.hidePopover()}}globalThis.M3eSnackbar=S;export{S as M3eSnackbar,w as M3eSnackbarElement};
+import{LitElement as e,html as t,nothing as o,css as r,unsafeCSS as a,isServer as n}from"lit";import{Role as i,registerStyleSheet as s,DesignToken as c,customElement as l,prefersReducedMotion as d}from"@m3e/web/core";import{__classPrivateFieldGet as m,__classPrivateFieldSet as b,__decorate as p}from"tslib";import{property as u}from"lit/decorators.js";import"@m3e/web/button";import"@m3e/web/icon-button";var v,h,g,k,f,x,y,$,w;let S=w=class extends(i(e,"status")){constructor(){super(...arguments),v.add(this),h.set(this,-1),g.set(this,!1),k.set(this,e=>m(this,v,"m",$).call(this,e)),this.duration=3e3,this.action="",this.dismissible=!1,this.closeLabel="Close"}static get current(){return w.__current}get isActionTaken(){return m(this,g,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("beforetoggle",m(this,k,"f")),this.setAttribute("popover","manual"),this.ariaLive="polite"}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("beforetoggle",m(this,k,"f"))}render(){return t`<div class="base"><span class="supporting-text"><slot></slot></span>${m(this,v,"m",f).call(this)} ${m(this,v,"m",x).call(this)}</div>`}updated(e){super.updated(e),this.style.setProperty("--_snackbar-height",this.getBoundingClientRect().height/.8+"px")}};h=new WeakMap,g=new WeakMap,k=new WeakMap,v=new WeakSet,f=function(){return this.action?t`<m3e-button @click="${m(this,v,"m",y)}">${this.action}</m3e-button>`:o},x=function(){return this.dismissible?t`<m3e-icon-button aria-label="${this.closeLabel}" @click="${this.hidePopover}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button>`:o},y=function(){b(this,g,!0,"f"),this.hidePopover()},$=function(e){"open"==e.newState?(w.__current?.hidePopover(),w.__current=this,this.duration>0&&b(this,h,setTimeout(()=>this.hidePopover(),this.duration),"f")):(w.__current===this&&(w.__current=null),clearTimeout(m(this,h,"f")))},s(r`m3e-snackbar { margin-inline: auto; }`),S.styles=r`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scale(0.8); transition: ${a(`opacity ${c.motion.duration.short3} ${c.motion.easing.standard}, \n        transform ${c.motion.duration.short3} ${c.motion.easing.standard}, \n        overlay ${c.motion.duration.short3} ${c.motion.easing.standard} allow-discrete,\n        visibility ${c.motion.duration.short3} ${c.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scale(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scale(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${c.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${c.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${c.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${c.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${c.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${c.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${c.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${c.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${c.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`,S.__current=null,p([u({type:Number})],S.prototype,"duration",void 0),p([u()],S.prototype,"action",void 0),p([u({type:Boolean,reflect:!0})],S.prototype,"dismissible",void 0),p([u({attribute:"close-label"})],S.prototype,"closeLabel",void 0),S=w=p([l("m3e-snackbar")],S);class P{static open(e,t,o,r){if(n)return;const a=document.createElement("m3e-snackbar");let i;a.append(document.createTextNode(e)),"string"==typeof t?a.action=t:"boolean"==typeof t?a.dismissible=t:i=t,"boolean"==typeof o?a.dismissible=o:i=o,r&&(i=r),void 0!==i?.duration&&(a.duration=i.duration),i?.closeLabel&&(a.closeLabel=i.closeLabel),a.addEventListener("toggle",e=>{"closed"===e.newState&&(d()?a.remove():a.addEventListener("transitionend",()=>a.remove(),{once:!0}),a.isActionTaken&&i?.actionCallback?.())}),(document.querySelector("m3e-theme")??document.body).append(a),a.showPopover()}static dismiss(){S.current?.hidePopover()}}globalThis.M3eSnackbar=P;export{P as M3eSnackbar,S as M3eSnackbarElement};
 //# sourceMappingURL=snackbar.min.js.map

package/dist/snackbar.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.min.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n  static {\r\n    if (typeof window !== \"undefined\") {\r\n      const lightDomStyle = new CSSStyleSheet();\r\n      lightDomStyle.replaceSync(\r\n        css`\r\n          m3e-snackbar {\r\n            margin-inline: auto;\r\n          }\r\n        `.toString(),\r\n      );\r\n\r\n      document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];\r\n    }\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: fixed;\r\n      top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n      max-width: var(--m3e-snackbar-max-width, 42rem);\r\n      visibility: hidden;\r\n      border: none;\r\n      margin: 0;\r\n      padding: 0;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex: 1 1 auto;\r\n      box-sizing: border-box;\r\n      padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n      border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n      font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-snackbar-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-snackbar-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-snackbar-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n      --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n      --m3e-text-button-hover-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-standard-icon-button-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n    }\r\n    :host([dismissible]) .base {\r\n      padding-inline-end: 0.5rem;\r\n    }\r\n    .supporting-text {\r\n      flex: 1 1 auto;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n      margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        border-radius: ${DesignToken.shape.corner.small};\r\n        box-sizing: border-box;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n  /** @private */ #timeoutId = -1;\r\n  /** @private */ #actionTaken = false;\r\n  /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n  /** The currently open snackbar. */\r\n  static get current(): M3eSnackbarElement | null {\r\n    return M3eSnackbarElement.__current;\r\n  }\r\n\r\n  /**\r\n   * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n   * @default 3000\r\n   */\r\n  @property({ type: Number }) duration = 3000;\r\n\r\n  /**\r\n   * The label of the snackbar's action.\r\n   * @default \"\"\r\n   */\r\n  @property() action = \"\";\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the snackbar.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the snackbar.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /** Whether the user clicked the action. */\r\n  get isActionTaken(): boolean {\r\n    return this.#actionTaken;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.ariaLive = \"polite\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render() {\r\n    return html`<div class=\"base\">\r\n      <span class=\"supporting-text\"><slot></slot></span>\r\n      ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    // After render, compute the (unscaled) height of the snackbar in order\r\n    // to properly position it relative to the viewport.\r\n    // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n    this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #renderActionButton(): unknown {\r\n    return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionClick(): void {\r\n    this.#actionTaken = true;\r\n    this.hidePopover();\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    if (e.newState == \"open\") {\r\n      M3eSnackbarElement.__current?.hidePopover();\r\n      M3eSnackbarElement.__current = this;\r\n\r\n      if (this.duration > 0) {\r\n        this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n      }\r\n    } else {\r\n      if (M3eSnackbarElement.__current === this) {\r\n        M3eSnackbarElement.__current = null;\r\n      }\r\n\r\n      clearTimeout(this.#timeoutId);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n  addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-snackbar\": M3eSnackbarElement;\r\n  }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n  /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n  duration?: number;\r\n\r\n  /** The accessible label given to the close button used to dismiss the snackbar. */\r\n  closeLabel?: string;\r\n\r\n  /** The callback function invoked when the action is clicked. */\r\n  actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n *   actionCallback: () => {\r\n *     // Undo logic here\r\n *   },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n  /**\r\n   * Opens a snackbar with a message.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and action.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message, action and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  static open(\r\n    message: string,\r\n    actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n    dismissibleOrOptions?: boolean | SnackbarOptions,\r\n    options?: SnackbarOptions,\r\n  ): void {\r\n    if (isServer) return;\r\n\r\n    const snackbar = document.createElement(\"m3e-snackbar\");\r\n    snackbar.append(document.createTextNode(message));\r\n\r\n    let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n    if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n      snackbar.action = actionOrDismissibleOrOptions;\r\n    } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = actionOrDismissibleOrOptions;\r\n    } else {\r\n      actualOptions = actionOrDismissibleOrOptions;\r\n    }\r\n\r\n    if (typeof dismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = dismissibleOrOptions;\r\n    } else {\r\n      actualOptions = dismissibleOrOptions;\r\n    }\r\n\r\n    if (options) {\r\n      actualOptions = options;\r\n    }\r\n\r\n    if (actualOptions?.duration !== undefined) {\r\n      snackbar.duration = actualOptions.duration;\r\n    }\r\n    if (actualOptions?.closeLabel) {\r\n      snackbar.closeLabel = actualOptions.closeLabel;\r\n    }\r\n\r\n    snackbar.addEventListener(\"toggle\", (e) => {\r\n      if (e.newState === \"closed\") {\r\n        if (prefersReducedMotion()) {\r\n          snackbar.remove();\r\n        } else {\r\n          snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n        }\r\n\r\n        if (snackbar.isActionTaken) {\r\n          actualOptions?.actionCallback?.();\r\n        }\r\n      }\r\n    });\r\n\r\n    (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n    snackbar.showPopover();\r\n  }\r\n\r\n  /** Dismisses the currently visible snackbar. */\r\n  static dismiss(): void {\r\n    M3eSnackbarElement.current?.hidePopover();\r\n  }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n  /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n  var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","this","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","super","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","_M3eSnackbarElement_handleActionClick","nothing","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","window","lightDomStyle","CSSStyleSheet","replaceSync","css","toString","document","adoptedStyleSheets","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","createElement","actualOptions","append","createTextNode","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}
+{"version":3,"file":"snackbar.min.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-snackbar {\r\n        margin-inline: auto;\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: fixed;\r\n      top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n      max-width: var(--m3e-snackbar-max-width, 42rem);\r\n      visibility: hidden;\r\n      border: none;\r\n      margin: 0;\r\n      padding: 0;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex: 1 1 auto;\r\n      box-sizing: border-box;\r\n      padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n      border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n      font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-snackbar-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-snackbar-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-snackbar-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n      --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n      --m3e-text-button-hover-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-standard-icon-button-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n    }\r\n    :host([dismissible]) .base {\r\n      padding-inline-end: 0.5rem;\r\n    }\r\n    .supporting-text {\r\n      flex: 1 1 auto;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n      margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        border-radius: ${DesignToken.shape.corner.small};\r\n        box-sizing: border-box;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n  /** @private */ #timeoutId = -1;\r\n  /** @private */ #actionTaken = false;\r\n  /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n  /** The currently open snackbar. */\r\n  static get current(): M3eSnackbarElement | null {\r\n    return M3eSnackbarElement.__current;\r\n  }\r\n\r\n  /**\r\n   * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n   * @default 3000\r\n   */\r\n  @property({ type: Number }) duration = 3000;\r\n\r\n  /**\r\n   * The label of the snackbar's action.\r\n   * @default \"\"\r\n   */\r\n  @property() action = \"\";\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the snackbar.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the snackbar.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /** Whether the user clicked the action. */\r\n  get isActionTaken(): boolean {\r\n    return this.#actionTaken;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.ariaLive = \"polite\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render() {\r\n    return html`<div class=\"base\">\r\n      <span class=\"supporting-text\"><slot></slot></span>\r\n      ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    // After render, compute the (unscaled) height of the snackbar in order\r\n    // to properly position it relative to the viewport.\r\n    // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n    this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #renderActionButton(): unknown {\r\n    return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionClick(): void {\r\n    this.#actionTaken = true;\r\n    this.hidePopover();\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    if (e.newState == \"open\") {\r\n      M3eSnackbarElement.__current?.hidePopover();\r\n      M3eSnackbarElement.__current = this;\r\n\r\n      if (this.duration > 0) {\r\n        this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n      }\r\n    } else {\r\n      if (M3eSnackbarElement.__current === this) {\r\n        M3eSnackbarElement.__current = null;\r\n      }\r\n\r\n      clearTimeout(this.#timeoutId);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n  addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-snackbar\": M3eSnackbarElement;\r\n  }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n  /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n  duration?: number;\r\n\r\n  /** The accessible label given to the close button used to dismiss the snackbar. */\r\n  closeLabel?: string;\r\n\r\n  /** The callback function invoked when the action is clicked. */\r\n  actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n *   actionCallback: () => {\r\n *     // Undo logic here\r\n *   },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n  /**\r\n   * Opens a snackbar with a message.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and action.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message, action and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  static open(\r\n    message: string,\r\n    actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n    dismissibleOrOptions?: boolean | SnackbarOptions,\r\n    options?: SnackbarOptions,\r\n  ): void {\r\n    if (isServer) return;\r\n\r\n    const snackbar = document.createElement(\"m3e-snackbar\");\r\n    snackbar.append(document.createTextNode(message));\r\n\r\n    let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n    if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n      snackbar.action = actionOrDismissibleOrOptions;\r\n    } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = actionOrDismissibleOrOptions;\r\n    } else {\r\n      actualOptions = actionOrDismissibleOrOptions;\r\n    }\r\n\r\n    if (typeof dismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = dismissibleOrOptions;\r\n    } else {\r\n      actualOptions = dismissibleOrOptions;\r\n    }\r\n\r\n    if (options) {\r\n      actualOptions = options;\r\n    }\r\n\r\n    if (actualOptions?.duration !== undefined) {\r\n      snackbar.duration = actualOptions.duration;\r\n    }\r\n    if (actualOptions?.closeLabel) {\r\n      snackbar.closeLabel = actualOptions.closeLabel;\r\n    }\r\n\r\n    snackbar.addEventListener(\"toggle\", (e) => {\r\n      if (e.newState === \"closed\") {\r\n        if (prefersReducedMotion()) {\r\n          snackbar.remove();\r\n        } else {\r\n          snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n        }\r\n\r\n        if (snackbar.isActionTaken) {\r\n          actualOptions?.actionCallback?.();\r\n        }\r\n      }\r\n    });\r\n\r\n    (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n    snackbar.showPopover();\r\n  }\r\n\r\n  /** Dismisses the currently visible snackbar. */\r\n  static dismiss(): void {\r\n    M3eSnackbarElement.current?.hidePopover();\r\n  }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n  /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n  var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","this","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","super","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","_M3eSnackbarElement_handleActionClick","nothing","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","actualOptions","append","createTextNode","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}

package/dist/split-button.js

@@ -21,7 +21,7 @@ var _M3eSplitButtonElement_instances, _M3eSplitButtonElement_leadingButton, _M3e
  * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers
  * the main action, while the trailing icon button reveals additional options, enabling efficient workflows
  * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious
- * interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.
+ * interactions, reflecting Material 3's principles of clarity, flexibility, and expressive design.
  *
  * @example
  * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,

package/dist/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sources":["../../src/split-button/SplitButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HoverController, PressedController, Role } from \"@m3e/web/core\";\r\nimport { M3eButtonElement, ButtonSize } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport \"@m3e/web/button-group\";\r\n\r\nimport { SplitButtonVariant } from \"./SplitButtonVariant\";\r\n\r\n/**\r\n * A button used to show an action with a menu of related actions.\r\n *\r\n * @description\r\n * The `m3e-split-button` component presents a primary action alongside a menu of related actions,\r\n * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,\r\n * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers\r\n * the main action, while the trailing icon button reveals additional options, enabling efficient workflows\r\n * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious\r\n * interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,\r\n * `m3e-icon-button`, and `m3e-menu` components into a split button.\r\n *\r\n * ```html\r\n * <m3e-split-button>\r\n *  <m3e-button slot=\"leading-button\">\r\n *    <m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit\r\n *  </m3e-button>\r\n *  <m3e-icon-button slot=\"trailing-button\">\r\n *  <m3e-icon name=\"keyboard_arrow_down\"></m3e-icon>\r\n *  <m3e-menu-trigger for=\"menu1\"></m3e-menu-trigger>\r\n * </m3e-icon-button>\r\n * ```\r\n *\r\n * @tag m3e-split-button\r\n *\r\n * @slot leading-button - The leading button used to perform the primary action.\r\n * @slot trailing-button - The trailing icon button used to open a menu of related actions.\r\n *\r\n * @attr variant - The appearance variant of the button.\r\n * @attr size - The size of the button.\r\n *\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).\r\n * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).\r\n * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).\r\n * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).\r\n * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).\r\n */\r\n@customElement(\"m3e-split-button\")\r\nexport class M3eSplitButtonElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"leading-button\"]) {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"])) {\r\n      --m3e-icon-button-extra-small-default-leading-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-unselected-leading-space,\r\n        0.75rem\r\n      );\r\n      --m3e-icon-button-extra-small-default-trailing-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-unselected-trailing-space,\r\n        0.875rem\r\n      );\r\n      --m3e-icon-button-small-default-leading-space: var(\r\n        --m3e-split-button-small-trailing-button-unselected-leading-space,\r\n        0.75rem\r\n      );\r\n      --m3e-icon-button-small-default-trailing-space: var(\r\n        --m3e-split-button-small-trailing-button-unselected-trailing-space,\r\n        0.875rem\r\n      );\r\n      --m3e-icon-button-medium-default-leading-space: var(\r\n        --m3e-split-button-medium-trailing-button-unselected-leading-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-medium-default-trailing-space: var(\r\n        --m3e-split-button-medium-trailing-button-unselected-trailing-space,\r\n        1.0625rem\r\n      );\r\n      --m3e-icon-button-large-default-leading-space: var(\r\n        --m3e-split-button-large-trailing-button-unselected-leading-space,\r\n        1.625rem\r\n      );\r\n      --m3e-icon-button-large-default-trailing-space: var(\r\n        --m3e-split-button-large-trailing-button-unselected-trailing-space,\r\n        2rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-leading-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-unselected-leading-space,\r\n        2.3125rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-trailing-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-unselected-trailing-space,\r\n        3.0625rem\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n      --m3e-icon-button-extra-small-default-leading-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-selected-leading-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-extra-small-default-trailing-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-selected-trailing-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-small-default-leading-space: var(\r\n        --m3e-split-button-small-trailing-button-selected-leading-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-small-default-trailing-space: var(\r\n        --m3e-split-button-small-trailing-button-selected-trailing-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-medium-default-leading-space: var(\r\n        --m3e-split-button-medium-trailing-button-selected-leading-space,\r\n        0.9375rem\r\n      );\r\n      --m3e-icon-button-medium-default-trailing-space: var(\r\n        --m3e-split-button-medium-trailing-button-selected-trailing-space,\r\n        0.9375rem\r\n      );\r\n      --m3e-icon-button-large-default-leading-space: var(\r\n        --m3e-split-button-large-trailing-button-selected-leading-space,\r\n        1.8125rem\r\n      );\r\n      --m3e-icon-button-large-default-trailing-space: var(\r\n        --m3e-split-button-large-trailing-button-selected-trailing-space,\r\n        1.8125rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-leading-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-selected-leading-space,\r\n        2.6875rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-trailing-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-selected-trailing-space,\r\n        2.6875rem\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"leading-button\"]:not(:hover)),\r\n    ::slotted([slot=\"leading-button\"]:disabled),\r\n    ::slotted([slot=\"leading-button\"][disabled-interactive]) {\r\n      --m3e-connected-button-group-extra-small-inner-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-small-inner-shape: var(\r\n        --m3e-split-button-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-shape: var(\r\n        --m3e-split-button-medium-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-large-inner-shape: var(\r\n        --m3e-split-button-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    ::slotted([slot=\"leading-button\"]:hover:not(:disabled):not([disabled-interactive])),\r\n    ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):hover:not(:disabled):not([disabled-interactive])) {\r\n      --m3e-connected-button-group-extra-small-inner-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-small-inner-shape: var(\r\n        --m3e-split-button-small-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-shape: var(\r\n        --m3e-split-button-medium-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-large-inner-shape: var(\r\n        --m3e-split-button-large-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"leading-button\"]),\r\n    ::slotted([slot=\"trailing-button\"]) {\r\n      --m3e-connected-button-group-extra-small-inner-pressed-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-small-inner-pressed-shape: var(\r\n        --m3e-split-button-small-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-pressed-shape: var(\r\n        --m3e-split-button-medium-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-large-inner-pressed-shape: var(\r\n        --m3e-split-button-large-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-pressed-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):not(:hover)),\r\n    ::slotted([slot=\"trailing-button\"]:disabled),\r\n    ::slotted([slot=\"trailing-button\"][disabled-interactive]) {\r\n      --m3e-connected-button-group-extra-small-inner-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-small-inner-shape: var(\r\n        --m3e-split-button-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-shape: var(\r\n        --m3e-split-button-medium-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-large-inner-shape: var(\r\n        --m3e-split-button-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n      --_icon-button-icon-transform: rotate(180deg);\r\n      --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n      --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted([slot=\"trailing-button\"]) {\r\n      --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    .base {\r\n      --m3e-icon-button-extra-small-icon-size: calc(\r\n        var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n      );\r\n      --m3e-button-extra-small-icon-size: calc(\r\n        var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n      );\r\n      --m3e-icon-button-small-icon-size: calc(\r\n        var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n      );\r\n      --m3e-button-small-icon-size: calc(\r\n        var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n      );\r\n      --m3e-icon-button-medium-icon-size: calc(\r\n        var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n      );\r\n      --m3e-button-medium-icon-size: calc(\r\n        var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n      );\r\n      --m3e-icon-button-large-icon-size: calc(\r\n        var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n      --m3e-button-large-icon-size: calc(\r\n        var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n      --m3e-icon-button-extra-large-icon-size: calc(\r\n        var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n      --m3e-button-extra-large-icon-size: calc(\r\n        var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n    }\r\n    :host([size=\"extra-small\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"small\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"medium\"]).base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"large\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"extra-large\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem);\r\n    }\r\n  `;\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */ #leadingButton?: M3eButtonElement;\r\n  /** @private */ #trailingButton?: M3eIconButtonElement;\r\n  /** @private */ #trailingButtonHover = false;\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    capture: true,\r\n    minPressedDuration: 150,\r\n    isPressedKey: (key) => key === \" \",\r\n    callback: (pressed, _, target) => {\r\n      switch (target) {\r\n        case this.#leadingButton:\r\n          this.#updateLeadingButtonShape(pressed);\r\n          break;\r\n        case this.#trailingButton:\r\n          this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover);\r\n          break;\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering, target) => {\r\n      switch (target) {\r\n        case this.#trailingButton:\r\n          if (!this.#trailingButton?.disabled && !this.#trailingButton?.disabledInteractive) {\r\n            this.#trailingButtonHover = hovering;\r\n            this.#updateTrailingButtonShape(hovering);\r\n          }\r\n          break;\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * The appearance variant of the button.\r\n   * @default \"filled\"\r\n   */\r\n  @property({ reflect: true }) variant: SplitButtonVariant = \"filled\";\r\n\r\n  /**\r\n   * The size of the button.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonSize = \"small\";\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-button-group class=\"base\" disable-role variant=\"connected\" size=\"${this.size}\">\r\n      <slot name=\"leading-button\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n      <slot name=\"trailing-button\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n    </m3e-button-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLeadingSlotChange(e: Event): void {\r\n    if (this.#leadingButton) {\r\n      this.#pressedController.unobserve(this.#leadingButton);\r\n    }\r\n\r\n    this.#leadingButton = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof M3eButtonElement);\r\n\r\n    if (this.#leadingButton) {\r\n      this.#pressedController.observe(this.#leadingButton);\r\n    }\r\n\r\n    this.#updateButtons();\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingSlotChange(e: Event): void {\r\n    if (this.#trailingButton) {\r\n      this.#pressedController.unobserve(this.#trailingButton);\r\n      this.#hoverController.unobserve(this.#trailingButton);\r\n    }\r\n\r\n    this.#trailingButton = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof M3eIconButtonElement);\r\n\r\n    if (this.#trailingButton) {\r\n      this.#pressedController.observe(this.#trailingButton);\r\n      this.#hoverController.observe(this.#trailingButton);\r\n    }\r\n\r\n    this.#updateButtons();\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    if (this.#leadingButton) {\r\n      this.#leadingButton.variant = this.variant;\r\n      this.#leadingButton.size = this.size;\r\n      this.#leadingButton.shape = \"rounded\";\r\n    }\r\n\r\n    if (this.#trailingButton) {\r\n      this.#trailingButton.width = \"default\";\r\n      this.#trailingButton.shape = \"rounded\";\r\n      this.#trailingButton.setAttribute(\"variant\", this.variant);\r\n      this.#trailingButton.size = this.size;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateLeadingButtonShape(update: boolean): void {\r\n    if (update && this.#leadingButton) {\r\n      this.#updateButtonShape(this.#leadingButton, \"--_leading-button-shape\");\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_leading-button-shape\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateTrailingButtonShape(update: boolean): void {\r\n    if (update && this.#trailingButton) {\r\n      this.#updateButtonShape(this.#trailingButton, \"--_trailing-button-shape\");\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_trailing-button-shape\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtonShape(button: HTMLElement, property: string): void {\r\n    const adjustedShape = button.clientHeight / 2;\r\n    if (adjustedShape) {\r\n      this._base?.style.setProperty(property, `${adjustedShape}px`);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-split-button\": M3eSplitButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eSplitButtonElement","Role","LitElement","constructor","_M3eSplitButtonElement_leadingButton","set","_M3eSplitButtonElement_trailingButton","_M3eSplitButtonElement_trailingButtonHover","_M3eSplitButtonElement_pressedController","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_","__classPrivateFieldGet","_M3eSplitButtonElement_instances","_M3eSplitButtonElement_updateLeadingButtonShape","call","_M3eSplitButtonElement_updateTrailingButtonShape","_M3eSplitButtonElement_hoverController","HoverController","hovering","disabled","disabledInteractive","__classPrivateFieldSet","variant","size","update","changedProperties","has","_M3eSplitButtonElement_updateButtons","render","html","_M3eSplitButtonElement_handleLeadingSlotChange","_M3eSplitButtonElement_handleTrailingSlotChange","e","unobserve","assignedElements","flatten","find","x","M3eButtonElement","observe","M3eIconButtonElement","shape","width","setAttribute","_M3eSplitButtonElement_updateButtonShape","_base","style","removeProperty","button","property","adjustedShape","clientHeight","setProperty","styles","css","DesignToken","corner","full","extraSmall","small","medium","largeIncreased","density","calc","__decorate","query","prototype","reflect","customElement"],"mappings":";;;;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EG;AAEI,IAAMA,qBAAqB,GAA3B,MAAMA,qBAAsB,SAAQC,IAAI,CAACC,UAAU,EAAE,OAAO,CAAC,CAAA;AAA7DC,EAAAA,WAAAA,GAAA;;;AA+PL;AAAgBC,IAAAA,oCAAA,CAAAC,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAChB;AAAgBC,IAAAA,qCAAA,CAAAD,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAChB;AAAgBE,IAAAA,0CAAA,CAAAF,GAAA,CAAA,IAAA,EAAuB,KAAK,CAAA;AAE5C;IAAyBG,wCAAA,CAAAH,GAAA,CAAA,IAAA,EAAqB,IAAII,iBAAiB,CAAC,IAAI,EAAE;AACxEC,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,OAAO,EAAE,IAAI;AACbC,MAAAA,kBAAkB,EAAE,GAAG;AACvBC,MAAAA,YAAY,EAAGC,GAAG,IAAKA,GAAG,KAAK,GAAG;AAClCC,MAAAA,QAAQ,EAAEA,CAACC,OAAO,EAAEC,CAAC,EAAEP,MAAM,KAAI;AAC/B,QAAA,QAAQA,MAAM;AACZ,UAAA,KAAKQ,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe;AACtBc,YAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,+CAAA,CAA0B,CAAAC,IAAA,CAA9B,IAAI,EAA2BL,OAAO,CAAC;AACvC,YAAA;AACF,UAAA,KAAKE,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB;YACvBY,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAG,gDAAA,CAA2B,CAAAD,IAAA,CAA/B,IAAI,EAA4BL,OAAO,IAAIE,sBAAA,CAAA,IAAI,EAAAX,0CAAA,EAAA,GAAA,CAAqB,CAAC;AACrE,YAAA;AACJ;AACF,MAAA;AACD,KAAA,CAAC,CAAA;AAEF;IAAyBgB,sCAAA,CAAAlB,GAAA,CAAA,IAAA,EAAmB,IAAImB,eAAe,CAAC,IAAI,EAAE;AACpEd,MAAAA,MAAM,EAAE,IAAI;AACZK,MAAAA,QAAQ,EAAEA,CAACU,QAAQ,EAAEf,MAAM,KAAI;AAC7B,QAAA,QAAQA,MAAM;AACZ,UAAA,KAAKQ,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB;YACvB,IAAI,CAACY,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,EAAEoB,QAAQ,IAAI,CAACR,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,EAAEqB,mBAAmB,EAAE;cACjFC,sBAAA,CAAA,IAAI,EAAArB,0CAAA,EAAwBkB,QAAQ,EAAA,GAAA,CAAA;AACpCP,cAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAG,gDAAA,CAA2B,CAAAD,IAAA,CAA/B,IAAI,EAA4BI,QAAQ,CAAC;AAC3C,YAAA;AACA,YAAA;AACJ;AACF,MAAA;AACD,KAAA,CAAC,CAAA;AAEF;;;AAGG;IAC0B,IAAA,CAAAI,OAAO,GAAuB,QAAQ;AAEnE;;;AAGG;IAC0B,IAAA,CAAAC,IAAI,GAAe,OAAO;AAgGzD,EAAA;AA9FE;EACmBC,MAAMA,CAACC,iBAAuC,EAAA;AAC/D,IAAA,KAAK,CAACD,MAAM,CAACC,iBAAiB,CAAC;AAE/B,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,SAAS,CAAC,EAAE;AACpCf,MAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAe,oCAAA,CAAe,CAAAb,IAAA,CAAnB,IAAI,CAAiB;AACvB,IAAA;AACF,EAAA;AAEA;AACmBc,EAAAA,MAAMA,GAAA;IACvB,OAAOC,IAAI,CAAA,sEAAA,EAAyE,IAAI,CAACN,IAAI,CAAA,2CAAA,EAChDZ,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAkB,8CAAA,CAAyB,CAAA,mDAAA,EAC5BnB,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAmB,+CAAA,CAA0B,CAAA,4BAAA,CACxD;AACtB,EAAA;;;;;;;;yGAGyBC,CAAQ,EAAA;EAC/B,IAAIrB,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,EAAE;AACvBc,IAAAA,sBAAA,CAAA,IAAI,gDAAmB,CAACsB,SAAS,CAACtB,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,CAAC;AACxD,EAAA;EAEAwB,sBAAA,CAAA,IAAI,EAAAxB,oCAAA,EAAoCmC,CAAC,CAAC7B,MAAO,CAC9C+B,gBAAgB,CAAC;AAAEC,IAAAA,OAAO,EAAE;GAAM,CAAC,CACnCC,IAAI,CAAEC,CAAC,IAAKA,CAAC,YAAYC,gBAAgB,CAAC,EAAA,GAAA,CAAA;EAE7C,IAAI3B,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,EAAE;AACvBc,IAAAA,sBAAA,CAAA,IAAI,gDAAmB,CAAC4B,OAAO,CAAC5B,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,CAAC;AACtD,EAAA;AAEAc,EAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAe,oCAAA,CAAe,CAAAb,IAAA,CAAnB,IAAI,CAAiB;AACvB,CAAC;2GAGyBkB,CAAQ,EAAA;EAChC,IAAIrB,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,EAAE;AACxBY,IAAAA,sBAAA,CAAA,IAAI,gDAAmB,CAACsB,SAAS,CAACtB,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,CAAC;AACvDY,IAAAA,sBAAA,CAAA,IAAI,8CAAiB,CAACsB,SAAS,CAACtB,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,CAAC;AACvD,EAAA;EAEAsB,sBAAA,CAAA,IAAI,EAAAtB,qCAAA,EAAqCiC,CAAC,CAAC7B,MAAO,CAC/C+B,gBAAgB,CAAC;AAAEC,IAAAA,OAAO,EAAE;GAAM,CAAC,CACnCC,IAAI,CAAEC,CAAC,IAAKA,CAAC,YAAYG,oBAAoB,CAAC,EAAA,GAAA,CAAA;EAEjD,IAAI7B,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,EAAE;AACxBY,IAAAA,sBAAA,CAAA,IAAI,gDAAmB,CAAC4B,OAAO,CAAC5B,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,CAAC;AACrDY,IAAAA,sBAAA,CAAA,IAAI,8CAAiB,CAAC4B,OAAO,CAAC5B,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,CAAC;AACrD,EAAA;AAEAY,EAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAe,oCAAA,CAAe,CAAAb,IAAA,CAAnB,IAAI,CAAiB;AACvB,CAAC;;EAIC,IAAIH,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,EAAE;AACvBc,IAAAA,sBAAA,CAAA,IAAI,4CAAe,CAACW,OAAO,GAAG,IAAI,CAACA,OAAO;AAC1CX,IAAAA,sBAAA,CAAA,IAAI,4CAAe,CAACY,IAAI,GAAG,IAAI,CAACA,IAAI;IACpCZ,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,CAAC4C,KAAK,GAAG,SAAS;AACvC,EAAA;EAEA,IAAI9B,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,EAAE;IACxBY,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,CAAC2C,KAAK,GAAG,SAAS;IACtC/B,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,CAAC0C,KAAK,GAAG,SAAS;AACtC9B,IAAAA,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,CAAC4C,YAAY,CAAC,SAAS,EAAE,IAAI,CAACrB,OAAO,CAAC;AAC1DX,IAAAA,sBAAA,CAAA,IAAI,6CAAgB,CAACY,IAAI,GAAG,IAAI,CAACA,IAAI;AACvC,EAAA;AACF,CAAC;2GAGyBC,MAAe,EAAA;EACvC,IAAIA,MAAM,IAAIb,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,EAAE;IACjCc,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAgC,wCAAA,CAAmB,CAAA9B,IAAA,CAAvB,IAAI,EAAoBH,sBAAA,CAAA,IAAI,EAAAd,oCAAA,EAAA,GAAA,CAAe,EAAE,yBAAyB,CAAC;AACzE,EAAA,CAAC,MAAM;IACL,IAAI,CAACgD,KAAK,EAAEC,KAAK,CAACC,cAAc,CAAC,yBAAyB,CAAC;AAC7D,EAAA;AACF,CAAC;6GAG0BvB,MAAe,EAAA;EACxC,IAAIA,MAAM,IAAIb,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,EAAE;IAClCY,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAgC,wCAAA,CAAmB,CAAA9B,IAAA,CAAvB,IAAI,EAAoBH,sBAAA,CAAA,IAAI,EAAAZ,qCAAA,EAAA,GAAA,CAAgB,EAAE,0BAA0B,CAAC;AAC3E,EAAA,CAAC,MAAM;IACL,IAAI,CAAC8C,KAAK,EAAEC,KAAK,CAACC,cAAc,CAAC,0BAA0B,CAAC;AAC9D,EAAA;AACF,CAAC;AAGkBH,wCAAA,GAAA,SAAAA,wCAAAA,CAAAI,MAAmB,EAAEC,QAAgB,EAAA;AACtD,EAAA,MAAMC,aAAa,GAAGF,MAAM,CAACG,YAAY,GAAG,CAAC;AAC7C,EAAA,IAAID,aAAa,EAAE;AACjB,IAAA,IAAI,CAACL,KAAK,EAAEC,KAAK,CAACM,WAAW,CAACH,QAAQ,EAAE,CAAA,EAAGC,aAAa,CAAA,EAAA,CAAI,CAAC;AAC/D,EAAA;AACF,CAAC;AA1YD;AACgBzD,qBAAA,CAAA4D,MAAM,GAAmBC,GAAG,gMAQ4BC,WAAW,CAACd,KAAK,CAACe,MAAM,CAACC,IAAI,CAAA,wjGAAA,EA8F7FF,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,CAAA,qGAAA,EAInCH,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,CAAA,uGAAA,EAInCH,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,CAAA,qGAAA,EAInCH,WAAW,CAACd,KAAK,CAACe,MAAM,CAACG,KAAK,CAAA,iHAAA,EAI9BJ,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,CAAA,iUAAA,EAO/BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACG,KAAK,CAAA,2GAAA,EAI9BJ,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,CAAA,6GAAA,EAI/BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,CAAA,2GAAA,EAI/BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACK,cAAc,CAAA,uHAAA,EAIvCN,WAAW,CAACd,KAAK,CAACe,MAAM,CAACK,cAAc,CAAA,6MAAA,EAQvCN,WAAW,CAACd,KAAK,CAACe,MAAM,CAACG,KAAK,CAAA,qHAAA,EAI9BJ,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,CAAA,uHAAA,EAI/BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,CAAA,qHAAA,EAI/BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACK,cAAc,CAAA,iIAAA,EAIvCN,WAAW,CAACd,KAAK,CAACe,MAAM,CAACK,cAAc,CAAA,0SAAA,EASvCN,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,CAAA,qGAAA,EAInCH,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,CAAA,uGAAA,EAInCH,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,CAAA,qGAAA,EAInCH,WAAW,CAACd,KAAK,CAACe,MAAM,CAACG,KAAK,CAAA,iHAAA,EAI9BJ,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,CAAA,8KAAA,EAM4BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACC,IAAI,CAAA,8DAAA,EAC/BF,WAAW,CAACd,KAAK,CAACe,MAAM,CAACC,IAAI,CAAA,4GAAA,EAGvBF,WAAW,CAACd,KAAK,CAACe,MAAM,CAACC,IAAI,CAAA,qIAAA,EAInBF,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,CAAC,CAAC,CAAA,uHAAA,EAG3BR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,CAAC,CAAC,CAAA,gHAAA,EAGjCR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA,2GAAA,EAG5BR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA,kHAAA,EAG3BR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA,6GAAA,EAG5BR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA,gHAAA,EAG7BR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,8GAG5BR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,+HAGtBR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA,uHAAA,EAG5BR,WAAW,CAACO,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA,ypBAAA,CAvOvF;AA2PWC,UAAA,CAAA,CAAhCC,KAAK,CAAC,OAAO,CAAC,CAAsC,EAAAxE,qBAAA,CAAAyE,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAyCxBF,UAAA,CAAA,CAA5Bf,QAAQ,CAAC;AAAEkB,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAwC,EAAA1E,qBAAA,CAAAyE,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAMvCF,UAAA,CAAA,CAA5Bf,QAAQ,CAAC;AAAEkB,EAAAA,OAAO,EAAE;CAAM,CAAC,CAA4B,EAAA1E,qBAAA,CAAAyE,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AA5S7CzE,qBAAqB,GAAAuE,UAAA,CAAA,CADjCI,aAAa,CAAC,kBAAkB,CAAC,CACrB,EAAA3E,qBAAqB,CA4YjC;;;;"}
+{"version":3,"file":"split-button.js","sources":["../../src/split-button/SplitButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HoverController, PressedController, Role } from \"@m3e/web/core\";\r\nimport { M3eButtonElement, ButtonSize } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport \"@m3e/web/button-group\";\r\n\r\nimport { SplitButtonVariant } from \"./SplitButtonVariant\";\r\n\r\n/**\r\n * A button used to show an action with a menu of related actions.\r\n *\r\n * @description\r\n * The `m3e-split-button` component presents a primary action alongside a menu of related actions,\r\n * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,\r\n * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers\r\n * the main action, while the trailing icon button reveals additional options, enabling efficient workflows\r\n * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious\r\n * interactions, reflecting Material 3's principles of clarity, flexibility, and expressive design.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,\r\n * `m3e-icon-button`, and `m3e-menu` components into a split button.\r\n *\r\n * ```html\r\n * <m3e-split-button>\r\n *  <m3e-button slot=\"leading-button\">\r\n *    <m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit\r\n *  </m3e-button>\r\n *  <m3e-icon-button slot=\"trailing-button\">\r\n *  <m3e-icon name=\"keyboard_arrow_down\"></m3e-icon>\r\n *  <m3e-menu-trigger for=\"menu1\"></m3e-menu-trigger>\r\n * </m3e-icon-button>\r\n * ```\r\n *\r\n * @tag m3e-split-button\r\n *\r\n * @slot leading-button - The leading button used to perform the primary action.\r\n * @slot trailing-button - The trailing icon button used to open a menu of related actions.\r\n *\r\n * @attr variant - The appearance variant of the button.\r\n * @attr size - The size of the button.\r\n *\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).\r\n * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).\r\n * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).\r\n * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).\r\n * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).\r\n */\r\n@customElement(\"m3e-split-button\")\r\nexport class M3eSplitButtonElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"leading-button\"]) {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"])) {\r\n      --m3e-icon-button-extra-small-default-leading-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-unselected-leading-space,\r\n        0.75rem\r\n      );\r\n      --m3e-icon-button-extra-small-default-trailing-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-unselected-trailing-space,\r\n        0.875rem\r\n      );\r\n      --m3e-icon-button-small-default-leading-space: var(\r\n        --m3e-split-button-small-trailing-button-unselected-leading-space,\r\n        0.75rem\r\n      );\r\n      --m3e-icon-button-small-default-trailing-space: var(\r\n        --m3e-split-button-small-trailing-button-unselected-trailing-space,\r\n        0.875rem\r\n      );\r\n      --m3e-icon-button-medium-default-leading-space: var(\r\n        --m3e-split-button-medium-trailing-button-unselected-leading-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-medium-default-trailing-space: var(\r\n        --m3e-split-button-medium-trailing-button-unselected-trailing-space,\r\n        1.0625rem\r\n      );\r\n      --m3e-icon-button-large-default-leading-space: var(\r\n        --m3e-split-button-large-trailing-button-unselected-leading-space,\r\n        1.625rem\r\n      );\r\n      --m3e-icon-button-large-default-trailing-space: var(\r\n        --m3e-split-button-large-trailing-button-unselected-trailing-space,\r\n        2rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-leading-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-unselected-leading-space,\r\n        2.3125rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-trailing-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-unselected-trailing-space,\r\n        3.0625rem\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n      --m3e-icon-button-extra-small-default-leading-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-selected-leading-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-extra-small-default-trailing-space: var(\r\n        --m3e-split-button-extra-small-trailing-button-selected-trailing-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-small-default-leading-space: var(\r\n        --m3e-split-button-small-trailing-button-selected-leading-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-small-default-trailing-space: var(\r\n        --m3e-split-button-small-trailing-button-selected-trailing-space,\r\n        0.8125rem\r\n      );\r\n      --m3e-icon-button-medium-default-leading-space: var(\r\n        --m3e-split-button-medium-trailing-button-selected-leading-space,\r\n        0.9375rem\r\n      );\r\n      --m3e-icon-button-medium-default-trailing-space: var(\r\n        --m3e-split-button-medium-trailing-button-selected-trailing-space,\r\n        0.9375rem\r\n      );\r\n      --m3e-icon-button-large-default-leading-space: var(\r\n        --m3e-split-button-large-trailing-button-selected-leading-space,\r\n        1.8125rem\r\n      );\r\n      --m3e-icon-button-large-default-trailing-space: var(\r\n        --m3e-split-button-large-trailing-button-selected-trailing-space,\r\n        1.8125rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-leading-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-selected-leading-space,\r\n        2.6875rem\r\n      );\r\n      --m3e-icon-button-extra-large-default-trailing-space: var(\r\n        --m3e-split-button-extra-large-trailing-button-selected-trailing-space,\r\n        2.6875rem\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"leading-button\"]:not(:hover)),\r\n    ::slotted([slot=\"leading-button\"]:disabled),\r\n    ::slotted([slot=\"leading-button\"][disabled-interactive]) {\r\n      --m3e-connected-button-group-extra-small-inner-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-small-inner-shape: var(\r\n        --m3e-split-button-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-shape: var(\r\n        --m3e-split-button-medium-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-large-inner-shape: var(\r\n        --m3e-split-button-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    ::slotted([slot=\"leading-button\"]:hover:not(:disabled):not([disabled-interactive])),\r\n    ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):hover:not(:disabled):not([disabled-interactive])) {\r\n      --m3e-connected-button-group-extra-small-inner-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-small-inner-shape: var(\r\n        --m3e-split-button-small-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-shape: var(\r\n        --m3e-split-button-medium-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-large-inner-shape: var(\r\n        --m3e-split-button-large-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-hover-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"leading-button\"]),\r\n    ::slotted([slot=\"trailing-button\"]) {\r\n      --m3e-connected-button-group-extra-small-inner-pressed-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-small-inner-pressed-shape: var(\r\n        --m3e-split-button-small-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-pressed-shape: var(\r\n        --m3e-split-button-medium-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n      --m3e-connected-button-group-large-inner-pressed-shape: var(\r\n        --m3e-split-button-large-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-pressed-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-pressed-size,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):not(:hover)),\r\n    ::slotted([slot=\"trailing-button\"]:disabled),\r\n    ::slotted([slot=\"trailing-button\"][disabled-interactive]) {\r\n      --m3e-connected-button-group-extra-small-inner-shape: var(\r\n        --m3e-split-button-extra-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-small-inner-shape: var(\r\n        --m3e-split-button-small-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-medium-inner-shape: var(\r\n        --m3e-split-button-medium-inner-corner-size,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n      --m3e-connected-button-group-large-inner-shape: var(\r\n        --m3e-split-button-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --m3e-connected-button-group-extra-large-inner-shape: var(\r\n        --m3e-split-button-extra-large-inner-corner-size,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n\r\n    ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n      --_icon-button-icon-transform: rotate(180deg);\r\n      --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n      --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted([slot=\"trailing-button\"]) {\r\n      --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    .base {\r\n      --m3e-icon-button-extra-small-icon-size: calc(\r\n        var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n      );\r\n      --m3e-button-extra-small-icon-size: calc(\r\n        var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n      );\r\n      --m3e-icon-button-small-icon-size: calc(\r\n        var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n      );\r\n      --m3e-button-small-icon-size: calc(\r\n        var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n      );\r\n      --m3e-icon-button-medium-icon-size: calc(\r\n        var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n      );\r\n      --m3e-button-medium-icon-size: calc(\r\n        var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n      );\r\n      --m3e-icon-button-large-icon-size: calc(\r\n        var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n      --m3e-button-large-icon-size: calc(\r\n        var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n      --m3e-icon-button-extra-large-icon-size: calc(\r\n        var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n      --m3e-button-extra-large-icon-size: calc(\r\n        var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n      );\r\n    }\r\n    :host([size=\"extra-small\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"small\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"medium\"]).base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"large\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem);\r\n    }\r\n    :host([size=\"extra-large\"]) .base {\r\n      --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem);\r\n    }\r\n  `;\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */ #leadingButton?: M3eButtonElement;\r\n  /** @private */ #trailingButton?: M3eIconButtonElement;\r\n  /** @private */ #trailingButtonHover = false;\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    capture: true,\r\n    minPressedDuration: 150,\r\n    isPressedKey: (key) => key === \" \",\r\n    callback: (pressed, _, target) => {\r\n      switch (target) {\r\n        case this.#leadingButton:\r\n          this.#updateLeadingButtonShape(pressed);\r\n          break;\r\n        case this.#trailingButton:\r\n          this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover);\r\n          break;\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering, target) => {\r\n      switch (target) {\r\n        case this.#trailingButton:\r\n          if (!this.#trailingButton?.disabled && !this.#trailingButton?.disabledInteractive) {\r\n            this.#trailingButtonHover = hovering;\r\n            this.#updateTrailingButtonShape(hovering);\r\n          }\r\n          break;\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * The appearance variant of the button.\r\n   * @default \"filled\"\r\n   */\r\n  @property({ reflect: true }) variant: SplitButtonVariant = \"filled\";\r\n\r\n  /**\r\n   * The size of the button.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonSize = \"small\";\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-button-group class=\"base\" disable-role variant=\"connected\" size=\"${this.size}\">\r\n      <slot name=\"leading-button\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n      <slot name=\"trailing-button\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n    </m3e-button-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLeadingSlotChange(e: Event): void {\r\n    if (this.#leadingButton) {\r\n      this.#pressedController.unobserve(this.#leadingButton);\r\n    }\r\n\r\n    this.#leadingButton = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof M3eButtonElement);\r\n\r\n    if (this.#leadingButton) {\r\n      this.#pressedController.observe(this.#leadingButton);\r\n    }\r\n\r\n    this.#updateButtons();\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingSlotChange(e: Event): void {\r\n    if (this.#trailingButton) {\r\n      this.#pressedController.unobserve(this.#trailingButton);\r\n      this.#hoverController.unobserve(this.#trailingButton);\r\n    }\r\n\r\n    this.#trailingButton = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof M3eIconButtonElement);\r\n\r\n    if (this.#trailingButton) {\r\n      this.#pressedController.observe(this.#trailingButton);\r\n      this.#hoverController.observe(this.#trailingButton);\r\n    }\r\n\r\n    this.#updateButtons();\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    if (this.#leadingButton) {\r\n      this.#leadingButton.variant = this.variant;\r\n      this.#leadingButton.size = this.size;\r\n      this.#leadingButton.shape = \"rounded\";\r\n    }\r\n\r\n    if (this.#trailingButton) {\r\n      this.#trailingButton.width = \"default\";\r\n      this.#trailingButton.shape = \"rounded\";\r\n      this.#trailingButton.setAttribute(\"variant\", this.variant);\r\n      this.#trailingButton.size = this.size;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateLeadingButtonShape(update: boolean): void {\r\n    if (update && this.#leadingButton) {\r\n      this.#updateButtonShape(this.#leadingButton, \"--_leading-button-shape\");\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_leading-button-shape\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateTrailingButtonShape(update: boolean): void {\r\n    if (update && this.#trailingButton) {\r\n      this.#updateButtonShape(this.#trailingButton, \"--_trailing-button-shape\");\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_trailing-button-shape\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtonShape(button: HTMLElement, property: string): void {\r\n    const adjustedShape = button.clientHeight / 2;\r\n    if (adjustedShape) {\r\n      this._base?.style.setProperty(property, `${adjustedShape}px`);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-split-button\": M3eSplitButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eSplitButtonElement","Role","LitElement","constructor","_M3eSplitButtonElement_leadingButton","set","_M3eSplitButtonElement_trailingButton","_M3eSplitButtonElement_trailingButtonHover","_M3eSplitButtonElement_pressedController","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_","__classPrivateFieldGet","_M3eSplitButtonElement_instances","_M3eSplitButtonElement_updateLeadingButtonShape","call","_M3eSplitButtonElement_updateTrailingButtonShape","_M3eSplitButtonElement_hoverController","HoverController","hovering","disabled","disabledInteractive","__classPrivateFieldSet","variant","size","update","changedProperties","has","_M3eSplitButtonElement_updateButtons","render","html","_M3eSplitButtonElement_handleLeadingSlotChange","_M3eSplitButtonElement_handleTrailingSlotChange","e","unobserve","assignedElements","flatten","find","x","M3eButtonElement","observe","M3eIconButtonElement","shape","width","setAttribute","_M3eSplitButtonElement_updateButtonShape","_base","style","removeProperty","button","property","adjustedShape","clientHeight","setProperty","styles","css","DesignToken","corner","full","extraSmall","small","medium","largeIncreased","density","calc","__decorate","query","prototype","reflect","customElement"],"mappings":"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"}