@material/web 2.5.1-nightly.56a486b.0 → 2.5.1-nightly.703aed2.0

package/labs/gb/components/buttongroup/button-group-element.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
+import { type ButtonElement } from '../button/button-element.js';
+import { type ButtonGroupSelection, type ButtonGroupVariant } from './button-group.js';
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>;
+/**
+ * A Material Design button group component.
+ *
+ * @slot - Used to display buttons.
+ * @fires {InputEvent} input - Fired when selection changes. --bubbles --composed
+ * @fires {Event} change - Fired when selection changes. --bubbles
+ * @cssprop --between-space
+ * @cssprop --pressed-item-width-multiplier
+ * @cssprop --motion-spring-fast-spatial
+ * @cssprop --motion-spring-fast-spatial-duration
+ * @cssprop --inner-corner-size
+ * @cssprop --pressed-inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --outer-corner-square-size
+ */
+export declare class ButtonGroupElement extends baseClass {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    constructor();
+    /** The visual variant of the button group. */
+    variant: ButtonGroupVariant;
+    /** The selection mode. */
+    selection: ButtonGroupSelection;
+    /** Whether selection is required in single-select mode. */
+    required: boolean;
+    /** Whether the button group is disabled. */
+    disabled: boolean;
+    private readonly assignedElementsList;
+    private readonly groupDisabledButtons;
+    private readonly childObserver;
+    /** Returns all child `md-gb-button` elements. */
+    get buttons(): ButtonElement[];
+    /** Returns currently selected buttons. */
+    get selectedButtons(): ButtonElement[];
+    /** Returns index of first selected button or -1. */
+    get selectedIndex(): number;
+    /** Returns indices of all selected buttons. */
+    get selectedIndices(): number[];
+    /** Value of the currently selected button (or first selected). */
+    get value(): string;
+    /** Silent setter for single-select mode. */
+    set value(val: string);
+    /** Values of all currently selected buttons. */
+    get values(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private syncSelectionFromChild;
+    private syncButtonsDisabledAndType;
+    private normalizeGroupSelection;
+    private observeChildren;
+    protected handleSlotChange(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/labs/gb/components/buttongroup/button-group-element.js

@@ -0,0 +1,277 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import { adoptStyles } from '../../styles/adopt-styles.js';
+import { updateClassList } from '../shared/update-class-list.js';
+import { buttonGroupClasses, normalizeSelection, shouldBlockToggle, } from './button-group.js';
+import buttonGroupStyles from './button-group.css' with { type: 'css' }; // github-only
+// import buttonGroupStyles from './button-group.cssresult.js'; // google3-only
+// Separate variable needed for closure.
+const baseClass = mixinElementInternals(LitElement);
+/**
+ * A Material Design button group component.
+ *
+ * @slot - Used to display buttons.
+ * @fires {InputEvent} input - Fired when selection changes. --bubbles --composed
+ * @fires {Event} change - Fired when selection changes. --bubbles
+ * @cssprop --between-space
+ * @cssprop --pressed-item-width-multiplier
+ * @cssprop --motion-spring-fast-spatial
+ * @cssprop --motion-spring-fast-spatial-duration
+ * @cssprop --inner-corner-size
+ * @cssprop --pressed-inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --outer-corner-square-size
+ */
+export class ButtonGroupElement extends baseClass {
+    constructor() {
+        super();
+        /** The visual variant of the button group. */
+        this.variant = 'standard';
+        /** The selection mode. */
+        this.selection = 'none';
+        /** Whether selection is required in single-select mode. */
+        this.required = false;
+        /** Whether the button group is disabled. */
+        this.disabled = false;
+        this.groupDisabledButtons = new WeakSet();
+        this.childObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.attributeName === 'selected') {
+                    const target = mutation.target;
+                    if (this.selection === 'single') {
+                        if (target.selected) {
+                            this.normalizeGroupSelection({ preferred: target });
+                        }
+                        else if (this.required) {
+                            const anySelected = this.buttons.some((b) => b.selected);
+                            if (!anySelected) {
+                                this.normalizeGroupSelection();
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        this[internals].role = 'toolbar';
+        const handleClick = (event) => {
+            const path = event.composedPath();
+            const button = this.buttons.find((b) => path.includes(b));
+            if (!button)
+                return;
+            if (button.disabled || button.softDisabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
+            const index = this.buttons.indexOf(button);
+            if (shouldBlockToggle(this.buttons, index, {
+                selection: this.selection,
+                required: this.required,
+            })) {
+                event.preventDefault();
+            }
+        };
+        const handleInput = (event) => {
+            if (event.target === this)
+                return;
+            const path = event.composedPath();
+            const child = this.buttons.find((b) => path.includes(b));
+            if (!child || child.disabled || child.softDisabled)
+                return;
+            event.stopImmediatePropagation();
+            this.syncSelectionFromChild(child);
+            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        };
+        const handleChange = (event) => {
+            if (event.target === this)
+                return;
+            const path = event.composedPath();
+            const child = this.buttons.find((b) => path.includes(b));
+            if (!child || child.disabled || child.softDisabled)
+                return;
+            event.stopImmediatePropagation();
+            this.syncSelectionFromChild(child);
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        this.addEventListener('click', handleClick);
+        this.addEventListener('input', handleInput);
+        this.addEventListener('change', handleChange);
+    }
+    /** Returns all child `md-gb-button` elements. */
+    get buttons() {
+        return this.assignedElementsList.filter((node) => node.localName === 'md-gb-button');
+    }
+    /** Returns currently selected buttons. */
+    get selectedButtons() {
+        return this.buttons.filter((b) => b.selected);
+    }
+    /** Returns index of first selected button or -1. */
+    get selectedIndex() {
+        return this.buttons.findIndex((b) => b.selected);
+    }
+    /** Returns indices of all selected buttons. */
+    get selectedIndices() {
+        const indices = [];
+        const buttons = this.buttons;
+        for (let i = 0; i < buttons.length; i++) {
+            if (buttons[i].selected) {
+                indices.push(i);
+            }
+        }
+        return indices;
+    }
+    /** Value of the currently selected button (or first selected). */
+    get value() {
+        return this.selectedButtons[0]?.value ?? '';
+    }
+    /** Silent setter for single-select mode. */
+    set value(val) {
+        if (this.selection !== 'single')
+            return;
+        for (const b of this.buttons) {
+            b.selected = b.value === val;
+        }
+        this.normalizeGroupSelection();
+    }
+    /** Values of all currently selected buttons. */
+    get values() {
+        return this.selectedButtons.map((b) => b.value);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        adoptStyles(this, buttonGroupStyles);
+        updateClassList(this, buttonGroupClasses({
+            variant: this.variant,
+            disabled: this.disabled,
+        }));
+        if (this.hasUpdated) {
+            this.observeChildren();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.childObserver.disconnect();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.syncButtonsDisabledAndType();
+        this.normalizeGroupSelection();
+        this.observeChildren();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!this.hasAttribute('focusgroup')) {
+            this.setAttribute('focusgroup', 'toolbar wrap inline');
+        }
+        if (changedProperties.has('variant') || changedProperties.has('disabled')) {
+            updateClassList(this, buttonGroupClasses({
+                variant: this.variant,
+                disabled: this.disabled,
+            }));
+        }
+        if (changedProperties.has('selection') ||
+            changedProperties.has('disabled')) {
+            this.syncButtonsDisabledAndType();
+        }
+        if (changedProperties.has('selection') ||
+            changedProperties.has('required')) {
+            this.normalizeGroupSelection();
+            this.observeChildren();
+        }
+    }
+    syncSelectionFromChild(child) {
+        // ButtonElement updates its own `selected` property on the `change` event;
+        // during an `input` event, the custom element's `selected` property has not
+        // yet been updated by its internal listener, so we inspect `aria-pressed` on
+        // the inner button element to capture the immediate interactive toggle state.
+        const innerBtn = child.shadowRoot?.querySelector('[part="btn"]');
+        if (innerBtn) {
+            const isPressed = innerBtn.getAttribute('aria-pressed') === 'true' ||
+                innerBtn.ariaPressed === 'true';
+            child.selected = isPressed;
+        }
+        if (this.selection === 'single') {
+            if (child.selected) {
+                for (const button of this.buttons) {
+                    if (button !== child) {
+                        button.selected = false;
+                    }
+                }
+            }
+        }
+    }
+    syncButtonsDisabledAndType() {
+        const buttons = this.buttons;
+        for (const button of buttons) {
+            const hasHref = button.hasAttribute('href') || Boolean(button.href);
+            if (!hasHref) {
+                const targetType = this.selection === 'none' ? 'button' : 'toggle';
+                button.setAttribute('type', targetType);
+            }
+            if (this.disabled) {
+                if (!button.disabled) {
+                    this.groupDisabledButtons.add(button);
+                    button.disabled = true;
+                }
+            }
+            else {
+                if (this.groupDisabledButtons.has(button)) {
+                    this.groupDisabledButtons.delete(button);
+                    button.disabled = false;
+                }
+            }
+        }
+    }
+    normalizeGroupSelection(options = {}) {
+        normalizeSelection(this.buttons, {
+            selection: this.selection,
+            required: this.required,
+            preferred: options.preferred,
+        });
+        this.childObserver.takeRecords();
+    }
+    observeChildren() {
+        this.childObserver.disconnect();
+        for (const button of this.buttons) {
+            this.childObserver.observe(button, {
+                attributes: true,
+                attributeFilter: ['selected'],
+            });
+        }
+    }
+    handleSlotChange() {
+        this.syncButtonsDisabledAndType();
+        const selected = this.buttons.filter((b) => b.selected);
+        const preferred = selected[selected.length - 1];
+        this.normalizeGroupSelection({ preferred });
+        this.observeChildren();
+    }
+    render() {
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+}
+/** @nocollapse */
+ButtonGroupElement.styles = [buttonGroupStyles];
+__decorate([
+    property({ reflect: true })
+], ButtonGroupElement.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], ButtonGroupElement.prototype, "selection", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ButtonGroupElement.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ButtonGroupElement.prototype, "disabled", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], ButtonGroupElement.prototype, "assignedElementsList", void 0);
+//# sourceMappingURL=button-group-element.js.map

package/labs/gb/components/buttongroup/button-group-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-element.js","sourceRoot":"","sources":["button-group-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative, html, LitElement, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {adoptStyles} from '../../styles/adopt-styles.js';\nimport {type ButtonElement} from '../button/button-element.js';\nimport {updateClassList} from '../shared/update-class-list.js';\nimport {\n  buttonGroupClasses,\n  type ButtonGroupSelection,\n  type ButtonGroupVariant,\n  normalizeSelection,\n  shouldBlockToggle,\n} from './button-group.js';\n\nimport buttonGroupStyles from './button-group.css' with {type: 'css'}; // github-only\n// import buttonGroupStyles from './button-group.cssresult.js'; // google3-only\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design button group component.\n *\n * @slot - Used to display buttons.\n * @fires {InputEvent} input - Fired when selection changes. --bubbles --composed\n * @fires {Event} change - Fired when selection changes. --bubbles\n * @cssprop --between-space\n * @cssprop --pressed-item-width-multiplier\n * @cssprop --motion-spring-fast-spatial\n * @cssprop --motion-spring-fast-spatial-duration\n * @cssprop --inner-corner-size\n * @cssprop --pressed-inner-corner-size\n * @cssprop --outer-corner-size\n * @cssprop --outer-corner-square-size\n */\nexport class ButtonGroupElement extends baseClass {\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [buttonGroupStyles];\n\n  constructor() {\n    super();\n    this[internals].role = 'toolbar';\n\n    const handleClick = (event: MouseEvent): void => {\n      const path = event.composedPath();\n      const button = this.buttons.find((b) => path.includes(b));\n      if (!button) return;\n\n      if (button.disabled || button.softDisabled) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        return;\n      }\n\n      const index = this.buttons.indexOf(button);\n      if (\n        shouldBlockToggle(this.buttons, index, {\n          selection: this.selection,\n          required: this.required,\n        })\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const handleInput = (event: Event): void => {\n      if (event.target === this) return;\n\n      const path = event.composedPath();\n      const child = this.buttons.find((b) => path.includes(b));\n      if (!child || child.disabled || child.softDisabled) return;\n\n      event.stopImmediatePropagation();\n      this.syncSelectionFromChild(child);\n      this.dispatchEvent(\n        new InputEvent('input', {bubbles: true, composed: true}),\n      );\n    };\n\n    const handleChange = (event: Event): void => {\n      if (event.target === this) return;\n\n      const path = event.composedPath();\n      const child = this.buttons.find((b) => path.includes(b));\n      if (!child || child.disabled || child.softDisabled) return;\n\n      event.stopImmediatePropagation();\n      this.syncSelectionFromChild(child);\n      this.dispatchEvent(new Event('change', {bubbles: true}));\n    };\n\n    this.addEventListener('click', handleClick);\n    this.addEventListener('input', handleInput);\n    this.addEventListener('change', handleChange);\n  }\n\n  /** The visual variant of the button group. */\n  @property({reflect: true}) variant: ButtonGroupVariant = 'standard';\n\n  /** The selection mode. */\n  @property({reflect: true}) selection: ButtonGroupSelection = 'none';\n\n  /** Whether selection is required in single-select mode. */\n  @property({type: Boolean, reflect: true}) required = false;\n\n  /** Whether the button group is disabled. */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @queryAssignedElements({flatten: true})\n  private readonly assignedElementsList!: HTMLElement[];\n\n  private readonly groupDisabledButtons = new WeakSet<HTMLElement>();\n\n  private readonly childObserver = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (mutation.attributeName === 'selected') {\n        const target = mutation.target as ButtonElement;\n        if (this.selection === 'single') {\n          if (target.selected) {\n            this.normalizeGroupSelection({preferred: target});\n          } else if (this.required) {\n            const anySelected = this.buttons.some((b) => b.selected);\n            if (!anySelected) {\n              this.normalizeGroupSelection();\n            }\n          }\n        }\n      }\n    }\n  });\n\n  /** Returns all child `md-gb-button` elements. */\n  get buttons(): ButtonElement[] {\n    return this.assignedElementsList.filter(\n      (node): node is ButtonElement => node.localName === 'md-gb-button',\n    );\n  }\n\n  /** Returns currently selected buttons. */\n  get selectedButtons(): ButtonElement[] {\n    return this.buttons.filter((b) => b.selected);\n  }\n\n  /** Returns index of first selected button or -1. */\n  get selectedIndex(): number {\n    return this.buttons.findIndex((b) => b.selected);\n  }\n\n  /** Returns indices of all selected buttons. */\n  get selectedIndices(): number[] {\n    const indices: number[] = [];\n    const buttons = this.buttons;\n    for (let i = 0; i < buttons.length; i++) {\n      if (buttons[i].selected) {\n        indices.push(i);\n      }\n    }\n    return indices;\n  }\n\n  /** Value of the currently selected button (or first selected). */\n  get value(): string {\n    return this.selectedButtons[0]?.value ?? '';\n  }\n\n  /** Silent setter for single-select mode. */\n  set value(val: string) {\n    if (this.selection !== 'single') return;\n    for (const b of this.buttons) {\n      b.selected = b.value === val;\n    }\n    this.normalizeGroupSelection();\n  }\n\n  /** Values of all currently selected buttons. */\n  get values(): string[] {\n    return this.selectedButtons.map((b) => b.value);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    adoptStyles(this, buttonGroupStyles);\n    updateClassList(\n      this,\n      buttonGroupClasses({\n        variant: this.variant,\n        disabled: this.disabled,\n      }),\n    );\n    if (this.hasUpdated) {\n      this.observeChildren();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.childObserver.disconnect();\n  }\n\n  protected override firstUpdated(\n    changedProperties: PropertyValues<this>,\n  ): void {\n    super.firstUpdated(changedProperties);\n    this.syncButtonsDisabledAndType();\n    this.normalizeGroupSelection();\n    this.observeChildren();\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (!this.hasAttribute('focusgroup')) {\n      this.setAttribute('focusgroup', 'toolbar wrap inline');\n    }\n\n    if (changedProperties.has('variant') || changedProperties.has('disabled')) {\n      updateClassList(\n        this,\n        buttonGroupClasses({\n          variant: this.variant,\n          disabled: this.disabled,\n        }),\n      );\n    }\n\n    if (\n      changedProperties.has('selection') ||\n      changedProperties.has('disabled')\n    ) {\n      this.syncButtonsDisabledAndType();\n    }\n\n    if (\n      changedProperties.has('selection') ||\n      changedProperties.has('required')\n    ) {\n      this.normalizeGroupSelection();\n      this.observeChildren();\n    }\n  }\n\n  private syncSelectionFromChild(child: ButtonElement): void {\n    // ButtonElement updates its own `selected` property on the `change` event;\n    // during an `input` event, the custom element's `selected` property has not\n    // yet been updated by its internal listener, so we inspect `aria-pressed` on\n    // the inner button element to capture the immediate interactive toggle state.\n    const innerBtn = child.shadowRoot?.querySelector('[part=\"btn\"]');\n    if (innerBtn) {\n      const isPressed =\n        innerBtn.getAttribute('aria-pressed') === 'true' ||\n        (innerBtn as HTMLElement).ariaPressed === 'true';\n      child.selected = isPressed;\n    }\n\n    if (this.selection === 'single') {\n      if (child.selected) {\n        for (const button of this.buttons) {\n          if (button !== child) {\n            button.selected = false;\n          }\n        }\n      }\n    }\n  }\n\n  private syncButtonsDisabledAndType(): void {\n    const buttons = this.buttons;\n    for (const button of buttons) {\n      const hasHref = button.hasAttribute('href') || Boolean(button.href);\n      if (!hasHref) {\n        const targetType = this.selection === 'none' ? 'button' : 'toggle';\n        button.setAttribute('type', targetType);\n      }\n\n      if (this.disabled) {\n        if (!button.disabled) {\n          this.groupDisabledButtons.add(button);\n          button.disabled = true;\n        }\n      } else {\n        if (this.groupDisabledButtons.has(button)) {\n          this.groupDisabledButtons.delete(button);\n          button.disabled = false;\n        }\n      }\n    }\n  }\n\n  private normalizeGroupSelection(\n    options: {preferred?: ButtonElement} = {},\n  ): void {\n    normalizeSelection(this.buttons, {\n      selection: this.selection,\n      required: this.required,\n      preferred: options.preferred,\n    });\n    this.childObserver.takeRecords();\n  }\n\n  private observeChildren(): void {\n    this.childObserver.disconnect();\n    for (const button of this.buttons) {\n      this.childObserver.observe(button, {\n        attributes: true,\n        attributeFilter: ['selected'],\n      });\n    }\n  }\n\n  protected handleSlotChange(): void {\n    this.syncButtonsDisabledAndType();\n    const selected = this.buttons.filter((b) => b.selected);\n    const preferred = selected[selected.length - 1];\n    this.normalizeGroupSelection({preferred});\n    this.observeChildren();\n  }\n\n  protected override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n"]}

package/labs/gb/components/buttongroup/button-group.css

@@ -0,0 +1,5 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;@layer md.comp.button-group{.btn-group{--between-space: 8px;--pressed-item-width-multiplier: 1.15;--motion-spring-fast-spatial: linear( 0, 0.099, 0.317, 0.561, 0.775, 0.934, 1.034, 1.083, 1.095, 1.084, 1.063, 1.04, 1.02, 1.005, 0.996, 0.992, 0.991, 0.992, 0.994, 0.996, 1 );--motion-spring-fast-spatial-duration: 350ms;--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs);--outer-corner-size: calc(var(--container-height) / 2);--outer-corner-square-size: var(--md-sys-shape-corner-sm);display:inline-flex;align-items:center;gap:var(--between-space);overflow:visible;interpolate-size:allow-keywords}.btn-group>.btn,.btn-group>*{white-space:nowrap;flex-shrink:0;min-inline-size:max-content}.btn-group-standard,.btn-group:not(.btn-group-connected){flex-wrap:wrap;--between-space: 12px}.btn-group-standard:has(>:is([size=xs],.btn-xs)),.btn-group:not(.btn-group-connected):has(>:is([size=xs],.btn-xs)){--between-space: 18px}.btn-group-standard:has(>:is([size=sm],.btn-sm)),.btn-group:not(.btn-group-connected):has(>:is([size=sm],.btn-sm)){--between-space: 12px}.btn-group-standard:has(>:is([size=md],.btn-md)),.btn-group:not(.btn-group-connected):has(>:is([size=md],.btn-md)){--between-space: 8px}.btn-group-standard:has(>:is([size=lg],.btn-lg)),.btn-group:not(.btn-group-connected):has(>:is([size=lg],.btn-lg)){--between-space: 8px}.btn-group-standard:has(>:is([size=xl],.btn-xl)),.btn-group:not(.btn-group-connected):has(>:is([size=xl],.btn-xl)){--between-space: 8px}.btn-group-connected{flex-wrap:nowrap;--between-space: 2px;--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs);--outer-corner-size: calc(var(--container-height) / 2)}.btn-group-connected:has(>:is([size=xs],.btn-xs)){--inner-corner-size: var(--md-sys-shape-corner-xs);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=sm],.btn-sm)){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=md],.btn-md)){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=lg],.btn-lg)){--inner-corner-size: var(--md-sys-shape-corner-lg);--pressed-inner-corner-size: var(--md-sys-shape-corner-md)}.btn-group-connected:has(>:is([size=xl],.btn-xl)){--inner-corner-size: var(--md-sys-shape-corner-lg-increased);--pressed-inner-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>.btn,.btn-group-connected>*::part(btn){--outer-corner-size: calc(var(--container-height) / 2);border-radius:var(--inner-corner-size);transition:border-radius var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial),var(--ripple-transition)}.btn-group-connected>.btn.btn-xs,.btn-group-connected>.btn:is([size=xs],.btn-xs)::part(btn),.btn-group-connected>*::part(btn).btn-xs,.btn-group-connected>*::part(btn):is([size=xs],.btn-xs)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-xs);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-sm,.btn-group-connected>.btn:is([size=sm],.btn-sm)::part(btn),.btn-group-connected>*::part(btn).btn-sm,.btn-group-connected>*::part(btn):is([size=sm],.btn-sm)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-md,.btn-group-connected>.btn:is([size=md],.btn-md)::part(btn),.btn-group-connected>*::part(btn).btn-md,.btn-group-connected>*::part(btn):is([size=md],.btn-md)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-lg,.btn-group-connected>.btn:is([size=lg],.btn-lg)::part(btn),.btn-group-connected>*::part(btn).btn-lg,.btn-group-connected>*::part(btn):is([size=lg],.btn-lg)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-lg);--pressed-inner-corner-size: var(--md-sys-shape-corner-md)}.btn-group-connected>.btn.btn-xl,.btn-group-connected>.btn:is([size=xl],.btn-xl)::part(btn),.btn-group-connected>*::part(btn).btn-xl,.btn-group-connected>*::part(btn):is([size=xl],.btn-xl)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-lg-increased);--pressed-inner-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>[square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--outer-corner-square-size)}.btn-group-connected>[size=xs][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-xs.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>[size=sm][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-sm.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-sm)}.btn-group-connected>[size=md][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-md.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-sm)}.btn-group-connected>[size=lg][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-lg.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>[size=xl][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-xl.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-lg-increased)}.btn-group-connected>.btn:is(.btn-selected,[aria-pressed=true]),.btn-group-connected>:is([selected],[aria-pressed=true])::part(btn){--inner-corner-size: calc(var(--container-height) / 2);--outer-corner-size: calc(var(--container-height) / 2)}.btn-group-connected>.btn:active:not(:disabled,.disabled),.btn-group-connected>:active:not([disabled],[soft-disabled])::part(btn){--inner-corner-size: var(--pressed-inner-corner-size)}.btn-group-connected>.btn:is(:first-child,:nth-child(1 of .btn:not([hidden]))):not(:only-child),.btn-group-connected>:is(:first-child,:nth-child(1 of :not([hidden]))):not(:only-child)::part(btn
+    ){border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--inner-corner-size);border-end-end-radius:var(--inner-corner-size)}.btn-group-connected>.btn:is(:last-child,:nth-last-child(1 of .btn:not([hidden]))):not(:only-child),.btn-group-connected>:is(:last-child,:nth-last-child(1 of :not([hidden]))):not(:only-child)::part(btn){border-start-start-radius:var(--inner-corner-size);border-end-start-radius:var(--inner-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.btn-group-connected>.btn:only-child,.btn-group-connected>:only-child::part(btn){border-radius:var(--outer-corner-size);border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.btn-group>.btn.btn-outlined:is(.btn-selected,[aria-pressed=true]),.btn-group>[color=outlined]:is([selected],[aria-pressed=true])::part(btn){--outline-color: transparent;border-color:rgba(0,0,0,0);background-color:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface)}.btn-group-connected>.btn:is(.btn-xs,.btn-sm),.btn-group-connected>:is([size=xs],[size=sm]){min-inline-size:48px}.btn-group>.btn:focus-within,.btn-group>:focus-within{z-index:1}@supports(width: calc-size(auto, size)){.btn-group:not(.btn-group-connected)>.btn,.btn-group:not(.btn-group-connected)>*{transition:width var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial)}.btn-group:not(.btn-group-connected)>.btn:active:not(:disabled,.disabled),.btn-group:not(.btn-group-connected)>.btn:active:not([disabled],[soft-disabled]),.btn-group:not(.btn-group-connected)>*:active:not(:disabled,.disabled),.btn-group:not(.btn-group-connected)>*:active:not([disabled],[soft-disabled]){width:calc-size(auto,max(size,size*var(--pressed-item-width-multiplier)))}}.btn-group>.btn:is(.btn-xs,.btn-sm),.btn-group>:is([size=xs],[size=sm]){position:relative}.btn-group>.btn:is(.btn-xs,.btn-sm)::before,.btn-group>.btn:is(.btn-xs,.btn-sm)::part(btn)::before,.btn-group>:is([size=xs],[size=sm])::before,.btn-group>:is([size=xs],[size=sm])::part(btn)::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:48px;min-height:48px;z-index:0}@media(prefers-reduced-motion: reduce){.btn-group>.btn,.btn-group>*::part(btn),.btn-group>*{transition-duration:0s}}}/*# sourceMappingURL=button-group.css.map */

package/labs/gb/components/buttongroup/button-group.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["button-group.scss","_button-group-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAOA,kEAEA,4BACE,WCHA,qBACA,sCACA,gLAuBA,6CACA,mDACA,2DACA,uDACA,0DDxBE,oBACA,mBACA,yBACA,iBACA,gCAIF,6BAEE,mBACA,cACA,4BAIF,yDAEE,eCeF,sBDZE,mHCQF,sBDJE,mHCQF,sBDJE,mHCQF,qBDJE,mHCQF,qBDJE,mHCQF,qBDFA,qBACE,iBCKF,qBAUA,mDACA,2DAmBA,uDD9BE,kDCKF,mDACA,2DDFE,kDCMF,mDACA,2DDHE,kDCOF,mDACA,2DDJE,kDCQF,mDACA,2DDLE,kDCSF,6DACA,2DDJA,4DAEE,uDACA,uCACA,WACE,oHAIF,wMC1BF,mDACA,2DD8BE,wMC1BF,mDACA,2DD8BE,wMC1BF,mDACA,2DD8BE,wMC1BF,mDACA,2DD8BE,wMC1BF,6DACA,2DDgCA,mKAIE,qDAIF,+KAIE,mDAGF,+KAIE,mDAGF,+KAIE,mDAGF,+KAIE,mDAGF,+KAIE,6DAIF,oIAEE,uDACA,uDAIF,kIAEE,sDAIF;AAAA,MAQE,mDACA,iDACA,iDACA,+CAIF,2MAQE,mDACA,iDACA,iDACA,+CAIF,iFAEE,uCACA,mDACA,iDACA,iDACA,+CAIF,6IAGE,6BACA,2BACA,qDACA,6CAIF,4FAEE,qBAIF,sDAEE,UAIF,wCACE,iFAEE,8FAGA,gTAEE,2EASN,wEAEE,kBAEA,sMAEE,WACA,kBACA,QACA,SACA,gCACA,WACA,YACA,gBACA,UAKJ,uCACE,qDAGE","file":"button-group.css"}

package/labs/gb/components/buttongroup/button-group.cssresult.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

package/labs/gb/components/buttongroup/button-group.cssresult.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/buttongroup/button-group.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;@layer md.comp.button-group{.btn-group{--between-space: 8px;--pressed-item-width-multiplier: 1.15;--motion-spring-fast-spatial: linear( 0, 0.099, 0.317, 0.561, 0.775, 0.934, 1.034, 1.083, 1.095, 1.084, 1.063, 1.04, 1.02, 1.005, 0.996, 0.992, 0.991, 0.992, 0.994, 0.996, 1 );--motion-spring-fast-spatial-duration: 350ms;--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs);--outer-corner-size: calc(var(--container-height) / 2);--outer-corner-square-size: var(--md-sys-shape-corner-sm);display:inline-flex;align-items:center;gap:var(--between-space);overflow:visible;interpolate-size:allow-keywords}.btn-group>.btn,.btn-group>*{white-space:nowrap;flex-shrink:0;min-inline-size:max-content}.btn-group-standard,.btn-group:not(.btn-group-connected){flex-wrap:wrap;--between-space: 12px}.btn-group-standard:has(>:is([size=xs],.btn-xs)),.btn-group:not(.btn-group-connected):has(>:is([size=xs],.btn-xs)){--between-space: 18px}.btn-group-standard:has(>:is([size=sm],.btn-sm)),.btn-group:not(.btn-group-connected):has(>:is([size=sm],.btn-sm)){--between-space: 12px}.btn-group-standard:has(>:is([size=md],.btn-md)),.btn-group:not(.btn-group-connected):has(>:is([size=md],.btn-md)){--between-space: 8px}.btn-group-standard:has(>:is([size=lg],.btn-lg)),.btn-group:not(.btn-group-connected):has(>:is([size=lg],.btn-lg)){--between-space: 8px}.btn-group-standard:has(>:is([size=xl],.btn-xl)),.btn-group:not(.btn-group-connected):has(>:is([size=xl],.btn-xl)){--between-space: 8px}.btn-group-connected{flex-wrap:nowrap;--between-space: 2px;--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs);--outer-corner-size: calc(var(--container-height) / 2)}.btn-group-connected:has(>:is([size=xs],.btn-xs)){--inner-corner-size: var(--md-sys-shape-corner-xs);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=sm],.btn-sm)){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=md],.btn-md)){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=lg],.btn-lg)){--inner-corner-size: var(--md-sys-shape-corner-lg);--pressed-inner-corner-size: var(--md-sys-shape-corner-md)}.btn-group-connected:has(>:is([size=xl],.btn-xl)){--inner-corner-size: var(--md-sys-shape-corner-lg-increased);--pressed-inner-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>.btn,.btn-group-connected>*::part(btn){--outer-corner-size: calc(var(--container-height) / 2);border-radius:var(--inner-corner-size);transition:border-radius var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial),var(--ripple-transition)}.btn-group-connected>.btn.btn-xs,.btn-group-connected>.btn:is([size=xs],.btn-xs)::part(btn),.btn-group-connected>*::part(btn).btn-xs,.btn-group-connected>*::part(btn):is([size=xs],.btn-xs)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-xs);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-sm,.btn-group-connected>.btn:is([size=sm],.btn-sm)::part(btn),.btn-group-connected>*::part(btn).btn-sm,.btn-group-connected>*::part(btn):is([size=sm],.btn-sm)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-md,.btn-group-connected>.btn:is([size=md],.btn-md)::part(btn),.btn-group-connected>*::part(btn).btn-md,.btn-group-connected>*::part(btn):is([size=md],.btn-md)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-lg,.btn-group-connected>.btn:is([size=lg],.btn-lg)::part(btn),.btn-group-connected>*::part(btn).btn-lg,.btn-group-connected>*::part(btn):is([size=lg],.btn-lg)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-lg);--pressed-inner-corner-size: var(--md-sys-shape-corner-md)}.btn-group-connected>.btn.btn-xl,.btn-group-connected>.btn:is([size=xl],.btn-xl)::part(btn),.btn-group-connected>*::part(btn).btn-xl,.btn-group-connected>*::part(btn):is([size=xl],.btn-xl)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-lg-increased);--pressed-inner-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>[square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--outer-corner-square-size)}.btn-group-connected>[size=xs][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-xs.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>[size=sm][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-sm.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-sm)}.btn-group-connected>[size=md][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-md.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-sm)}.btn-group-connected>[size=lg][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-lg.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>[size=xl][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-xl.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-lg-increased)}.btn-group-connected>.btn:is(.btn-selected,[aria-pressed=true]),.btn-group-connected>:is([selected],[aria-pressed=true])::part(btn){--inner-corner-size: calc(var(--container-height) / 2);--outer-corner-size: calc(var(--container-height) / 2)}.btn-group-connected>.btn:active:not(:disabled,.disabled),.btn-group-connected>:active:not([disabled],[soft-disabled])::part(btn){--inner-corner-size: var(--pressed-inner-corner-size)}.btn-group-connected>.btn:is(:first-child,:nth-child(1 of .btn:not([hidden]))):not(:only-child),.btn-group-connected>:is(:first-child,:nth-child(1 of :not([hidden]))):not(:only-child)::part(btn
+    ){border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--inner-corner-size);border-end-end-radius:var(--inner-corner-size)}.btn-group-connected>.btn:is(:last-child,:nth-last-child(1 of .btn:not([hidden]))):not(:only-child),.btn-group-connected>:is(:last-child,:nth-last-child(1 of :not([hidden]))):not(:only-child)::part(btn){border-start-start-radius:var(--inner-corner-size);border-end-start-radius:var(--inner-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.btn-group-connected>.btn:only-child,.btn-group-connected>:only-child::part(btn){border-radius:var(--outer-corner-size);border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.btn-group>.btn.btn-outlined:is(.btn-selected,[aria-pressed=true]),.btn-group>[color=outlined]:is([selected],[aria-pressed=true])::part(btn){--outline-color: transparent;border-color:rgba(0,0,0,0);background-color:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface)}.btn-group-connected>.btn:is(.btn-xs,.btn-sm),.btn-group-connected>:is([size=xs],[size=sm]){min-inline-size:48px}.btn-group>.btn:focus-within,.btn-group>:focus-within{z-index:1}@supports(width: calc-size(auto, size)){.btn-group:not(.btn-group-connected)>.btn,.btn-group:not(.btn-group-connected)>*{transition:width var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial)}.btn-group:not(.btn-group-connected)>.btn:active:not(:disabled,.disabled),.btn-group:not(.btn-group-connected)>.btn:active:not([disabled],[soft-disabled]),.btn-group:not(.btn-group-connected)>*:active:not(:disabled,.disabled),.btn-group:not(.btn-group-connected)>*:active:not([disabled],[soft-disabled]){width:calc-size(auto,max(size,size*var(--pressed-item-width-multiplier)))}}.btn-group>.btn:is(.btn-xs,.btn-sm),.btn-group>:is([size=xs],[size=sm]){position:relative}.btn-group>.btn:is(.btn-xs,.btn-sm)::before,.btn-group>.btn:is(.btn-xs,.btn-sm)::part(btn)::before,.btn-group>:is([size=xs],[size=sm])::before,.btn-group>:is([size=xs],[size=sm])::part(btn)::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:48px;min-height:48px;z-index:0}@media(prefers-reduced-motion: reduce){.btn-group>.btn,.btn-group>*::part(btn),.btn-group>*{transition-duration:0s}}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=button-group.cssresult.js.map

package/labs/gb/components/buttongroup/button-group.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.cssresult.js","sourceRoot":"","sources":["button-group.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,8EAA8E;AAC9E,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/buttongroup/button-group.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.button;@layer md.comp.button-group{.btn-group{--between-space: 8px;--pressed-item-width-multiplier: 1.15;--motion-spring-fast-spatial: linear( 0, 0.099, 0.317, 0.561, 0.775, 0.934, 1.034, 1.083, 1.095, 1.084, 1.063, 1.04, 1.02, 1.005, 0.996, 0.992, 0.991, 0.992, 0.994, 0.996, 1 );--motion-spring-fast-spatial-duration: 350ms;--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs);--outer-corner-size: calc(var(--container-height) / 2);--outer-corner-square-size: var(--md-sys-shape-corner-sm);display:inline-flex;align-items:center;gap:var(--between-space);overflow:visible;interpolate-size:allow-keywords}.btn-group>.btn,.btn-group>*{white-space:nowrap;flex-shrink:0;min-inline-size:max-content}.btn-group-standard,.btn-group:not(.btn-group-connected){flex-wrap:wrap;--between-space: 12px}.btn-group-standard:has(>:is([size=xs],.btn-xs)),.btn-group:not(.btn-group-connected):has(>:is([size=xs],.btn-xs)){--between-space: 18px}.btn-group-standard:has(>:is([size=sm],.btn-sm)),.btn-group:not(.btn-group-connected):has(>:is([size=sm],.btn-sm)){--between-space: 12px}.btn-group-standard:has(>:is([size=md],.btn-md)),.btn-group:not(.btn-group-connected):has(>:is([size=md],.btn-md)){--between-space: 8px}.btn-group-standard:has(>:is([size=lg],.btn-lg)),.btn-group:not(.btn-group-connected):has(>:is([size=lg],.btn-lg)){--between-space: 8px}.btn-group-standard:has(>:is([size=xl],.btn-xl)),.btn-group:not(.btn-group-connected):has(>:is([size=xl],.btn-xl)){--between-space: 8px}.btn-group-connected{flex-wrap:nowrap;--between-space: 2px;--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs);--outer-corner-size: calc(var(--container-height) / 2)}.btn-group-connected:has(>:is([size=xs],.btn-xs)){--inner-corner-size: var(--md-sys-shape-corner-xs);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=sm],.btn-sm)){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=md],.btn-md)){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected:has(>:is([size=lg],.btn-lg)){--inner-corner-size: var(--md-sys-shape-corner-lg);--pressed-inner-corner-size: var(--md-sys-shape-corner-md)}.btn-group-connected:has(>:is([size=xl],.btn-xl)){--inner-corner-size: var(--md-sys-shape-corner-lg-increased);--pressed-inner-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>.btn,.btn-group-connected>*::part(btn){--outer-corner-size: calc(var(--container-height) / 2);border-radius:var(--inner-corner-size);transition:border-radius var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial),var(--ripple-transition)}.btn-group-connected>.btn.btn-xs,.btn-group-connected>.btn:is([size=xs],.btn-xs)::part(btn),.btn-group-connected>*::part(btn).btn-xs,.btn-group-connected>*::part(btn):is([size=xs],.btn-xs)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-xs);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-sm,.btn-group-connected>.btn:is([size=sm],.btn-sm)::part(btn),.btn-group-connected>*::part(btn).btn-sm,.btn-group-connected>*::part(btn):is([size=sm],.btn-sm)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-md,.btn-group-connected>.btn:is([size=md],.btn-md)::part(btn),.btn-group-connected>*::part(btn).btn-md,.btn-group-connected>*::part(btn):is([size=md],.btn-md)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-sm);--pressed-inner-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>.btn.btn-lg,.btn-group-connected>.btn:is([size=lg],.btn-lg)::part(btn),.btn-group-connected>*::part(btn).btn-lg,.btn-group-connected>*::part(btn):is([size=lg],.btn-lg)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-lg);--pressed-inner-corner-size: var(--md-sys-shape-corner-md)}.btn-group-connected>.btn.btn-xl,.btn-group-connected>.btn:is([size=xl],.btn-xl)::part(btn),.btn-group-connected>*::part(btn).btn-xl,.btn-group-connected>*::part(btn):is([size=xl],.btn-xl)::part(btn){--inner-corner-size: var(--md-sys-shape-corner-lg-increased);--pressed-inner-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>[square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--outer-corner-square-size)}.btn-group-connected>[size=xs][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-xs.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-xs)}.btn-group-connected>[size=sm][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-sm.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-sm)}.btn-group-connected>[size=md][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-md.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-sm)}.btn-group-connected>[size=lg][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-lg.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-lg)}.btn-group-connected>[size=xl][square]:not([selected]):not([aria-pressed=true])::part(btn),.btn-group-connected>.btn-xl.btn-square:not(.btn-selected):not([aria-pressed=true]){--outer-corner-size: var(--md-sys-shape-corner-lg-increased)}.btn-group-connected>.btn:is(.btn-selected,[aria-pressed=true]),.btn-group-connected>:is([selected],[aria-pressed=true])::part(btn){--inner-corner-size: calc(var(--container-height) / 2);--outer-corner-size: calc(var(--container-height) / 2)}.btn-group-connected>.btn:active:not(:disabled,.disabled),.btn-group-connected>:active:not([disabled],[soft-disabled])::part(btn){--inner-corner-size: var(--pressed-inner-corner-size)}.btn-group-connected>.btn:is(:first-child,:nth-child(1 of .btn:not([hidden]))):not(:only-child),.btn-group-connected>:is(:first-child,:nth-child(1 of :not([hidden]))):not(:only-child)::part(btn\n    ){border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--inner-corner-size);border-end-end-radius:var(--inner-corner-size)}.btn-group-connected>.btn:is(:last-child,:nth-last-child(1 of .btn:not([hidden]))):not(:only-child),.btn-group-connected>:is(:last-child,:nth-last-child(1 of :not([hidden]))):not(:only-child)::part(btn){border-start-start-radius:var(--inner-corner-size);border-end-start-radius:var(--inner-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.btn-group-connected>.btn:only-child,.btn-group-connected>:only-child::part(btn){border-radius:var(--outer-corner-size);border-start-start-radius:var(--outer-corner-size);border-end-start-radius:var(--outer-corner-size);border-start-end-radius:var(--outer-corner-size);border-end-end-radius:var(--outer-corner-size)}.btn-group>.btn.btn-outlined:is(.btn-selected,[aria-pressed=true]),.btn-group>[color=outlined]:is([selected],[aria-pressed=true])::part(btn){--outline-color: transparent;border-color:rgba(0,0,0,0);background-color:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface)}.btn-group-connected>.btn:is(.btn-xs,.btn-sm),.btn-group-connected>:is([size=xs],[size=sm]){min-inline-size:48px}.btn-group>.btn:focus-within,.btn-group>:focus-within{z-index:1}@supports(width: calc-size(auto, size)){.btn-group:not(.btn-group-connected)>.btn,.btn-group:not(.btn-group-connected)>*{transition:width var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial)}.btn-group:not(.btn-group-connected)>.btn:active:not(:disabled,.disabled),.btn-group:not(.btn-group-connected)>.btn:active:not([disabled],[soft-disabled]),.btn-group:not(.btn-group-connected)>*:active:not(:disabled,.disabled),.btn-group:not(.btn-group-connected)>*:active:not([disabled],[soft-disabled]){width:calc-size(auto,max(size,size*var(--pressed-item-width-multiplier)))}}.btn-group>.btn:is(.btn-xs,.btn-sm),.btn-group>:is([size=xs],[size=sm]){position:relative}.btn-group>.btn:is(.btn-xs,.btn-sm)::before,.btn-group>.btn:is(.btn-xs,.btn-sm)::part(btn)::before,.btn-group>:is([size=xs],[size=sm])::before,.btn-group>:is([size=xs],[size=sm])::part(btn)::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:48px;min-height:48px;z-index:0}@media(prefers-reduced-motion: reduce){.btn-group>.btn,.btn-group>*::part(btn),.btn-group>*{transition-duration:0s}}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/buttongroup/button-group.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Button group variant layout types. */
+export type ButtonGroupVariant = 'standard' | 'connected';
+/** Button group selection types. */
+export type ButtonGroupSelection = 'none' | 'single' | 'multiple';
+/** Button group variant layout configurations. */
+export declare const BUTTON_GROUP_VARIANTS: {
+    readonly standard: "standard";
+    readonly connected: "connected";
+};
+/** Button group selection configurations. */
+export declare const BUTTON_GROUP_SELECTIONS: {
+    readonly none: "none";
+    readonly single: "single";
+    readonly multiple: "multiple";
+};
+/** Button group classes. */
+export declare const BUTTON_GROUP_CLASSES: {
+    btnGroup: string;
+    btnGroupStandard: string;
+    btnGroupConnected: string;
+    disabled: string;
+};
+/** The state provided to the `buttonGroupClasses()` function. */
+export interface ButtonGroupClassesState {
+    /** The visual variant of the button group. Defaults to `'standard'`. */
+    variant?: ButtonGroupVariant;
+    /** Whether the button group is disabled. */
+    disabled?: boolean;
+}
+/**
+ * Returns the button group classes to apply to an element based on the given state.
+ *
+ * @param state The state of the button group.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function buttonGroupClasses({ variant, disabled, }?: ButtonGroupClassesState): ClassInfo;
+/**
+ * A Lit directive that applies button group classes.
+ */
+export declare const buttonGroup: (state?: ButtonGroupClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+/**
+ * An item managed by a ButtonGroup.
+ */
+export interface ButtonGroupItem {
+    selected?: boolean;
+    disabled?: boolean;
+    softDisabled?: boolean;
+    href?: string;
+}
+/**
+ * Checks if a ButtonGroupItem is selectable.
+ * Disabled, soft-disabled, or link items are not selectable.
+ */
+export declare function isItemSelectable(item: ButtonGroupItem): boolean;
+/** Options provided to the `normalizeSelection()` function. */
+export interface NormalizeSelectionOptions<T extends ButtonGroupItem = ButtonGroupItem> {
+    /** The selection mode. */
+    selection?: ButtonGroupSelection;
+    /** Whether selection is required in single-select mode. */
+    required?: boolean;
+    /** The item preferred to keep selected during normalization. */
+    preferred?: T;
+}
+/**
+ * Pure selection normalization logic for button groups.
+ *
+ * - In 'none' mode: clears all selected items.
+ * - In 'single' mode: enforces at most 1 item selected.
+ *   - If preferred is given and selected, keeps preferred and clears others.
+ *   - Otherwise keeps the last selected item and clears earlier ones.
+ *   - If required is true and 0 items are selected, auto-selects the first selectable item.
+ * - In 'multiple' mode: items keep their selected states as is.
+ *
+ * Mutates `item.selected` in place.
+ */
+export declare function normalizeSelection<T extends ButtonGroupItem>(items: T[], options: NormalizeSelectionOptions<T>): void;
+/** Options provided to the `shouldBlockToggle()` function. */
+export interface ShouldBlockToggleOptions {
+    /** The selection mode. */
+    selection?: ButtonGroupSelection;
+    /** Whether selection is required in single-select mode. */
+    required?: boolean;
+}
+/**
+ * Pure helper to determine if a toggle interaction on item `i` should be blocked.
+ *
+ * In required single-select mode, clicking an already selected button must not deselect it,
+ * ensuring exactly 1 item remains selected at all times.
+ */
+export declare function shouldBlockToggle(items: ButtonGroupItem[], i: number, options: ShouldBlockToggleOptions): boolean;