Group

Parts that belong together, such as an input and its buttons.

<script>
  import { $signal } from 'brumate/signals';
  import Button from '@brumate/ui/Button.brm';
  import Group from '@brumate/ui/Group.brm';

  let amount = $signal(1);
  import Icon from '../../src/components/Icon.brm';
</script>

<Group class="ui-group" aria-label="Amount">
  <Button class="ui-button ui-icon-button" aria-label="One less" onPress=(() => amount--)><Icon name="minus" /></Button>
  <output class="ui-input">{amount}</output>
  <Button class="ui-button ui-icon-button" aria-label="One more" onPress=(() => amount++)><Icon name="plus" /></Button>
</Group>

It is role="group" by default. Name it with aria-label or aria-labelledby.
It shows data-focus-within while focus is inside it, and data-hovered, data-disabled and data-invalid.