# <aihio-cluster>

Horizontal layout primitive for grouped inline items such as button rows, badge lists, and toolbars. Wraps when space runs out.

Intents: `layout`, `container`.

## Attributes

- `gap` (`tight` | `sm` | `md` | `lg`): Spacing between items, from the spacing tokens. Default: `sm`.
- `align` (`start` | `center` | `end` | `baseline`): Cross-axis alignment of items. Default: `center`.
- `justify` (`start` | `center` | `end` | `between`): Main-axis distribution of items. Default: `start`.
- `grow` (boolean): Makes the cluster fill its row. Needed for justify to have any effect inside a flex parent such as a card or dialog footer, where the cluster is otherwise sized to its content. Default: `false`.

## Slots

- `default`: Inline items to group, typically buttons, badges, or avatars.

## Accessibility obligations

- (warn) When the cluster is a toolbar of related controls: Add role="toolbar" and an aria-label on the cluster; it is presentational by default.

## Examples

### Form actions at the end of a row

```html
<form>
  <aihio-cluster justify="end">
    <aihio-button variant="outline" type="reset">Reset</aihio-button>
    <aihio-button type="submit">Save</aihio-button>
  </aihio-cluster>
</form>
```

### Badges, tightly spaced

```html
<aihio-cluster gap="tight">
  <aihio-badge>Draft</aihio-badge>
  <aihio-badge variant="secondary">Internal</aihio-badge>
</aihio-cluster>
```

### In a card footer

A cluster in a footer has to grow to fill the row before justify has room to act.

```html
<aihio-card>
  <form>
    <aihio-card-content>
      <aihio-field>
        <label slot="label">Project name</label>
        <aihio-input name="project" value="Aihio"></aihio-input>
      </aihio-field>
    </aihio-card-content>
    <aihio-card-footer>
      <aihio-cluster grow justify="end">
        <aihio-button variant="outline" type="reset">Reset</aihio-button>
        <aihio-button type="submit">Save</aihio-button>
      </aihio-cluster>
    </aihio-card-footer>
  </form>
</aihio-card>
```

## Mistakes

### justify="space-between" is not valid. Use justify="between".

Don't (aihio lint: invalid-enum-attribute):

```html
<aihio-cluster justify="space-between"><aihio-button>Save</aihio-button></aihio-cluster>
```

Do:

```html
<aihio-cluster justify="between"><aihio-button>Save</aihio-button></aihio-cluster>
```

### A row of actions belongs in aihio-cluster. aihio-stack stacks them vertically and stretches them to full width.

Don't:

```html
<aihio-stack><aihio-button>Cancel</aihio-button><aihio-button>Save</aihio-button></aihio-stack>
```

Do:

```html
<aihio-cluster><aihio-button>Cancel</aihio-button><aihio-button>Save</aihio-button></aihio-cluster>
```

### justify="end" does nothing here: the cluster is a content-sized flex item inside the footer. Add grow so it fills the row.

Don't (aihio lint: cluster-needs-grow):

```html
<aihio-card-footer>
  <aihio-cluster justify="end">
    <aihio-button>Save</aihio-button>
  </aihio-cluster>
</aihio-card-footer>
```

Do:

```html
<aihio-card-footer>
  <aihio-cluster grow justify="end">
    <aihio-button>Save</aihio-button>
  </aihio-cluster>
</aihio-card-footer>
```