@m3e/web 2.5.10 → 2.5.12

package/dist/select.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.min.js","sources":["../../src/select/SelectElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Touched,\r\n  DesignToken,\r\n  formValue,\r\n  M3eFocusRingElement,\r\n  scrollIntoViewIfNeeded,\r\n  Role,\r\n  Focusable,\r\n  prefersReducedMotion,\r\n  forcedColorsActive,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  customElement,\r\n  MutationController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eFormFieldElement, FormFieldControl } from \"@m3e/web/form-field\";\r\nimport { M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\n\r\n/**\r\n * A form control that allows users to select a value from a set of predefined options.\r\n *\r\n * @description\r\n * The `m3e-select` component follows Material Design 3 principles and provides a comprehensive\r\n * selection interface for capturing user input. It supports both single and multiple selection modes,\r\n * customizable validation states, and accessible keyboard navigation. The component integrates seamlessly\r\n * with form field containers and dynamically positions its option list menu to ensure optimal viewport\r\n * visibility. Selection changes are communicated through standard form events, enabling predictable integration\r\n * with form submission and reactive state management systems.\r\n *\r\n * @example\r\n * The following demonstrates a `m3e-select` component wrapped in a `m3e-form-field` with a slotted label.\r\n * The label is associated with the select via the `for` and `id` attributes, ensuring accessible form semantics.\r\n * Each `m3e-option` defines an option within the dropdown.\r\n *\r\n * ```html\r\n * <m3e-form-field>\r\n *   <label slot=\"label\" for=\"select\">Choose your favorite fruit</label>\r\n *   <m3e-select id=\"select\">\r\n *     <m3e-option>Apples</m3e-option>\r\n *     <m3e-option>Oranges</m3e-option>\r\n *     <m3e-option>Bananas</m3e-option>\r\n *     <m3e-option>Grapes</m3e-option>\r\n *   </m3e-select>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-select\r\n *\r\n * @slot - Renders the options of the select.\r\n * @slot arrow - Renders the dropdown arrow.\r\n * @slot value - Renders the selected value(s).\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator for single select options.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n *\r\n * @cssprop --m3e-form-field-font-size - The font size of the select control.\r\n * @cssprop --m3e-form-field-font-weight - The font weight of the select control.\r\n * @cssprop --m3e-form-field-line-height - The line height of the select control.\r\n * @cssprop --m3e-form-field-tracking - The letter spacing of the select control.\r\n * @cssprop --m3e-select-container-shape - The corner radius of the select container.\r\n * @cssprop --m3e-select-disabled-color - The text color when the select is disabled.\r\n * @cssprop --m3e-select-disabled-color-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-select-icon-size - The size of the dropdown arrow icon.\r\n */\r\n@customElement(\"m3e-select\")\r\nexport class M3eSelectElement\r\n  extends Focusable(\r\n    Labelled(\r\n      RequiredConstraintValidation(\r\n        Dirty(\r\n          Touched(\r\n            Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"combobox\")))))),\r\n          ),\r\n        ),\r\n      ),\r\n    ),\r\n  )\r\n  implements FormFieldControl\r\n{\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      outline: none;\r\n      position: relative;\r\n      font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      min-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      border-radius: var(--m3e-select-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host(:disabled) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-select-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .options {\r\n      display: none;\r\n    }\r\n    .base {\r\n      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      overflow: hidden;\r\n    }\r\n    .arrow-wrapper {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-top: var(--_select-arrow-margin-top);\r\n    }\r\n    ::slotted([slot=\"arrow\"]),\r\n    .arrow {\r\n      vertical-align: middle;\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-select-icon-size, 1.5rem);\r\n    }\r\n    :host(:is(:state(--open), :--open)) .focus-ring {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __nextId = 0;\r\n\r\n  /** @private */ private _options = new Array<M3eOptionElement>();\r\n  /** @private */ #clone?: HTMLElement;\r\n\r\n  /** @private */ #menu?: M3eOptionPanelElement;\r\n  /** @private */ #ignoreKeyUp = false;\r\n  /** @private */ #ignoreFocusVisible = false;\r\n\r\n  /** @private */ readonly #id = `m3e-select-${M3eSelectElement.__nextId++}`;\r\n  /** @private */ readonly #listId = `${this.#id}-list`;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n  /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n  /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n  /** @private */ readonly #menuPointerUpHandler = (e: PointerEvent) => this.#handleMenuPointerUp(e);\r\n  /** @private */ #menuPressedOption?: M3eOptionElement;\r\n\r\n  /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withPageUpAndDown()\r\n    .withVerticalOrientation()\r\n    .withTypeahead()\r\n    .onActiveItemChange(() => {\r\n      if (this._listKeyManager.activeItem) {\r\n        this.#activateOption(this._listKeyManager.activeItem);\r\n      }\r\n    });\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether to hide the selection indicator for single select options.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Class or list of classes to be applied to the select's overlay panel.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n  get #options(): readonly M3eOptionElement[] {\r\n    return this._listKeyManager?.items ?? [];\r\n  }\r\n\r\n  get #selected(): readonly M3eOptionElement[] {\r\n    return this.#options.filter((x) => x.selected);\r\n  }\r\n\r\n  /** The options that can be selected. */\r\n  get options(): readonly M3eOptionElement[] {\r\n    return this._options ?? [];\r\n  }\r\n\r\n  /** The selected option(s). */\r\n  get selected(): readonly M3eOptionElement[] {\r\n    return this.options.filter((x) => x.selected);\r\n  }\r\n\r\n  /** The selected (enabled) value(s). */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  get shouldLabelFloat(): boolean {\r\n    return this.selected.filter((x) => !x.isEmpty).length > 0;\r\n  }\r\n\r\n  /** @private */\r\n  get #formField(): M3eFormFieldElement | null {\r\n    return this.closest(\"m3e-form-field\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  onContainerClick(): void {\r\n    this.#ignoreFocusVisible = true;\r\n    this.#toggleMenu();\r\n    this.focus({ preventScroll: true });\r\n  }\r\n\r\n  /**\r\n   * Clears the value of the element.\r\n   * @param [restoreFocus=false] Whether to restore input focus.\r\n   */\r\n  clear(restoreFocus = false): void {\r\n    const selected = this.#selected;\r\n    const willChange = selected.length > 0;\r\n\r\n    if (willChange) {\r\n      selected.forEach((x) => {\r\n        x.selected = false;\r\n        this.#updateSelectionState(x);\r\n      });\r\n      this.requestUpdate();\r\n    }\r\n\r\n    this.#hideMenu();\r\n\r\n    if (willChange) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n\r\n    if (restoreFocus) {\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.ariaHasPopup = \"listbox\";\r\n    this.ariaExpanded = \"false\";\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n  }\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(\"hideSelectionIndicator\")) {\r\n      this.#options.forEach((x) => setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    this._focusRing?.attach(this);\r\n\r\n    if (this.#formField && this._focusRing) {\r\n      this._focusRing.style.display = \"none\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html` <m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"base\">\r\n        <m3e-text-overflow>\r\n          <slot name=\"value\">\r\n            ${this.selected\r\n              .filter((x) => !x.isEmpty)\r\n              .map((x, i) => (i > 0 ? html`<span>, </span>${x.label}` : x.label))}\r\n          </slot>\r\n        </m3e-text-overflow>\r\n        <div class=\"arrow-wrapper\" aria-hidden=\"true\">\r\n          <slot name=\"arrow\">\r\n            <svg class=\"arrow\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M480-360 280-560h400L480-360Z\" />\r\n            </svg>\r\n          </slot>\r\n        </div>\r\n      </div>\r\n      <div class=\"options\" aria-hidden=\"true\">\r\n        <slot></slot>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n    const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n    added.forEach((x) => {\r\n      x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n      setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator);\r\n    });\r\n\r\n    this._options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n    this.#formField?.notifyControlStateChange();\r\n    if (this.#menu) {\r\n      this.#menu.replaceChildren(...this.#clone.childNodes);\r\n      if (this._options.length == 0) {\r\n        this.#hideMenu();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented || this.disabled) return;\r\n    this.#toggleMenu();\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented) return;\r\n    this.#ignoreFocusVisible = false;\r\n\r\n    switch (e.key) {\r\n      case \" \":\r\n      case \"Enter\":\r\n        e.preventDefault();\r\n        if (!this.multi) {\r\n          if (this.#menu && this._listKeyManager.activeItem) {\r\n            this.#selectOption(this._listKeyManager.activeItem);\r\n          }\r\n          if (this.#menu?.isOpen) {\r\n            if (!prefersReducedMotion()) {\r\n              setTimeout(() => this.#hideMenu(), 150);\r\n            } else {\r\n              this.#hideMenu();\r\n            }\r\n          } else {\r\n            this.#showMenu();\r\n          }\r\n        } else if (!this.#menu) {\r\n          this.#ignoreKeyUp = true;\r\n          this.#toggleMenu();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Escape\":\r\n      case \"Tab\":\r\n        this.#hideMenu();\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n        if (this.multi && !this.#menu) {\r\n          this.#toggleMenu();\r\n        } else {\r\n          this._listKeyManager.onKeyDown(e);\r\n          if (!this.#menu && this._listKeyManager.activeItem) {\r\n            this.#selectOption(this._listKeyManager.activeItem);\r\n          }\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this._listKeyManager.onKeyDown(e);\r\n        if (!this.multi && !this.#menu && this._listKeyManager.activeItem) {\r\n          this.#selectOption(this._listKeyManager.activeItem);\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.#ignoreKeyUp) {\r\n      this.#ignoreKeyUp = false;\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \" \":\r\n      case \"Enter\":\r\n        if (!this.multi) return;\r\n        e.preventDefault();\r\n        if (this.#menu && this._listKeyManager.activeItem) {\r\n          this.#selectOption(this._listKeyManager.activeItem);\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMenuPointerDown(e: PointerEvent): void {\r\n    this.#menuPressedOption = undefined;\r\n\r\n    if (e.button === 2) return;\r\n    // Prevent click to avoid stealing focus.\r\n    e.preventDefault();\r\n    e.stopImmediatePropagation();\r\n\r\n    const option = <M3eOptionElement | undefined>(\r\n      e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n    );\r\n\r\n    if (option && !option.disabled) {\r\n      this.#menuPressedOption = option;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMenuPointerUp(e: PointerEvent): void {\r\n    const pressedOption = this.#menuPressedOption;\r\n    this.#menuPressedOption = undefined;\r\n\r\n    if (e.button === 2) return;\r\n\r\n    if (!pressedOption) return;\r\n\r\n    const option = <M3eOptionElement | undefined>(\r\n      e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n    );\r\n\r\n    if (option === pressedOption) {\r\n      this.#selectOption(option);\r\n      this._listKeyManager.setActiveItem(option);\r\n      if (this.multi) {\r\n        this.requestUpdate();\r\n      }\r\n    }\r\n\r\n    if (!this.multi) {\r\n      if (!prefersReducedMotion()) {\r\n        setTimeout(() => this.#hideMenu(), 150);\r\n      } else {\r\n        this.#hideMenu();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMenuToggle(e: ToggleEvent): void {\r\n    if (!this.#menu) return;\r\n\r\n    if (e.newState !== \"closed\") {\r\n      const option = this.#selected.find((x) => !x.disabled) ?? this._listKeyManager.items.find((x) => !x.disabled);\r\n      this._listKeyManager.setActiveItem(option);\r\n      if (option) {\r\n        scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n      }\r\n      this.dispatchEvent(\r\n        new ToggleEvent(\"toggle\", {\r\n          oldState: e.oldState,\r\n          newState: e.newState,\r\n        }),\r\n      );\r\n    } else {\r\n      if (prefersReducedMotion()) {\r\n        this.#destroyMenu(e);\r\n      } else {\r\n        // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n        // This is a workaround until that is fixed.\r\n        setTimeout(() => this.#destroyMenu(e), 100);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #destroyMenu(e: ToggleEvent): void {\r\n    if (!this.#menu) return;\r\n\r\n    this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n    this.#menu.remove();\r\n    this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n    this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n    this.#menu.removeEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n    this.#menu = undefined;\r\n\r\n    this.ariaExpanded = \"false\";\r\n    this.removeAttribute(\"aria-controls\");\r\n    this.removeAttribute(\"aria-owns\");\r\n    this.removeAttribute(\"aria-activedescendant\");\r\n    this.requestUpdate();\r\n\r\n    deleteCustomState(this, \"--open\");\r\n    this.#formField?.notifyControlStateChange();\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: e.oldState,\r\n        newState: e.newState,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #toggleMenu(): void {\r\n    if (this.disabled) return;\r\n    if (this.#menu) {\r\n      this.#hideMenu();\r\n    } else {\r\n      this.#showMenu();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #showMenu(): void {\r\n    if (this.#menu || this._options.length == 0) return;\r\n\r\n    this.#menu = document.createElement(\"m3e-option-panel\");\r\n    if (this.multi) {\r\n      this.#menu.ariaMultiSelectable = \"true\";\r\n    }\r\n\r\n    this.#menu.id = this.#listId;\r\n\r\n    if (this.panelClass) {\r\n      for (const klass of this.panelClass\r\n        .split(/\\s+/)\r\n        .map((d) => d.trim())\r\n        .filter(Boolean)) {\r\n        this.#menu.classList.add(klass);\r\n      }\r\n    }\r\n\r\n    this.#menu.style.overflowX = \"hidden\";\r\n    this.#menu.fitAnchorWidth = true;\r\n    this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n    this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n    this.#menu.addEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n\r\n    if (this.#clone) {\r\n      this.#menu.replaceChildren(...this.#clone.childNodes);\r\n    }\r\n\r\n    (this.#formField ?? this).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n    this.ariaExpanded = \"true\";\r\n    this.setAttribute(\"aria-controls\", this.#listId);\r\n    this.setAttribute(\"aria-owns\", this.#listId);\r\n    this.#formField?.notifyControlStateChange();\r\n\r\n    setTimeout(() => {\r\n      this.#menu?.show(this, this.#formField?.menuAnchor);\r\n      addCustomState(this, \"--open\");\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #hideMenu(): void {\r\n    if (!this.#menu) return;\r\n\r\n    this.#menu.hide();\r\n    deleteCustomState(this, \"--open\");\r\n  }\r\n\r\n  /** @private */\r\n  #activateOption(option: M3eOptionElement): void {\r\n    this.setAttribute(\"aria-activedescendant\", option.id);\r\n    if (this.#menu) {\r\n      scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n      const focusVisible = !this.#ignoreFocusVisible && (this.matches(\":focus-visible\") || forcedColorsActive());\r\n\r\n      this.#options.forEach((x) => {\r\n        const active = x === option && focusVisible;\r\n        if (active) {\r\n          x.focusRing?.show();\r\n          x.stateLayer?.show(\"focused\");\r\n        } else {\r\n          x.focusRing?.hide();\r\n          x.stateLayer?.hide(\"focused\");\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateSelectionState(clone: M3eOptionElement): void {\r\n    const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n    if (option) {\r\n      option.selected = clone.selected;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #selectOption(option: M3eOptionElement): void {\r\n    const selected = this.multi ? !option.selected : true;\r\n    if (option.selected === selected) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      option.selected = selected;\r\n      this.#updateSelectionState(option);\r\n\r\n      if (!this.multi) {\r\n        this.#selected\r\n          .filter((x) => x !== option)\r\n          .forEach((x) => {\r\n            x.selected = false;\r\n            this.#updateSelectionState(x);\r\n          });\r\n      }\r\n\r\n      this.requestUpdate();\r\n      this.#formField?.notifyControlStateChange();\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSelectElementEventMap extends HTMLElementEventMap {\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSelectElement {\r\n  addEventListener<K extends keyof M3eSelectElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[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 M3eSelectElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[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-select\": M3eSelectElement;\r\n  }\r\n}\r\n"],"names":["M3eSelectElement","M3eSelectElement_1","Focusable","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","super","this","_options","Array","_M3eSelectElement_clone","set","_M3eSelectElement_menu","_M3eSelectElement_ignoreKeyUp","_M3eSelectElement_ignoreFocusVisible","_M3eSelectElement_id","__nextId","_M3eSelectElement_listId","__classPrivateFieldGet","_M3eSelectElement_clickHandler","e","call","_M3eSelectElement_keyDownHandler","_M3eSelectElement_keyUpHandler","_M3eSelectElement_menuToggleHandler","_M3eSelectElement_menuPointerDownHandler","_M3eSelectElement_menuPointerUpHandler","_M3eSelectElement_menuPressedOption","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withTypeahead","onActiveItemChange","activeItem","_M3eSelectElement_instances","_M3eSelectElement_activateOption","hideSelectionIndicator","multi","panelClass","MutationController","config","childList","subtree","callback","_M3eSelectElement_handleMutation","options","selected","filter","x","value","values","disabled","map","length","WeakMap","WeakSet","_M3eSelectElement_options_get","items","_M3eSelectElement_selected_get","formValue","isArray","data","FormData","append","name","shouldLabelFloat","isEmpty","onContainerClick","__classPrivateFieldSet","_M3eSelectElement_toggleMenu","focus","preventScroll","clear","restoreFocus","willChange","forEach","_M3eSelectElement_updateSelectionState","requestUpdate","_M3eSelectElement_hideMenu","dispatchEvent","Event","bubbles","connectedCallback","ariaHasPopup","ariaExpanded","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","setCustomState","firstUpdated","_changedProperties","_focusRing","attach","_M3eSelectElement_formField_get","style","display","render","html","i","label","closest","cloneNode","added","setItems","querySelectorAll","id","indexOf","notifyControlStateChange","replaceChildren","childNodes","defaultPrevented","key","preventDefault","_M3eSelectElement_selectOption","isOpen","prefersReducedMotion","setTimeout","_M3eSelectElement_showMenu","onKeyDown","undefined","button","stopImmediatePropagation","option","composedPath","find","HTMLElement","tagName","pressedOption","setActiveItem","newState","scrollIntoViewIfNeeded","block","behavior","ToggleEvent","oldState","_M3eSelectElement_destroyMenu","remove","removeAttribute","deleteCustomState","document","createElement","ariaMultiSelectable","klass","split","d","trim","Boolean","classList","add","overflowX","fitAnchorWidth","insertAdjacentElement","setAttribute","show","menuAnchor","addCustomState","hide","focusVisible","matches","forcedColorsActive","focusRing","stateLayer","clone","cancelable","styles","css","DesignToken","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","extraSmall","color","onSurface","__decorate","query","prototype","property","attribute","type","customElement"],"mappings":"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"}
+{"version":3,"file":"select.min.js","sources":["../../src/select/SelectElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Touched,\r\n  DesignToken,\r\n  formValue,\r\n  M3eFocusRingElement,\r\n  scrollIntoViewIfNeeded,\r\n  Role,\r\n  Focusable,\r\n  prefersReducedMotion,\r\n  forcedColorsActive,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  customElement,\r\n  MutationController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eFormFieldElement, FormFieldControl } from \"@m3e/web/form-field\";\r\nimport { M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\n\r\n/**\r\n * A form control that allows users to select a value from a set of predefined options.\r\n *\r\n * @description\r\n * The `m3e-select` component follows Material Design 3 principles and provides a comprehensive\r\n * selection interface for capturing user input. It supports both single and multiple selection modes,\r\n * customizable validation states, and accessible keyboard navigation. The component integrates seamlessly\r\n * with form field containers and dynamically positions its option list menu to ensure optimal viewport\r\n * visibility. Selection changes are communicated through standard form events, enabling predictable integration\r\n * with form submission and reactive state management systems.\r\n *\r\n * @example\r\n * The following demonstrates a `m3e-select` component wrapped in a `m3e-form-field` with a slotted label.\r\n * The label is associated with the select via the `for` and `id` attributes, ensuring accessible form semantics.\r\n * Each `m3e-option` defines an option within the dropdown.\r\n *\r\n * ```html\r\n * <m3e-form-field>\r\n *   <label slot=\"label\" for=\"select\">Choose your favorite fruit</label>\r\n *   <m3e-select id=\"select\">\r\n *     <m3e-option>Apples</m3e-option>\r\n *     <m3e-option>Oranges</m3e-option>\r\n *     <m3e-option>Bananas</m3e-option>\r\n *     <m3e-option>Grapes</m3e-option>\r\n *   </m3e-select>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-select\r\n *\r\n * @slot - Renders the options of the select.\r\n * @slot arrow - Renders the dropdown arrow.\r\n * @slot value - Renders the selected value(s).\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator for single select options.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n *\r\n * @cssprop --m3e-form-field-font-size - The font size of the select control.\r\n * @cssprop --m3e-form-field-font-weight - The font weight of the select control.\r\n * @cssprop --m3e-form-field-line-height - The line height of the select control.\r\n * @cssprop --m3e-form-field-tracking - The letter spacing of the select control.\r\n * @cssprop --m3e-select-container-shape - The corner radius of the select container.\r\n * @cssprop --m3e-select-disabled-color - The text color when the select is disabled.\r\n * @cssprop --m3e-select-disabled-color-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-select-icon-size - The size of the dropdown arrow icon.\r\n */\r\n@customElement(\"m3e-select\")\r\nexport class M3eSelectElement\r\n  extends Focusable(\r\n    Labelled(\r\n      RequiredConstraintValidation(\r\n        Dirty(\r\n          Touched(\r\n            Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"combobox\")))))),\r\n          ),\r\n        ),\r\n      ),\r\n    ),\r\n  )\r\n  implements FormFieldControl\r\n{\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      outline: none;\r\n      position: relative;\r\n      font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      min-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      border-radius: var(--m3e-select-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host(:disabled) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-select-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .options {\r\n      display: none;\r\n    }\r\n    .base {\r\n      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      overflow: hidden;\r\n    }\r\n    .arrow-wrapper {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-top: var(--_select-arrow-margin-top);\r\n    }\r\n    ::slotted([slot=\"arrow\"]),\r\n    .arrow {\r\n      vertical-align: middle;\r\n      width: 1em;\r\n      height: 1em;\r\n      font-size: var(--m3e-select-icon-size, 1.5rem);\r\n    }\r\n    :host(:is(:state(--open), :--open)) .focus-ring {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __nextId = 0;\r\n\r\n  /** @private */ private _options = new Array<M3eOptionElement>();\r\n  /** @private */ #clone?: HTMLElement;\r\n\r\n  /** @private */ #menu?: M3eOptionPanelElement;\r\n  /** @private */ #ignoreKeyUp = false;\r\n  /** @private */ #ignoreFocusVisible = false;\r\n\r\n  /** @private */ readonly #id = `m3e-select-${M3eSelectElement.__nextId++}`;\r\n  /** @private */ readonly #listId = `${this.#id}-list`;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n  /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n  /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n  /** @private */ readonly #menuPointerUpHandler = (e: PointerEvent) => this.#handleMenuPointerUp(e);\r\n  /** @private */ #menuPressedOption?: M3eOptionElement;\r\n\r\n  /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withPageUpAndDown()\r\n    .withVerticalOrientation()\r\n    .withTypeahead()\r\n    .onActiveItemChange(() => {\r\n      if (this._listKeyManager.activeItem) {\r\n        this.#activateOption(this._listKeyManager.activeItem);\r\n      }\r\n    });\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether to hide the selection indicator for single select options.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Class or list of classes to be applied to the select's overlay panel.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n  get #options(): readonly M3eOptionElement[] {\r\n    return this._listKeyManager?.items ?? [];\r\n  }\r\n\r\n  get #selected(): readonly M3eOptionElement[] {\r\n    return this.#options.filter((x) => x.selected);\r\n  }\r\n\r\n  /** The options that can be selected. */\r\n  get options(): readonly M3eOptionElement[] {\r\n    return this._options ?? [];\r\n  }\r\n\r\n  /** The selected option(s). */\r\n  get selected(): readonly M3eOptionElement[] {\r\n    return this.options.filter((x) => x.selected);\r\n  }\r\n\r\n  /** The selected (enabled) value(s). */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  get shouldLabelFloat(): boolean {\r\n    return this.selected.filter((x) => !x.isEmpty).length > 0;\r\n  }\r\n\r\n  /** @private */\r\n  get #formField(): M3eFormFieldElement | null {\r\n    return this.closest(\"m3e-form-field\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  onContainerClick(): void {\r\n    this.#ignoreFocusVisible = true;\r\n    this.#toggleMenu();\r\n    this.focus({ preventScroll: true });\r\n  }\r\n\r\n  /**\r\n   * Clears the value of the element.\r\n   * @param [restoreFocus=false] Whether to restore input focus.\r\n   */\r\n  clear(restoreFocus = false): void {\r\n    const selected = this.#selected;\r\n    const willChange = selected.length > 0;\r\n\r\n    if (willChange) {\r\n      selected.forEach((x) => {\r\n        x.selected = false;\r\n        this.#updateSelectionState(x);\r\n      });\r\n      this.requestUpdate();\r\n    }\r\n\r\n    this.#hideMenu();\r\n\r\n    if (willChange) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n\r\n    if (restoreFocus) {\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.ariaHasPopup = \"listbox\";\r\n    this.ariaExpanded = \"false\";\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n  }\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(\"hideSelectionIndicator\")) {\r\n      this.#options.forEach((x) => setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    this._focusRing?.attach(this);\r\n\r\n    if (this.#formField && this._focusRing) {\r\n      this._focusRing.style.display = \"none\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html` <m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"base\">\r\n        <m3e-text-overflow>\r\n          <slot name=\"value\">\r\n            ${this.selected\r\n              .filter((x) => !x.isEmpty)\r\n              .map((x, i) => (i > 0 ? html`<span>, </span>${x.label}` : x.label))}\r\n          </slot>\r\n        </m3e-text-overflow>\r\n        <div class=\"arrow-wrapper\" aria-hidden=\"true\">\r\n          <slot name=\"arrow\">\r\n            <svg class=\"arrow\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M480-360 280-560h400L480-360Z\" />\r\n            </svg>\r\n          </slot>\r\n        </div>\r\n      </div>\r\n      <div class=\"options\" aria-hidden=\"true\" @state-change=\"${this.#handleOptionStateChange}\">\r\n        <slot></slot>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleOptionStateChange(e: Event): void {\r\n    if (!(e.target instanceof M3eOptionElement)) return;\r\n    e.stopImmediatePropagation();\r\n\r\n    const index = this.options.indexOf(e.target);\r\n    if (index == -1) return;\r\n\r\n    const clone = this.#options[index];\r\n    if (!clone) return;\r\n\r\n    clone.disabled = e.target.disabled;\r\n\r\n    if (clone.selected === e.target.selected) return;\r\n\r\n    clone.selected = e.target.selected;\r\n\r\n    if (!this.isUpdatePending) {\r\n      this.requestUpdate();\r\n    }\r\n\r\n    this.#formField?.notifyControlStateChange(true);\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n    const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n    added.forEach((x) => {\r\n      x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n      setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator);\r\n    });\r\n\r\n    this._options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n    this.#formField?.notifyControlStateChange();\r\n    if (this.#menu) {\r\n      this.#menu.replaceChildren(...this.#clone.childNodes);\r\n      if (this._options.length == 0) {\r\n        this.#hideMenu();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented || this.disabled) return;\r\n    this.#toggleMenu();\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented) return;\r\n    this.#ignoreFocusVisible = false;\r\n\r\n    switch (e.key) {\r\n      case \" \":\r\n      case \"Enter\":\r\n        e.preventDefault();\r\n        if (!this.multi) {\r\n          if (this.#menu && this._listKeyManager.activeItem) {\r\n            this.#selectOption(this._listKeyManager.activeItem);\r\n          }\r\n          if (this.#menu?.isOpen) {\r\n            if (!prefersReducedMotion()) {\r\n              setTimeout(() => this.#hideMenu(), 150);\r\n            } else {\r\n              this.#hideMenu();\r\n            }\r\n          } else {\r\n            this.#showMenu();\r\n          }\r\n        } else if (!this.#menu) {\r\n          this.#ignoreKeyUp = true;\r\n          this.#toggleMenu();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Escape\":\r\n      case \"Tab\":\r\n        this.#hideMenu();\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n        if (this.multi && !this.#menu) {\r\n          this.#toggleMenu();\r\n        } else {\r\n          this._listKeyManager.onKeyDown(e);\r\n          if (!this.#menu && this._listKeyManager.activeItem) {\r\n            this.#selectOption(this._listKeyManager.activeItem);\r\n          }\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this._listKeyManager.onKeyDown(e);\r\n        if (!this.multi && !this.#menu && this._listKeyManager.activeItem) {\r\n          this.#selectOption(this._listKeyManager.activeItem);\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.#ignoreKeyUp) {\r\n      this.#ignoreKeyUp = false;\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \" \":\r\n      case \"Enter\":\r\n        if (!this.multi) return;\r\n        e.preventDefault();\r\n        if (this.#menu && this._listKeyManager.activeItem) {\r\n          this.#selectOption(this._listKeyManager.activeItem);\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMenuPointerDown(e: PointerEvent): void {\r\n    this.#menuPressedOption = undefined;\r\n\r\n    if (e.button === 2) return;\r\n    // Prevent click to avoid stealing focus.\r\n    e.preventDefault();\r\n    e.stopImmediatePropagation();\r\n\r\n    const option = <M3eOptionElement | undefined>(\r\n      e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n    );\r\n\r\n    if (option && !option.disabled) {\r\n      this.#menuPressedOption = option;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMenuPointerUp(e: PointerEvent): void {\r\n    const pressedOption = this.#menuPressedOption;\r\n    this.#menuPressedOption = undefined;\r\n\r\n    if (e.button === 2) return;\r\n\r\n    if (!pressedOption) return;\r\n\r\n    const option = <M3eOptionElement | undefined>(\r\n      e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n    );\r\n\r\n    if (option === pressedOption) {\r\n      this.#selectOption(option);\r\n      this._listKeyManager.setActiveItem(option);\r\n      if (this.multi) {\r\n        this.requestUpdate();\r\n      }\r\n    }\r\n\r\n    if (!this.multi) {\r\n      if (!prefersReducedMotion()) {\r\n        setTimeout(() => this.#hideMenu(), 150);\r\n      } else {\r\n        this.#hideMenu();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMenuToggle(e: ToggleEvent): void {\r\n    if (!this.#menu) return;\r\n\r\n    if (e.newState !== \"closed\") {\r\n      const option = this.#selected.find((x) => !x.disabled) ?? this._listKeyManager.items.find((x) => !x.disabled);\r\n      this._listKeyManager.setActiveItem(option);\r\n      if (option) {\r\n        scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n      }\r\n      this.dispatchEvent(\r\n        new ToggleEvent(\"toggle\", {\r\n          oldState: e.oldState,\r\n          newState: e.newState,\r\n        }),\r\n      );\r\n    } else {\r\n      if (prefersReducedMotion()) {\r\n        this.#destroyMenu(e);\r\n      } else {\r\n        // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n        // This is a workaround until that is fixed.\r\n        setTimeout(() => this.#destroyMenu(e), 100);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #destroyMenu(e: ToggleEvent): void {\r\n    if (!this.#menu) return;\r\n\r\n    this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n    this.#menu.remove();\r\n    this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n    this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n    this.#menu.removeEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n    this.#menu = undefined;\r\n\r\n    this.ariaExpanded = \"false\";\r\n    this.removeAttribute(\"aria-controls\");\r\n    this.removeAttribute(\"aria-owns\");\r\n    this.removeAttribute(\"aria-activedescendant\");\r\n    this.requestUpdate();\r\n\r\n    deleteCustomState(this, \"--open\");\r\n    this.#formField?.notifyControlStateChange();\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: e.oldState,\r\n        newState: e.newState,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #toggleMenu(): void {\r\n    if (this.disabled) return;\r\n    if (this.#menu) {\r\n      this.#hideMenu();\r\n    } else {\r\n      this.#showMenu();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #showMenu(): void {\r\n    if (this.#menu || this._options.length == 0) return;\r\n\r\n    this.#menu = document.createElement(\"m3e-option-panel\");\r\n    if (this.multi) {\r\n      this.#menu.ariaMultiSelectable = \"true\";\r\n    }\r\n\r\n    this.#menu.id = this.#listId;\r\n\r\n    if (this.panelClass) {\r\n      for (const klass of this.panelClass\r\n        .split(/\\s+/)\r\n        .map((d) => d.trim())\r\n        .filter(Boolean)) {\r\n        this.#menu.classList.add(klass);\r\n      }\r\n    }\r\n\r\n    this.#menu.style.overflowX = \"hidden\";\r\n    this.#menu.fitAnchorWidth = true;\r\n    this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n    this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n    this.#menu.addEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n\r\n    if (this.#clone) {\r\n      this.#menu.replaceChildren(...this.#clone.childNodes);\r\n    }\r\n\r\n    (this.#formField ?? this).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n    this.ariaExpanded = \"true\";\r\n    this.setAttribute(\"aria-controls\", this.#listId);\r\n    this.setAttribute(\"aria-owns\", this.#listId);\r\n    this.#formField?.notifyControlStateChange();\r\n\r\n    setTimeout(() => {\r\n      this.#menu?.show(this, this.#formField?.menuAnchor);\r\n      addCustomState(this, \"--open\");\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #hideMenu(): void {\r\n    if (!this.#menu) return;\r\n\r\n    this.#menu.hide();\r\n    deleteCustomState(this, \"--open\");\r\n  }\r\n\r\n  /** @private */\r\n  #activateOption(option: M3eOptionElement): void {\r\n    this.setAttribute(\"aria-activedescendant\", option.id);\r\n    if (this.#menu) {\r\n      scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n      const focusVisible = !this.#ignoreFocusVisible && (this.matches(\":focus-visible\") || forcedColorsActive());\r\n\r\n      this.#options.forEach((x) => {\r\n        const active = x === option && focusVisible;\r\n        if (active) {\r\n          x.focusRing?.show();\r\n          x.stateLayer?.show(\"focused\");\r\n        } else {\r\n          x.focusRing?.hide();\r\n          x.stateLayer?.hide(\"focused\");\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateSelectionState(clone: M3eOptionElement): void {\r\n    const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n    if (option) {\r\n      option.selected = clone.selected;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #selectOption(option: M3eOptionElement): void {\r\n    const selected = this.multi ? !option.selected : true;\r\n    if (option.selected === selected) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      option.selected = selected;\r\n      this.#updateSelectionState(option);\r\n\r\n      if (!this.multi) {\r\n        this.#selected\r\n          .filter((x) => x !== option)\r\n          .forEach((x) => {\r\n            x.selected = false;\r\n            this.#updateSelectionState(x);\r\n          });\r\n      }\r\n\r\n      this.requestUpdate();\r\n      this.#formField?.notifyControlStateChange();\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSelectElementEventMap extends HTMLElementEventMap {\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSelectElement {\r\n  addEventListener<K extends keyof M3eSelectElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[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 M3eSelectElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[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-select\": M3eSelectElement;\r\n  }\r\n}\r\n"],"names":["M3eSelectElement","M3eSelectElement_1","Focusable","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","super","this","_options","Array","_M3eSelectElement_clone","set","_M3eSelectElement_menu","_M3eSelectElement_ignoreKeyUp","_M3eSelectElement_ignoreFocusVisible","_M3eSelectElement_id","__nextId","_M3eSelectElement_listId","__classPrivateFieldGet","_M3eSelectElement_clickHandler","e","call","_M3eSelectElement_keyDownHandler","_M3eSelectElement_keyUpHandler","_M3eSelectElement_menuToggleHandler","_M3eSelectElement_menuPointerDownHandler","_M3eSelectElement_menuPointerUpHandler","_M3eSelectElement_menuPressedOption","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withTypeahead","onActiveItemChange","activeItem","_M3eSelectElement_instances","_M3eSelectElement_activateOption","hideSelectionIndicator","multi","panelClass","MutationController","config","childList","subtree","callback","_M3eSelectElement_handleMutation","options","selected","filter","x","value","values","disabled","map","length","WeakMap","WeakSet","_M3eSelectElement_options_get","items","_M3eSelectElement_selected_get","formValue","isArray","data","FormData","append","name","shouldLabelFloat","isEmpty","onContainerClick","__classPrivateFieldSet","_M3eSelectElement_toggleMenu","focus","preventScroll","clear","restoreFocus","willChange","forEach","_M3eSelectElement_updateSelectionState","requestUpdate","_M3eSelectElement_hideMenu","dispatchEvent","Event","bubbles","connectedCallback","ariaHasPopup","ariaExpanded","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","setCustomState","firstUpdated","_changedProperties","_focusRing","attach","_M3eSelectElement_formField_get","style","display","render","html","i","label","_M3eSelectElement_handleOptionStateChange","closest","target","M3eOptionElement","stopImmediatePropagation","index","indexOf","clone","isUpdatePending","notifyControlStateChange","cloneNode","added","setItems","querySelectorAll","id","replaceChildren","childNodes","defaultPrevented","key","preventDefault","_M3eSelectElement_selectOption","isOpen","prefersReducedMotion","setTimeout","_M3eSelectElement_showMenu","onKeyDown","undefined","button","option","composedPath","find","HTMLElement","tagName","pressedOption","setActiveItem","newState","scrollIntoViewIfNeeded","block","behavior","ToggleEvent","oldState","_M3eSelectElement_destroyMenu","remove","removeAttribute","deleteCustomState","document","createElement","ariaMultiSelectable","klass","split","d","trim","Boolean","classList","add","overflowX","fitAnchorWidth","insertAdjacentElement","setAttribute","show","menuAnchor","addCustomState","hide","focusVisible","matches","forcedColorsActive","focusRing","stateLayer","cancelable","styles","css","DesignToken","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","extraSmall","color","onSurface","__decorate","query","prototype","property","attribute","type","customElement"],"mappings":"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"}

package/dist/split-button.js

@@ -217,7 +217,7 @@ _M3eSplitButtonElement_updateButtonShape = function _M3eSplitButtonElement_updat
   }
 };
 /** The styles of the element. */
-M3eSplitButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${DesignToken.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${DesignToken.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${DesignToken.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${DesignToken.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)} ); --m3e-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)} ); --m3e-icon-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)} ); --m3e-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)} ); --m3e-icon-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)} ); --m3e-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)} ); --m3e-icon-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)} ); --m3e-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)} ); --m3e-icon-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)} ); --m3e-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)} ); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`;
+M3eSplitButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${DesignToken.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${DesignToken.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${DesignToken.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${DesignToken.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${DesignToken.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${DesignToken.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${DesignToken.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${DesignToken.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-icon-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-icon-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); --m3e-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`;
 __decorate([query(".base")], M3eSplitButtonElement.prototype, "_base", void 0);
 __decorate([property({
   reflect: true

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":"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"}
+{"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: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem);\r\n      --m3e-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem);\r\n      --m3e-icon-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem);\r\n      --m3e-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem);\r\n      --m3e-icon-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem);\r\n      --m3e-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem);\r\n      --m3e-icon-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem);\r\n      --m3e-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem);\r\n      --m3e-icon-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem);\r\n      --m3e-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem);\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","__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;;;AA2OL;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;AAtXD;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,8GAI9BJ,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,CAAA,6GAAA,EAI/BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACI,MAAM,8GAI/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,wHAI/BL,WAAW,CAACd,KAAK,CAACe,MAAM,CAACK,cAAc,CAAA,iIAAA,EAIvCN,WAAW,CAACd,KAAK,CAACe,MAAM,CAACK,cAAc,6SASvCN,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,CAAA,qGAAA,EAInCH,WAAW,CAACd,KAAK,CAACe,MAAM,CAACE,UAAU,0GAInCH,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,+GAGvBF,WAAW,CAACd,KAAK,CAACe,MAAM,CAACC,IAAI,CAAA,+qDAAA,CAxM9E;AAuOWK,UAAA,CAAA,CAAhCC,KAAK,CAAC,OAAO,CAAC,CAAsC,EAAAtE,qBAAA,CAAAuE,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAyCxBF,UAAA,CAAA,CAA5Bb,QAAQ,CAAC;AAAEgB,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAwC,EAAAxE,qBAAA,CAAAuE,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAMvCF,UAAA,CAAA,CAA5Bb,QAAQ,CAAC;AAAEgB,EAAAA,OAAO,EAAE;CAAM,CAAC,CAA4B,EAAAxE,qBAAA,CAAAuE,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAxR7CvE,qBAAqB,GAAAqE,UAAA,CAAA,CADjCI,aAAa,CAAC,kBAAkB,CAAC,CACrB,EAAAzE,qBAAqB,CAwXjC;;;;"}

package/dist/split-button.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as n}from"tslib";import{LitElement as a,html as i,css as r}from"lit";import{query as s,property as l}from"lit/decorators.js";import{Role as o,PressedController as c,HoverController as m,DesignToken as u,customElement as p}from"@m3e/web/core";import{M3eButtonElement as d}from"@m3e/web/button";import{M3eIconButtonElement as b}from"@m3e/web/icon-button";import"@m3e/web/button-group";var g,h,v,f,x,z,$,y,w,_,k,S;let W=class extends(o(a,"group")){constructor(){super(...arguments),g.add(this),h.set(this,void 0),v.set(this,void 0),f.set(this,!1),x.set(this,new c(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:(t,n,a)=>{switch(a){case e(this,h,"f"):e(this,g,"m",_).call(this,t);break;case e(this,v,"f"):e(this,g,"m",k).call(this,t||e(this,f,"f"))}}})),z.set(this,new m(this,{target:null,callback:(n,a)=>{if(a===e(this,v,"f"))e(this,v,"f")?.disabled||e(this,v,"f")?.disabledInteractive||(t(this,f,n,"f"),e(this,g,"m",k).call(this,n))}})),this.variant="filled",this.size="small"}update(t){super.update(t),t.has("variant")&&e(this,g,"m",w).call(this)}render(){return i`<m3e-button-group class="base" disable-role variant="connected" size="${this.size}"><slot name="leading-button" @slotchange="${e(this,g,"m",$)}"></slot><slot name="trailing-button" @slotchange="${e(this,g,"m",y)}"></slot></m3e-button-group>`}};h=new WeakMap,v=new WeakMap,f=new WeakMap,x=new WeakMap,z=new WeakMap,g=new WeakSet,$=function(n){e(this,h,"f")&&e(this,x,"f").unobserve(e(this,h,"f")),t(this,h,n.target.assignedElements({flatten:!0}).find(e=>e instanceof d),"f"),e(this,h,"f")&&e(this,x,"f").observe(e(this,h,"f")),e(this,g,"m",w).call(this)},y=function(n){e(this,v,"f")&&(e(this,x,"f").unobserve(e(this,v,"f")),e(this,z,"f").unobserve(e(this,v,"f"))),t(this,v,n.target.assignedElements({flatten:!0}).find(e=>e instanceof b),"f"),e(this,v,"f")&&(e(this,x,"f").observe(e(this,v,"f")),e(this,z,"f").observe(e(this,v,"f"))),e(this,g,"m",w).call(this)},w=function(){e(this,h,"f")&&(e(this,h,"f").variant=this.variant,e(this,h,"f").size=this.size,e(this,h,"f").shape="rounded"),e(this,v,"f")&&(e(this,v,"f").width="default",e(this,v,"f").shape="rounded",e(this,v,"f").setAttribute("variant",this.variant),e(this,v,"f").size=this.size)},_=function(t){t&&e(this,h,"f")?e(this,g,"m",S).call(this,e(this,h,"f"),"--_leading-button-shape"):this._base?.style.removeProperty("--_leading-button-shape")},k=function(t){t&&e(this,v,"f")?e(this,g,"m",S).call(this,e(this,v,"f"),"--_trailing-button-shape"):this._base?.style.removeProperty("--_trailing-button-shape")},S=function(e,t){const n=e.clientHeight/2;n&&this._base?.style.setProperty(t,`${n}px`)},W.styles=r`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${u.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${u.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${u.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${u.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${u.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${u.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${u.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${u.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${u.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${u.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${u.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${u.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${u.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${u.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${u.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${u.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${u.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${u.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${u.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${u.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${u.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${u.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${u.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${u.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${u.density.calc(0)} ); --m3e-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${u.density.calc(0)} ); --m3e-icon-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${u.density.calc(-1)} ); --m3e-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${u.density.calc(-1)} ); --m3e-icon-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${u.density.calc(-2)} ); --m3e-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${u.density.calc(-2)} ); --m3e-icon-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${u.density.calc(-3)} ); --m3e-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${u.density.calc(-3)} ); --m3e-icon-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${u.density.calc(-3)} ); --m3e-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${u.density.calc(-3)} ); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`,n([s(".base")],W.prototype,"_base",void 0),n([l({reflect:!0})],W.prototype,"variant",void 0),n([l({reflect:!0})],W.prototype,"size",void 0),W=n([p("m3e-split-button")],W);export{W as M3eSplitButtonElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as n}from"tslib";import{LitElement as a,html as i,css as r}from"lit";import{query as s,property as l}from"lit/decorators.js";import{Role as o,PressedController as m,HoverController as u,DesignToken as c,customElement as p}from"@m3e/web/core";import{M3eButtonElement as d}from"@m3e/web/button";import{M3eIconButtonElement as b}from"@m3e/web/icon-button";import"@m3e/web/button-group";var g,h,v,f,x,z,$,w,_,y,k,S;let W=class extends(o(a,"group")){constructor(){super(...arguments),g.add(this),h.set(this,void 0),v.set(this,void 0),f.set(this,!1),x.set(this,new m(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:(t,n,a)=>{switch(a){case e(this,h,"f"):e(this,g,"m",y).call(this,t);break;case e(this,v,"f"):e(this,g,"m",k).call(this,t||e(this,f,"f"))}}})),z.set(this,new u(this,{target:null,callback:(n,a)=>{if(a===e(this,v,"f"))e(this,v,"f")?.disabled||e(this,v,"f")?.disabledInteractive||(t(this,f,n,"f"),e(this,g,"m",k).call(this,n))}})),this.variant="filled",this.size="small"}update(t){super.update(t),t.has("variant")&&e(this,g,"m",_).call(this)}render(){return i`<m3e-button-group class="base" disable-role variant="connected" size="${this.size}"><slot name="leading-button" @slotchange="${e(this,g,"m",$)}"></slot><slot name="trailing-button" @slotchange="${e(this,g,"m",w)}"></slot></m3e-button-group>`}};h=new WeakMap,v=new WeakMap,f=new WeakMap,x=new WeakMap,z=new WeakMap,g=new WeakSet,$=function(n){e(this,h,"f")&&e(this,x,"f").unobserve(e(this,h,"f")),t(this,h,n.target.assignedElements({flatten:!0}).find(e=>e instanceof d),"f"),e(this,h,"f")&&e(this,x,"f").observe(e(this,h,"f")),e(this,g,"m",_).call(this)},w=function(n){e(this,v,"f")&&(e(this,x,"f").unobserve(e(this,v,"f")),e(this,z,"f").unobserve(e(this,v,"f"))),t(this,v,n.target.assignedElements({flatten:!0}).find(e=>e instanceof b),"f"),e(this,v,"f")&&(e(this,x,"f").observe(e(this,v,"f")),e(this,z,"f").observe(e(this,v,"f"))),e(this,g,"m",_).call(this)},_=function(){e(this,h,"f")&&(e(this,h,"f").variant=this.variant,e(this,h,"f").size=this.size,e(this,h,"f").shape="rounded"),e(this,v,"f")&&(e(this,v,"f").width="default",e(this,v,"f").shape="rounded",e(this,v,"f").setAttribute("variant",this.variant),e(this,v,"f").size=this.size)},y=function(t){t&&e(this,h,"f")?e(this,g,"m",S).call(this,e(this,h,"f"),"--_leading-button-shape"):this._base?.style.removeProperty("--_leading-button-shape")},k=function(t){t&&e(this,v,"f")?e(this,g,"m",S).call(this,e(this,v,"f"),"--_trailing-button-shape"):this._base?.style.removeProperty("--_trailing-button-shape")},S=function(e,t){const n=e.clientHeight/2;n&&this._base?.style.setProperty(t,`${n}px`)},W.styles=r`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${c.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${c.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${c.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${c.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${c.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${c.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${c.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${c.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${c.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${c.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${c.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${c.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${c.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${c.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${c.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${c.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${c.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${c.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${c.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${c.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${c.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${c.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${c.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${c.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-button-extra-small-icon-size: var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-button-small-icon-size: var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem); --m3e-icon-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-button-medium-icon-size: var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem); --m3e-icon-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-button-large-icon-size: var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem); --m3e-icon-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); --m3e-button-extra-large-icon-size: var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`,n([s(".base")],W.prototype,"_base",void 0),n([l({reflect:!0})],W.prototype,"variant",void 0),n([l({reflect:!0})],W.prototype,"size",void 0),W=n([p("m3e-split-button")],W);export{W as M3eSplitButtonElement};
 //# sourceMappingURL=split-button.min.js.map