# swc-action-group

An action group clusters related actions together with consistent spacing, sizing, and orientation.

```js
import '@adobe/spectrum-wc/components/action-group/index.js';
// <swc-action-group></swc-action-group>
```

## Attributes

| Name               | Type                                  | Default        | Description                                                                                                                                                                                         |
| ------------------ | ------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `compact`          | `boolean`                             | `false`        | Whether the group uses compact density. Buttons visually join by collapsing shared borders and resetting interior border-radius values. Has no visual effect when `quiet` is also set.              |
| `quiet`            | `boolean`                             | `false`        | Whether the group and its children use the quiet visual style. Propagated to all slotted `swc-action-button` and `swc-action-menu` children.                                                        |
| `justified`        | `boolean`                             | `false`        | Whether slotted children should expand equally to fill the available inline width of the group.                                                                                                     |
| `static-color`     | `ActionGroupStaticColor \| undefined` | -              | The static color variant to apply when the group is placed over an image or colored background. Propagated to all slotted children. - `"white"`: use on dark or colored backgrounds.                |
| `size`             | `ElementSize`                         | -              | The size of the group and its children.                                                                                                                                                             |
| `orientation`      | `ActionGroupOrientation`              | `'horizontal'` | The layout direction of the action group. When set to `"vertical"`, the group stacks children vertically and `FocusgroupNavigationController` moves focus with the Up/Down arrow keys instead of... |
| `accessible-label` | `string`                              | `''`           | Accessible label for the group. Reflected to `aria-label` on the host. Providing a label is recommended whenever the strip has a distinct purpose (e.g., "Image adjustments" or "Edit").            |
| `disabled`         | `boolean`                             | `false`        | Whether the group and all of its children are disabled. Sets `aria-disabled="true"` on the host and propagates `aria-disabled` to each managed child.                                               |

## Slots

| Name        | Description                                                    |
| ----------- | -------------------------------------------------------------- |
| `(default)` | One or more `swc-action-button` or `swc-action-menu` elements. |

## CSS Custom Properties

| Name                     | Description                                                                                                                               |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `--swc-action-group-gap` | Space between children. Scales with the `size` attribute across all five sizes. Defaults to the medium spacing token when no size is set. |