@m3e/web 2.5.10 → 2.5.11

package/dist/radio-group.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.min.js","sources":["../../src/radio-group/RadioElement.ts","../../src/radio-group/RadioGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  HoverController,\r\n  KeyboardClick,\r\n  Labelled,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  PressedController,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A radio button that allows a user to select one option from a set of options.\r\n *\r\n * @description\r\n * The `m3e-radio` component represents a radio button that enables users to select an options from a set.\r\n * It supports selection from mutually exclusive options, emitting `input` and `change` events when its state updates.\r\n * The component reflects its state through customizable CSS properties for hover, focus, ripple, and icon styling—\r\n * adapting dynamically based on whether it is selected, unselected, or disabled.\r\n *\r\n * Attributes like `checked`, `disabled`, and `value` control its behavior and accessibility, while its visual\r\n * presentation can be tuned via design tokens such as `--m3e-radio-container-size` and `--m3e-radio-icon-size`.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n * @attr value - A string representing the value of the radio.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-radio-container-size - Base size of the radio button container.\r\n * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.\r\n * @cssprop --m3e-radio-unselected-hover-color - Hover state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-focus-color - Focus state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-ripple-color - Ripple color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-icon-color - Icon color when radio is not selected.\r\n * @cssprop --m3e-radio-selected-hover-color - Hover state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-focus-color - Focus state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-ripple-color - Ripple color when radio is selected.\r\n * @cssprop --m3e-radio-selected-icon-color - Icon color when radio is selected.\r\n * @cssprop --m3e-radio-disabled-icon-color - Icon color when radio is disabled.\r\n * @cssprop --m3e-radio-error-hover-color - Fallback hover color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-focus-color - Fallback focus color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-ripple-color - Fallback ripple color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-icon-color - Fallback icon color used when the radio is invalid and touched.\r\n */\r\n@customElement(\"m3e-radio\")\r\nexport class M3eRadioElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      Checked(KeyboardClick(Focusable(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))))),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      width: fit-content;\r\n      height: fit-content;\r\n      vertical-align: middle;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      border-radius: 50%;\r\n      width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: 3rem;\r\n      margin: auto;\r\n    }\r\n    .wrapper {\r\n      box-sizing: border-box;\r\n      pointer-events: none;\r\n      width: var(--m3e-radio-icon-size, 1.25rem);\r\n      height: var(--m3e-radio-icon-size, 1.25rem);\r\n    }\r\n    .circle {\r\n      fill: currentColor;\r\n    }\r\n    :host(:not([checked])) .circle.inner {\r\n      opacity: 0;\r\n    }\r\n    :host(:not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n      color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([checked]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n    :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error});\r\n      color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([checked])) .base,\r\n      :host([checked]) .base {\r\n        --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-ripple-color: var(--_radio-forced-color, CanvasText);\r\n        color: var(--_radio-forced-color, CanvasText);\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n      :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n        --_radio-forced-color: Highlight;\r\n        color: Highlight;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    minPressedDuration: 150,\r\n    callback: (pressed) => {\r\n      if (this.disabled) return;\r\n      if (pressed) {\r\n        this._ripple?.show(0, 0, true);\r\n      } else {\r\n        this._ripple?.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * A string representing the value of the radio.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\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\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\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(\"checked\")) {\r\n      this.#notifySelectionChange();\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    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" centered ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return html`<svg viewBox=\"0 0 20 20\">\r\n      <mask id=\"cutout2\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\r\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\"></circle>\r\n      </mask>\r\n      <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout2)\"></circle>\r\n      <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\"></circle>\r\n    </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented || this.checked || this.disabled) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = true;\r\n      this.#notifySelectionChange();\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    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #notifySelectionChange(): void {\r\n    const group = this.closest(\"m3e-radio-group\");\r\n    if (group) {\r\n      group[selectionManager].notifySelectionChange(this);\r\n    } else if (this.name && this.checked) {\r\n      // Uncheck any sibling radios of the same name which are also checked.\r\n      [\r\n        ...((this.getRootNode() as ParentNode)?.querySelectorAll<M3eRadioElement>(`m3e-radio[name=\"${this.name}\"]`) ??\r\n          []),\r\n      ]\r\n        .filter((x) => x !== this && x.checked)\r\n        .forEach((x) => (x.checked = false));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio\": M3eRadioElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  Dirty,\r\n  Disabled,\r\n  Touched,\r\n  Role,\r\n  Required,\r\n  ConstraintValidation,\r\n  FormAssociated,\r\n  RequiredConstraintValidation,\r\n  updateLabels,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eRadioElement } from \"./RadioElement\";\r\n\r\n/**\r\n * A container for a set of radio buttons.\r\n *\r\n * @description\r\n * The `m3e-radio-group` component is a semantic container that orchestrates a set of `m3e-radio` elements.\r\n * It provides accessible grouping, keyboard navigation, and validation logic for mutually exclusive selection.\r\n * When marked as `required`, the group enforces selection constraints and reflects validation state, while\r\n * delegating form submission to the checked radio. The group does not submit a value itself—it coordinates\r\n * behavior, focus, and feedback across its radios.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio-group\r\n *\r\n * @slot - Renders the radio buttons of the group.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state of a radio button changes.\r\n * @fires input - Dispatched when the checked state of a radio button changes.\r\n * @fires change - Dispatched when the checked state of a radio button changes.\r\n */\r\n@customElement(\"m3e-radio-group\")\r\nexport class M3eRadioGroupElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The list of attributes corresponding to the registered properties. */\r\n  static override get observedAttributes() {\r\n    return [...super.observedAttributes, \"aria-invalid\"];\r\n  }\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    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ readonly #focusOutHandler = () => this.#handleChange();\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eRadioElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => {\r\n      this[selectionManager].activeItem?.click();\r\n    });\r\n\r\n  /** The radios in the group. */\r\n  get radios(): readonly M3eRadioElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected radio. */\r\n  get selected(): M3eRadioElement | null {\r\n    return this[selectionManager]?.selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The selected value of the radio group. */\r\n  get value(): string | null {\r\n    return this.selected?.value ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsTouched(): void {\r\n    super.markAsTouched();\r\n    this.radios.forEach((x) => x.markAsTouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsUntouched(): void {\r\n    super.markAsUntouched();\r\n    this.radios.forEach((x) => x.markAsUntouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsDirty(): void {\r\n    super.markAsDirty();\r\n    this.radios.forEach((x) => x.markAsDirty());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsPristine(): void {\r\n    super.markAsPristine();\r\n    this.radios.forEach((x) => x.markAsPristine());\r\n  }\r\n\r\n  /** Synchronizes property values when attributes change. */\r\n  override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\r\n    super.attributeChangedCallback(name, oldValue, newValue);\r\n\r\n    switch (name) {\r\n      case \"name\":\r\n        this.radios.forEach((x) => (x.name = this.name));\r\n        break;\r\n\r\n      case \"aria-invalid\":\r\n        this.radios.forEach((x) => {\r\n          setCustomState(x, \"--invalid\", newValue === \"true\");\r\n          x[updateLabels]?.();\r\n        });\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription?.();\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(\"disabled\")) {\r\n      this.ariaDisabled = null;\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-radio\")]);\r\n    added.forEach((x) => (x.name = x.name || this.name));\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(): void {\r\n    this.checkValidity();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio-group\": M3eRadioGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eRadioElement","Labelled","Dirty","Touched","Checked","KeyboardClick","Focusable","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","_M3eRadioElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eRadioElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eRadioElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eRadioElement_instances","WeakSet","formValue","checked","connectedCallback","super","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","update","changedProperties","has","_M3eRadioElement_notifySelectionChange","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eRadioElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","closest","preventDefault","group","selectionManager","notifySelectionChange","name","getRootNode","querySelectorAll","filter","styles","css","DesignToken","density","calc","color","onSurface","onSurfaceVariant","primary","error","__decorate","query","prototype","property","customElement","M3eRadioGroupElement","RequiredConstraintValidation","Required","ConstraintValidation","_M3eRadioGroupElement_directionalitySubscription","_M3eRadioGroupElement_focusOutHandler","_M3eRadioGroupElement_instances","_M3eRadioGroupElement_handleChange","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","observedAttributes","radios","items","selected","selectedItems","markAsTouched","markAsUntouched","markAsDirty","markAsPristine","attributeChangedCallback","oldValue","newValue","setCustomState","updateLabels","__classPrivateFieldSet","directionality","ariaDisabled","undefined","get","_M3eRadioGroupElement_handleSlotChange","_M3eRadioGroupElement_handleKeyDown","added","setItems","onKeyDown","checkValidity"],"mappings":"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"}
+{"version":3,"file":"radio-group.min.js","sources":["../../src/radio-group/RadioElement.ts","../../src/radio-group/RadioGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  HoverController,\r\n  KeyboardClick,\r\n  Labelled,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  PressedController,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A radio button that allows a user to select one option from a set of options.\r\n *\r\n * @description\r\n * The `m3e-radio` component represents a radio button that enables users to select an options from a set.\r\n * It supports selection from mutually exclusive options, emitting `input` and `change` events when its state updates.\r\n * The component reflects its state through customizable CSS properties for hover, focus, ripple, and icon styling—\r\n * adapting dynamically based on whether it is selected, unselected, or disabled.\r\n *\r\n * Attributes like `checked`, `disabled`, and `value` control its behavior and accessibility, while its visual\r\n * presentation can be tuned via design tokens such as `--m3e-radio-container-size` and `--m3e-radio-icon-size`.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n * @attr value - A string representing the value of the radio.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-radio-container-size - Base size of the radio button container.\r\n * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.\r\n * @cssprop --m3e-radio-unselected-hover-color - Hover state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-focus-color - Focus state layer color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-ripple-color - Ripple color when radio is not selected.\r\n * @cssprop --m3e-radio-unselected-icon-color - Icon color when radio is not selected.\r\n * @cssprop --m3e-radio-selected-hover-color - Hover state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-focus-color - Focus state layer color when radio is selected.\r\n * @cssprop --m3e-radio-selected-ripple-color - Ripple color when radio is selected.\r\n * @cssprop --m3e-radio-selected-icon-color - Icon color when radio is selected.\r\n * @cssprop --m3e-radio-disabled-icon-color - Icon color when radio is disabled.\r\n * @cssprop --m3e-radio-error-hover-color - Fallback hover color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-focus-color - Fallback focus color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-ripple-color - Fallback ripple color used when the radio is invalid and touched.\r\n * @cssprop --m3e-radio-error-icon-color - Fallback icon color used when the radio is invalid and touched.\r\n */\r\n@customElement(\"m3e-radio\")\r\nexport class M3eRadioElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      Checked(KeyboardClick(Focusable(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))))),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      width: fit-content;\r\n      height: fit-content;\r\n      vertical-align: middle;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      border-radius: 50%;\r\n      width: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      height: calc(var(--m3e-radio-container-size, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      width: 3rem;\r\n      margin: auto;\r\n    }\r\n    .wrapper {\r\n      box-sizing: border-box;\r\n      pointer-events: none;\r\n      width: var(--m3e-radio-icon-size, 1.25rem);\r\n      height: var(--m3e-radio-icon-size, 1.25rem);\r\n    }\r\n    .circle {\r\n      fill: currentColor;\r\n    }\r\n    :host(:not([checked])) .circle.inner {\r\n      opacity: 0;\r\n    }\r\n    :host(:not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-unselected-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-unselected-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-radio-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n      color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([checked]) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-selected-hover-color, ${DesignToken.color.primary});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-selected-focus-color, ${DesignToken.color.primary});\r\n      --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary});\r\n      color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);\r\n    }\r\n    :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error});\r\n      --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error});\r\n      --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error});\r\n      color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([checked])) .base,\r\n      :host([checked]) .base {\r\n        --m3e-state-layer-hover-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-state-layer-focus-color: var(--_radio-forced-color, CanvasText);\r\n        --m3e-ripple-color: var(--_radio-forced-color, CanvasText);\r\n        color: var(--_radio-forced-color, CanvasText);\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n      :host(:is(:state(--touched), :--touched):is(:state(--invalid), :--invalid)) .base {\r\n        --_radio-forced-color: Highlight;\r\n        color: Highlight;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    minPressedDuration: 150,\r\n    callback: (pressed) => {\r\n      if (this.disabled) return;\r\n      if (pressed) {\r\n        this._ripple?.show(0, 0, true);\r\n      } else {\r\n        this._ripple?.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * A string representing the value of the radio.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\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\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\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(\"checked\")) {\r\n      this.#notifySelectionChange();\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    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" centered ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return html`<svg viewBox=\"0 0 20 20\">\r\n      <mask id=\"cutout2\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\r\n        <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\"></circle>\r\n      </mask>\r\n      <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout2)\"></circle>\r\n      <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\"></circle>\r\n    </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented || this.checked) return;\r\n\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n      return;\r\n    }\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = true;\r\n      this.#notifySelectionChange();\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    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #notifySelectionChange(): void {\r\n    const group = this.closest(\"m3e-radio-group\");\r\n    if (group) {\r\n      group[selectionManager].notifySelectionChange(this);\r\n    } else if (this.name && this.checked) {\r\n      // Uncheck any sibling radios of the same name which are also checked.\r\n      [\r\n        ...((this.getRootNode() as ParentNode)?.querySelectorAll<M3eRadioElement>(`m3e-radio[name=\"${this.name}\"]`) ??\r\n          []),\r\n      ]\r\n        .filter((x) => x !== this && x.checked)\r\n        .forEach((x) => (x.checked = false));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio\": M3eRadioElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  Dirty,\r\n  Disabled,\r\n  Touched,\r\n  Role,\r\n  Required,\r\n  ConstraintValidation,\r\n  FormAssociated,\r\n  RequiredConstraintValidation,\r\n  updateLabels,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eRadioElement } from \"./RadioElement\";\r\n\r\n/**\r\n * A container for a set of radio buttons.\r\n *\r\n * @description\r\n * The `m3e-radio-group` component is a semantic container that orchestrates a set of `m3e-radio` elements.\r\n * It provides accessible grouping, keyboard navigation, and validation logic for mutually exclusive selection.\r\n * When marked as `required`, the group enforces selection constraints and reflects validation state, while\r\n * delegating form submission to the checked radio. The group does not submit a value itself—it coordinates\r\n * behavior, focus, and feedback across its radios.\r\n *\r\n * @example\r\n * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.\r\n * ```html\r\n * <label for=\"rdg1\">Radio group</label>\r\n * <br />\r\n * <m3e-radio-group id=\"rdg1\">\r\n *  <label><m3e-radio value=\"1\"></m3e-radio> Value 1</label>\r\n *  <label><m3e-radio value=\"2\"></m3e-radio> Value 2</label>\r\n *  <label><m3e-radio value=\"3\"></m3e-radio> Value 3</label>\r\n *  <label><m3e-radio value=\"4\"></m3e-radio> Value 4</label>\r\n * </m3e-radio-group>\r\n * ```\r\n *\r\n * @tag m3e-radio-group\r\n *\r\n * @slot - Renders the radio buttons of the group.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state of a radio button changes.\r\n * @fires input - Dispatched when the checked state of a radio button changes.\r\n * @fires change - Dispatched when the checked state of a radio button changes.\r\n */\r\n@customElement(\"m3e-radio-group\")\r\nexport class M3eRadioGroupElement extends Labelled(\r\n  RequiredConstraintValidation(\r\n    Dirty(\r\n      Touched(\r\n        Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The list of attributes corresponding to the registered properties. */\r\n  static override get observedAttributes() {\r\n    return [...super.observedAttributes, \"aria-invalid\"];\r\n  }\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    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ readonly #focusOutHandler = () => this.#handleChange();\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eRadioElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => {\r\n      this[selectionManager].activeItem?.click();\r\n    });\r\n\r\n  /** The radios in the group. */\r\n  get radios(): readonly M3eRadioElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected radio. */\r\n  get selected(): M3eRadioElement | null {\r\n    return this[selectionManager]?.selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The selected value of the radio group. */\r\n  get value(): string | null {\r\n    return this.selected?.value ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsTouched(): void {\r\n    super.markAsTouched();\r\n    this.radios.forEach((x) => x.markAsTouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsUntouched(): void {\r\n    super.markAsUntouched();\r\n    this.radios.forEach((x) => x.markAsUntouched());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsDirty(): void {\r\n    super.markAsDirty();\r\n    this.radios.forEach((x) => x.markAsDirty());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override markAsPristine(): void {\r\n    super.markAsPristine();\r\n    this.radios.forEach((x) => x.markAsPristine());\r\n  }\r\n\r\n  /** Synchronizes property values when attributes change. */\r\n  override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\r\n    super.attributeChangedCallback(name, oldValue, newValue);\r\n\r\n    switch (name) {\r\n      case \"name\":\r\n        this.radios.forEach((x) => (x.name = this.name));\r\n        break;\r\n\r\n      case \"aria-invalid\":\r\n        this.radios.forEach((x) => {\r\n          setCustomState(x, \"--invalid\", newValue === \"true\");\r\n          x[updateLabels]?.();\r\n        });\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"focusout\", this.#focusOutHandler);\r\n    this.#directionalitySubscription?.();\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(\"disabled\")) {\r\n      this.ariaDisabled = null;\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-radio\")]);\r\n    added.forEach((x) => (x.name = x.name || this.name));\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(): void {\r\n    this.checkValidity();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-radio-group\": M3eRadioGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eRadioElement","Labelled","Dirty","Touched","Checked","KeyboardClick","Focusable","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","_M3eRadioElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eRadioElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eRadioElement_pressedController","PressedController","minPressedDuration","pressed","_ripple","value","WeakMap","_M3eRadioElement_instances","WeakSet","formValue","checked","connectedCallback","super","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","update","changedProperties","has","_M3eRadioElement_notifySelectionChange","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eRadioElement_renderIcon","defaultPrevented","preventDefault","stopImmediatePropagation","dispatchEvent","Event","bubbles","cancelable","closest","group","selectionManager","notifySelectionChange","name","getRootNode","querySelectorAll","filter","styles","css","DesignToken","density","calc","color","onSurface","onSurfaceVariant","primary","error","__decorate","query","prototype","property","customElement","M3eRadioGroupElement","RequiredConstraintValidation","Required","ConstraintValidation","_M3eRadioGroupElement_directionalitySubscription","_M3eRadioGroupElement_focusOutHandler","_M3eRadioGroupElement_instances","_M3eRadioGroupElement_handleChange","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","observedAttributes","radios","items","selected","selectedItems","markAsTouched","markAsUntouched","markAsDirty","markAsPristine","attributeChangedCallback","oldValue","newValue","setCustomState","updateLabels","__classPrivateFieldSet","directionality","ariaDisabled","undefined","get","_M3eRadioGroupElement_handleSlotChange","_M3eRadioGroupElement_handleKeyDown","added","setItems","onKeyDown","checkValidity"],"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":"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"}

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

package/dist/split-button.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.min.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","this","_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","super","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.min.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","this","_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","super","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":"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"}

package/dist/src/button/ButtonElement.d.ts

@@ -446,6 +446,7 @@ export declare class M3eButtonElement extends M3eButtonElement_base {
     #private;
     /** The styles of the element. */
     static styles: CSSResultGroup;
+    /** @internal */ _adjacentPressedTimeout: number;
     /** @private */ private readonly _base?;
     /** @private */ private readonly _elevation?;
     /** @private */ private readonly _focusRing?;

package/dist/src/button/ButtonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonElement.d.ts","sourceRoot":"","sources":["../../../src/button/ButtonElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,EAuBL,oBAAoB,EAGrB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqbG;AACH,qBACa,gBAAiB,SAAQ,qBAIrC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAsD;IAE5F,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACrE,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;;IAgC9E;;;OAGG;IAC0B,OAAO,EAAE,aAAa,CAAU;IAE7D;;;OAGG;IAC0B,KAAK,EAAE,WAAW,CAAa;IAE5D;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAW;IAExD;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D,yDAAyD;IACzD,IAAI,OAAO,YAEV;IAED,kBAAkB;IACT,MAAM,IAAI,OAAO;IA0B1B,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAYrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA0C1E,eAAe;IAEf,OAAO,CAAC,aAAa;CA8FtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"ButtonElement.d.ts","sourceRoot":"","sources":["../../../src/button/ButtonElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,EAuBL,oBAAoB,EAGrB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqbG;AACH,qBACa,gBAAiB,SAAQ,qBAIrC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAsD;IAE5F,gBAAgB,CAAC,uBAAuB,SAAM;IAE9C,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACrE,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;;IAgC9E;;;OAGG;IAC0B,OAAO,EAAE,aAAa,CAAU;IAE7D;;;OAGG;IAC0B,KAAK,EAAE,WAAW,CAAa;IAE5D;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAW;IAExD;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D,yDAAyD;IACzD,IAAI,OAAO,YAEV;IAED,kBAAkB;IACT,MAAM,IAAI,OAAO;IA0B1B,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAYrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA0C1E,eAAe;IAEf,OAAO,CAAC,aAAa;CAuGtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}