Responsive container: Create uui-responsive-container component.

[engijlr]

Summary

• Adds a new uui-responsive-container component that automatically collapses overflowing children into a dropdown menu
• When horizontal space is limited, items are hidden and accessible via a "..." (more) button that opens a popover
• Supports collapsing from either the start (left) or end (right) of the container via the collapse property

Features

• Responsive behavior: Automatically detects overflow using ResizeObserver and collapses items into a dropdown
• Collapse direction: collapse="end" (default) or collapse="start" to control which side items collapse from
• Click forwarding: Clicks on items in the dropdown are forwarded to the original elements, preserving event handlers
• Works with any elements: Buttons, button groups, links, or any slotted content
• CSS customization: --uui-responsive-container-gap to control spacing between items

Usage

 <uui-responsive-container>
    <uui-button>Save</uui-button>
    <uui-button>Edit</uui-button>
    <uui-button>Delete</uui-button>
  </uui-responsive-container>

  <!-- Collapse from left instead -->
  <uui-responsive-container collapse="start">
    <uui-button>First</uui-button>
    <uui-button>Second</uui-button>
    <uui-button>Third</uui-button>
  </uui-responsive-container>

Implementation Details

• Inspired by the overflow handling in uui-tab-group

• Uses bidirectional Map to link original elements with their clones in the dropdown

• Uses native Popover API via uui-popover-container

• Pre-calculates breakpoints for efficient resize handling

  🤖 Generated with https://claude.com/claude-code

[sonarqubecloud]

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud