@m3e/web 2.5.9 → 2.5.10

package/dist/button-group.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __decorate } from 'tslib';
 import { LitElement, html, css } from 'lit';
 import { query, property, queryAssignedElements } from 'lit/decorators.js';
-import { Role, PressedController, setCustomState, addCustomState, isSelectedMixin, prefersReducedMotion, hasCustomState, DesignToken, customElement } from '@m3e/web/core';
+import { Role, PressedController, waitForUpgrade, setCustomState, addCustomState, isSelectedMixin, prefersReducedMotion, hasCustomState, DesignToken, customElement } from '@m3e/web/core';
 
 var _M3eButtonGroupElement_instances, _M3eButtonGroupElement_pressedController, _M3eButtonGroupElement_updateButtons, _M3eButtonGroupElement_handleChange, _M3eButtonGroupElement_handlePressedChange, _M3eButtonGroupElement_cleanupPressed;
 /**
@@ -121,11 +121,18 @@ let M3eButtonGroupElement = class M3eButtonGroupElement extends Role(LitElement,
 };
 _M3eButtonGroupElement_pressedController = new WeakMap();
 _M3eButtonGroupElement_instances = new WeakSet();
-_M3eButtonGroupElement_updateButtons = function _M3eButtonGroupElement_updateButtons() {
+_M3eButtonGroupElement_updateButtons = /** @private */
+async function _M3eButtonGroupElement_updateButtons() {
   const buttons = this.buttons;
   for (const target of __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").targets) {
     __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").unobserve(target);
   }
+  for (const button of this.buttons) {
+    await waitForUpgrade(button);
+    if (button.isUpdatePending) {
+      await button.updateComplete;
+    }
+  }
   const canToggle = [...buttons].some(x => x.toggle);
   // disable-role is an internal attribute to by split-button to disable setting roles.
   if (!this.hasAttribute("disable-role")) {

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n  prefersReducedMotion,\r\n  hasCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--first), :--first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--last), :--last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--first), :--first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--last), :--last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--first), :--first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--last), :--last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\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) => this.#handlePressedChange(pressed),\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\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(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"--connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"--grouped\");\r\n      setCustomState(button, \"--first\", i == 0);\r\n      setCustomState(button, \"--last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePressedChange(pressed: boolean): void {\r\n    const base = this._base;\r\n    if (!base) return;\r\n    if (!pressed || this.variant === \"connected\") {\r\n      const button = this.buttons.find((x) => x === document.activeElement);\r\n      if (!prefersReducedMotion() && button) {\r\n        button.addEventListener(\r\n          \"transitionend\",\r\n          () =>\r\n            queueMicrotask(() => {\r\n              // Pressed state is tested to ensure this runs only when the button\r\n              // is no longer pressed. This handles changes to pressed state in\r\n              // quick succession.\r\n\r\n              if (!hasCustomState(button, \"--pressed\")) {\r\n                this.#cleanupPressed(base);\r\n              }\r\n            }),\r\n          { once: true },\r\n        );\r\n      } else {\r\n        this.#cleanupPressed(base);\r\n      }\r\n    } else {\r\n      base.classList.add(\"pressed\");\r\n      base.style.setProperty(\"--_button-group-width\", `${base.getBoundingClientRect().width}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #cleanupPressed(base: HTMLElement): void {\r\n    base.style.removeProperty(\"--_button-group-width\");\r\n    base.classList.remove(\"pressed\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_handlePressedChange","call","variant","size","multi","connectedCallback","hasAttribute","role","disconnectedCallback","_base","style","removeProperty","classList","remove","update","changedProperties","has","_M3eButtonGroupElement_updateButtons","render","html","_M3eButtonGroupElement_handleChange","buttons","targets","unobserve","canToggle","some","x","toggle","buttonRole","forEach","button","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","base","find","document","activeElement","prefersReducedMotion","addEventListener","queueMicrotask","hasCustomState","_M3eButtonGroupElement_cleanupPressed","once","add","setProperty","getBoundingClientRect","width","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}
+{"version":3,"file":"button-group.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n  prefersReducedMotion,\r\n  hasCustomState,\r\n  waitForUpgrade,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--first), :--first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--last), :--last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--first), :--first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--last), :--last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--first), :--first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--last), :--last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\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) => this.#handlePressedChange(pressed),\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\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(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  async #updateButtons(): Promise<void> {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    for (const button of this.buttons) {\r\n      await waitForUpgrade(button);\r\n      if (button.isUpdatePending) {\r\n        await button.updateComplete;\r\n      }\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"--connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"--grouped\");\r\n      setCustomState(button, \"--first\", i == 0);\r\n      setCustomState(button, \"--last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePressedChange(pressed: boolean): void {\r\n    const base = this._base;\r\n    if (!base) return;\r\n    if (!pressed || this.variant === \"connected\") {\r\n      const button = this.buttons.find((x) => x === document.activeElement);\r\n      if (!prefersReducedMotion() && button) {\r\n        button.addEventListener(\r\n          \"transitionend\",\r\n          () =>\r\n            queueMicrotask(() => {\r\n              // Pressed state is tested to ensure this runs only when the button\r\n              // is no longer pressed. This handles changes to pressed state in\r\n              // quick succession.\r\n\r\n              if (!hasCustomState(button, \"--pressed\")) {\r\n                this.#cleanupPressed(base);\r\n              }\r\n            }),\r\n          { once: true },\r\n        );\r\n      } else {\r\n        this.#cleanupPressed(base);\r\n      }\r\n    } else {\r\n      base.classList.add(\"pressed\");\r\n      base.style.setProperty(\"--_button-group-width\", `${base.getBoundingClientRect().width}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #cleanupPressed(base: HTMLElement): void {\r\n    base.style.removeProperty(\"--_button-group-width\");\r\n    base.classList.remove(\"pressed\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_handlePressedChange","call","variant","size","multi","connectedCallback","hasAttribute","role","disconnectedCallback","_base","style","removeProperty","classList","remove","update","changedProperties","has","_M3eButtonGroupElement_updateButtons","render","html","_M3eButtonGroupElement_handleChange","buttons","targets","unobserve","button","waitForUpgrade","isUpdatePending","updateComplete","canToggle","some","x","toggle","buttonRole","forEach","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","base","find","document","activeElement","prefersReducedMotion","addEventListener","queueMicrotask","hasCustomState","_M3eButtonGroupElement_cleanupPressed","once","add","setProperty","getBoundingClientRect","width","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}

package/dist/button-group.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,__decorate as t}from"tslib";import{LitElement as s,html as a,css as r}from"lit";import{query as n,property as o,queryAssignedElements as i}from"lit/decorators.js";import{Role as l,PressedController as d,setCustomState as c,addCustomState as u,isSelectedMixin as p,prefersReducedMotion as h,hasCustomState as m,DesignToken as g,customElement as b}from"@m3e/web/core";var v,f,x,z,_,$;let y=class extends(l(s,"group")){constructor(){super(...arguments),v.add(this),f.set(this,new d(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:t=>e(this,v,"m",_).call(this,t)})),this.variant="standard",this.size="small",this.multi=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("disable-role")&&(this.role=null)}disconnectedCallback(){super.disconnectedCallback(),this._base?.style.removeProperty("--_button-group-width"),this._base?.classList.remove("pressed")}update(t){super.update(t),(t.has("multi")||t.has("variant"))&&e(this,v,"m",x).call(this),t.has("variant")&&this._base?.style.removeProperty("--_button-group-width")}render(){return a`<div class="base"><slot @slotchange="${e(this,v,"m",x)}" @change="${e(this,v,"m",z)}"></slot></div>`}};f=new WeakMap,v=new WeakSet,x=function(){const t=this.buttons;for(const t of e(this,f,"f").targets)e(this,f,"f").unobserve(t);const s=[...t].some(e=>e.toggle);this.hasAttribute("disable-role")||(this.role=s&&!this.multi?"radiogroup":"group");const a="radiogroup"===this.role?"radio":"button";t.forEach((s,r)=>{if(e(this,f,"f").observe(s),c(s,"--connected","connected"===this.variant),u(s,"--grouped"),c(s,"--first",0==r),c(s,"--last",r==t.length-1),!this.hasAttribute("disable-role")&&s.role!==a&&s.toggle){const e=s.toggle?s.selected?"true":"false":null;s.role=a,"button"===s.role?(s.ariaPressed=e,s.ariaChecked=null):(s.ariaChecked=e,s.ariaPressed=null)}})},z=function(e){if(!this.multi&&e.target instanceof HTMLElement&&("M3E-BUTTON"===e.target.tagName||"M3E-ICON-BUTTON"===e.target.tagName)){if(!p(e.target)||!e.target.selected)return;for(const t of this.buttons)t!==e.target&&t.selected&&(t.selected=!1)}},_=function(t){const s=this._base;if(s)if(t&&"connected"!==this.variant)s.classList.add("pressed"),s.style.setProperty("--_button-group-width",`${s.getBoundingClientRect().width}px`);else{const t=this.buttons.find(e=>e===document.activeElement);!h()&&t?t.addEventListener("transitionend",()=>queueMicrotask(()=>{m(t,"--pressed")||e(this,v,"m",$).call(this,s)}),{once:!0}):e(this,v,"m",$).call(this,s)}},$=function(e){e.style.removeProperty("--_button-group-width"),e.classList.remove("pressed")},y.styles=r`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--first), :--first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${g.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${g.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${g.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--last), :--last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${g.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${g.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${g.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--first), :--first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${g.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${g.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${g.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--last), :--last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${g.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${g.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${g.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--first), :--first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${g.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${g.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${g.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--last), :--last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${g.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${g.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${g.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--first), :--first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${g.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${g.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${g.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--last), :--last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${g.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${g.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${g.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--first), :--first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${g.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${g.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${g.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--last), :--last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${g.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${g.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${g.shape.corner.large} ); }`,t([n(".base")],y.prototype,"_base",void 0),t([o({reflect:!0})],y.prototype,"variant",void 0),t([o({reflect:!0})],y.prototype,"size",void 0),t([o({type:Boolean})],y.prototype,"multi",void 0),t([i({slot:"",selector:"m3e-button,m3e-icon-button",flatten:!0})],y.prototype,"buttons",void 0),y=t([b("m3e-button-group")],y);export{y as M3eButtonGroupElement};
+import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as s,html as a,css as r}from"lit";import{query as n,property as o,queryAssignedElements as i}from"lit/decorators.js";import{Role as l,PressedController as d,waitForUpgrade as c,setCustomState as u,addCustomState as p,isSelectedMixin as h,prefersReducedMotion as m,hasCustomState as g,DesignToken as b,customElement as v}from"@m3e/web/core";var f,x,z,_,$,y;let q=class extends(l(s,"group")){constructor(){super(...arguments),f.add(this),x.set(this,new d(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:t=>e(this,f,"m",$).call(this,t)})),this.variant="standard",this.size="small",this.multi=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("disable-role")&&(this.role=null)}disconnectedCallback(){super.disconnectedCallback(),this._base?.style.removeProperty("--_button-group-width"),this._base?.classList.remove("pressed")}update(t){super.update(t),(t.has("multi")||t.has("variant"))&&e(this,f,"m",z).call(this),t.has("variant")&&this._base?.style.removeProperty("--_button-group-width")}render(){return a`<div class="base"><slot @slotchange="${e(this,f,"m",z)}" @change="${e(this,f,"m",_)}"></slot></div>`}};x=new WeakMap,f=new WeakSet,z=async function(){const t=this.buttons;for(const t of e(this,x,"f").targets)e(this,x,"f").unobserve(t);for(const e of this.buttons)await c(e),e.isUpdatePending&&await e.updateComplete;const s=[...t].some(e=>e.toggle);this.hasAttribute("disable-role")||(this.role=s&&!this.multi?"radiogroup":"group");const a="radiogroup"===this.role?"radio":"button";t.forEach((s,r)=>{if(e(this,x,"f").observe(s),u(s,"--connected","connected"===this.variant),p(s,"--grouped"),u(s,"--first",0==r),u(s,"--last",r==t.length-1),!this.hasAttribute("disable-role")&&s.role!==a&&s.toggle){const e=s.toggle?s.selected?"true":"false":null;s.role=a,"button"===s.role?(s.ariaPressed=e,s.ariaChecked=null):(s.ariaChecked=e,s.ariaPressed=null)}})},_=function(e){if(!this.multi&&e.target instanceof HTMLElement&&("M3E-BUTTON"===e.target.tagName||"M3E-ICON-BUTTON"===e.target.tagName)){if(!h(e.target)||!e.target.selected)return;for(const t of this.buttons)t!==e.target&&t.selected&&(t.selected=!1)}},$=function(t){const s=this._base;if(s)if(t&&"connected"!==this.variant)s.classList.add("pressed"),s.style.setProperty("--_button-group-width",`${s.getBoundingClientRect().width}px`);else{const t=this.buttons.find(e=>e===document.activeElement);!m()&&t?t.addEventListener("transitionend",()=>queueMicrotask(()=>{g(t,"--pressed")||e(this,f,"m",y).call(this,s)}),{once:!0}):e(this,f,"m",y).call(this,s)}},y=function(e){e.style.removeProperty("--_button-group-width"),e.classList.remove("pressed")},q.styles=r`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--first), :--first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${b.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${b.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${b.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:is(:state(--last), :--last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${b.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${b.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${b.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--first), :--first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${b.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${b.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${b.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:is(:state(--last), :--last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${b.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${b.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${b.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--first), :--first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${b.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${b.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${b.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:is(:state(--last), :--last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${b.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${b.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${b.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--first), :--first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${b.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${b.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${b.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:is(:state(--last), :--last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${b.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${b.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${b.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--first), :--first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${b.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${b.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${b.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:is(:state(--last), :--last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${b.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${b.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${b.shape.corner.large} ); }`,t([n(".base")],q.prototype,"_base",void 0),t([o({reflect:!0})],q.prototype,"variant",void 0),t([o({reflect:!0})],q.prototype,"size",void 0),t([o({type:Boolean})],q.prototype,"multi",void 0),t([i({slot:"",selector:"m3e-button,m3e-icon-button",flatten:!0})],q.prototype,"buttons",void 0),q=t([v("m3e-button-group")],q);export{q as M3eButtonGroupElement};
 //# sourceMappingURL=button-group.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.min.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n  prefersReducedMotion,\r\n  hasCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--first), :--first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--last), :--last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--first), :--first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--last), :--last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--first), :--first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--last), :--last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\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) => this.#handlePressedChange(pressed),\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\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(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateButtons(): void {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"--connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"--grouped\");\r\n      setCustomState(button, \"--first\", i == 0);\r\n      setCustomState(button, \"--last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePressedChange(pressed: boolean): void {\r\n    const base = this._base;\r\n    if (!base) return;\r\n    if (!pressed || this.variant === \"connected\") {\r\n      const button = this.buttons.find((x) => x === document.activeElement);\r\n      if (!prefersReducedMotion() && button) {\r\n        button.addEventListener(\r\n          \"transitionend\",\r\n          () =>\r\n            queueMicrotask(() => {\r\n              // Pressed state is tested to ensure this runs only when the button\r\n              // is no longer pressed. This handles changes to pressed state in\r\n              // quick succession.\r\n\r\n              if (!hasCustomState(button, \"--pressed\")) {\r\n                this.#cleanupPressed(base);\r\n              }\r\n            }),\r\n          { once: true },\r\n        );\r\n      } else {\r\n        this.#cleanupPressed(base);\r\n      }\r\n    } else {\r\n      base.classList.add(\"pressed\");\r\n      base.style.setProperty(\"--_button-group-width\", `${base.getBoundingClientRect().width}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #cleanupPressed(base: HTMLElement): void {\r\n    base.style.removeProperty(\"--_button-group-width\");\r\n    base.classList.remove(\"pressed\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","this","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_handlePressedChange","call","variant","size","multi","connectedCallback","super","hasAttribute","role","disconnectedCallback","_base","style","removeProperty","classList","remove","update","changedProperties","has","_M3eButtonGroupElement_updateButtons","render","html","_M3eButtonGroupElement_handleChange","buttons","targets","unobserve","canToggle","some","x","toggle","buttonRole","forEach","button","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","base","add","setProperty","getBoundingClientRect","width","find","document","activeElement","prefersReducedMotion","addEventListener","queueMicrotask","hasCustomState","_M3eButtonGroupElement_cleanupPressed","once","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}
+{"version":3,"file":"button-group.min.js","sources":["../../src/button-group/ButtonGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  PressedController,\r\n  Role,\r\n  isSelectedMixin,\r\n  DesignToken,\r\n  setCustomState,\r\n  addCustomState,\r\n  customElement,\r\n  prefersReducedMotion,\r\n  hasCustomState,\r\n  waitForUpgrade,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { ButtonGroupVariant } from \"./ButtonGroupVariant\";\r\nimport { ButtonGroupSize } from \"./ButtonGroupSize\";\r\n\r\n/**\r\n * Organizes buttons and adds interactions between them.\r\n *\r\n * @description\r\n * The `m3e-button-group` component arranges multiple buttons into a unified, expressive layout,\r\n * supporting both `standard` and `connected` variants. It enables seamless, accessible grouping\r\n * of actions, adapts to various sizes, and ensures consistent spacing, shape, and alignment.\r\n * Designed according to Material 3 principles, it empowers users to interact with related actions\r\n * in a visually harmonious and intuitive way.\r\n *\r\n * @example\r\n * The following example illustrates a standard button group.\r\n * ``` html\r\n * <m3e-button-group>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_bold\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_italic\"></m3e-icon></m3e-icon-button>\r\n *  <m3e-icon-button variant=\"tonal\" toggle><m3e-icon name=\"format_underlined\"></m3e-icon></m3e-icon-button>\r\n * </m3e-button-group>\r\n * ```\r\n * @example\r\n * The next example illustrates a connected button group.\r\n * ```html\r\n * <m3e-button-group variant=\"connected\">\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Start</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Directions</m3e-button>\r\n *  <m3e-button variant=\"tonal\" shape=\"square\" toggle>Share</m3e-button>\r\n * </m3e-button-group>\r\n * ```\r\n *\r\n * @tag m3e-button-group\r\n *\r\n * @slot - Renders the buttons of the group.\r\n *\r\n * @attr multi - Whether multiple toggle buttons can be selected.\r\n * @attr size - The size of the group.\r\n * @attr variant - The appearance variant of the group.\r\n *\r\n * @cssprop --m3e-standard-button-group-extra-small-spacing - Spacing between buttons in standard variant, extra-small size.\r\n * @cssprop --m3e-standard-button-group-small-spacing - Spacing between buttons in standard variant, small size.\r\n * @cssprop --m3e-standard-button-group-medium-spacing - Spacing between buttons in standard variant, medium size.\r\n * @cssprop --m3e-standard-button-group-large-spacing - Spacing between buttons in standard variant, large size.\r\n * @cssprop --m3e-standard-button-group-extra-large-spacing - Spacing between buttons in standard variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-spacing - Spacing between buttons in connected variant.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-shape - Corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-extra-small-inner-pressed-shape - Pressed corner shape for connected variant, extra-small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-shape - Corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-small-inner-pressed-shape - Pressed corner shape for connected variant, small size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-shape - Corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-medium-inner-pressed-shape - Pressed corner shape for connected variant, medium size.\r\n * @cssprop --m3e-connected-button-group-large-inner-shape - Corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-large-inner-pressed-shape - Pressed corner shape for connected variant, large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-shape - Corner shape for connected variant, extra-large size.\r\n * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.\r\n */\r\n@customElement(\"m3e-button-group\")\r\nexport class M3eButtonGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      vertical-align: middle;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      justify-content: center;\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      width: fit-content;\r\n      flex: none;\r\n    }\r\n    :host([variant=\"standard\"]) .base.pressed {\r\n      justify-content: space-between;\r\n      width: var(--_button-group-width);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"small\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"medium\"]).base {\r\n      column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"standard\"][size=\"extra-large\"]) .base {\r\n      column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);\r\n    }\r\n    :host([variant=\"connected\"]) .base {\r\n      column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-small\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-small\"]),\r\n    :host([variant=\"connected\"][size=\"extra-small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--first), :--first)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-end-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"small\"]) ::slotted(:is(:state(--last), :--last)[size=\"small\"]),\r\n    :host([variant=\"connected\"][size=\"small\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"small\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-small-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-start-shape-pressed-morph: var(\r\n        --m3e-connected-button-group-small-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--first), :--first)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"medium\"]) ::slotted(:is(:state(--last), :--last)[size=\"medium\"]),\r\n    :host([variant=\"connected\"][size=\"medium\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"medium\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-medium-inner-shape,\r\n        ${DesignToken.shape.corner.small}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-medium-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.extraSmall}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--first), :--first)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"large\"]) ::slotted(:is(:state(--last), :--last)[size=\"large\"]),\r\n    :host([variant=\"connected\"][size=\"large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-large-inner-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.medium}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--first), :--first)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-end-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n    :host([variant=\"connected\"][size=\"extra-large\"]) ::slotted(:is(:state(--last), :--last)[size=\"extra-large\"]),\r\n    :host([variant=\"connected\"][size=\"extra-large\"])\r\n      ::slotted(:not(:is(:state(--first), :--first)):not(:is(:state(--last), :--last))[size=\"extra-large\"]) {\r\n      --_button-rounded-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-shape,\r\n        ${DesignToken.shape.corner.largeIncreased}\r\n      );\r\n      --_button-square-start-pressed-shape: var(\r\n        --m3e-connected-button-group-extra-large-inner-pressed-shape,\r\n        ${DesignToken.shape.corner.large}\r\n      );\r\n    }\r\n  `;\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) => this.#handlePressedChange(pressed),\r\n  });\r\n\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /**\r\n   * The appearance variant of the group.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ButtonGroupVariant = \"standard\";\r\n\r\n  /**\r\n   * The size of the group.\r\n   * @default \"small\"\r\n   */\r\n  @property({ reflect: true }) size: ButtonGroupSize = \"small\";\r\n\r\n  /**\r\n   * Whether multiple toggle buttons can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The buttons contained by the group. */\r\n  @queryAssignedElements({ slot: \"\", selector: \"m3e-button,m3e-icon-button\", flatten: true })\r\n  readonly buttons!: ReadonlyArray<M3eButtonElement | M3eIconButtonElement>;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.hasAttribute(\"disable-role\")) {\r\n      this.role = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._base?.style.removeProperty(\"--_button-group-width\");\r\n    this._base?.classList.remove(\"pressed\");\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(\"multi\") || changedProperties.has(\"variant\")) {\r\n      this.#updateButtons();\r\n    }\r\n    if (changedProperties.has(\"variant\")) {\r\n      this._base?.style.removeProperty(\"--_button-group-width\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#updateButtons}\" @change=\"${this.#handleChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  async #updateButtons(): Promise<void> {\r\n    const buttons = this.buttons;\r\n    for (const target of this.#pressedController.targets) {\r\n      this.#pressedController.unobserve(target);\r\n    }\r\n    for (const button of this.buttons) {\r\n      await waitForUpgrade(button);\r\n      if (button.isUpdatePending) {\r\n        await button.updateComplete;\r\n      }\r\n    }\r\n    const canToggle = [...buttons].some((x) => x.toggle);\r\n\r\n    // disable-role is an internal attribute to by split-button to disable setting roles.\r\n    if (!this.hasAttribute(\"disable-role\")) {\r\n      this.role = canToggle && !this.multi ? \"radiogroup\" : \"group\";\r\n    }\r\n\r\n    const buttonRole = this.role === \"radiogroup\" ? \"radio\" : \"button\";\r\n\r\n    buttons.forEach((button, i) => {\r\n      this.#pressedController.observe(button);\r\n      setCustomState(button, \"--connected\", this.variant === \"connected\");\r\n      addCustomState(button, \"--grouped\");\r\n      setCustomState(button, \"--first\", i == 0);\r\n      setCustomState(button, \"--last\", i == buttons.length - 1);\r\n\r\n      if (!this.hasAttribute(\"disable-role\") && button.role !== buttonRole && button.toggle) {\r\n        const checked = !button.toggle ? null : button.selected ? \"true\" : \"false\";\r\n        button.role = buttonRole;\r\n        if (button.role === \"button\") {\r\n          button.ariaPressed = checked;\r\n          button.ariaChecked = null;\r\n        } else {\r\n          button.ariaChecked = checked;\r\n          button.ariaPressed = null;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    if (this.multi || !(e.target instanceof HTMLElement)) return;\r\n    if (e.target.tagName === \"M3E-BUTTON\" || e.target.tagName === \"M3E-ICON-BUTTON\") {\r\n      if (!isSelectedMixin(e.target) || !e.target.selected) {\r\n        return;\r\n      }\r\n\r\n      for (const button of this.buttons) {\r\n        if (button === e.target || !button.selected) continue;\r\n        button.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePressedChange(pressed: boolean): void {\r\n    const base = this._base;\r\n    if (!base) return;\r\n    if (!pressed || this.variant === \"connected\") {\r\n      const button = this.buttons.find((x) => x === document.activeElement);\r\n      if (!prefersReducedMotion() && button) {\r\n        button.addEventListener(\r\n          \"transitionend\",\r\n          () =>\r\n            queueMicrotask(() => {\r\n              // Pressed state is tested to ensure this runs only when the button\r\n              // is no longer pressed. This handles changes to pressed state in\r\n              // quick succession.\r\n\r\n              if (!hasCustomState(button, \"--pressed\")) {\r\n                this.#cleanupPressed(base);\r\n              }\r\n            }),\r\n          { once: true },\r\n        );\r\n      } else {\r\n        this.#cleanupPressed(base);\r\n      }\r\n    } else {\r\n      base.classList.add(\"pressed\");\r\n      base.style.setProperty(\"--_button-group-width\", `${base.getBoundingClientRect().width}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #cleanupPressed(base: HTMLElement): void {\r\n    base.style.removeProperty(\"--_button-group-width\");\r\n    base.classList.remove(\"pressed\");\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-group\": M3eButtonGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonGroupElement","Role","LitElement","constructor","_M3eButtonGroupElement_pressedController","set","this","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","__classPrivateFieldGet","_M3eButtonGroupElement_instances","_M3eButtonGroupElement_handlePressedChange","call","variant","size","multi","connectedCallback","super","hasAttribute","role","disconnectedCallback","_base","style","removeProperty","classList","remove","update","changedProperties","has","_M3eButtonGroupElement_updateButtons","render","html","_M3eButtonGroupElement_handleChange","async","buttons","targets","unobserve","button","waitForUpgrade","isUpdatePending","updateComplete","canToggle","some","x","toggle","buttonRole","forEach","i","observe","setCustomState","addCustomState","length","checked","selected","ariaPressed","ariaChecked","e","HTMLElement","tagName","isSelectedMixin","base","add","setProperty","getBoundingClientRect","width","find","document","activeElement","prefersReducedMotion","addEventListener","queueMicrotask","hasCustomState","_M3eButtonGroupElement_cleanupPressed","once","styles","css","DesignToken","shape","corner","small","extraSmall","large","medium","largeIncreased","__decorate","query","prototype","property","reflect","type","Boolean","queryAssignedElements","slot","selector","flatten","customElement"],"mappings":"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"}

package/dist/button.js

@@ -102,7 +102,7 @@ const ButtonSizeToken = {
 
 /** @private */
 function buttonStyle(size) {
-  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${ButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .wrapper { padding-inline-start: calc(${ButtonSizeToken[size].leadingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2))); padding-inline-end: calc(${ButtonSizeToken[size].trailingSpace} - calc(calc(var(--_adjacent-shrink, 0px) / 2))); column-gap: ${ButtonSizeToken[size].iconLabelSpace}; } :host([size="${unsafeCSS(size)}"]) .label { font-size: ${ButtonSizeToken[size].labelTextFontSize}; font-weight: ${ButtonSizeToken[size].labelTextFontWeight}; line-height: ${ButtonSizeToken[size].labelTextLineHeight}; letter-spacing: ${ButtonSizeToken[size].labelTextTracking}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${ButtonSizeToken[size].iconSize}; --m3e-icon-size: ${ButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${ButtonSizeToken[size].outlineThickness}); outline-width: ${ButtonSizeToken[size].outlineThickness}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${ButtonSizeToken[size].selectedShapeRound}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${ButtonSizeToken[size].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${ButtonSizeToken[size].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not([toggle][selected])) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); }`;
+  return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${ButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .wrapper { padding-inline-start: calc(${ButtonSizeToken[size].leadingSpace} - calc(var(--_adjacent-shrink, 0px) / 2)); padding-inline-end: calc(${ButtonSizeToken[size].trailingSpace} - calc(var(--_adjacent-shrink, 0px) / 2)); column-gap: ${ButtonSizeToken[size].iconLabelSpace}; } :host([size="${unsafeCSS(size)}"]) .label { font-size: ${ButtonSizeToken[size].labelTextFontSize}; font-weight: ${ButtonSizeToken[size].labelTextFontWeight}; line-height: ${ButtonSizeToken[size].labelTextLineHeight}; letter-spacing: ${ButtonSizeToken[size].labelTextTracking}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${ButtonSizeToken[size].iconSize}; --m3e-icon-size: ${ButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${ButtonSizeToken[size].outlineThickness}); outline-width: ${ButtonSizeToken[size].outlineThickness}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${ButtonSizeToken[size].selectedShapeRound}; } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${ButtonSizeToken[size].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${ButtonSizeToken[size].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not([toggle][selected])) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); } :host( :is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${unsafeCSS(size)}"]:is(:state(--pressed), :--pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); }`;
 }
 /**
  * Size variant styles for `M3eButtonElement`.
@@ -115,7 +115,7 @@ const ButtonSizeStyle = [buttonStyle("extra-small"), buttonStyle("small"), butto
  * @internal
  */
 const ButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
-          border-radius ${DesignToken.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${unsafeCSS(`flex-basis ${DesignToken.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper { transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed, :state(--adjacent-pressed), :--adjacent-pressed) ) ) { flex-basis: var(--_button-width); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .label { text-overflow: clip; } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))), :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper, :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .label, .icon { transition: none; } }`;
+          border-radius ${DesignToken.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${unsafeCSS(`width ${DesignToken.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper { transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed, :state(--adjacent-pressed), :--adjacent-pressed) ) ) { width: var(--_button-width); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--pressed), :--pressed) ):is(:state(--adjacent-pressed), :--adjacent-pressed) ) { width: calc(var(--_button-width) - var(--_adjacent-shrink, 0px)); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { width: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .label { text-overflow: clip; } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))), :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) .wrapper, :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .label, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eButtonElement`.
@@ -1231,7 +1231,7 @@ let M3eButtonElement = class M3eButtonElement extends KeyboardClick(LinkButton(F
   /** @private */
   _handleResize() {
     if (this.grouped && !hasCustomState(this, "--no-resize") && this !== document.activeElement) {
-      this.style.setProperty("--_button-width", `${this.clientWidth}px`);
+      this.style.setProperty("--_button-width", `${this.getBoundingClientRect().width}px`);
       __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this, true);
     }
   }
@@ -1306,7 +1306,7 @@ _M3eButtonElement_handlePressedChange = function _M3eButtonElement_handlePressed
       }
       if (!prefersReducedMotion()) {
         this.addEventListener("transitionend", e => {
-          if (e.propertyName === "flex-basis") {
+          if (e.propertyName === "width") {
             queueMicrotask(() => {
               // Pressed state is tested to ensure this runs only when the button
               // is no longer pressed. This handles changes to pressed state in