feat(buttons): add md-button-group component

[treeder]

Implements the Material 3 Button Group layout component, supporting standard and connected variants.

---

PR created automatically by Jules for task 9380220746247726231 started by @treeder

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Code Review

This pull request introduces the md-button-group component, providing support for both standard and connected button layouts. The review feedback focuses on improving the robustness of the implementation by suggesting more reliable selectors for slotted elements, removing redundant CSS variables, and ensuring the component is accessible by adding the role="group" attribute. Additionally, there are recommendations to adjust z-index values for better visual layering during interactions and to enhance the documentation with accessibility guidelines and usage notes.

[gemini-code-assist]

Using :first-child and :last-child selectors on slotted elements can be brittle. If a user includes non-visual elements like <style> or <script> as the first child in the light DOM, the first actual button will incorrectly match :not(:first-child) and have its left corners flattened. Consider using a more specific selector if the button tags are known, or managing these styles via JavaScript by inspecting assignedElements() to identify the first and last visible elements.

[gemini-code-assist]

The internal variables (starting with _) and explicit border-radius properties set via ::slotted are redundant and ineffective. They are overridden by the md-button component's own shadow DOM styles (specifically its :host styles). Only the public --md-* variables are inherited and applied correctly by the slotted components.

Suggested change

	--_container-shape-start-start: 0;
	--_container-shape-end-start: 0;
	/* Target variant-specific variables explicitly */
	--md-button-container-shape-start-start: 0;
	--md-button-container-shape-end-start: 0;
	--md-filled-tonal-button-container-shape-start-start: 0;
	--md-filled-tonal-button-container-shape-end-start: 0;
	--md-elevated-button-container-shape-start-start: 0;
	--md-elevated-button-container-shape-end-start: 0;
	--md-outlined-button-container-shape-start-start: 0;
	--md-outlined-button-container-shape-end-start: 0;
	--md-icon-button-container-shape-start-start: 0;
	--md-icon-button-container-shape-end-start: 0;
	/* Explicit border radius as fallback */
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	/* Target variant-specific variables explicitly */
	--md-button-container-shape-start-start: 0;
	--md-button-container-shape-end-start: 0;
	--md-filled-tonal-button-container-shape-start-start: 0;
	--md-filled-tonal-button-container-shape-end-start: 0;
	--md-elevated-button-container-shape-start-start: 0;
	--md-elevated-button-container-shape-end-start: 0;
	--md-outlined-button-container-shape-start-start: 0;
	--md-outlined-button-container-shape-end-start: 0;
	--md-icon-button-container-shape-start-start: 0;
	--md-icon-button-container-shape-end-start: 0;

[gemini-code-assist]

Interaction states (hover, focus, active) should have a higher z-index than the selected state. This ensures that the border of the interacting button is fully visible and not partially covered by an adjacent selected button's border in a connected group.

Suggested change

	:host([connected]) ::slotted(*:hover),
	:host([connected]) ::slotted(*:focus-within),
	:host([connected]) ::slotted(*:active) {
	z-index: 1;
	position: relative;
	}
	/* Ensure the active/hovered/focused button is on top to show full border */
	:host([connected]) ::slotted(*:hover),
	:host([connected]) ::slotted(*:focus-within),
	:host([connected]) ::slotted(*:active) {
	z-index: 2;
	position: relative;
	}

[gemini-code-assist]

The component should have role="group" to be correctly identified by assistive technologies as a button group. You can set this as a default attribute in the constructor or connectedCallback.

  constructor() {
    super()
    this.connected = false
    if (!this.hasAttribute('role')) {
      this.setAttribute('role', 'group')
    }
  }

[gemini-code-assist]

It is recommended to add a note about accessibility here, advising users to provide an aria-label to the <md-button-group>. Additionally, it's worth mentioning that the connected variant is primarily intended for use with outlined buttons to ensure borders overlap correctly as intended by the Material 3 specification.