# `CarbonPhoenix.WebComponents`
[🔗](https://github.com/nyannus/carbon_phoenix/blob/v0.1.1/lib/carbon_phoenix/web_components.ex#L3)

One function component for every Carbon Design System web component,
generated from the package's metadata, so every option shown in the
[Carbon web components storybook](https://web-components.carbondesignsystem.com/)
is an assign.

Alias the module as `Carbon` (see the README) and call components by their
storybook name in snake case:

    <Carbon.modal id="confirm" open={@open} size="sm" on_closed="close_modal">
      <Carbon.modal_header>
        <Carbon.modal_heading>Are you sure?</Carbon.modal_heading>
      </Carbon.modal_header>
      <Carbon.modal_body>This cannot be undone.</Carbon.modal_body>
    </Carbon.modal>

## Conventions

  * **Assigns** are snake_cased versions of the component's attributes
    (`batch-action` becomes `batch_action`). Booleans are present or absent;
    `nil` omits the attribute so Carbon's own default applies. Lists and maps
    are JSON encoded. Attributes with a fixed set of choices list them as
    `values`.
  * **Events** are `on_*` assigns holding a LiveView event name:
    `on_closed="close_modal"` sends `"close_modal"` to the LiveView when the
    modal closes. The element needs an `id`. Add `phx-target` to send to a
    component instead. The payload is
    `%{"id" => ..., "event" => ..., "value" => ..., "checked" => ..., "detail" => ...}`.
  * **Slots**: child content is rendered inside the component. Named slots are
    filled with `slot="name"` on the child.
  * Everything else (`class`, `id`, `style`, `phx-*`, `data-*`, ...) is passed
    through.

Events require the `CarbonEvents` hook, see the README.

Components that are tuned for Phoenix forms and tables (`button`, `input`,
`table`, ...) live in `CarbonPhoenix.CoreComponents`.

# `accordion`

Accordion container.

Renders the Carbon `accordion` web component.

## Example

```heex
<Carbon.accordion>
  ...
</Carbon.accordion>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - Accordion size should be sm, md, lg. Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `alignment` (`:any`) - Specify the alignment of the accordion heading title and chevron Carbon default: `"END"`. Must be one of `"start"`, or `"END"`.
* `is_flush` (`:boolean`) - Specify whether Accordion text should be flush, default is false, does not work with align="start" Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Disable all accordion items inside this accordion. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `accordion_item`

Accordion item.

Renders the Carbon `accordion item` web component.

## Example

```heex
<Carbon.accordion_item id="my-accordion-item" on_beingtoggled="my_event">
  ...
</Carbon.accordion_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingtoggled` - The custom event fired before this accordion item is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling this accordion item.
  * `on_toggled` - The custom event fired after this accordion item is toggled upon a user gesture.

## Attributes

* `disabled` (`:boolean`) - `true` if the accordion item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the accordion item should be open. Carbon default: `false`. Defaults to `nil`.
* `title` (`:string`) - The title text. Carbon default: `""`. Defaults to `nil`.
* `on_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "accordion item beingtoggled" event. The custom event fired before this accordion item is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling this accordion item. Defaults to `nil`.
* `on_toggled` (`:string`) - LiveView event name, sent when the component emits its "accordion item toggled" event. The custom event fired after this accordion item is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `action_set`

Action Set component - A specialized button set with validation and ordering logic.
Extends Carbon's button-set with additional features for action buttons.

Renders the Carbon `action set` web component.

## Example

```heex
<Carbon.action_set>
  ...
</Carbon.action_set>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `button_size` (`:any`) - The size of buttons to use for the actions. Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`.
* `size` (`:any`) - The size of the action set. Different button arrangements are used at different sizes, to make best use of the available space. Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`.
* `disable_stacking` (`:boolean`) - When true, prevents automatic stacking of buttons even when size would normally trigger stacking (e.g., 'sm' size or 'md' with 3+ actions). Buttons will remain in a horizontal layout. Carbon default: `false`. Defaults to `nil`.
* `actions` (`:any`) - Array of action button configurations. When provided, buttons will be rendered internally instead of using slotted content. Type: `ActionButton[]`. Carbon default: `[]`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `actionable_notification`

Actionable notification.

Renders the Carbon `actionable notification` web component.

## Example

```heex
<Carbon.actionable_notification id="my-actionable-notification" on_notification_beingclosed="my_event">
  ...
</Carbon.actionable_notification>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_notification_beingclosed` - The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification.
  * `on_notification_closed` - The custom event fired after this notification is closed upon a user gesture.

## Attributes

* `inline` (`:boolean`) - Inline notification type. Carbon default: `false`. Defaults to `nil`.
* `action_button_label` (`:string`) - Pass in the action button label that will be rendered within the ActionableNotification. Carbon default: `""`. Defaults to `nil`.
* `close_on_escape` (`:boolean`) - Specify if pressing the escape key should close notifications Carbon default: `true`. Defaults to `nil`.
* `has_focus` (`:boolean`) - Specify if focus should be moved to the component when the notification contains actions Carbon default: `true`. Defaults to `nil`.
* `caption` (`:string`) - The caption. Carbon default: `""`. Defaults to `nil`.
* `aria_label` (`:string`) - Provide a description for "close" icon button that can be read by screen readers. Defaults to `nil`.
* `hide_close_button` (`:boolean`) - `true` to hide the close button. Carbon default: `false`. Defaults to `nil`.
* `status_icon_description` (`:string`) - Provide a description for "status" icon that can be read by screen readers. Defaults to `nil`.
* `kind` (`:any`) - Notification kind. Carbon default: `"success"`. Must be one of `"success"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"error"`.
* `low_contrast` (`:boolean`) - Low contrast mode Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the notification should be open. Carbon default: `true`. Defaults to `nil`.
* `timeout` (`:any`) - Specify an optional duration the notification should be closed in. Defaults to `nil`.
* `subtitle` (`:string`) - The subtitle. Carbon default: `""`. Defaults to `nil`.
* `title` (`:string`) - The title. Carbon default: `""`. Defaults to `nil`.
* `on_notification_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "notification beingclosed" event. The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification. Defaults to `nil`.
* `on_notification_closed` (`:string`) - LiveView event name, sent when the component emits its "notification closed" event. The custom event fired after this notification is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `actionable_notification_button`

Actionable notification action button.

Renders the Carbon `actionable notification button` web component.

## Example

```heex
<Carbon.actionable_notification_button>
  ...
</Carbon.actionable_notification_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button. Defaults to `sm` in actionable notification. Carbon default: `"sm"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `add_select`

Add Select wrapper component - provides context for child components

Renders the Carbon `add select` web component.

## Example

```heex
<Carbon.add_select>
  ...
</Carbon.add_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `multi` (`:boolean`) - Whether this is a multi-select (checkboxes) or single-select (radio buttons) Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `add_select_body`

Add Select Body component - contains the main content area

Renders the Carbon `add select body` web component.

## Example

```heex
<Carbon.add_select_body id="my-add-select-body" on_search="my_event">
  ...
</Carbon.add_select_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_search` - Fired when search term changes; detail: { searchTerm }
  * `on_breadcrumb_click` - Fired when a breadcrumb link is clicked; detail: { index }

## Attributes

* `items_label` (`:string`) - Label for items section Carbon default: `""`. Defaults to `nil`.
* `global_search_label` (`:string`) - Global search label Carbon default: `""`. Defaults to `nil`.
* `global_search_placeholder` (`:string`) - Global search placeholder Carbon default: `"Search"`. Defaults to `nil`.
* `search_results_title` (`:string`) - Search results title Carbon default: `"Search results"`. Defaults to `nil`.
* `item_count` (`:any`) - Item count for display. When undefined, no count badge is rendered. Carbon default: `"undefined"`. Defaults to `nil`.
* `hide_search` (`:boolean`) - Whether to hide the search input Carbon default: `false`. Defaults to `nil`.
* `layout` (`:any`) - Layout direction for the list body: 'vertical' (default) or 'horizontal' (for hierarchy) Carbon default: `"vertical"`. Must be one of `"vertical"`, or `"horizontal"`.
* `path` (`:any`) - Navigation path for breadcrumbs Type: `{ id: string; title: string; }[]`. Carbon default: `[]`. Defaults to `nil`.
* `on_search` (`:string`) - LiveView event name, sent when the component emits its "add select body search" event. Fired when search term changes; detail: { searchTerm }. Defaults to `nil`.
* `on_breadcrumb_click` (`:string`) - LiveView event name, sent when the component emits its "add select body breadcrumb click" event. Fired when a breadcrumb link is clicked; detail: { index }. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `add_select_column`

Add Select Column component — optional column wrapper providing column-level
search, title, and "Select All" functionality. Propagates `multi` context to
child rows via the `multi` property/attribute.

Renders the Carbon `add select column` web component.

## Example

```heex
<Carbon.add_select_column id="my-add-select-column" on_search="my_event">
  ...
</Carbon.add_select_column>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_search` - Fired when column search changes; detail: { searchTerm }
  * `on_select_all` - Fired when "Select All" checkbox changes; detail: { checked }

## Attributes

* `title` (`:string`) - Column title shown in the header Carbon default: `""`. Defaults to `nil`.
* `search_label` (`:string`) - Label text for the column search input (accessibility) Carbon default: `"Search"`. Defaults to `nil`.
* `search_placeholder` (`:string`) - Placeholder text for the column search input Carbon default: `"Search"`. Defaults to `nil`.
* `hide_search` (`:boolean`) - Whether to hide the column search input Carbon default: `false`. Defaults to `nil`.
* `multi` (`:boolean`) - Whether this column uses multi-selection (checkboxes) or single-selection (radio buttons) Carbon default: `false`. Defaults to `nil`.
* `show_select_all` (`:boolean`) - Whether to show the "Select All" checkbox (only when multi is true) Carbon default: `false`. Defaults to `nil`.
* `item_count` (`:any`) - Total number of items in the column (shown in tag badge) Carbon default: `0`. Defaults to `nil`.
* `all_selected` (`:boolean`) - Whether all items are currently selected Carbon default: `false`. Defaults to `nil`.
* `all_indeterminate` (`:boolean`) - Whether the "Select All" checkbox is in an indeterminate state Carbon default: `false`. Defaults to `nil`.
* `on_search` (`:string`) - LiveView event name, sent when the component emits its "add select column search" event. Fired when column search changes; detail: { searchTerm }. Defaults to `nil`.
* `on_select_all` (`:string`) - LiveView event name, sent when the component emits its "add select column select all" event. Fired when "Select All" checkbox changes; detail: { checked }. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `add_select_item_panel`

Add Select Item Panel — side panel displaying detailed information about an item.
CSS modifier `${blockClass}__item-summary-panel--open` is added when `open` is true,
enabling CSS-driven slide-in/out transitions.

Renders the Carbon `add select item panel` web component.

## Example

```heex
<Carbon.add_select_item_panel id="my-add-select-item-panel" on_close="my_event">
  ...
</Carbon.add_select_item_panel>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_close` - Fired when close icon is clicked

## Attributes

* `title` (`:string`) - Panel title Carbon default: `"Item details"`. Defaults to `nil`.
* `open` (`:boolean`) - Controls panel visibility via CSS modifier class (enables CSS transitions) Carbon default: `false`. Defaults to `nil`.
* `close_icon_description` (`:string`) - Accessible label for the close icon button Carbon default: `"Close"`. Defaults to `nil`.
* `show_close_button` (`:boolean`) - Whether to show the close button Carbon default: `true`. Defaults to `nil`.
* `on_close` (`:string`) - LiveView event name, sent when the component emits its "add select item panel close" event. Fired when close icon is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `add_select_row`

Add Select Row component - represents a single selectable row

Renders the Carbon `add select row` web component.

## Example

```heex
<Carbon.add_select_row id="my-add-select-row" on_select="my_event">
  ...
</Carbon.add_select_row>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_select` - Fired when row is selected/deselected
  * `on_navigate` - Fired when navigating to children
  * `on_item_panel_click` - Fired when the item panel icon button is clicked

## Attributes

* `item_id` (`:string`) - Unique identifier for the item Carbon default: `""`. Defaults to `nil`.
* `title` (`:string`) - Item title Carbon default: `""`. Defaults to `nil`.
* `subtitle` (`:string`) - Item subtitle Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Item value Carbon default: `""`. Defaults to `nil`.
* `selected` (`:boolean`) - Whether the item is selected Carbon default: `false`. Defaults to `nil`.
* `indeterminate` (`:boolean`) - Whether the checkbox is in an indeterminate state (multi hierarchical) Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Whether the item is disabled Carbon default: `false`. Defaults to `nil`.
* `skeleton` (`:boolean`) - Whether to render the row as a skeleton (loading) state Carbon default: `false`. Defaults to `nil`.
* `has_item_panel` (`:boolean`) - Whether to show the item details icon button Carbon default: `false`. Defaults to `nil`.
* `item_panel_open` (`:boolean`) - Whether the item panel is currently open for this item Carbon default: `false`. Defaults to `nil`.
* `item_panel_icon_description` (`:string`) - Accessible label for the item panel icon button Carbon default: `"View details"`. Defaults to `nil`.
* `has_children` (`:boolean`) - Whether the item has children (for navigation) Carbon default: `false`. Defaults to `nil`.
* `parent_id` (`:string`) - Parent ID for hierarchical navigation Carbon default: `""`. Defaults to `nil`.
* `on_select` (`:string`) - LiveView event name, sent when the component emits its "add select row select" event. Fired when row is selected/deselected. Defaults to `nil`.
* `on_navigate` (`:string`) - LiveView event name, sent when the component emits its "add select row navigate" event. Fired when navigating to children. Defaults to `nil`.
* `on_item_panel_click` (`:string`) - LiveView event name, sent when the component emits its "add select row item panel click" event. Fired when the item panel icon button is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `add_select_selection_summary`

Add Select Selection Summary — displays the list of selected items.

Renders the Carbon `add select selection summary` web component.

## Example

```heex
<Carbon.add_select_selection_summary id="my-add-select-selection-summary" on_edit="my_event">
  ...
</Carbon.add_select_selection_summary>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_edit` - Fired when edit icon is clicked

## Attributes

* `title` (`:string`) - Panel title Carbon default: `"Selected items"`. Defaults to `nil`.
* `selected_item_count` (`:any`) - Number of selected items — shown as a badge next to the title when provided. Badge is hidden when this is omitted/undefined. Carbon default: `"undefined"`. Defaults to `nil`.
* `show_edit_icon` (`:boolean`) - Show edit icon next to title Carbon default: `false`. Defaults to `nil`.
* `edit_icon_description` (`:string`) - Accessible label for the edit icon button Carbon default: `"Edit selections"`. Defaults to `nil`.
* `on_edit` (`:string`) - LiveView event name, sent when the component emits its "add select selection summary edit" event. Fired when edit icon is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `add_select_selection_summary_item`

Add Select Selection Summary Item — individual selected item display.

Renders the Carbon `add select selection summary item` web component.

## Example

```heex
<Carbon.add_select_selection_summary_item id="my-add-select-selection-summary-item" on_remove="my_event">
  ...
</Carbon.add_select_selection_summary_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_remove` - Fired when remove button clicked; detail: { itemId }

## Attributes

* `use_accordion` (`:boolean`) - Use accordion pattern for display Carbon default: `false`. Defaults to `nil`.
* `remove_button_label` (`:string`) - Accessible label for the remove button Carbon default: `"Remove item"`. Defaults to `nil`.
* `hide_remove_button` (`:boolean`) - When true, the remove button is not rendered Carbon default: `false`. Defaults to `nil`.
* `on_remove` (`:string`) - LiveView event name, sent when the component emits its "add select selection summary item remove" event. Fired when remove button clicked; detail: { itemId }. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `ai_label`

Basic AI Label.

Renders the Carbon `ai label` web component.

## Example

```heex
<Carbon.ai_label>
  ...
</Carbon.ai_label>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - Carbon default: `"ai-label"`. Defaults to `nil`.
* `ai_text` (`:string`) - Specify the correct translation of the AI text Carbon default: `"AI"`. Defaults to `nil`.
* `ai_text_label` (`:string`) - Specify additional text to be rendered next to the AI label in the inline variant Carbon default: `""`. Defaults to `nil`.
* `kind` (`:any`) - Specify the type of AI Label, from the following list of types: (default, inline) Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `revert_active` (`:boolean`) - Specify whether the revert button should be visible Carbon default: `false`. Defaults to `nil`.
* `revert_label` (`:string`) - Specify whether the revert button should be visible Carbon default: `"Revert to AI input"`. Defaults to `nil`.
* `size` (`:any`) - AI Label size should be mini, 2xs, xs, sm, md, lg, xl. Carbon default: `"xs"`. Must be one of `"mini"`, `"2xs"`, `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `previous_value` (`:any`) - . Defaults to `nil`.
* `alignment` (`:any`) - How the tooltip is aligned to the trigger button. Carbon default: `"top"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `alignment_axis_offset` (`:any`) - **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled. Carbon default: `0`. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `button_label` (`:string`) - Specify the text that will be provided to the aria-label of the `AI Label` button Carbon default: `"Show information"`. Defaults to `nil`.
* `open` (`:boolean`) - Set whether toggletip is open Carbon default: `false`. Defaults to `nil`.
* `default_open` (`:boolean`) - Set whether toggletip is open by default. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `ai_label_action_button`

AI Label action button.

Renders the Carbon `ai label action button` web component.

## Example

```heex
<Carbon.ai_label_action_button>
  ...
</Carbon.ai_label_action_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - The shadow slot this ai-label-action should be in. Carbon default: `"actions"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `ai_skeleton_icon`

AI skeleton icon.

Renders the Carbon `ai skeleton icon` web component.

## Example

```heex
<Carbon.ai_skeleton_icon>
  ...
</Carbon.ai_skeleton_icon>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `custom_styles` (`:string`) - Custom styles to apply to skeleton icon Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `ai_skeleton_placeholder`

AI skeleton placeholder.

Renders the Carbon `ai skeleton placeholder` web component.

## Example

```heex
<Carbon.ai_skeleton_placeholder>
  ...
</Carbon.ai_skeleton_placeholder>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `ai_skeleton_text`

AI skeleton text.

Renders the Carbon `ai skeleton text` web component.

## Example

```heex
<Carbon.ai_skeleton_text>
  ...
</Carbon.ai_skeleton_text>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `heading` (`:boolean`) - Generates skeleton text at a larger size. Carbon default: `false`. Defaults to `nil`.
* `width` (`:string`) - width (in px or %) of single line of text or max-width of paragraph lines Carbon default: `"100%"`. Defaults to `nil`.
* `paragraph` (`:boolean`) - will generate multiple lines of text Carbon default: `false`. Defaults to `nil`.
* `line_count` (`:any`) - the number of lines in a paragraph Carbon default: `3`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `badge_indicator`

Badge Indicator.

Renders the Carbon `badge indicator` web component.

## Example

```heex
<Carbon.badge_indicator>
  ...
</Carbon.badge_indicator>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `count` (`:any`) - Count of badge indicator. Defaults to `nil`.
* `slot` (`:string`) - The shadow slot the badge-indicator should be in. Carbon default: `"badge-indicator"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `big_number`

The big number component.

Renders the Carbon `big number` web component.

## Example

```heex
<Carbon.big_number>
  ...
</Carbon.big_number>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `fraction_digits` (`:any`) - Carbon default: `1`. Defaults to `nil`.
* `label` (`:any`) - . Defaults to `nil`.
* `loading` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `locale` (`:string`) - Carbon default: `"en-US"`. Defaults to `nil`.
* `percentage` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Carbon default: `"default"`. Must be one of `"lg"`, `"xl"`, or `"default"`.
* `total` (`:any`) - . Defaults to `nil`.
* `trending` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `truncate` (`:boolean`) - Carbon default: `true`. Defaults to `nil`.
* `value` (`:any`) - . Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `big_number_skeleton`

The big number skeleton component.

Renders the Carbon `big number skeleton` web component.

## Example

```heex
<Carbon.big_number_skeleton>
  ...
</Carbon.big_number_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - Carbon default: `"default"`. Must be one of `"lg"`, `"xl"`, or `"default"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `breadcrumb`

Breadcrumb.

Renders the Carbon `breadcrumb` web component.

## Example

```heex
<Carbon.breadcrumb>
  ...
</Carbon.breadcrumb>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `no_trailing_slash` (`:boolean`) - Optional prop to omit the trailing slash for the breadcrumbs Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the Breadcrumb. Currently supports the following: `sm` & `md` (default: 'md') Carbon default: `"md"`. Must be one of `"sm"`, or `"md"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `breadcrumb_item`

Breadcrumb item.

Renders the Carbon `breadcrumb item` web component.

## Example

```heex
<Carbon.breadcrumb_item>
  ...
</Carbon.breadcrumb_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `breadcrumb_link`

Link in breadcrumb.

Renders the Carbon `breadcrumb link` web component.

## Example

```heex
<Carbon.breadcrumb_link>
  ...
</Carbon.breadcrumb_link>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `aria_current` (`:any`) - indicates that this breadcrumb item represents the current item. Defaults to `nil`.
* `is_currentpage` (`:boolean`) - Provide if this breadcrumb item represents the current page Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the link should be disabled. Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name. Defaults to `nil`.
* `href` (`:string`) - Link `href`. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to. Defaults to `nil`.
* `inline` (`:boolean`) - `true` if the link should be inline. Carbon default: `false`. Defaults to `nil`.
* `link_role` (`:string`) - The a11y role for `<a>`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping. Defaults to `nil`.
* `rel` (`:string`) - The link type. Defaults to `nil`.
* `size` (`:string`) - Link size. Carbon default: `"MEDIUM"`. Defaults to `nil`.
* `target` (`:string`) - The link target. Defaults to `nil`.
* `type` (`:string`) - MIME type of the `target`. Defaults to `nil`.
* `visited` (`:boolean`) - When enabled, applies Carbon's visited-link styles to browser-controlled :visited link state. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `breadcrumb_overflow_menu`

Overflow menu in breadcrumb.

Renders the Carbon `breadcrumb overflow menu` web component.

## Example

```heex
<Carbon.breadcrumb_overflow_menu>
  ...
</Carbon.breadcrumb_overflow_menu>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `data_table` (`:boolean`) - `true` if this tooltip is in a data table row Carbon default: `false`. Defaults to `nil`.
* `enable_v12_overflowmenu` (`:boolean`) - Enables the menu-composition OverflowMenu implementation leveraging `Carbon.menu`. Carbon default: `false`. Defaults to `nil`.
* `flipped` (`:boolean`) - `true` if this overflow menu body should be flipped. Carbon default: `false`. Defaults to `nil`.
* `index` (`:any`) - Index (starting at 1) of overflow menu item to focus on open. Carbon default: `1`. Defaults to `nil`.
* `label` (`:string`) - A label describing the menu options. Used for the trigger tooltip and the menu's accessible label. Carbon default: `""`. Defaults to `nil`.
* `menu_alignment` (`:string`) - Specify how the menu should align with the trigger button. Valid values: 'bottom-start', 'bottom-end', 'top-start', 'top-end' Carbon default: `"bottom-start"`. Defaults to `nil`.
* `toolbar_action` (`:boolean`) - `true` if this menu is a toolbar action Carbon default: `false`. Defaults to `nil`.
* `breadcrumb` (`:boolean`) - `true` if this overflow menu use inside breadcrumb. Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `align` (`:string`) - Checks if a badge indicator is being used with incorrect properties Carbon default: `"top"`. Defaults to `nil`.
* `autoalign` (`:any`) - Experimental property. Enables automatic menu placement flipping to avoid clipping. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Determines whether the tooltip should close when inner content is activated (click, Enter or Space) Carbon default: `true`. Defaults to `nil`.
* `default_open` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `enter_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before displaying the tooltip Carbon default: `100`. Defaults to `nil`.
* `leave_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before hiding the tooltip Carbon default: `100`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this overflow menu should be disabled. Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Overflow menu size. Carbon default: `"undefined"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `button`

Button.

Renders the Carbon `button` web component.

## Example

```heex
<Carbon.button>
  ...
</Carbon.button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `button_set`

Button set.

Renders the Carbon `button set` web component.

## Example

```heex
<Carbon.button_set>
  ...
</Carbon.button_set>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `stacked` (`:boolean`) - `true` if the buttons should be stacked. Only applies to the button-set variant. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `button_set_base`

Button set without button checks

Renders the Carbon `button set base` web component.

## Example

```heex
<Carbon.button_set_base>
  ...
</Carbon.button_set_base>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `callout_notification`

Callout notification.

Renders the Carbon `callout notification` web component.

## Example

```heex
<Carbon.callout_notification id="my-callout-notification" on_notification_beingclosed="my_event">
  ...
</Carbon.callout_notification>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_notification_beingclosed` - The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification.
  * `on_notification_closed` - The custom event fired after this notification is closed upon a user gesture.

## Attributes

* `title_id` (`:string`) - Specify the id for the title element. Carbon default: `""`. Defaults to `nil`.
* `inline` (`:boolean`) - Inline notification type. Carbon default: `false`. Defaults to `nil`.
* `action_button_label` (`:string`) - Pass in the action button label that will be rendered within the ActionableNotification. Carbon default: `""`. Defaults to `nil`.
* `close_on_escape` (`:boolean`) - Specify if pressing the escape key should close notifications Carbon default: `true`. Defaults to `nil`.
* `has_focus` (`:boolean`) - Specify if focus should be moved to the component when the notification contains actions Carbon default: `true`. Defaults to `nil`.
* `caption` (`:string`) - The caption. Carbon default: `""`. Defaults to `nil`.
* `aria_label` (`:string`) - Provide a description for "close" icon button that can be read by screen readers. Defaults to `nil`.
* `hide_close_button` (`:boolean`) - `true` to hide the close button. Carbon default: `false`. Defaults to `nil`.
* `status_icon_description` (`:string`) - Provide a description for "status" icon that can be read by screen readers. Defaults to `nil`.
* `kind` (`:any`) - Specify the notification kind, Defaults to 'info'. Carbon default: `"info"`. Must be one of `"success"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"error"`.
* `low_contrast` (`:boolean`) - Low contrast mode Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the notification should be open. Carbon default: `true`. Defaults to `nil`.
* `timeout` (`:any`) - Specify an optional duration the notification should be closed in. Defaults to `nil`.
* `subtitle` (`:string`) - The subtitle. Carbon default: `""`. Defaults to `nil`.
* `title` (`:string`) - The title. Carbon default: `""`. Defaults to `nil`.
* `on_notification_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "notification beingclosed" event. The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification. Defaults to `nil`.
* `on_notification_closed` (`:string`) - LiveView event name, sent when the component emits its "notification closed" event. The custom event fired after this notification is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card`

Card — composable container component.

Renders the Carbon `card` web component.

## Example

```heex
<Carbon.card>
  ...
</Carbon.card>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `clickable` (`:boolean`) - Makes the entire card surface interactive. Carbon default: `false`. Defaults to `nil`.
* `density` (`:any`) - Controls heading typography inside the card. Carbon default: `"productive"`. Must be one of `"productive"`, or `"expressive"`.
* `horizontal` (`:boolean`) - Side-by-side layout: `Carbon.card_media` on one side, other content stacked. Carbon default: `false`. Defaults to `nil`.
* `media_position` (`:any`) - Position of the media column when `horizontal` is true. Carbon default: `"'start'"`. Must be one of `"start"`, or `"end"`.
* `disabled` (`:boolean`) - Mutes all interaction. Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name. Defaults to `nil`.
* `href` (`:string`) - Link `href`. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to. Defaults to `nil`.
* `inline` (`:boolean`) - `true` if the link should be inline. Carbon default: `false`. Defaults to `nil`.
* `link_role` (`:string`) - The a11y role for `<a>`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping. Defaults to `nil`.
* `rel` (`:string`) - The link type. Defaults to `nil`.
* `size` (`:string`) - Link size. Carbon default: `"MEDIUM"`. Defaults to `nil`.
* `target` (`:string`) - The link target. Defaults to `nil`.
* `type` (`:string`) - MIME type of the `target`. Defaults to `nil`.
* `visited` (`:boolean`) - When enabled, applies Carbon's visited-link styles to browser-controlled :visited link state. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_action`

Card action — wrapper for a single interactive element inside `Carbon.card_actions`.
The `label` property provides a fallback string for the overflow menu when this
action is hidden due to container overflow.

Renders the Carbon `card action` web component.

## Example

```heex
<Carbon.card_action>
  ...
</Carbon.card_action>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `label` (`:string`) - Label shown in the overflow menu when this action is hidden. If omitted, `Carbon.card_actions` resolves the label from the inner button. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_actions`

Card actions

Renders the Carbon `card actions` web component.

## Example

```heex
<Carbon.card_actions>
  ...
</Carbon.card_actions>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `overflow_menu_label` (`:string`) - Label for the overflow menu trigger button. Carbon default: `"More actions"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_body`

Card body — primary content area.

Renders the Carbon `card body` web component.

## Example

```heex
<Carbon.card_body>
  ...
</Carbon.card_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `is_flush` (`:boolean`) - Remove all padding so content sits flush to the card edges. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_footer`

Card footer — bottom content/action bar.

Must not be used inside a `clickable` card. When placed inside one,
this element renders nothing and logs a console.error — a clickable
card renders its own built-in footer affordance automatically.

Reflects `has-actions` when any `Carbon.card_action` element is slotted,
enabling CSS rule [17] to apply zero-padding / border-top layout without
any cross-boundary `:has(> .`Carbon._card`__action)`.

Renders the Carbon `card footer` web component.

## Example

```heex
<Carbon.card_footer>
  ...
</Carbon.card_footer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_header`

Card header — header section of the card.

Renders the Carbon `card header` web component.

## Example

```heex
<Carbon.card_header>
  ...
</Carbon.card_header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_header_media`

Card header media — full-width icon/image slot rendered above the title row.

Renders the Carbon `card header media` web component.

## Example

```heex
<Carbon.card_header_media>
  ...
</Carbon.card_header_media>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_media`

Card media — aspect-ratio media slot.

Renders the Carbon `card media` web component.

## Example

```heex
<Carbon.card_media>
  ...
</Carbon.card_media>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `ratio` (`:string`) - Aspect ratio of the media container in vertical layout. E.g. `'16x9'`, `'4x3'`, `'1x1'`. Ignored in horizontal layout. Carbon default: `""`. Defaults to `nil`.
* `media_width` (`:string`) - Width of the media column in horizontal layout. Accepts any valid CSS width value (e.g. `'200px'`, `'40%'`). Has no effect in vertical (default) layout. Carbon default: `"'33.33%'"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_title`

Card title — primary heading within `Carbon.card_header`.

Renders the Carbon `card title` web component.

## Example

```heex
<Carbon.card_title>
  ...
</Carbon.card_title>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `title_truncate` (`:any`) - Enable truncation on the title text row. Defaults to `nil`.
* `max_width` (`:string`) - Maximum width applied to the title text row when truncation is active. Carbon default: `"'100%'"`. Defaults to `nil`.
* `label` (`:string`) - Optional label text rendered above the title (plain string). Slot `label` takes precedence when populated. Defaults to `nil`.
* `label_truncate` (`:any`) - Enable truncation on the label. Defaults to `nil`.
* `description` (`:string`) - Optional description text rendered below the title (plain string). Defaults to `nil`.
* `description_truncate` (`:any`) - Enable truncation on the description. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `card_title_media`

Card title media — media slot positioned to the left of the card title.

Renders the Carbon `card title media` web component.

## Example

```heex
<Carbon.card_title_media>
  ...
</Carbon.card_title_media>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `chat_button`

Chat Button

Renders the Carbon `chat button` web component.

## Example

```heex
<Carbon.chat_button>
  ...
</Carbon.chat_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` if the button should be disabled. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify whether the `ChatButton` should be disabled Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, or `"danger"`.
* `size` (`:any`) - Chat button size. Carbon default: `"lg"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `is_quick_action` (`:boolean`) - Specify whether the `ChatButton` should be rendered as a quick action button Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `chat_button_skeleton`

Chat button skeleton.

Renders the Carbon `chat button skeleton` web component.

## Example

```heex
<Carbon.chat_button_skeleton>
  ...
</Carbon.chat_button_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - Specify the size of the `ChatButtonSkeleton`, from the following list of sizes: 'sm', 'md', 'lg' Carbon default: `"lg"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `checkbox`

Check box.

Renders the Carbon `checkbox` web component.

## Example

```heex
<Carbon.checkbox id="my-checkbox" on_changed="my_event">
  ...
</Carbon.checkbox>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired after this changebox changes its checked state.

## Attributes

* `checked` (`:boolean`) - Specify whether the underlying input should be checked Carbon default: `false`. Defaults to `nil`.
* `data_table` (`:boolean`) - Specify if checkbox is being used in a data table Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Checkbox should be disabled Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:any`) - Provide text for the form group for additional help. Defaults to `nil`.
* `hide_checkbox` (`:boolean`) - Specify whether the checkbox should be present in the DOM, but invisible and uninteractable. Used for data-table purposes. Carbon default: `false`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - Specify a custom id for the checkbox Carbon default: `"checkbox"`. Defaults to `nil`.
* `indeterminate` (`:boolean`) - Specify whether the Checkbox is in an indeterminate state Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - Provide a label to provide a description of the Checkbox input that you are exposing to the user Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify whether the Checkbox is read-only Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the Checkbox is currently invalid Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:any`) - Provide the text that is displayed when the Checkbox is in an invalid state. Defaults to `nil`.
* `title` (`:string`) - Specify a title for the node for the Checkbox Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the Checkbox is in a warning state. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:boolean`) - Provide the text displayed when the Checkbox is in a warning state. Carbon default: `false`. Defaults to `nil`.
* `default_checked` (`:any`) - Specify whether the underlying input should be checked by default. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "checkbox changed" event. The custom event fired after this changebox changes its checked state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `checkbox_group`

Check box.

Renders the Carbon `checkbox group` web component.

## Example

```heex
<Carbon.checkbox_group>
  ...
</Carbon.checkbox_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `aria_labelledby` (`:any`) - fieldset `aria-labelledby`. Defaults to `nil`.
* `disabled` (`:any`) - Specify whether the form group is currently disabled. Defaults to `nil`.
* `helper_text` (`:any`) - Provide text for the form group for additional help. Defaults to `nil`.
* `invalid` (`:any`) - Specify whether the form group is currently invalid. Defaults to `nil`.
* `invalid_text` (`:any`) - Provide the text that is displayed when the form group is in an invalid state. Defaults to `nil`.
* `legend_id` (`:any`) - Provide id for the fieldset <legend> which corresponds to the fieldset `aria-labelledby`. Defaults to `nil`.
* `legend_text` (`:any`) - Provide the text to be rendered inside of the fieldset <legend>. Defaults to `nil`.
* `orientation` (`:any`) - Provide the orientation for how the checkbox should be displayed Carbon default: `"vertical"`. Must be one of `"horizontal"`, or `"vertical"`.
* `readonly` (`:boolean`) - Whether the CheckboxGroup should be read-only Carbon default: `false`. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the form group is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the form group is in warning state Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `clickable_tile`

Clickable tile.

Renders the Carbon `clickable tile` web component.

## Example

```heex
<Carbon.clickable_tile>
  ...
</Carbon.clickable_tile>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `has_rounded_corners` (`:boolean`) - Specify if the `ClickableTile` component should be rendered with rounded corners. Only valid when `ai-label` prop is present Carbon default: `false`. Defaults to `nil`.
* `ai_label` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `slug` (`:boolean`) - deprecated - remove in v12 Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the link should be disabled. Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name. Defaults to `nil`.
* `href` (`:string`) - Link `href`. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to. Defaults to `nil`.
* `inline` (`:boolean`) - `true` if the link should be inline. Carbon default: `false`. Defaults to `nil`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping. Defaults to `nil`.
* `rel` (`:string`) - The link type. Defaults to `nil`.
* `size` (`:string`) - Link size. Carbon default: `"MEDIUM"`. Defaults to `nil`.
* `target` (`:string`) - The link target. Defaults to `nil`.
* `type` (`:string`) - MIME type of the `target`. Defaults to `nil`.
* `visited` (`:boolean`) - When enabled, applies Carbon's visited-link styles to browser-controlled :visited link state. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `coachmark`

coachmark main component

Renders the Carbon `coachmark` web component.

## Example

```heex
<Carbon.coachmark id="my-coachmark" on_opened="my_event">
  ...
</Carbon.coachmark>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_opened` - The custom event fired when the coachmark is opened. This event can be used to perform actions such as focusing elements when the coachmark becomes visible.
  * `on_closed` - The custom event fired when the coachmark is closed. This event can be used to perform actions such as restoring focus when the coachmark is dismissed.

## Attributes

* `open` (`:boolean`) - Specifies whether the component is currently open. Carbon default: `false`. Defaults to `nil`.
* `align` (`:any`) - Where to render the Coachmark relative to its target. Carbon default: `"top"`. Defaults to `nil`.
* `position` (`:any`) - Fine tune the position of the target in pixels. Type: `{ x: number; y: number; } | undefined`. Defaults to `nil`.
* `floating` (`:any`) - Specifies whether the component is floating or not. Carbon default: `false`. Defaults to `nil`.
* `high_contrast` (`:any`) - Specify whether the component should be rendered on high-contrast. Carbon default: `false`. Defaults to `nil`.
* `drop_shadow` (`:any`) - Specify whether a drop shadow should be rendered on the popover. Carbon default: `false`. Defaults to `nil`.
* `caret` (`:any`) - Specify whether a caret should be rendered on the popover. This is intended to use only for coachmark patterns. Carbon default: `false`. Defaults to `nil`.
* `selector_primary_focus` (`:any`) - CSS selector for the element that should receive focus when the coachmark opens. If not provided, no automatic focus management will occur. Defaults to `nil`.
* `drag_aria_label` (`:any`) - Aria label for when the floating coachmark is picked up for dragging. Carbon default: `"Picked up the draggable coachmark"`. Defaults to `nil`.
* `on_opened` (`:string`) - LiveView event name, sent when the component emits its "coachmark opened" event. The custom event fired when the coachmark is opened. This event can be used to perform actions such as focusing elements when the coachmark becomes visible. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "coachmark closed" event. The custom event fired when the coachmark is closed. This event can be used to perform actions such as restoring focus when the coachmark is dismissed. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `coachmark_beacon`

CoachmarkBeacon.

Renders the Carbon `coachmark beacon` web component.

## Example

```heex
<Carbon.coachmark_beacon id="my-coachmark-beacon" on_clicked="my_event">
  ...
</Carbon.coachmark_beacon>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_clicked` - Custom event fired when beacon is clicked

## Attributes

* `kind` (`:any`) - What style of beacon. BEACON_KIND is an enum from the Coachmark and can be used for this value. Carbon default: `"default"`. Must be one of `"default"`.
* `label` (`:string`) - The aria label. Carbon default: `"Show information"`. Defaults to `nil`.
* `id` (`:string`) - id for the coachmark beacon Carbon default: `"crypto.randomUUID()"`. Defaults to `nil`.
* `expanded` (`:boolean`) - specify aria-expanded of beacon Carbon default: `false`. Defaults to `nil`.
* `on_clicked` (`:string`) - LiveView event name, sent when the component emits its "coachmark beacon clicked" event. Custom event fired when beacon is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `coachmark_body`

coachmark-body for content body

Renders the Carbon `coachmark body` web component.

## Example

```heex
<Carbon.coachmark_body>
  ...
</Carbon.coachmark_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `coachmark_header`

coachmark-header for content header section

Renders the Carbon `coachmark header` web component.

## Example

```heex
<Carbon.coachmark_header>
  ...
</Carbon.coachmark_header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `close_icon_description` (`:any`) - Tooltip text and aria label for the Close button icon. Carbon default: `""`. Defaults to `nil`.
* `drag_icon_description` (`:any`) - Tooltip text and aria label for the Drag button icon. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `coachmark_tagline`

DO NOT USE. This component is for the exclusive use
of other Onboarding components.

Coachmark tagline component.

Renders the Carbon `coachmark tagline` web component.

## Example

```heex
<Carbon.coachmark_tagline id="my-coachmark-tagline" on_close="my_event">
  ...
</Carbon.coachmark_tagline>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_close` - Custom event fired when close button is clicked
  * `on_cta_click` - Custom event fired when tagline CTA is clicked

## Attributes

* `close_icon_description` (`:string`) - Tooltip text and aria label for the Close button icon. Carbon default: `"Close"`. Defaults to `nil`.
* `title` (`:string`) - The title of the tagline. Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - Whether the tagline is open. Carbon default: `false`. Defaults to `nil`.
* `on_close` (`:string`) - LiveView event name, sent when the component emits its "coachmark tagline close" event. Custom event fired when close button is clicked. Defaults to `nil`.
* `on_cta_click` (`:string`) - LiveView event name, sent when the component emits its "coachmark tagline cta click" event. Custom event fired when tagline CTA is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `code_snippet`

Basic code snippet.

Renders the Carbon `code snippet` web component.

## Example

```heex
<Carbon.code_snippet>
  ...
</Carbon.code_snippet>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `copy_text` (`:string`) - Optional text to copy. If not specified, the `children` node's `innerText` will be used as the copy value. Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the button should be disabled. Carbon default: `false`. Defaults to `nil`.
* `feedback` (`:string`) - Specify the string displayed when the snippet is copied Carbon default: `"Copied!"`. Defaults to `nil`.
* `feedback_timeout` (`:any`) - Specify the time it takes for the feedback message to timeout Carbon default: `2000`. Defaults to `nil`.
* `hide_copy_button` (`:boolean`) - Specify whether or not a copy button should be used/rendered. Carbon default: `false`. Defaults to `nil`.
* `max_collapsed_number_of_rows` (`:any`) - Specify the maximum number of rows to be shown when in collapsed view Carbon default: `15`. Defaults to `nil`.
* `max_expanded_number_of_rows` (`:any`) - Specify the maximum number of rows to be shown when in expanded view Carbon default: `0`. Defaults to `nil`.
* `min_collapsed_number_of_rows` (`:any`) - Specify the minimum number of rows to be shown when in collapsed view Carbon default: `3`. Defaults to `nil`.
* `min_expanded_number_of_rows` (`:any`) - Specify the minimum number of rows to be shown when in expanded view Carbon default: `16`. Defaults to `nil`.
* `show_less_text` (`:string`) - Specify a string that is displayed when the Code Snippet has been interacted with to show less lines Carbon default: `"Show less"`. Defaults to `nil`.
* `show_more_text` (`:string`) - Specify a string that is displayed when the Code Snippet text is more than 15 lines Carbon default: `"Show more"`. Defaults to `nil`.
* `tooltip_content` (`:string`) - Tooltip content for the copy button. Carbon default: `"Copy to clipboard"`. Defaults to `nil`.
* `wrap_text` (`:boolean`) - `true` if the button should be disabled. Carbon default: `false`. Defaults to `nil`.
* `type` (`:any`) - The type of code snippet. Carbon default: `"single"`. Must be one of `"single"`, `"inline"`, or `"multi"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `column`

The column component.

Renders the Carbon `column` web component.

## Example

```heex
<Carbon.column>
  ...
</Carbon.column>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `sm` (`:any`) - Specify column size Keys sm, md, lg, xlg, max Values - N, P, { span:N start:S}, { start: S, end: E} N = number P = percentage S = Start column E = End column (does not reach e.g. start 1 end 3 is same as start 1 span 2) Type: `ColumnSpec | undefined`. Defaults to `nil`.
* `md` (`:any`) - Type: `ColumnSpec | undefined`. Defaults to `nil`.
* `lg` (`:any`) - Type: `ColumnSpec | undefined`. Defaults to `nil`.
* `xlg` (`:any`) - Type: `ColumnSpec | undefined`. Defaults to `nil`.
* `max` (`:any`) - Type: `ColumnSpec | undefined`. Defaults to `nil`.
* `span` (`:any`) - Type: `ColumnSpecSimple | undefined`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `column_hang`

The column component.

Renders the Carbon `column hang` web component.

## Example

```heex
<Carbon.column_hang>
  ...
</Carbon.column_hang>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `combo_box`

Combo box.

Renders the Carbon `combo box` web component.

## Example

```heex
<Carbon.combo_box id="my-combo-box" on_beingselected="my_event">
  ...
</Carbon.combo_box>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingselected` - The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_beingtoggled` - The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_selected` - The custom event fired after a combo box item is selected upon a user gesture.
  * `on_toggled` - The custom event fired after the open state of this combo box is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `"Clear selection"`. Defaults to `nil`.
* `input_label` (`:string`) - The `aria-label` attribute for the `<input>` for filtering. Carbon default: `""`. Defaults to `nil`.
* `should_filter_item` (`:any`) - Provide custom filtering behavior. This attribute will be ignored if `typeahead` is enabled and will default to `true` Type: `boolean | ShouldFilterItem`. Carbon default: `false`. Defaults to `nil`.
* `typeahead` (`:boolean`) - **Experimental**: will enable autocomplete and typeahead for the input field. Carbon default: `false`. Defaults to `nil`.
* `allow_custom_value` (`:boolean`) - `true` to allow custom values that do not match any item in the list. Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_beingselected` (`:string`) - LiveView event name, sent when the component emits its "combo box beingselected" event. The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "combo box beingtoggled" event. The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "combo box selected" event. The custom event fired after a combo box item is selected upon a user gesture. Defaults to `nil`.
* `on_toggled` (`:string`) - LiveView event name, sent when the component emits its "combo box toggled" event. The custom event fired after the open state of this combo box is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `combo_box_item`

Combo box item.

Renders the Carbon `combo box item` web component.

## Example

```heex
<Carbon.combo_box_item>
  ...
</Carbon.combo_box_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` if this dropdown item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `value` (`:string`) - The `value` attribute that is set to the parent `Carbon.dropdown` when this dropdown item is selected. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `combo_button`

Combo button.

Renders the Carbon `combo button` web component.

## Example

```heex
<Carbon.combo_button>
  ...
</Carbon.combo_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:any`) - Specify whether the ComboButton should be disabled, or not. Defaults to `nil`.
* `label` (`:string`) - Provide the label to be rendered on the primary action button. Defaults to `nil`.
* `menu_alignment` (`:any`) - Experimental property. Specify how the menu should align with the button element Carbon default: `"top"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `on_click` (`:any`) - Provide an optional function to be called when the primary action element is clicked. Type: `((event: Event) => void) | undefined`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button and menu. Carbon default: `"lg"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `tooltip_alignment` (`:any`) - Specify how the trigger tooltip should be aligned. Carbon default: `"top"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, or `"right"`.
* `tooltip_content` (`:string`) - Provide the tooltip content for the icon button. Carbon default: `"Additional actions"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `contained_list`

Contained list.

Renders the Carbon `contained list` web component.

## Example

```heex
<Carbon.contained_list>
  ...
</Carbon.contained_list>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `is_inset` (`:boolean`) - Specify whether the dividing lines in between list items should be inset. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - The kind of ContainedList you want to display Type: `Variants`. Carbon default: `"on-page"`. Defaults to `nil`.
* `label` (`:string`) - A label describing the contained list. Carbon default: `""`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the contained list. Must be one of `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `contained_list_description`

Contained list description text.

Renders the Carbon `contained list description` web component.

## Example

```heex
<Carbon.contained_list_description>
  ...
</Carbon.contained_list_description>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `contained_list_item`

Contained list item.

Renders the Carbon `contained list item` web component.

## Example

```heex
<Carbon.contained_list_item id="my-contained-list-item" on_click="my_event">
  ...
</Carbon.contained_list_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_click` - Fires when clickable item is clicked

## Attributes

* `clickable` (`:boolean`) - Whether this item is clickable Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Whether this item is disabled. Carbon default: `false`. Defaults to `nil`.
* `on_click` (`:string`) - LiveView event name, sent when the component emits its "contained list item click" event. Fires when clickable item is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `content_switcher`

Content switcher.

Renders the Carbon `content switcher` web component.

## Example

```heex
<Carbon.content_switcher id="my-content-switcher" on_beingselected="my_event">
  ...
</Carbon.content_switcher>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingselected` - The custom event fired before a content switcher item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_selected` - The custom event fired after a a content switcher item is selected upon a user gesture.

## Attributes

* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `selected_index` (`:any`) - Specify a selected index for the initially selected content Carbon default: `0`. Defaults to `nil`.
* `selection_mode` (`:string`) - Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic' Carbon default: `"automatic"`. Defaults to `nil`.
* `size` (`:any`) - Content switcher size. Carbon default: `""`. Must be one of `""`, `"sm"`, `"lg"`, or `"xl"`.
* `icon` (`:boolean`) - Icon only. Carbon default: `false`. Defaults to `nil`.
* `low_contrast` (`:boolean`) - `true` to use the low contrast version. Carbon default: `false`. Defaults to `nil`.
* `on_beingselected` (`:string`) - LiveView event name, sent when the component emits its "content switcher beingselected" event. The custom event fired before a content switcher item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "content switcher selected" event. The custom event fired after a a content switcher item is selected upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `content_switcher_item`

Content switcher button.

Renders the Carbon `content switcher item` web component.

## Example

```heex
<Carbon.content_switcher_item>
  ...
</Carbon.content_switcher_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` if this content switcher item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `target` (`:string`) - The element ID of target panel. Defaults to `nil`.
* `value` (`:string`) - The `value` attribute that is set to the parent `Carbon.content_switcher` when this content switcher item is selected. Carbon default: `""`. Defaults to `nil`.
* `icon` (`:boolean`) - `true` if the content switcher button should be icon-only. Carbon default: `false`. Defaults to `nil`.
* `low_contrast` (`:boolean`) - `true` to use the low contrast version. Synced from the parent switcher. Carbon default: `false`. Defaults to `nil`.
* `align` (`:string`) - Specify how the trigger should align with the tooltip for icon-only switcher item Carbon default: `"top"`. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Determines whether the tooltip should close when inner content is activated (click, Enter or Space) Carbon default: `true`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `copy`

Copy.

Renders the Carbon `copy` web component.

## Example

```heex
<Carbon.copy>
  ...
</Carbon.copy>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `feedback` (`:string`) - Specify the string that is displayed when the button is clicked and the content is copi Carbon default: `"Copied!"`. Defaults to `nil`.
* `feedback_timeout` (`:any`) - The number in milliseconds to determine how long the tooltip should remain. Carbon default: `2000`. Defaults to `nil`.
* `align` (`:string`) - Checks if a badge indicator is being used with incorrect properties Carbon default: `"top"`. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Determines whether the tooltip should close when inner content is activated (click, Enter or Space) Carbon default: `true`. Defaults to `nil`.
* `default_open` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `enter_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before displaying the tooltip Carbon default: `100`. Defaults to `nil`.
* `leave_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before hiding the tooltip Carbon default: `100`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the Button. Defaults to `lg`. Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `copy_button`

Copy button.

Renders the Carbon `copy button` web component.

## Example

```heex
<Carbon.copy_button>
  ...
</Carbon.copy_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `kind` (`:any`) - Optionally specify the kind of Button you want to create. When not set, the copy button renders with its default copy-button styles. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `disabled` (`:boolean`) - `true` if the button should be disabled. Carbon default: `false`. Defaults to `nil`.
* `feedback` (`:string`) - Specify the string that is displayed when the button is clicked and the content is copi Carbon default: `"Copied!"`. Defaults to `nil`.
* `align` (`:any`) - How the tooltip is aligned to the trigger button. Carbon default: `"bottom"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `feedback_timeout` (`:any`) - The number in milliseconds to determine how long the tooltip should remain. Carbon default: `2000`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the Button. Defaults to `lg`. Carbon default: `"lg"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `date_picker`

Date picker.

Renders the Carbon `date picker` web component.

## Example

```heex
<Carbon.date_picker id="my-date-picker" on_changed="my_event">
  ...
</Carbon.date_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired on this element when Flatpickr updates its value.
  * `on_flatpickr_error` - The name of the custom event when Flatpickr throws an error.

## Attributes

* `allow_input` (`:boolean`) - flatpickr prop passthrough. Allows the user to enter a date directly into the input field Carbon default: `true`. Defaults to `nil`.
* `close_on_select` (`:boolean`) - flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection. Carbon default: `true`. Defaults to `nil`.
* `date_format` (`:string`) - The date format to let Flatpickr use. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enabled_range` (`:string`) - The date range that a user can pick in calendar dropdown. Defaults to `nil`.
* `max_date` (`:string`) - The maximum date that a user can start picking from. Defaults to `nil`.
* `min_date` (`:string`) - The minimum date that a user can start picking from. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the date picker should be open. Carbon default: `false`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "date picker changed" event. The custom event fired on this element when Flatpickr updates its value. Defaults to `nil`.
* `on_flatpickr_error` (`:string`) - LiveView event name, sent when the component emits its "date picker flatpickr error" event. The name of the custom event when Flatpickr throws an error. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `date_picker_input`

The input box for date picker.

Renders the Carbon `date picker input` web component.

## Example

```heex
<Carbon.date_picker_input>
  ...
</Carbon.date_picker_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `disabled` (`:boolean`) - `true` if the check box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `hide_label` (`:boolean`) - `true` if the label should be hidden. Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Controls the invalid state and visibility of the `validityMessage`. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `kind` (`:any`) - Date picker input kind. Carbon default: `"simple"`. Must be one of `"simple"`, `"single"`, `"from"`, or `"to"`.
* `label_text` (`:string`) - The label text. Defaults to `nil`.
* `pattern` (`:string`) - The `pattern` attribute for the `<input>` in the shadow DOM. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `short` (`:boolean`) - true to use the short version. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Vertical size of this date picker input. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `type` (`:string`) - The `type` attribute for the `<input>` in the shadow DOM. Defaults to `nil`.
* `value` (`:string`) - The value. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether this is a fluid variant Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `definition_tooltip`

Definition tooltip.

Renders the Carbon `definition tooltip` web component.

## Example

```heex
<Carbon.definition_tooltip>
  ...
</Carbon.definition_tooltip>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:string`) - Specify how the trigger should align with the tooltip Carbon default: `"bottom"`. Defaults to `nil`.
* `autoalign` (`:any`) - Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `default_open` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `open_on_hover` (`:boolean`) - Specifies whether the `DefinitionTooltip` should open on hover or not Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog`

Dialog.

Renders the Carbon `dialog` web component.

## Example

```heex
<Carbon.dialog id="my-dialog" on_beingclosed="my_event">
  ...
</Carbon.dialog>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - The custom event fired before this dialog is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this dialog.
  * `on_closed` - The custom event fired after this dialog is closed upon a user gesture.

## Attributes

* `modal` (`:boolean`) - Specifies whether the dialog is modal or non-modal Carbon default: `true`. Defaults to `nil`.
* `aria_label` (`:any`) - Specify text for the accessibility label of the dialog. Defaults to `nil`.
* `aria_labelledby` (`:any`) - Specify the ID of an element that labels this dialog. Defaults to `nil`.
* `aria_describedby` (`:any`) - Specify the ID of an element that describes this dialog. Defaults to `nil`.
* `role` (`:any`) - Specify the role of the dialog for accessibility Carbon default: `"dialog"`. Must be one of `"dialog"`, or `"alertdialog"`.
* `loading_status` (`:any`) - Specify the loading status Carbon default: `"inactive"`. Must be one of `"inactive"`, `"active"`, `"finished"`, or `"error"`.
* `loading_description` (`:string`) - Specify the description for the loading text Carbon default: `""`. Defaults to `nil`.
* `loading_success_delay` (`:any`) - Provide a delay for the setTimeout for success Carbon default: `1500`. Defaults to `nil`.
* `loading_icon_description` (`:string`) - Specify the description for the loading icon Carbon default: `"Loading"`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the modal should be open. Carbon default: `false`. Defaults to `nil`.
* `alert` (`:boolean`) - Specify whether the Modal is displaying an alert, error or warning. Should go hand in hand with the danger prop. Carbon default: `false`. Defaults to `nil`.
* `prevent_close_on_click_outside` (`:boolean`) - Prevent closing on click outside of dialog Only applies to modal dialogs. Carbon default: `false`. Defaults to `nil`.
* `prevent_close` (`:boolean`) - Prevent the modal from closing after clicking the close button Carbon default: `false`. Defaults to `nil`.
* `managed_focus` (`:boolean`) - When true, suppresses the modal's built-in focus-on-open logic only. Focus-return on close is always handled by the modal (via _launcher) regardless of this flag, so the consumer does not need to wire up a launcher ref manually. Carbon default: `false`. Defaults to `nil`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "dialog beingclosed" event. The custom event fired before this dialog is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this dialog. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "dialog closed" event. The custom event fired after this dialog is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_body`

Dialog body.

Renders the Carbon `dialog body` web component.

## Example

```heex
<Carbon.dialog_body>
  ...
</Carbon.dialog_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_close_button`

Dialog close button.

Renders the Carbon `dialog close button` web component.

## Example

```heex
<Carbon.dialog_close_button>
  ...
</Carbon.dialog_close_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `close_button_label` (`:string`) - Specify a label for the close button of the modal; defaults to close Carbon default: `"Close"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_controls`

Dialog header controls.

Renders the Carbon `dialog controls` web component.

## Example

```heex
<Carbon.dialog_controls>
  ...
</Carbon.dialog_controls>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_footer`

Dialog footer.

Renders the Carbon `dialog footer` web component.

## Example

```heex
<Carbon.dialog_footer>
  ...
</Carbon.dialog_footer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `has_three_buttons` (`:boolean`) - `true` if this modal footer has more than two buttons. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_footer_button`

Dialog footer button.

Renders the Carbon `dialog footer button` web component.

## Example

```heex
<Carbon.dialog_footer_button>
  ...
</Carbon.dialog_footer_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_header`

Dialog header.

Renders the Carbon `dialog header` web component.

## Example

```heex
<Carbon.dialog_header>
  ...
</Carbon.dialog_header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_subtitle`

Dialog subtitle.

Renders the Carbon `dialog subtitle` web component.

## Example

```heex
<Carbon.dialog_subtitle>
  ...
</Carbon.dialog_subtitle>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `id` (`:string`) - Specify an optional id for the subtitle element Carbon default: `"`${prefix}--dialog-subtitle--id-${Math.random().toString(16).slice(2)}`"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dialog_title`

Dialog title.

Renders the Carbon `dialog title` web component.

## Example

```heex
<Carbon.dialog_title>
  ...
</Carbon.dialog_title>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `id` (`:string`) - Specify an optional id for the title element Carbon default: `"`${prefix}--dialog-title--id-${Math.random().toString(16).slice(2)}`"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dismissible_tag`

Dismissible Tag.

Renders the Carbon `dismissible tag` web component.

## Example

```heex
<Carbon.dismissible_tag id="my-dismissible-tag" on_beingclosed="my_event">
  ...
</Carbon.dismissible_tag>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - The custom event fired as the element is being closed
  * `on_closed` - The custom event fired after the element has been closed
  * `on_tag_beingclosed` - The custom event fired as the element is being closed
  * `on_tag_closed` - The custom event fired after the element has been closed

## Attributes

* `dismiss_tooltip_alignment` (`:string`) - Specify the tooltip alignment for the dismiss button Carbon default: `"bottom"`. Defaults to `nil`.
* `dismiss_tooltip_label` (`:any`) - Provide a custom tooltip label for the dismiss button. Defaults to `nil`.
* `tag_title` (`:string`) - Provide a custom `title` to be inserted in the tag. Carbon default: `""`. Defaults to `nil`.
* `text` (`:string`) - Provide text to be rendered inside of a the tag. Carbon default: `""`. Defaults to `nil`.
* `title` (`:string`) - Text to show on filter tag "clear" buttons. Corresponds to the attribute with the same name Carbon default: `"Clear filter"`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the tag should be disabled Carbon default: `false`. Defaults to `nil`.
* `filter` (`:boolean`) - Determine if is a filter/chip Carbon default: `false`. Defaults to `nil`.
* `has_custom_icon` (`:boolean`) - `true` if there is a custom icon. Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the tag should be open. Carbon default: `true`. Defaults to `nil`.
* `size` (`:any`) - The size of the tag. Carbon default: `"md"`. Must be one of `"lg"`, `"md"`, or `"sm"`.
* `type` (`:any`) - The type of the tag. Carbon default: `"gray"`. Must be one of `"red"`, `"magenta"`, `"purple"`, `"blue"`, `"cyan"`, `"teal"`, `"green"`, `"gray"`, `"cool-gray"`, or `"warm-gray"`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "dismissible tag beingclosed" event. The custom event fired as the element is being closed. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "dismissible tag closed" event. The custom event fired after the element has been closed. Defaults to `nil`.
* `on_tag_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "tag beingclosed" event. The custom event fired as the element is being closed. Defaults to `nil`.
* `on_tag_closed` (`:string`) - LiveView event name, sent when the component emits its "tag closed" event. The custom event fired after the element has been closed. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dropdown`

Dropdown.

Renders the Carbon `dropdown` web component.

## Example

```heex
<Carbon.dropdown id="my-dropdown" on_beingselected="my_event">
  ...
</Carbon.dropdown>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `dropdown_item`

Dropdown item.

Renders the Carbon `dropdown item` web component.

## Example

```heex
<Carbon.dropdown_item>
  ...
</Carbon.dropdown_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` if this dropdown item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `value` (`:string`) - The `value` attribute that is set to the parent `Carbon.dropdown` when this dropdown item is selected. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `edit_in_place`

EditInPlace component for inline text editing.

Renders the Carbon `edit in place` web component.

## Example

```heex
<Carbon.edit_in_place id="my-edit-in-place" on_change="my_event">
  ...
</Carbon.edit_in_place>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_change` - Fired when the input value changes
  * `on_save` - Fired when the save button is clicked or Enter is pressed
  * `on_cancel` - Fired when the cancel button is clicked or Escape is pressed
  * `on_blur` - Fired when the input loses focus (if onBlur handler is used)

## Attributes

* `cancel_label` (`:string`) - Label for the cancel button Carbon default: `"Cancel"`. Defaults to `nil`.
* `edit_always_visible` (`:boolean`) - By default the edit icon is shown on hover only. Set to true to always show it. Carbon default: `false`. Defaults to `nil`.
* `edit_label` (`:string`) - Label for the edit button Carbon default: `"Edit"`. Defaults to `nil`.
* `id` (`:string`) - Specify a custom id for the input Carbon default: `""`. Defaults to `nil`.
* `inherit_typography` (`:boolean`) - Causes the text entry field to inherit typography settings from the container Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Determines if the input is invalid Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Text that is displayed if the input is invalid Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - Text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Placeholder text for the input Carbon default: `""`. Defaults to `nil`.
* `read_only` (`:boolean`) - Determines if the input is in readOnly mode Carbon default: `false`. Defaults to `nil`.
* `read_only_label` (`:string`) - Label for the edit off button that displays when in read only mode Carbon default: `"Edit off"`. Defaults to `nil`.
* `read_only_toggletip_text` (`:string`) - Text for the toggletip that displays when in read only mode Carbon default: `"This field is read-only and cannot be edited"`. Defaults to `nil`.
* `save_label` (`:string`) - Label for the save button Carbon default: `"Save"`. Defaults to `nil`.
* `size` (`:any`) - Vertical size of control Carbon default: `"sm"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `toggletip_alignment` (`:any`) - Alignment for the toggletip that displays when in read only mode Carbon default: `"bottom"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, or `"right"`.
* `tooltip_alignment` (`:any`) - Tooltip alignment for buttons Carbon default: `"top"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, or `"right"`.
* `value` (`:string`) - Current value of the input (controlled mode) Carbon default: `""`. Defaults to `nil`.
* `default_value` (`:string`) - Default value for uncontrolled mode Carbon default: `""`. Defaults to `nil`.
* `on_change` (`:string`) - LiveView event name, sent when the component emits its "edit in place change" event. Fired when the input value changes. Defaults to `nil`.
* `on_save` (`:string`) - LiveView event name, sent when the component emits its "edit in place save" event. Fired when the save button is clicked or Enter is pressed. Defaults to `nil`.
* `on_cancel` (`:string`) - LiveView event name, sent when the component emits its "edit in place cancel" event. Fired when the cancel button is clicked or Escape is pressed. Defaults to `nil`.
* `on_blur` (`:string`) - LiveView event name, sent when the component emits its "edit in place blur" event. Fired when the input loses focus (if onBlur handler is used). Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `expandable_tile`

Expandable tile.

Renders the Carbon `expandable tile` web component.

## Example

```heex
<Carbon.expandable_tile id="my-expandable-tile" on_beingtoggled="my_event">
  ...
</Carbon.expandable_tile>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingtoggled` - The custom event fired before the expanded state is changed upon a user gesture. Cancellation of this event stops changing the user-initiated change in expanded state.
  * `on_toggled` - The custom event fired after a the expanded state is changed upon a user gesture.

## Attributes

* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `expanded` (`:boolean`) - `true` to expand this expandable tile. Carbon default: `false`. Defaults to `nil`.
* `has_rounded_corners` (`:boolean`) - Specify if the `ExpandableTile` component should be rendered with rounded corners. Only valid when `ai-label` prop is present Carbon default: `false`. Defaults to `nil`.
* `with_interactive` (`:boolean`) - `true` to expand this expandable tile. Carbon default: `false`. Defaults to `nil`.
* `on_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "expandable tile beingtoggled" event. The custom event fired before the expanded state is changed upon a user gesture. Cancellation of this event stops changing the user-initiated change in expanded state. Defaults to `nil`.
* `on_toggled` (`:string`) - LiveView event name, sent when the component emits its "expandable tile toggled" event. The custom event fired after a the expanded state is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `file_uploader`

The file uploader component.

Renders the Carbon `file uploader` web component.

## Example

```heex
<Carbon.file_uploader>
  ...
</Carbon.file_uploader>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` if the file uploader should disabled. Carbon default: `false`. Defaults to `nil`.
* `label_description` (`:string`) - The description text. Carbon default: `""`. Defaults to `nil`.
* `label_title` (`:string`) - The label title. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `file_uploader_button`

File uploader button .

Renders the Carbon `file uploader button` web component.

## Example

```heex
<Carbon.file_uploader_button id="my-file-uploader-button" on_changed="my_event">
  ...
</Carbon.file_uploader_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired when there is a user gesture to select files to upload.

## Attributes

* `button_kind` (`:any`) - Button kind. Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `size` (`:any`) - Button size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`.
* `accept` (`:string`) - The file types the file input should accept, separated by space. Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this drop container should be disabled. Carbon default: `false`. Defaults to `nil`.
* `multiple` (`:boolean`) - `true` if this drop container should accept more than one files at once. Note that even with `false` set here, user _can_ select multiple files one by one. Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - The name of the input. Carbon default: `""`. Defaults to `nil`.
* `slot` (`:string`) - The shadow DOM slot to put this drop container in. Carbon default: `"drop-container"`. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "file uploader button changed" event. The custom event fired when there is a user gesture to select files to upload. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `file_uploader_drop_container`

File uploader drop container.

Renders the Carbon `file uploader drop container` web component.

## Example

```heex
<Carbon.file_uploader_drop_container id="my-file-uploader-drop-container" on_changed="my_event">
  ...
</Carbon.file_uploader_drop_container>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired when there is a user gesture to select files to upload.

## Attributes

* `accept` (`:string`) - The file types the file input should accept, separated by spaces and/or commas. Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this drop container should be disabled. Carbon default: `false`. Defaults to `nil`.
* `multiple` (`:boolean`) - `true` if this drop container should accept more than one files at once. Note that even with `false` set here, user _can_ select multiple files one by one. Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - The name of the input. Carbon default: `""`. Defaults to `nil`.
* `slot` (`:string`) - The shadow DOM slot to put this drop container in. Carbon default: `"drop-container"`. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "file uploader drop container changed" event. The custom event fired when there is a user gesture to select files to upload. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `file_uploader_item`

File uploader item.

Renders the Carbon `file uploader item` web component.

## Example

```heex
<Carbon.file_uploader_item id="my-file-uploader-item" on_beingdeleted="my_event">
  ...
</Carbon.file_uploader_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingdeleted` - The custom event fired before this file uploader item is being deleted upon a user gesture. Cancellation of this event stops the user-initiated action of deleting this file uploader item.
  * `on_deleted` - The custom event fired after this file uploader item is deleted upon a user gesture.

## Attributes

* `icon_description` (`:string`) - The `aria-label` attribute for the icon to delete this file uploader item. Carbon default: `"Delete this file"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Controls the invalid state and visibility of the `validityMessage`. Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of this file uploader item. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The size of this file uploader item. Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `state` (`:any`) - The state of this file uploader item. Carbon default: `"uploading"`. Must be one of `"uploading"`, `"complete"`, or `"edit"`.
* `error_subject` (`:string`) - The error subject text. Carbon default: `""`. Defaults to `nil`.
* `error_body` (`:string`) - The error body text Carbon default: `""`. Defaults to `nil`.
* `on_beingdeleted` (`:string`) - LiveView event name, sent when the component emits its "file uploader item beingdeleted" event. The custom event fired before this file uploader item is being deleted upon a user gesture. Cancellation of this event stops the user-initiated action of deleting this file uploader item. Defaults to `nil`.
* `on_deleted` (`:string`) - LiveView event name, sent when the component emits its "file uploader item deleted" event. The custom event fired after this file uploader item is deleted upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `file_uploader_skeleton`

The File uploader skeleton.

Renders the Carbon `file uploader skeleton` web component.

## Example

```heex
<Carbon.file_uploader_skeleton>
  ...
</Carbon.file_uploader_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_combo_box`

Fluid combo box.

Renders the Carbon `fluid combo box` web component.

## Example

```heex
<Carbon.fluid_combo_box id="my-fluid-combo-box" on_combo_box_beingselected="my_event">
  ...
</Carbon.fluid_combo_box>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_combo_box_beingselected` - The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_combo_box_beingtoggled` - The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_combo_box_selected` - The custom event fired after a combo box item is selected upon a user gesture.
  * `on_combo_box_toggled` - The custom event fired after the open state of this combo box is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `is_condensed` (`:boolean`) - Specify if the combo box should render its menu items in condensed mode. Carbon default: `false`. Defaults to `nil`.
* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `"Clear selection"`. Defaults to `nil`.
* `input_label` (`:string`) - The `aria-label` attribute for the `<input>` for filtering. Carbon default: `""`. Defaults to `nil`.
* `should_filter_item` (`:any`) - Provide custom filtering behavior. This attribute will be ignored if `typeahead` is enabled and will default to `true` Type: `boolean | ShouldFilterItem`. Carbon default: `false`. Defaults to `nil`.
* `typeahead` (`:boolean`) - **Experimental**: will enable autocomplete and typeahead for the input field. Carbon default: `false`. Defaults to `nil`.
* `allow_custom_value` (`:boolean`) - `true` to allow custom values that do not match any item in the list. Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_combo_box_beingselected` (`:string`) - LiveView event name, sent when the component emits its "combo box beingselected" event. The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_combo_box_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "combo box beingtoggled" event. The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_combo_box_selected` (`:string`) - LiveView event name, sent when the component emits its "combo box selected" event. The custom event fired after a combo box item is selected upon a user gesture. Defaults to `nil`.
* `on_combo_box_toggled` (`:string`) - LiveView event name, sent when the component emits its "combo box toggled" event. The custom event fired after the open state of this combo box is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_combo_box_skeleton`

Fluid combo box skeleton.

Renders the Carbon `fluid combo box skeleton` web component.

## Example

```heex
<Carbon.fluid_combo_box_skeleton>
  ...
</Carbon.fluid_combo_box_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_date_picker`

Fluid date picker.

Renders the Carbon `fluid date picker` web component.

## Example

```heex
<Carbon.fluid_date_picker id="my-fluid-date-picker" on_date_picker_changed="my_event">
  ...
</Carbon.fluid_date_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_date_picker_changed` - The custom event fired on this element when Flatpickr updates its value.
  * `on_date_picker_flatpickr_error` - The name of the custom event when Flatpickr throws an error.

## Attributes

* `allow_input` (`:boolean`) - flatpickr prop passthrough. Allows the user to enter a date directly into the input field Carbon default: `true`. Defaults to `nil`.
* `close_on_select` (`:boolean`) - flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection. Carbon default: `true`. Defaults to `nil`.
* `date_format` (`:string`) - The date format to let Flatpickr use. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enabled_range` (`:string`) - The date range that a user can pick in calendar dropdown. Defaults to `nil`.
* `max_date` (`:string`) - The maximum date that a user can start picking from. Defaults to `nil`.
* `min_date` (`:string`) - The minimum date that a user can start picking from. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the date picker should be open. Carbon default: `false`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates. Defaults to `nil`.
* `on_date_picker_changed` (`:string`) - LiveView event name, sent when the component emits its "date picker changed" event. The custom event fired on this element when Flatpickr updates its value. Defaults to `nil`.
* `on_date_picker_flatpickr_error` (`:string`) - LiveView event name, sent when the component emits its "date picker flatpickr error" event. The name of the custom event when Flatpickr throws an error. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_date_picker_input`

Fluid date picker input.

Renders the Carbon `fluid date picker input` web component.

## Example

```heex
<Carbon.fluid_date_picker_input>
  ...
</Carbon.fluid_date_picker_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `disabled` (`:boolean`) - `true` if the check box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `hide_label` (`:boolean`) - `true` if the label should be hidden. Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Controls the invalid state and visibility of the `validityMessage`. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `kind` (`:any`) - Date picker input kind. Carbon default: `"simple"`. Must be one of `"simple"`, `"single"`, `"from"`, or `"to"`.
* `label_text` (`:string`) - The label text. Defaults to `nil`.
* `pattern` (`:string`) - The `pattern` attribute for the `<input>` in the shadow DOM. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `short` (`:boolean`) - true to use the short version. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Vertical size of this date picker input. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `type` (`:string`) - The `type` attribute for the `<input>` in the shadow DOM. Defaults to `nil`.
* `value` (`:string`) - The value. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Fluid variant is always true for this component. Overrides the base class default of false. Carbon default: `true`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_date_picker_skeleton`

Fluid date picker skeleton.

Renders the Carbon `fluid date picker skeleton` web component.

## Example

```heex
<Carbon.fluid_date_picker_skeleton>
  ...
</Carbon.fluid_date_picker_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `date_picker_type` (`:any`) - Carbon default: `"single"`. Must be one of `"simple"`, `"single"`, or `"range"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_dropdown`

Fluid dropdown.

Renders the Carbon `fluid dropdown` web component.

## Example

```heex
<Carbon.fluid_dropdown id="my-fluid-dropdown" on_dropdown_beingselected="my_event">
  ...
</Carbon.fluid_dropdown>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `is_condensed` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_dropdown_skeleton`

Fluid dropdown skeleton.

Renders the Carbon `fluid dropdown skeleton` web component.

## Example

```heex
<Carbon.fluid_dropdown_skeleton>
  ...
</Carbon.fluid_dropdown_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the ListBox. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_form`

Presentational element for fluid form

Renders the Carbon `fluid form` web component.

## Example

```heex
<Carbon.fluid_form>
  ...
</Carbon.fluid_form>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_multi_select`

Fluid multi select.

Renders the Carbon `fluid multi select` web component.

## Example

```heex
<Carbon.fluid_multi_select id="my-fluid-multi-select" on_multi_select_beingselected="my_event">
  ...
</Carbon.fluid_multi_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_multi_select_beingselected` - The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_multi_select_selected` - The custom event fired after a multi select item is selected upon a user gesture.
  * `on_multi_select_beingtoggled` - The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_multi_select_toggled` - The custom event fired after the open state of this multi select is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `is_condensed` (`:boolean`) - Specify if the `FluidMultiSelect` should render its menu items in condensed mode Carbon default: `false`. Defaults to `nil`.
* `filterable` (`:any`) - . Defaults to `nil`.
* `autocomplete` (`:string`) - The native `autocomplete` attribute for the filterable input. Carbon default: `"off"`. Defaults to `nil`.
* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `""`. Defaults to `nil`.
* `clear_selection_description` (`:string`) - Specify the text that should be read for screen readers that describes total items selected Carbon default: `"Total items selected: "`. Defaults to `nil`.
* `clear_selection_text` (`:string`) - Specify the text that should be read for screen readers to clear selection. Carbon default: `"To clear selection, press Delete or Backspace."`. Defaults to `nil`.
* `locale` (`:string`) - Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control. Carbon default: `"en"`. Defaults to `nil`.
* `select_all` (`:boolean`) - Enables rendering of a “Select all” multi-select-item Carbon default: `false`. Defaults to `nil`.
* `selection_feedback` (`:any`) - Specify feedback (mode) of the selection. `top`: selected item jumps to top `fixed`: selected item stays at it's position `top-after-reopen`: selected item jump to top after reopen dropdown Carbon default: `"top-after-reopen"`. Must be one of `"fixed"`, `"top"`, or `"top-after-reopen"`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_multi_select_beingselected` (`:string`) - LiveView event name, sent when the component emits its "multi select beingselected" event. The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_multi_select_selected` (`:string`) - LiveView event name, sent when the component emits its "multi select selected" event. The custom event fired after a multi select item is selected upon a user gesture. Defaults to `nil`.
* `on_multi_select_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "multi select beingtoggled" event. The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_multi_select_toggled` (`:string`) - LiveView event name, sent when the component emits its "multi select toggled" event. The custom event fired after the open state of this multi select is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_multi_select_skeleton`

Fluid multi select skeleton.

Renders the Carbon `fluid multi select skeleton` web component.

## Example

```heex
<Carbon.fluid_multi_select_skeleton>
  ...
</Carbon.fluid_multi_select_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_number_input`

Fluid number input.

Renders the Carbon `fluid number input` web component.

## Example

```heex
<Carbon.fluid_number_input id="my-fluid-number-input" on_number_input="my_event">
  ...
</Carbon.fluid_number_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_number_input` - The name of the custom event fired after the value is changed upon a user gesture.

## Attributes

* `min` (`:string`) - The minimum value allowed in the input. Defaults to `nil`.
* `max` (`:string`) - The maximum value allowed in the input. Defaults to `nil`.
* `step` (`:string`) - The amount the value should increase or decrease by. Defaults to `nil`.
* `icon_description` (`:string`) - Provide a description for up/down icons that can be read by screen readers Carbon default: `""`. Defaults to `nil`.
* `increment_button_assistive_text` (`:string`) - Aria text for the button that increments the value Carbon default: `"increase number input"`. Defaults to `nil`.
* `decrement_button_assistive_text` (`:string`) - Aria text for the button that decrements the value Carbon default: `"decrease number input"`. Defaults to `nil`.
* `hide_steppers` (`:boolean`) - Specify whether you want the steppers to be hidden Carbon default: `false`. Defaults to `nil`.
* `allow_empty` (`:boolean`) - `true` to allow empty string. Carbon default: `false`. Defaults to `nil`.
* `default_value` (`:string`) - Optional starting value for uncontrolled state Carbon default: `""`. Defaults to `nil`.
* `disable_wheel` (`:boolean`) - Specify if the wheel functionality for the input should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `locale` (`:string`) - **Experimental:** Specify a BCP47 language code for parsing and formatting. Use with `type="text"`, has no effect when `type="number"`. Carbon default: `"en-US"`. Defaults to `nil`.
* `format_options` (`:any`) - **Experimental:** Specify Intl.NumberFormat options applied to internal number parsing and formatting. Use with `type="text"`, has no effect when `type="number"`. Type: `NumberFormatOptions`. Carbon default: `{}`. Defaults to `nil`.
* `input_mode` (`:any`) - Instruct the browser which keyboard to display on mobile devices. Carbon default: `"decimal"`. Must be one of `"text"`, `"none"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, or `"search"`.
* `step_start_value` (`:any`) - Provide the value stepping should begin at when the input is empty Carbon default: `0`. Defaults to `nil`.
* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - When type="text", provide an optional pattern to restrict user input. Carbon default: `"[0-9]*"`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Set to true to use the fluid variant. Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - **Experimental**: Specify if the input should be of type text or number. Use type="text" with `locale`, `formatOptions`, and guide user input with `pattern` and `inputMode`. Carbon default: `"number"`. Must be one of `"number"`, or `"text"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Override value setter to handle formatting for type="text". Defaults to `nil`.
* `on_number_input` (`:string`) - LiveView event name, sent when the component emits its "number input" event. The name of the custom event fired after the value is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_number_input_skeleton`

Fluid number input.

Renders the Carbon `fluid number input skeleton` web component.

## Example

```heex
<Carbon.fluid_number_input_skeleton>
  ...
</Carbon.fluid_number_input_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - `true` if the label should be hidden. Corresponds to the attribute with the same name. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the Number Input skeleton. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_password_input`

Fluid password input.

Renders the Carbon `fluid password input` web component.

## Example

```heex
<Carbon.fluid_password_input>
  ...
</Carbon.fluid_password_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the input against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Set to true to use the fluid version. Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"end"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The native `<input>` type. Defaults to “password”. Carbon default: `"password"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_search`

Fluid text input.

Renders the Carbon `fluid search` web component.

## Example

```heex
<Carbon.fluid_search id="my-fluid-search" on_search_input="my_event">
  ...
</Carbon.fluid_search>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_search_input` - The custom event fired after the search content is changed upon a user gesture.

## Attributes

* `autocomplete` (`:string`) - Specify an optional value for the autocomplete property on the underlying <input>, defaults to "off" Carbon default: `"off"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `close_button_label_text` (`:string`) - Specify a label to be read by screen readers on the "close" button Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the search box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `expandable` (`:boolean`) - `true` if the search bar can be expandable Carbon default: `false`. Defaults to `nil`.
* `expanded` (`:boolean`) - `true` if the expandable search has been expanded Carbon default: `false`. Defaults to `nil`.
* `has_custom_icon` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name in `FormData`. Carbon default: `""`. Defaults to `nil`.
* `role` (`:string`) - Specify the role for the underlying <input>, defaults to searchbox Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Carbon default: `"Search"`. Defaults to `nil`.
* `size` (`:any`) - The search box size. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - The `<input>` name. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Carbon default: `""`. Defaults to `nil`.
* `on_search_input` (`:string`) - LiveView event name, sent when the component emits its "search input" event. The custom event fired after the search content is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_search_skeleton`

Fluid Search.

Renders the Carbon `fluid search skeleton` web component.

## Example

```heex
<Carbon.fluid_search_skeleton>
  ...
</Carbon.fluid_search_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - The search skeleton size. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_select`

Fluid text select.

Renders the Carbon `fluid select` web component.

## Example

```heex
<Carbon.fluid_select id="my-fluid-select" on_select_selected="my_event">
  ...
</Carbon.fluid_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_select_selected` - The name of the custom event fired after an item is selected.

## Attributes

* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the select to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the select Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - ID to link the `label` and `select` Carbon default: `"select"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:boolean`) - Specify if the currently value is warn. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Message which is displayed if the value is warn. Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `label_styles_disable` (`:boolean`) - Specify if you want to disable the default label styling Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - Specify whether you want the inline version of this control Carbon default: `false`. Defaults to `nil`.
* `multiple` (`:boolean`) - `true` to enable multiple selection. Defaults to `nil`.
* `name` (`:string`) - Name for the select in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the select against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the select has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Controls the readonly state of the select Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `selected_index` (`:any`) - The selected index. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `value` (`:string`) - The value of the text area. Carbon default: `""`. Defaults to `nil`.
* `on_select_selected` (`:string`) - LiveView event name, sent when the component emits its "select selected" event. The name of the custom event fired after an item is selected. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_select_skeleton`

Fluid text area input.

Renders the Carbon `fluid select skeleton` web component.

## Example

```heex
<Carbon.fluid_select_skeleton>
  ...
</Carbon.fluid_select_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - `true` if the label should be hidden. Corresponds to the attribute with the same name. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_text_input`

Fluid text input.

Renders the Carbon `fluid text input` web component.

## Example

```heex
<Carbon.fluid_text_input>
  ...
</Carbon.fluid_text_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the input against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The type of the input. Can be one of the types listed in the INPUT_TYPE enum Carbon default: `"text"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_text_input_skeleton`

Fluid text area input.

Renders the Carbon `fluid text input skeleton` web component.

## Example

```heex
<Carbon.fluid_text_input_skeleton>
  ...
</Carbon.fluid_text_input_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The text-input-skeleton size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_textarea`

Fluid text area input.

Renders the Carbon `fluid textarea` web component.

## Example

```heex
<Carbon.fluid_textarea>
  ...
</Carbon.fluid_textarea>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `cols` (`:any`) - The number of columns for the textarea to show by default. Defaults to `nil`.
* `counter_mode` (`:any`) - Specify the method used for calculating the counter number Carbon default: `"character"`. Must be one of `"character"`, or `"word"`.
* `id` (`:string`) - ID to link the `label` and `textarea` Carbon default: `""`. Defaults to `nil`.
* `rows` (`:any`) - The number of rows for the textarea to show by default Carbon default: `4`. Defaults to `nil`.
* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the textarea against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The type of the input. Can be one of the types listed in the INPUT_TYPE enum Carbon default: `"text"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_textarea_skeleton`

Fluid text area skeleton.

Renders the Carbon `fluid textarea skeleton` web component.

## Example

```heex
<Carbon.fluid_textarea_skeleton>
  ...
</Carbon.fluid_textarea_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_time_picker`

Fluid Time Picker component.

Renders the Carbon `fluid time picker` web component.

## Example

```heex
<Carbon.fluid_time_picker>
  ...
</Carbon.fluid_time_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - Specify whether the control is disabled Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Provide the text that is displayed when the control is in an invalid state Carbon default: `"Invalid time format."`. Defaults to `nil`.
* `warning` (`:boolean`) - Specify whether the control is in warning state Carbon default: `false`. Defaults to `nil`.
* `warning_text` (`:string`) - Provide the text that is displayed when the control is in a warning state Carbon default: `"Warning message."`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in FormData Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - Provide label text to be read by screen readers Carbon default: `"Select a time"`. Defaults to `nil`.
* `placeholder` (`:string`) - Placeholder text for the input Carbon default: `"hh:mm"`. Defaults to `nil`.
* `read_only` (`:boolean`) - Specify whether the control should be read-only Carbon default: `false`. Defaults to `nil`.
* `max_length` (`:any`) - Specify the maximum length of the input value Carbon default: `5`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern for input validation Carbon default: `"(1[012]|[1-9]):[0-5][0-9](\\s)?"`. Defaults to `nil`.
* `size` (`:any`) - Size of the time picker Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - Input type Carbon default: `"text"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the control is currently invalid Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Whether the input is required Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - Custom message for required validation Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - Validity message Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_time_picker_select`

Fluid time picker select.

Renders the Carbon `fluid time picker select` web component.

## Example

```heex
<Carbon.fluid_time_picker_select id="my-fluid-time-picker-select" on_select_selected="my_event">
  ...
</Carbon.fluid_time_picker_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_select_selected` - The name of the custom event fired after an item is selected.

## Attributes

* `default_value` (`:string`) - Optionally provide the default value of the select. Carbon default: `""`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the select to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the select Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - ID to link the `label` and `select` Carbon default: `"select"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:boolean`) - Specify if the currently value is warn. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Message which is displayed if the value is warn. Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `label_styles_disable` (`:boolean`) - Specify if you want to disable the default label styling Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - Specify whether you want the inline version of this control Carbon default: `false`. Defaults to `nil`.
* `multiple` (`:boolean`) - `true` to enable multiple selection. Defaults to `nil`.
* `name` (`:string`) - Name for the select in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the select against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the select has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Controls the readonly state of the select Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `selected_index` (`:any`) - The selected index. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `value` (`:string`) - The value of the text area. Carbon default: `""`. Defaults to `nil`.
* `on_select_selected` (`:string`) - LiveView event name, sent when the component emits its "select selected" event. The name of the custom event fired after an item is selected. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `fluid_time_picker_skeleton`

Fluid time picker skeleton.

Renders the Carbon `fluid time picker skeleton` web component.

## Example

```heex
<Carbon.fluid_time_picker_skeleton>
  ...
</Carbon.fluid_time_picker_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `is_only_two` (`:boolean`) - Specify if there are only two TimePicker elements. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `form`

Presentational element for form

Renders the Carbon `form` web component.

## Example

```heex
<Carbon.form>
  ...
</Carbon.form>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `form_group`

The shell UI for file uploader.

Renders the Carbon `form group` web component.

## Example

```heex
<Carbon.form_group>
  ...
</Carbon.form_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `invalid` (`:boolean`) - Specify whether the Form Group is invalid Carbon default: `false`. Defaults to `nil`.
* `legend_id` (`:any`) - Provide id for the fieldset <legend> which corresponds to the fieldset `aria-labelledby`. Defaults to `nil`.
* `legend_text` (`:string`) - Provide the text to be rendered inside of the fieldset <legend>. Defaults to `nil`.
* `message` (`:boolean`) - Specify whether the message should be displayed in the Form Group Carbon default: `false`. Defaults to `nil`.
* `message_text` (`:any`) - Provide the text for the message in the Form Group. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `form_item`

Presentational element for form items

Renders the Carbon `form item` web component.

## Example

```heex
<Carbon.form_item>
  ...
</Carbon.form_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `full_page_error`

FullPageError.

Renders the Carbon `full page error` web component.

## Example

```heex
<Carbon.full_page_error>
  ...
</Carbon.full_page_error>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `label` (`:string`) - Sets the label text Carbon default: `"Error Label"`. Defaults to `nil`.
* `description` (`:any`) - Sets the description text. Defaults to `nil`.
* `kind` (`:any`) - Sets what kind of error it is. '404' | '403' | 'custom' Carbon default: `"custom"`. Must be one of `"custom"`, `"403"`, or `"404"`.
* `title` (`:string`) - Sets the title text Carbon default: `"Title"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `grid`

The grid component.

Renders the Carbon `grid` web component.

## Example

```heex
<Carbon.grid>
  ...
</Carbon.grid>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:any`) - Specify grid alignment. Default is center Type: `GridAlignmentType | undefined`. Defaults to `nil`.
* `condensed` (`:boolean`) - Collapse the gutter to 1px. Useful for fluid layouts. Rows have 1px of margin between them to match gutter. Carbon default: `false`. Defaults to `nil`.
* `narrow` (`:boolean`) - Container hangs 16px into the gutter. Useful for typographic alignment with and without containers. Carbon default: `false`. Defaults to `nil`.
* `full_width` (`:boolean`) - Remove the default max width that the grid has set Carbon default: `false`. Defaults to `nil`.
* `with_row_gap` (`:boolean`) - Add a row gap to the grid that matches the current gutter size. This is useful when you want consistent vertical spacing between rows. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `guide_banner`

GuideBanner.

Renders the Carbon `guide banner` web component.

## Example

```heex
<Carbon.guide_banner id="my-guide-banner" on_toggle="my_event">
  ...
</Carbon.guide_banner>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_toggle` - Custom event fired when banner is opened
  * `on_close` - Custom event fired when banner is closed

## Attributes

* `collapse_text` (`:string`) - . Defaults to `nil`.
* `expand_text` (`:string`) - . Defaults to `nil`.
* `open` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `title_text` (`:string`) - . Defaults to `nil`.
* `on_toggle` (`:string`) - LiveView event name, sent when the component emits its "guide banner toggle" event. Custom event fired when banner is opened. Defaults to `nil`.
* `on_close` (`:string`) - LiveView event name, sent when the component emits its "guide banner close" event. Custom event fired when banner is closed. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `guide_banner_element`

GuideBannerElement.

Renders the Carbon `guide banner element` web component.

## Example

```heex
<Carbon.guide_banner_element>
  ...
</Carbon.guide_banner_element>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `heading`

The heading component

Renders the Carbon `heading` web component.

## Example

```heex
<Carbon.heading>
  ...
</Carbon.heading>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `icon`

Icon component that renders imported icons or custom SVG content.

Renders the Carbon `icon` web component.

## Example

```heex
<Carbon.icon>
  ...
</Carbon.icon>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `icon` (`:any`) - The imported icon Type: `CarbonIcon | undefined`. Defaults to `nil`.
* `size` (`:any`) - The size of the icon (16, 20, 24, 32) Carbon default: `16`. Defaults to `nil`.
* `class` (`:any`) - Custom CSS classes. Defaults to `nil`.
* `aria_label` (`:any`) - The aria-label for the icon. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `icon_button`

Icon Button

Renders the Carbon `icon button` web component.

## Example

```heex
<Carbon.icon_button>
  ...
</Carbon.icon_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:string`) - Checks if a badge indicator is being used with incorrect properties Carbon default: `"top"`. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Determines whether the tooltip should close when inner content is activated (click, Enter or Space) Carbon default: `true`. Defaults to `nil`.
* `default_open` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `enter_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before displaying the tooltip Carbon default: `100`. Defaults to `nil`.
* `leave_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before hiding the tooltip Carbon default: `100`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the Button. Defaults to `lg`. Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `icon_indicator`

Icon Indicator.

Renders the Carbon `icon indicator` web component.

## Example

```heex
<Carbon.icon_indicator>
  ...
</Carbon.icon_indicator>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:any`) - Specify how the tooltip should align with the icon in compact mode Carbon default: `"right"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `autoalign` (`:any`) - Will auto-align the tooltip in compact mode. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `compact` (`:boolean`) - When true, displays only the icon with the label in a tooltip Carbon default: `false`. Defaults to `nil`.
* `icon_description` (`:any`) - Description for the icon announced to screen readers in compact mode. Defaults to `label` when not provided. Defaults to `nil`.
* `size` (`:any`) - Icon indicator should be size 16 or 20 Carbon default: `16`. Defaults to `nil`.
* `label` (`:string`) - Label next to the icon. Defaults to `nil`.
* `kind` (`:any`) - Icon Indicator kind. Must be one of `"failed"`, `"caution-major"`, `"caution-minor"`, `"undefined"`, `"succeeded"`, `"normal"`, `"in-progress"`, `"incomplete"`, `"not-started"`, `"pending"`, `"unknown"`, or `"informative"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `inline_loading`

Lnline loading spinner.

Renders the Carbon `inline loading` web component.

## Example

```heex
<Carbon.inline_loading id="my-inline-loading" on_onsuccess="my_event">
  ...
</Carbon.inline_loading>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_onsuccess` - The custom event fired when inline-loading has finished status

## Attributes

* `assistive_text` (`:string`) - . Defaults to `nil`.
* `icon_description` (`:string`) - The assistive text for the spinner icon. Carbon default: `"Loading"`. Defaults to `nil`.
* `success_delay` (`:any`) - Provide a delay for the setTimeout for success Carbon default: `1500`. Defaults to `nil`.
* `status` (`:any`) - The loading status. Carbon default: `"active"`. Must be one of `"inactive"`, `"active"`, `"finished"`, or `"error"`.
* `on_onsuccess` (`:string`) - LiveView event name, sent when the component emits its "inline loading onsuccess" event. The custom event fired when inline-loading has finished status. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `inline_notification`

Inline notification.

Renders the Carbon `inline notification` web component.

## Example

```heex
<Carbon.inline_notification id="my-inline-notification" on_notification_beingclosed="my_event">
  ...
</Carbon.inline_notification>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_notification_beingclosed` - The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification.
  * `on_notification_closed` - The custom event fired after this notification is closed upon a user gesture.

## Attributes

* `aria_label` (`:string`) - Provide a description for "close" icon button that can be read by screen readers. Defaults to `nil`.
* `hide_close_button` (`:boolean`) - `true` to hide the close button. Carbon default: `false`. Defaults to `nil`.
* `status_icon_description` (`:string`) - Provide a description for "status" icon that can be read by screen readers. Defaults to `nil`.
* `kind` (`:any`) - Notification kind. Carbon default: `"success"`. Must be one of `"success"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"error"`.
* `low_contrast` (`:boolean`) - Low contrast mode Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the notification should be open. Carbon default: `true`. Defaults to `nil`.
* `timeout` (`:any`) - Specify an optional duration the notification should be closed in. Defaults to `nil`.
* `subtitle` (`:string`) - The subtitle. Carbon default: `""`. Defaults to `nil`.
* `title` (`:string`) - The title. Carbon default: `""`. Defaults to `nil`.
* `on_notification_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "notification beingclosed" event. The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification. Defaults to `nil`.
* `on_notification_closed` (`:string`) - LiveView event name, sent when the component emits its "notification closed" event. The custom event fired after this notification is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `interstitial_screen`

interstitial-screen main component

Renders the Carbon `interstitial screen` web component.

## Example

```heex
<Carbon.interstitial_screen id="my-interstitial-screen" on_interstitial_opened="my_event">
  ...
</Carbon.interstitial_screen>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_interstitial_opened` - The custom event triggered after loading the component. Its event.detail will provide you with carousal api methods for step navigation and method to disable any action button *
  * `on_interstitial_beingclosed` - The name of the custom event fired before interstitial is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing the interstitial.
  * `on_interstitial_closed` - The name of the custom event fired after this tearsheet is closed upon a user gesture.

## Attributes

* `fullscreen` (`:boolean`) - Specifies whether the component is shown as a full-screen experience, else it is shown as a modal by default. Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - Specifies whether the component is currently open. Carbon default: `false`. Defaults to `nil`.
* `on_interstitial_opened` (`:string`) - LiveView event name, sent when the component emits its "interstitial opened" event. The custom event triggered after loading the component. Its event.detail will provide you with carousal api methods for step navigation and method to disable any action button *. Defaults to `nil`.
* `on_interstitial_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "interstitial beingclosed" event. The name of the custom event fired before interstitial is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing the interstitial. Defaults to `nil`.
* `on_interstitial_closed` (`:string`) - LiveView event name, sent when the component emits its "interstitial closed" event. The name of the custom event fired after this tearsheet is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `interstitial_screen_body`

interstitial-screen-body for body section

Renders the Carbon `interstitial screen body` web component.

## Example

```heex
<Carbon.interstitial_screen_body id="my-interstitial-screen-body" on_on_before_step_change="my_event">
  ...
</Carbon.interstitial_screen_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_on_before_step_change` - The name of the custom event fired at the start of  the step change.
  * `on_on_after_step_change` - The name of the custom event fired at the end of  the step change.

## Attributes

* `slot` (`:string`) - Carbon default: `"body"`. Defaults to `nil`.
* `on_on_before_step_change` (`:string`) - LiveView event name, sent when the component emits its "on before step change" event. The name of the custom event fired at the start of  the step change. Defaults to `nil`.
* `on_on_after_step_change` (`:string`) - LiveView event name, sent when the component emits its "on after step change" event. The name of the custom event fired at the end of  the step change. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `interstitial_screen_body_item`

interstitial-screen-body-item for body children

Renders the Carbon `interstitial screen body item` web component.

## Example

```heex
<Carbon.interstitial_screen_body_item>
  ...
</Carbon.interstitial_screen_body_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `step_title` (`:string`) - This will serve the labels for each step Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `interstitial_screen_footer`

interstitial-screen-footer for footer section

Renders the Carbon `interstitial screen footer` web component.

## Example

```heex
<Carbon.interstitial_screen_footer id="my-interstitial-screen-footer" on_on_action="my_event">
  ...
</Carbon.interstitial_screen_footer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_on_action` - The name of the custom event fired just before the action. You can use this event to perform any async/sync validation. if you pass async-action = true, the component will wait for an external listener (e.g., a form validation or confirmation modal) to resolve the proceed() callback before continuing. When asyncAction is true, you must listen for the eventOnBeforeAction event and call the proceed() function (either synchronously or with a promise) to allow navigation.

## Attributes

* `next_button_label` (`:string`) - The label for the Next button. Carbon default: `"Next"`. Defaults to `nil`.
* `previous_button_label` (`:string`) - The label for the Previous button. Carbon default: `"Back"`. Defaults to `nil`.
* `skip_button_label` (`:string`) - The label for the skip button. Carbon default: `"Skip"`. Defaults to `nil`.
* `start_button_label` (`:string`) - The label for the start button. Carbon default: `"Get Started"`. Defaults to `nil`.
* `slot` (`:string`) - Carbon default: `"footer"`. Defaults to `nil`.
* `async_action` (`:any`) - Enables support for asynchronous validation or user confirmation before proceeding to the next interstitial step. When set to true, the component will wait for an external listener (e.g., a form validation or confirmation modal) to resolve the proceed() callback before continuing. When asyncAction is true, you must listen for the eventOnBeforeAction event and call the proceed() function (either synchronously or with a promise) to allow navigation. Defaults to `nil`.
* `has_three_buttons` (`:boolean`) - `true` if this modal footer has more than two buttons. Carbon default: `false`. Defaults to `nil`.
* `on_on_action` (`:string`) - LiveView event name, sent when the component emits its "on action" event. The name of the custom event fired just before the action. You can use this event to perform any async/sync validation. if you pass async-action = true, the component will wait for an external listener (e.g., a form validation or confirmation modal) to resolve the proceed() callback before continuing. When asyncAction is true, you must listen for the eventOnBeforeAction event and call the proceed() function (either synchronously or with a promise) to allow navigation. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `interstitial_screen_header`

interstitial-screen-header for header section

Renders the Carbon `interstitial screen header` web component.

## Example

```heex
<Carbon.interstitial_screen_header>
  ...
</Carbon.interstitial_screen_header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `header_title` (`:string`) - Provide an optional title to be applied to the header. Carbon default: `""`. Defaults to `nil`.
* `slot` (`:string`) - Carbon default: `"header"`. Defaults to `nil`.
* `header_subtitle` (`:string`) - Tooltip text and aria label for the Close button icon. Carbon default: `""`. Defaults to `nil`.
* `close_icon_description` (`:string`) - Tooltip text and aria label for the Close button icon. Carbon default: `"Close"`. Defaults to `nil`.
* `hide_progress_indicator` (`:boolean`) - Optional parameter to hide the progress indicator when multiple steps are used. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `layer`

Basic layer

Renders the Carbon `layer` web component.

## Example

```heex
<Carbon.layer id="my-layer" on_use_layer="my_event">
  ...
</Carbon.layer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_use_layer` - The custom event that returns the layer level and the layer element.

## Attributes

* `level` (`:any`) - Specify the layer level and override any existing levels based on hierarchy Carbon default: `0`. Defaults to `nil`.
* `layers` (`:any`) - . Defaults to `nil`.
* `with_background` (`:any`) - . Defaults to `nil`.
* `on_use_layer` (`:string`) - LiveView event name, sent when the component emits its "use layer" event. The custom event that returns the layer level and the layer element. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `layout`

`Carbon.layout` sets a layout context (size and/or density) for all
descendant Carbon components.

Renders the Carbon `layout` web component.

## Example

```heex
<Carbon.layout>
  ...
</Carbon.layout>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - Size context for all descendant components. Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, or `"xs"`.
* `density` (`:any`) - Density context for all descendant components. Must be one of `"condensed"`, or `"normal"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `layout_constraint`

`Carbon.layout_constraint` restricts the size range available to its
descendant components.

Renders the Carbon `layout constraint` web component.

## Example

```heex
<Carbon.layout_constraint>
  ...
</Carbon.layout_constraint>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size_default` (`:any`) - . Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, or `"xs"`.
* `size_min` (`:any`) - . Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, or `"xs"`.
* `size_max` (`:any`) - . Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, or `"xs"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `link`

Link.

Renders the Carbon `link` web component.

## Example

```heex
<Carbon.link>
  ...
</Carbon.link>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` if the link should be disabled. Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name. Defaults to `nil`.
* `href` (`:string`) - Link `href`. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to. Defaults to `nil`.
* `inline` (`:boolean`) - `true` if the link should be inline. Carbon default: `false`. Defaults to `nil`.
* `link_role` (`:string`) - The a11y role for `<a>`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping. Defaults to `nil`.
* `rel` (`:string`) - The link type. Defaults to `nil`.
* `size` (`:string`) - Link size. Carbon default: `"MEDIUM"`. Defaults to `nil`.
* `target` (`:string`) - The link target. Defaults to `nil`.
* `type` (`:string`) - MIME type of the `target`. Defaults to `nil`.
* `visited` (`:boolean`) - When enabled, applies Carbon's visited-link styles to browser-controlled :visited link state. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `list_item`

List item.

Renders the Carbon `list item` web component.

## Example

```heex
<Carbon.list_item>
  ...
</Carbon.list_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `nested` (`:boolean`) - `true` if this list item is a child of a nested list. `Carbon.ordered_list` or `Carbon.unordered_list` automatically sets this property. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `loading`

Spinner indicating loading state.

Renders the Carbon `loading` web component.

## Example

```heex
<Carbon.loading>
  ...
</Carbon.loading>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `assistive_text` (`:string`) - . Defaults to `nil`.
* `description` (`:string`) - Specify a description that would be used to best describe the loading state Carbon default: `"Loading"`. Defaults to `nil`.
* `type` (`:any`) - . Must be one of `"regular"`, or `"small"`.
* `small` (`:boolean`) - Specify whether you would like the small variant of <Loading> Carbon default: `false`. Defaults to `nil`.
* `overlay` (`:boolean`) - `true` if overlay should be applied. Carbon default: `false`. Defaults to `nil`.
* `inactive` (`:boolean`) - . Defaults to `nil`.
* `active` (`:boolean`) - Specify whether you want the loading indicator to be spinning or not Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `menu_button`

Menu button.

Renders the Carbon `menu button` web component.

## Example

```heex
<Carbon.menu_button>
  ...
</Carbon.menu_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:any`) - Specify whether the MenuButton should be disabled, or not. Defaults to `nil`.
* `kind` (`:any`) - Specify the type of button to be used as the base for the trigger button. Carbon default: `"primary"`. Must be one of `"primary"`, `"tertiary"`, or `"ghost"`.
* `label` (`:any`) - Provide the label to be rendered on the trigger button. Defaults to `nil`.
* `menu_alignment` (`:any`) - Experimental property. Specify how the menu should align with the button element Carbon default: `"bottom"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `menu_border` (`:boolean`) - Specify whether the menu should have a border. Carbon default: `false`. Defaults to `nil`.
* `menu_background_token` (`:any`) - Specify the background token to use for the menu. Default is 'layer'. Carbon default: `"layer"`. Must be one of `"layer"`, or `"background"`.
* `size` (`:any`) - Specify the size of the button and menu. Carbon default: `"lg"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `tab_index` (`:any`) - Specify the tabIndex of the button. Carbon default: `0`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `menu_item`

Menu Item.

Renders the Carbon `menu item` web component.

## Example

```heex
<Carbon.menu_item>
  ...
</Carbon.menu_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `label` (`:any`) - Label for the menu item. Defaults to `nil`.
* `shortcut` (`:any`) - Shortcut for the menu item. Defaults to `nil`.
* `disabled` (`:any`) - Disabled property for the menu item. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger menu item variant Carbon default: `""`. Defaults to `nil`.
* `submenu_open` (`:boolean`) - Whether the menu submen for an item is open or not. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Carbon default: `"default"`. Must be one of `"default"`, or `"danger"`.
* `boundaries` (`:any`) - Menu boundaries. Type: `{ x: number | [number, number]; y: number | [number, number]; }`. Carbon default: `{"x":-1,"y":-1}`. Defaults to `nil`.
* `aria_checked` (`:any`) - Carbon default: `"this.getAttribute('selected') ?? 'false'"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `menu_item_divider`

Menu Item.

Renders the Carbon `menu item divider` web component.

## Example

```heex
<Carbon.menu_item_divider>
  ...
</Carbon.menu_item_divider>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `menu_item_group`

Menu Item.

Renders the Carbon `menu item group` web component.

## Example

```heex
<Carbon.menu_item_group>
  ...
</Carbon.menu_item_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `label` (`:any`) - Label for the menu item. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `menu_item_radio_group`

Menu Item.

Renders the Carbon `menu item radio group` web component.

## Example

```heex
<Carbon.menu_item_radio_group>
  ...
</Carbon.menu_item_radio_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `label` (`:any`) - Label for the menu item radio group. Defaults to `nil`.
* `items` (`:any`) - List of items in the radio group. Type: `never[]`. Carbon default: `[]`. Defaults to `nil`.
* `selected_item` (`:any`) - Selected item in the radio group. Defaults to `nil`.
* `item_to_string` (`:any`) - List of items in the radio group. Type: `((item: (string | number)[]) => string) | undefined`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `menu_item_selectable`

Menu Item Selectable.

Renders the Carbon `menu item selectable` web component.

## Example

```heex
<Carbon.menu_item_selectable>
  ...
</Carbon.menu_item_selectable>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `label` (`:any`) - Label for the menu item selectable. Defaults to `nil`.
* `selected` (`:boolean`) - Whether the menu item is selected or not. Carbon default: `false`. Defaults to `nil`.
* `render_icon` (`:any`) - Sets the menu item's icon. Type: `(() => void) | undefined`. Defaults to `nil`.
* `shortcut` (`:any`) - . Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal`

Modal.

Renders the Carbon `modal` web component.

## Example

```heex
<Carbon.modal id="my-modal" on_beingclosed="my_event">
  ...
</Carbon.modal>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - The custom event fired before this modal is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this modal.
  * `on_closed` - The custom event fired after this modal is closed upon a user gesture.

## Attributes

* `enable_dialog_element` (`:boolean`) - Enable the use of native dialog element instead of div with role="dialog" Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:any`) - Specify text for the accessibility label of the header. Defaults to `nil`.
* `container_class` (`:string`) - The additional CSS class names for the container <div> of the element. Carbon default: `""`. Defaults to `nil`.
* `full_width` (`:boolean`) - Specify whether or not the Modal content should have any inner padding. Carbon default: `false`. Defaults to `nil`.
* `has_scrolling_content` (`:boolean`) - Specify whether the modal contains scrolling content Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Modal size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `should_submit_on_enter` (`:boolean`) - Specify if Enter key should be used as "submit" action that clicks the primary footer button Carbon default: `false`. Defaults to `nil`.
* `loading_status` (`:any`) - Specify the loading status Carbon default: `"inactive"`. Must be one of `"inactive"`, `"active"`, `"finished"`, or `"error"`.
* `loading_description` (`:string`) - Specify the description for the loading text Carbon default: `""`. Defaults to `nil`.
* `loading_success_delay` (`:any`) - Provide a delay for the setTimeout for success Carbon default: `1500`. Defaults to `nil`.
* `loading_icon_description` (`:string`) - Specify the description for the loading icon Carbon default: `"Loading"`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the modal should be open. Carbon default: `false`. Defaults to `nil`.
* `alert` (`:boolean`) - Specify whether the Modal is displaying an alert, error or warning. Should go hand in hand with the danger prop. Carbon default: `false`. Defaults to `nil`.
* `prevent_close_on_click_outside` (`:boolean`) - Prevent closing on click outside of modal Carbon default: `false`. Defaults to `nil`.
* `prevent_close` (`:boolean`) - Prevent the modal from closing after clicking the close button Carbon default: `false`. Defaults to `nil`.
* `managed_focus` (`:boolean`) - When true, suppresses the modal's built-in focus-on-open logic only. Focus-return on close is always handled by the modal (via _launcher) regardless of this flag, so the consumer does not need to wire up a launcher ref manually. Carbon default: `false`. Defaults to `nil`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "modal beingclosed" event. The custom event fired before this modal is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this modal. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "modal closed" event. The custom event fired after this modal is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_body`

Modal body.

Renders the Carbon `modal body` web component.

## Example

```heex
<Carbon.modal_body>
  ...
</Carbon.modal_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_body_content`

Modal body content

Renders the Carbon `modal body content` web component.

## Example

```heex
<Carbon.modal_body_content>
  ...
</Carbon.modal_body_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_close_button`

Modal close button.

Renders the Carbon `modal close button` web component.

## Example

```heex
<Carbon.modal_close_button>
  ...
</Carbon.modal_close_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `close_button_label` (`:string`) - Specify a label for the close button of the modal; defaults to close Carbon default: `"Close"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_footer`

Modal footer.

Renders the Carbon `modal footer` web component.

## Example

```heex
<Carbon.modal_footer>
  ...
</Carbon.modal_footer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `has_three_buttons` (`:boolean`) - `true` if this modal footer has more than two buttons. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_footer_button`

Modal footer button.

Renders the Carbon `modal footer button` web component.

## Example

```heex
<Carbon.modal_footer_button>
  ...
</Carbon.modal_footer_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_header`

Modal header.

Renders the Carbon `modal header` web component.

## Example

```heex
<Carbon.modal_header>
  ...
</Carbon.modal_header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_heading`

Modal heading.

Renders the Carbon `modal heading` web component.

## Example

```heex
<Carbon.modal_heading>
  ...
</Carbon.modal_heading>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `id` (`:string`) - The unique identifier for this heading element Carbon default: `"`${prefix}--modal-heading--id-${Math.random().toString(16).slice(2)}`"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `modal_label`

Modal label.

Renders the Carbon `modal label` web component.

## Example

```heex
<Carbon.modal_label>
  ...
</Carbon.modal_label>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `id` (`:string`) - The unique identifier for this label element Carbon default: `"`${prefix}--modal-label--id-${Math.random().toString(16).slice(2)}`"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `multi_select`

Multi select.

Renders the Carbon `multi select` web component.

## Example

```heex
<Carbon.multi_select id="my-multi-select" on_beingselected="my_event">
  ...
</Carbon.multi_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingselected` - The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_selected` - The custom event fired after a multi select item is selected upon a user gesture.
  * `on_beingtoggled` - The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_toggled` - The custom event fired after the open state of this multi select is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `filterable` (`:any`) - . Defaults to `nil`.
* `autocomplete` (`:string`) - The native `autocomplete` attribute for the filterable input. Carbon default: `"off"`. Defaults to `nil`.
* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `""`. Defaults to `nil`.
* `clear_selection_description` (`:string`) - Specify the text that should be read for screen readers that describes total items selected Carbon default: `"Total items selected: "`. Defaults to `nil`.
* `clear_selection_text` (`:string`) - Specify the text that should be read for screen readers to clear selection. Carbon default: `"To clear selection, press Delete or Backspace."`. Defaults to `nil`.
* `locale` (`:string`) - Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control. Carbon default: `"en"`. Defaults to `nil`.
* `select_all` (`:boolean`) - Enables rendering of a “Select all” multi-select-item Carbon default: `false`. Defaults to `nil`.
* `selection_feedback` (`:any`) - Specify feedback (mode) of the selection. `top`: selected item jumps to top `fixed`: selected item stays at it's position `top-after-reopen`: selected item jump to top after reopen dropdown Carbon default: `"top-after-reopen"`. Must be one of `"fixed"`, `"top"`, or `"top-after-reopen"`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_beingselected` (`:string`) - LiveView event name, sent when the component emits its "multi select beingselected" event. The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "multi select selected" event. The custom event fired after a multi select item is selected upon a user gesture. Defaults to `nil`.
* `on_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "multi select beingtoggled" event. The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_toggled` (`:string`) - LiveView event name, sent when the component emits its "multi select toggled" event. The custom event fired after the open state of this multi select is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `multi_select_item`

Multi select item.

Renders the Carbon `multi select item` web component.

## Example

```heex
<Carbon.multi_select_item>
  ...
</Carbon.multi_select_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `filtered` (`:any`) - The property to hide when item is filtered from input. Defaults to `nil`.
* `is_select_all` (`:boolean`) - Marks this item as the “select all” item. Carbon default: `false`. Defaults to `nil`.
* `indeterminate` (`:boolean`) - When `true`, renders the checkbox in its indeterminate state. Carbon default: `false`. Defaults to `nil`.
* `selection_name` (`:string`) - The `name` attribute for the `<input>` for selection. Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `value` (`:string`) - The `value` attribute that is set to the parent `Carbon.dropdown` when this dropdown item is selected. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `notification`

Notification.

Renders the Carbon `notification` web component.

## Example

```heex
<Carbon.notification id="my-notification" on_dismiss="my_event">
  ...
</Carbon.notification>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_dismiss` - The custom event is fired when the notification is closed by a user gesture.

## Attributes

* `type` (`:any`) - Sets the type of notification to display: 'error', 'warning', 'success', or 'informational'. Must be one of `"error"`, `"warning"`, `"success"`, or `"informational"`.
* `timestamp` (`:any`) - Sets the timestamp for the notification, typically used to indicate when it was received Type: `Date | undefined`. Defaults to `nil`.
* `on_dismiss` (`:string`) - LiveView event name, sent when the component emits its "notification dismiss" event. The custom event is fired when the notification is closed by a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `notification_footer`

Notification Footer.

Renders the Carbon `notification footer` web component.

## Example

```heex
<Carbon.notification_footer id="my-notification-footer" on_notification_view_all="my_event">
  ...
</Carbon.notification_footer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_notification_view_all` - The custom event is fired when a user clicks on View All button.
  * `on_notification_settings` - The custom event is fired when User clicks on settings button.

## Attributes

* `view_all_label` (`:string`) - Label for View All Text Carbon default: `"View All"`. Defaults to `nil`.
* `on_notification_view_all` (`:string`) - LiveView event name, sent when the component emits its "notification view all" event. The custom event is fired when a user clicks on View All button. Defaults to `nil`.
* `on_notification_settings` (`:string`) - LiveView event name, sent when the component emits its "notification settings" event. The custom event is fired when User clicks on settings button. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `notification_panel`

NotificationPanel.

Renders the Carbon `notification panel` web component.

## Example

```heex
<Carbon.notification_panel id="my-notification-panel" on_beingclosed="my_event">
  ...
</Carbon.notification_panel>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - The custom event before notification-panel is closed.
  * `on_notification_dismiss_all` - The custom event fired after notification-panel is closed upon a user gesture.
  * `on_notification_donot_disturb_change` - The custom event fired after notification-panel is closed upon a user gesture.
  * `on_notification_click_outside` - The custom event fired after user clicks outside the panel or Esc key is pressed.

## Attributes

* `title_text` (`:any`) - Sets the Title for the Notification panel. Defaults to `nil`.
* `today_text` (`:any`) - Sets the Today text for the Notification panel. Defaults to `nil`.
* `previous_text` (`:any`) - Sets the Previous section title for the Notification panel. Defaults to `nil`.
* `open` (`:boolean`) - Determines whether the notifications panel should render or not Carbon default: `false`. Defaults to `nil`.
* `dismiss_all_label` (`:any`) - Sets the label text for the "Dismiss all" button in the Notification panel. Defaults to `nil`.
* `empty_state_label` (`:any`) - Sets the empty state label text when there are no notifications. Defaults to `nil`.
* `donot_disturb_label` (`:any`) - Sets the label text for the "Do Not Disturb" toggle in the Notification panel. Defaults to `nil`.
* `trigger_button_ref` (`:any`) - Reference to the trigger button Type: `HTMLElement | undefined`. Defaults to `nil`.
* `date_time_locale` (`:any`) - The language for each notification's time stamp. Used with `dateTimeStyle`. Defaults to `nil`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "notification panel beingclosed" event. The custom event before notification-panel is closed. Defaults to `nil`.
* `on_notification_dismiss_all` (`:string`) - LiveView event name, sent when the component emits its "notification dismiss all" event. The custom event fired after notification-panel is closed upon a user gesture. Defaults to `nil`.
* `on_notification_donot_disturb_change` (`:string`) - LiveView event name, sent when the component emits its "notification donot disturb change" event. The custom event fired after notification-panel is closed upon a user gesture. Defaults to `nil`.
* `on_notification_click_outside` (`:string`) - LiveView event name, sent when the component emits its "notification click outside" event. The custom event fired after user clicks outside the panel or Esc key is pressed. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `number_input`

Number input.

Renders the Carbon `number input` web component.

## Example

```heex
<Carbon.number_input id="my-number-input" on_number_input="my_event">
  ...
</Carbon.number_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_number_input` - The name of the custom event fired after the value is changed upon a user gesture.

## Attributes

* `min` (`:string`) - The minimum value allowed in the input. Defaults to `nil`.
* `max` (`:string`) - The maximum value allowed in the input. Defaults to `nil`.
* `step` (`:string`) - The amount the value should increase or decrease by. Defaults to `nil`.
* `icon_description` (`:string`) - Provide a description for up/down icons that can be read by screen readers Carbon default: `""`. Defaults to `nil`.
* `increment_button_assistive_text` (`:string`) - Aria text for the button that increments the value Carbon default: `"increase number input"`. Defaults to `nil`.
* `decrement_button_assistive_text` (`:string`) - Aria text for the button that decrements the value Carbon default: `"decrease number input"`. Defaults to `nil`.
* `hide_steppers` (`:boolean`) - Specify whether you want the steppers to be hidden Carbon default: `false`. Defaults to `nil`.
* `allow_empty` (`:boolean`) - `true` to allow empty string. Carbon default: `false`. Defaults to `nil`.
* `default_value` (`:string`) - Optional starting value for uncontrolled state Carbon default: `""`. Defaults to `nil`.
* `disable_wheel` (`:boolean`) - Specify if the wheel functionality for the input should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `locale` (`:string`) - **Experimental:** Specify a BCP47 language code for parsing and formatting. Use with `type="text"`, has no effect when `type="number"`. Carbon default: `"en-US"`. Defaults to `nil`.
* `format_options` (`:any`) - **Experimental:** Specify Intl.NumberFormat options applied to internal number parsing and formatting. Use with `type="text"`, has no effect when `type="number"`. Type: `NumberFormatOptions`. Carbon default: `{}`. Defaults to `nil`.
* `input_mode` (`:any`) - Instruct the browser which keyboard to display on mobile devices. Carbon default: `"decimal"`. Must be one of `"text"`, `"none"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, or `"search"`.
* `step_start_value` (`:any`) - Provide the value stepping should begin at when the input is empty Carbon default: `0`. Defaults to `nil`.
* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - When type="text", provide an optional pattern to restrict user input. Carbon default: `"[0-9]*"`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Set to true to use the fluid variant. Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - **Experimental**: Specify if the input should be of type text or number. Use type="text" with `locale`, `formatOptions`, and guide user input with `pattern` and `inputMode`. Carbon default: `"number"`. Must be one of `"number"`, or `"text"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Override value setter to handle formatting for type="text". Defaults to `nil`.
* `on_number_input` (`:string`) - LiveView event name, sent when the component emits its "number input" event. The name of the custom event fired after the value is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `operational_tag`

Operational tag.

Renders the Carbon `operational tag` web component.

## Example

```heex
<Carbon.operational_tag id="my-operational-tag" on_beforeselected="my_event">
  ...
</Carbon.operational_tag>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beforeselected` - The custom event fired as the element is being selected
  * `on_selected` - The custom event fired after the element has been selected

## Attributes

* `disabled` (`:boolean`) - `true` if the tag should be disabled Carbon default: `false`. Defaults to `nil`.
* `selected` (`:boolean`) - Specify the state of the selectable tag. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The size of the tag. Carbon default: `"md"`. Must be one of `"lg"`, `"md"`, or `"sm"`.
* `text` (`:string`) - Provide text to be rendered inside of a the tag. Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - The type of the tag. Carbon default: `"gray"`. Must be one of `"red"`, `"magenta"`, `"purple"`, `"blue"`, `"cyan"`, `"teal"`, `"green"`, `"gray"`, `"cool-gray"`, or `"warm-gray"`.
* `on_beforeselected` (`:string`) - LiveView event name, sent when the component emits its "operational tag beforeselected" event. The custom event fired as the element is being selected. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "operational tag selected" event. The custom event fired after the element has been selected. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `options_tile`

OptionsTile.

Renders the Carbon `options tile` web component.

## Example

```heex
<Carbon.options_tile id="my-options-tile" on_open="my_event">
  ...
</Carbon.options_tile>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_open` - Custom event fired when tile is opened
  * `on_close` - Custom event fired when tile is closed

## Attributes

* `default_open` (`:any`) - Determines if the tile is open by default Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Determines the size of the header Carbon default: `"lg"`. Must be one of `"lg"`, or `"xl"`.
* `title_id` (`:string`) - ID for the title Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Text for the title Carbon default: `""`. Defaults to `nil`.
* `locked` (`:any`) - Whether the OptionsTile is in locked validation state. Carbon default: `false`. Defaults to `nil`.
* `locked_text` (`:any`) - Provide a text explaining why the OptionsTile is in locked state. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:any`) - Whether the OptionsTile is in warning validation state. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:any`) - Provide a text explaining why the OptionsTile is in warning state. Carbon default: `""`. Defaults to `nil`.
* `on_open` (`:string`) - LiveView event name, sent when the component emits its "options tile open" event. Custom event fired when tile is opened. Defaults to `nil`.
* `on_close` (`:string`) - LiveView event name, sent when the component emits its "options tile close" event. Custom event fired when tile is closed. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `ordered_list`

Ordered list.

Renders the Carbon `ordered list` web component.

## Example

```heex
<Carbon.ordered_list>
  ...
</Carbon.ordered_list>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `native` (`:boolean`) - Specify whether the ordered list should use native list styles instead of custom counter Carbon default: `false`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - `true` if expressive theme enabled. Carbon default: `false`. Defaults to `nil`.
* `nested` (`:boolean`) - Specify whether the list is nested, or not Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `overflow_menu`

Overflow menu.

Renders the Carbon `overflow menu` web component.

## Example

```heex
<Carbon.overflow_menu>
  ...
</Carbon.overflow_menu>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `data_table` (`:boolean`) - `true` if this tooltip is in a data table row Carbon default: `false`. Defaults to `nil`.
* `enable_v12_overflowmenu` (`:boolean`) - Enables the menu-composition OverflowMenu implementation leveraging `Carbon.menu`. Carbon default: `false`. Defaults to `nil`.
* `flipped` (`:boolean`) - `true` if this overflow menu body should be flipped. Carbon default: `false`. Defaults to `nil`.
* `index` (`:any`) - Index (starting at 1) of overflow menu item to focus on open. Carbon default: `1`. Defaults to `nil`.
* `label` (`:string`) - A label describing the menu options. Used for the trigger tooltip and the menu's accessible label. Carbon default: `""`. Defaults to `nil`.
* `menu_alignment` (`:string`) - Specify how the menu should align with the trigger button. Valid values: 'bottom-start', 'bottom-end', 'top-start', 'top-end' Carbon default: `"bottom-start"`. Defaults to `nil`.
* `toolbar_action` (`:boolean`) - `true` if this menu is a toolbar action Carbon default: `false`. Defaults to `nil`.
* `breadcrumb` (`:boolean`) - `true` if this overflow menu use inside breadcrumb. Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `align` (`:string`) - Checks if a badge indicator is being used with incorrect properties Carbon default: `"top"`. Defaults to `nil`.
* `autoalign` (`:any`) - Experimental property. Enables automatic menu placement flipping to avoid clipping. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Determines whether the tooltip should close when inner content is activated (click, Enter or Space) Carbon default: `true`. Defaults to `nil`.
* `default_open` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `enter_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before displaying the tooltip Carbon default: `100`. Defaults to `nil`.
* `leave_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before hiding the tooltip Carbon default: `100`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this overflow menu should be disabled. Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Overflow menu size. Carbon default: `"undefined"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `overflow_menu_body`

Overflow menu body.

Renders the Carbon `overflow menu body` web component.

## Example

```heex
<Carbon.overflow_menu_body>
  ...
</Carbon.overflow_menu_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - The overflow menu size. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `direction` (`:any`) - The menu direction. Carbon default: `"bottom"`. Must be one of `"top"`, `"bottom"`, `"left"`, or `"right"`.
* `flipped` (`:boolean`) - How the menu is aligned to the trigger button. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `overflow_menu_item`

Overflow menu item.

Renders the Carbon `overflow menu item` web component.

## Example

```heex
<Carbon.overflow_menu_item id="my-overflow-menu-item" on_clicked="my_event">
  ...
</Carbon.overflow_menu_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_clicked` - The custom event fired when an overflow menu item is clicked.

## Attributes

* `danger` (`:boolean`) - `true` if the action is danger. Carbon default: `false`. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger over flow menu item variant Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the overflow menu item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `divider` (`:boolean`) - `true` if the item has a divider Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - The link href of the overflow menu item. Carbon default: `""`. Defaults to `nil`.
* `size` (`:any`) - The size of the overflow menu item. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `on_clicked` (`:string`) - LiveView event name, sent when the component emits its "overflow menu item clicked" event. The custom event fired when an overflow menu item is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header`

Page header.

Renders the Carbon `page header` web component.

## Example

```heex
<Carbon.page_header>
  ...
</Carbon.page_header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_actions_set`

The page header actions set component.

Renders the Carbon `page header actions set` web component.

## Example

```heex
<Carbon.page_header_actions_set>
  ...
</Carbon.page_header_actions_set>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `actions_data` (`:any`) - The list of page action labels for overflow menu. Type: `PageAction[]`. Carbon default: `[]`. Defaults to `nil`.
* `toolbar_aria_label` (`:string`) - Aria label for the toolbar container (`role="toolbar"`). Carbon default: `"Page actions"`. Defaults to `nil`.
* `overflow_aria_label` (`:string`) - Aria label for the overflow menu button. Carbon default: `"More page actions"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_breadcrumb`

Page header Breadcrumb Bar.

Renders the Carbon `page header breadcrumb` web component.

## Example

```heex
<Carbon.page_header_breadcrumb>
  ...
</Carbon.page_header_breadcrumb>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `border` (`:boolean`) - Specify if breadcrumb bar has bottom border. Carbon default: `true`. Defaults to `nil`.
* `within_grid` (`:boolean`) - Set to `true` if the breadcrumb bar is sitting within a grid (ie. when used in tandem with page-header-hero-image) Carbon default: `false`. Defaults to `nil`.
* `page_actions_flush` (`:boolean`) - Set to `true` if page actions should be flush (no padding) Carbon default: `false`. Defaults to `nil`.
* `content_actions_flush` (`:boolean`) - Set to `true` if content actions should be flush (no padding) Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_breadcrumbs_set`

The page header breadcrumbs set component.

Renders the Carbon `page header breadcrumbs set` web component.

## Example

```heex
<Carbon.page_header_breadcrumbs_set>
  ...
</Carbon.page_header_breadcrumbs_set>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `breadcrumbs_data` (`:any`) - The list of breadcrumbs. Type: `Breadcrumb[]`. Carbon default: `[]`. Defaults to `nil`.
* `title` (`:string`) - The page title to display in the title breadcrumb. Carbon default: `""`. Defaults to `nil`.
* `breadcrumb_aria_label` (`:string`) - Aria label for the breadcrumb navigation. Carbon default: `"breadcrumbs"`. Defaults to `nil`.
* `overflow_aria_label` (`:string`) - Aria label for the breadcrumb overflow menu button. Carbon default: `"More breadcrumbs"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_content`

Page header content.

Renders the Carbon `page header content` web component.

## Example

```heex
<Carbon.page_header_content>
  ...
</Carbon.page_header_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `title` (`:string`) - Title text of the page-header-content Carbon default: `""`. Defaults to `nil`.
* `within_grid` (`:boolean`) - Set to `true` if the breadcrumb bar is sitting within a grid (ie. when used in tandem with page-header-hero-image) Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_content_text`

Page header Content Text.

Renders the Carbon `page header content text` web component.

## Example

```heex
<Carbon.page_header_content_text>
  ...
</Carbon.page_header_content_text>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `subtitle` (`:string`) - Subtitle text of the page-header-content Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_hero_image`

Page header Hero Image.

Renders the Carbon `page header hero image` web component.

## Example

```heex
<Carbon.page_header_hero_image>
  ...
</Carbon.page_header_hero_image>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_scroller`

Page header Scroller button

Renders the Carbon `page header scroller` web component.

## Example

```heex
<Carbon.page_header_scroller>
  ...
</Carbon.page_header_scroller>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:string`) - Specify how the trigger should align with the tooltip Carbon default: `"top"`. Defaults to `nil`.
* `autoalign` (`:boolean`) - Specify whether auto-align is enabled Carbon default: `true`. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Determines whether the tooltip should close when inner content is activated (click, Enter or Space) Carbon default: `true`. Defaults to `nil`.
* `collapse_text` (`:string`) - Specify the collapse text for the scroller button Carbon default: `"Collapse"`. Defaults to `nil`.
* `default_open` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `enter_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before displaying the tooltip Carbon default: `100`. Defaults to `nil`.
* `expand_text` (`:string`) - Specify the expand text for the scroller button Carbon default: `"Expand"`. Defaults to `nil`.
* `leave_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before hiding the tooltip Carbon default: `300`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:string`) - Specify the size of the Button. Defaults to `md`. Carbon default: `"md"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_tabs`

Page header Tabs Bar.

Renders the Carbon `page header tabs` web component.

## Example

```heex
<Carbon.page_header_tabs>
  ...
</Carbon.page_header_tabs>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_tags_set`

The page header tags set component.

Renders the Carbon `page header tags set` web component.

## Example

```heex
<Carbon.page_header_tags_set>
  ...
</Carbon.page_header_tags_set>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `tags_data` (`:any`) - Type: `TagType[]`. Carbon default: `[]`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `page_header_title_breadcrumb`

Page header Title Breadcrumb

Renders the Carbon `page header title breadcrumb` web component.

## Example

```heex
<Carbon.page_header_title_breadcrumb>
  ...
</Carbon.page_header_title_breadcrumb>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `pagination`

Pagination UI.

Renders the Carbon `pagination` web component.

## Example

```heex
<Carbon.pagination id="my-pagination" on_changed_current="my_event">
  ...
</Carbon.pagination>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed_current` - The custom event fired after the current page is changed from `Carbon.pages_select`.
  * `on_page_sizes_select_changed` - The custom event fired after the number of rows per page is changed from `Carbon.page_sizes_select`.

## Attributes

* `backward_text` (`:string`) - The assistive text for the button to go to previous page. Carbon default: `"Previous page"`. Defaults to `nil`.
* `backward_text_tooltip_position` (`:any`) - Specify the position of the tooltip for the backward button. Can be one of: top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `page` (`:any`) - The current page Carbon default: `1`. Defaults to `nil`.
* `is_last_page` (`:boolean`) - `true` to explicitly state that user is at the last page. Defaults to `nil`.
* `items_per_page_text` (`:string`) - The translatable text indicating the number of items per page. Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the pagination UI should be disabled. Carbon default: `false`. Defaults to `nil`.
* `forward_text` (`:string`) - The assistive text for the button to go to next page. Carbon default: `"Next page"`. Defaults to `nil`.
* `forward_text_tooltip_position` (`:any`) - Specify the position of the tooltip for the forward button. Can be one of: top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `page_input_disabled` (`:boolean`) - true if the select box to change the page should be disabled. Carbon default: `false`. Defaults to `nil`.
* `page_size` (`:any`) - Number of items per page. Carbon default: `10`. Defaults to `nil`.
* `page_size_input_disabled` (`:any`) - true if the select box to change the items per page should be disabled. Defaults to `nil`.
* `page_size_label_text` (`:string`) - The label text for the UI to select page size. Defaults to `nil`.
* `pages_unknown` (`:boolean`) - true if the total number of items is unknown. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the Pagination. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `start` (`:any`) - The row number where current page start with, index that starts with zero. Carbon default: `0`. Defaults to `nil`.
* `total_items` (`:any`) - The number of total items. Defaults to `nil`.
* `total_pages` (`:any`) - The number of total pages. Carbon default: `1`. Defaults to `nil`.
* `on_changed_current` (`:string`) - LiveView event name, sent when the component emits its "pagination changed current" event. The custom event fired after the current page is changed from `Carbon.pages_select`. Defaults to `nil`.
* `on_page_sizes_select_changed` (`:string`) - LiveView event name, sent when the component emits its "page sizes select changed" event. The custom event fired after the number of rows per page is changed from `Carbon.page_sizes_select`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `pagination_nav`

Pagination Navigation.

Renders the Carbon `pagination nav` web component.

## Example

```heex
<Carbon.pagination_nav id="my-pagination-nav" on_page_changed="my_event">
  ...
</Carbon.pagination_nav>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_page_changed` - The custom event fired when the the page has been changed.

## Attributes

* `items_shown` (`:any`) - The number of items to be shown (minimum of 4 unless props.items < 4). Carbon default: `10`. Defaults to `nil`.
* `loop` (`:boolean`) - Whether user should be able to loop through the items when reaching first / last. Carbon default: `false`. Defaults to `nil`.
* `page` (`:any`) - The index of current page. Carbon default: `0`. Defaults to `nil`.
* `total_items` (`:any`) - The total number of items. Carbon default: `1`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the PaginationNav. Carbon default: `"lg"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip for the icon-only next/prev buttons. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_position` (`:any`) - Specify the position of the tooltip for the icon-only next/prev buttons. Can be one of: top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `disable_overflow` (`:any`) - If true, the '...' pagination overflow will not render page links between the first and last rendered buttons. Set this to true if you are having performance problems with large data sets. Defaults to `nil`.
* `on_page_changed` (`:string`) - LiveView event name, sent when the component emits its "page changed" event. The custom event fired when the the page has been changed. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `password_input`

Password Input element. Supports all the usual attributes for textual input types

Renders the Carbon `password input` web component.

## Example

```heex
<Carbon.password_input>
  ...
</Carbon.password_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the input against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Set to true to use the fluid version. Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"end"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The native `<input>` type. Defaults to “password”. Carbon default: `"password"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `password_input_skeleton`

The password input skeleton component.

Renders the Carbon `password input skeleton` web component.

## Example

```heex
<Carbon.password_input_skeleton>
  ...
</Carbon.password_input_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `popover`

Popover.

Renders the Carbon `popover` web component.

## Example

```heex
<Carbon.popover id="my-popover" on_beingclosed="my_event">
  ...
</Carbon.popover>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - before the popover closes via focusout/outsideclick.
  * `on_closed` - when the popover closes via focusout/outsideclick

## Attributes

* `align` (`:string`) - Specify direction of alignment Carbon default: `""`. Defaults to `nil`.
* `alignment_axis_offset` (`:any`) - **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `caret` (`:boolean`) - Carbon default: `true`. Defaults to `nil`.
* `drop_shadow` (`:boolean`) - Specify whether a dropShadow should be rendered Carbon default: `true`. Defaults to `nil`.
* `border` (`:boolean`) - Specify whether a border should be rendered on the popover Carbon default: `false`. Defaults to `nil`.
* `high_contrast` (`:boolean`) - Render the component using the high-contrast variant Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - Specify whether the component is currently open or closed Carbon default: `false`. Defaults to `nil`.
* `tab_tip` (`:boolean`) - Render the component using the tab tip variant Carbon default: `false`. Defaults to `nil`.
* `background_token` (`:any`) - Specify the background token to use. Default is 'layer'. Carbon default: `"layer"`. Must be one of `"layer"`, or `"background"`.
* `autoalign_boundary` (`:any`) - Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. Takes one of the following: 'clippingAncestors', '#elementid', '#elementid_1, #elementid_2', 'rect(x, y, width, height)' This prop is currently experimental and is subject to future changes. Defaults to `nil`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "popover beingclosed" event. before the popover closes via focusout/outsideclick. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "popover closed" event. when the popover closes via focusout/outsideclick. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `popover_content`

Popover.

Renders the Carbon `popover content` web component.

## Example

```heex
<Carbon.popover_content>
  ...
</Carbon.popover_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:string`) - Specify the popover alignment Carbon default: `""`. Defaults to `nil`.
* `autoalign` (`:boolean`) - Specify whether auto-align is enabled Carbon default: `false`. Defaults to `nil`.
* `caret` (`:any`) - Specify whether a caret should be rendered. Defaults to `nil`.
* `drop_shadow` (`:boolean`) - Specify whether a dropShadow should be rendered Carbon default: `true`. Defaults to `nil`.
* `border` (`:boolean`) - Specify whether a border should be rendered on the popover Carbon default: `false`. Defaults to `nil`.
* `high_contrast` (`:boolean`) - Render the component using the high-contrast variant Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - Specify whether the component is currently open or closed Carbon default: `false`. Defaults to `nil`.
* `tab_tip` (`:boolean`) - Render the component using the tab tip variant Carbon default: `false`. Defaults to `nil`.
* `background_token` (`:any`) - Specify the background token to use. Default is 'layer'. Carbon default: `"layer"`. Must be one of `"layer"`, or `"background"`.
* `slot` (`:string`) - The shadow slot this popover content should be in. Carbon default: `"content"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_checkbox`

A form-associated v3 preview of `Carbon.checkbox`.

Identical to `Carbon.checkbox` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview checkbox` web component.

## Example

```heex
<Carbon.preview_checkbox id="my-preview-checkbox" on_checkbox_changed="my_event">
  ...
</Carbon.preview_checkbox>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_checkbox_changed` - The custom event fired after this checkbox changes its checked state

## Attributes

* `checked` (`:boolean`) - Specify whether the underlying input should be checked Carbon default: `false`. Defaults to `nil`.
* `data_table` (`:boolean`) - Specify if checkbox is being used in a data table Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Checkbox should be disabled Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:any`) - Provide text for the form group for additional help. Defaults to `nil`.
* `hide_checkbox` (`:boolean`) - Specify whether the checkbox should be present in the DOM, but invisible and uninteractable. Used for data-table purposes. Carbon default: `false`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - Specify a custom id for the checkbox Carbon default: `"checkbox"`. Defaults to `nil`.
* `indeterminate` (`:boolean`) - Specify whether the Checkbox is in an indeterminate state Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - Provide a label to provide a description of the Checkbox input that you are exposing to the user Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify whether the Checkbox is read-only Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the Checkbox is currently invalid Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:any`) - Provide the text that is displayed when the Checkbox is in an invalid state. Defaults to `nil`.
* `title` (`:string`) - Specify a title for the node for the Checkbox Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the Checkbox is in a warning state. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:boolean`) - Provide the text displayed when the Checkbox is in a warning state. Carbon default: `false`. Defaults to `nil`.
* `default_checked` (`:any`) - Specify whether the underlying input should be checked by default. Defaults to `nil`.
* `on_checkbox_changed` (`:string`) - LiveView event name, sent when the component emits its "checkbox changed" event. The custom event fired after this checkbox changes its checked state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_combo_box`

A form-associated preview of `Carbon.combo_box`.

Identical to `Carbon.combo_box` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

v2 `Carbon.combo_box_item` children work unchanged — only the container
participates in the form.

Renders the Carbon `preview combo box` web component.

## Example

```heex
<Carbon.preview_combo_box id="my-preview-combo-box" on_combo_box_beingselected="my_event">
  ...
</Carbon.preview_combo_box>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_combo_box_beingselected` - The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_combo_box_beingtoggled` - The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_combo_box_selected` - The custom event fired after a combo box item is selected upon a user gesture.
  * `on_combo_box_toggled` - The custom event fired after the open state of this combo box is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `"Clear selection"`. Defaults to `nil`.
* `input_label` (`:string`) - The `aria-label` attribute for the `<input>` for filtering. Carbon default: `""`. Defaults to `nil`.
* `should_filter_item` (`:any`) - Provide custom filtering behavior. This attribute will be ignored if `typeahead` is enabled and will default to `true` Type: `boolean | ShouldFilterItem`. Carbon default: `false`. Defaults to `nil`.
* `typeahead` (`:boolean`) - **Experimental**: will enable autocomplete and typeahead for the input field. Carbon default: `false`. Defaults to `nil`.
* `allow_custom_value` (`:boolean`) - `true` to allow custom values that do not match any item in the list. Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_combo_box_beingselected` (`:string`) - LiveView event name, sent when the component emits its "combo box beingselected" event. The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_combo_box_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "combo box beingtoggled" event. The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_combo_box_selected` (`:string`) - LiveView event name, sent when the component emits its "combo box selected" event. The custom event fired after a combo box item is selected upon a user gesture. Defaults to `nil`.
* `on_combo_box_toggled` (`:string`) - LiveView event name, sent when the component emits its "combo box toggled" event. The custom event fired after the open state of this combo box is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_date_picker`

Date picker.

Renders the Carbon `preview date picker` web component.

## Example

```heex
<Carbon.preview_date_picker id="my-preview-date-picker" on_changed="my_event">
  ...
</Carbon.preview_date_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired when the date selection changes.
  * `on_error` - The custom event fired when an error occurs.

## Attributes

* `allow_input` (`:boolean`) - Allows the user to enter a date directly into the input field Carbon default: `true`. Defaults to `nil`.
* `close_on_select` (`:boolean`) - Controls whether the calendar dropdown closes upon selection. Carbon default: `true`. Defaults to `nil`.
* `date_format` (`:string`) - The date format. Defaults to `nil`.
* `locale` (`:string`) - BCP 47 locale tag used to localize the calendar's month and weekday labels. Carbon default: `"en"`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `max_date` (`:string`) - The maximum date that a user can start picking from. Defaults to `nil`.
* `min_date` (`:string`) - The minimum date that a user can start picking from. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the date picker should be open. Carbon default: `false`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "preview date picker changed" event. The custom event fired when the date selection changes. Defaults to `nil`.
* `on_error` (`:string`) - LiveView event name, sent when the component emits its "preview date picker error" event. The custom event fired when an error occurs. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_date_picker_calendar`

Calendar renderer for date picker.
Replaces Flatpickr's calendar UI with a lightweight, framework-agnostic implementation.

Renders the Carbon `preview date picker calendar` web component.

## Example

```heex
<Carbon.preview_date_picker_calendar id="my-preview-date-picker-calendar" on_date_select="my_event">
  ...
</Carbon.preview_date_picker_calendar>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_date_select` - Fired when a date is selected
  * `on_month_change` - Fired when the month changes

## Attributes

* `selected_dates` (`:any`) - The selected date(s) Type: `Temporal.PlainDate[]`. Carbon default: `[]`. Defaults to `nil`.
* `view_date` (`:any`) - The view date from the state machine (used to sync calendar month). Defaults to `nil`.
* `focused_date` (`:any`) - The focused date for keyboard navigation. Defaults to `nil`.
* `min_date` (`:any`) - The minimum selectable date. Defaults to `nil`.
* `max_date` (`:any`) - The maximum selectable date. Defaults to `nil`.
* `range_mode` (`:boolean`) - Whether range selection is enabled Carbon default: `false`. Defaults to `nil`.
* `date_format` (`:string`) - The date format for display Carbon default: `"m/d/Y"`. Defaults to `nil`.
* `locale` (`:string`) - Locale for date formatting Carbon default: `"en-US"`. Defaults to `nil`.
* `on_date_select` (`:string`) - LiveView event name, sent when the component emits its "preview date picker calendar date select" event. Fired when a date is selected. Defaults to `nil`.
* `on_month_change` (`:string`) - LiveView event name, sent when the component emits its "preview date picker calendar month change" event. Fired when the month changes. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_date_picker_input`

The input box for date picker.

Renders the Carbon `preview date picker input` web component.

## Example

```heex
<Carbon.preview_date_picker_input>
  ...
</Carbon.preview_date_picker_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `disabled` (`:boolean`) - `true` if the check box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `hide_label` (`:boolean`) - `true` if the label should be hidden. Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Controls the invalid state and visibility of the `validityMessage`. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `kind` (`:any`) - Date picker input kind. Carbon default: `"simple"`. Must be one of `"simple"`, `"single"`, `"from"`, or `"to"`.
* `label_text` (`:string`) - The label text. Defaults to `nil`.
* `pattern` (`:string`) - The `pattern` attribute for the `<input>` in the shadow DOM. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `short` (`:boolean`) - true to use the short version. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Vertical size of this date picker input. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `type` (`:string`) - The `type` attribute for the `<input>` in the shadow DOM. Defaults to `nil`.
* `value` (`:string`) - The value. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_dropdown`

A form-associated v3 preview of `Carbon.dropdown`.

Identical to `Carbon.dropdown` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

v2 `Carbon.dropdown_item` children work unchanged — only the container
participates in the form.

Renders the Carbon `preview dropdown` web component.

## Example

```heex
<Carbon.preview_dropdown id="my-preview-dropdown" on_dropdown_beingselected="my_event">
  ...
</Carbon.preview_dropdown>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_combo_box`

A form-associated preview of `Carbon.fluid_combo_box`.

Identical to `Carbon.fluid_combo_box` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview fluid combo box` web component.

## Example

```heex
<Carbon.preview_fluid_combo_box id="my-preview-fluid-combo-box" on_combo_box_beingselected="my_event">
  ...
</Carbon.preview_fluid_combo_box>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_combo_box_beingselected` - The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_combo_box_beingtoggled` - The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_combo_box_selected` - The custom event fired after a combo box item is selected upon a user gesture.
  * `on_combo_box_toggled` - The custom event fired after the open state of this combo box is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `is_condensed` (`:boolean`) - Specify if the combo box should render its menu items in condensed mode. Carbon default: `false`. Defaults to `nil`.
* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `"Clear selection"`. Defaults to `nil`.
* `input_label` (`:string`) - The `aria-label` attribute for the `<input>` for filtering. Carbon default: `""`. Defaults to `nil`.
* `should_filter_item` (`:any`) - Provide custom filtering behavior. This attribute will be ignored if `typeahead` is enabled and will default to `true` Type: `boolean | ShouldFilterItem`. Carbon default: `false`. Defaults to `nil`.
* `typeahead` (`:boolean`) - **Experimental**: will enable autocomplete and typeahead for the input field. Carbon default: `false`. Defaults to `nil`.
* `allow_custom_value` (`:boolean`) - `true` to allow custom values that do not match any item in the list. Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_combo_box_beingselected` (`:string`) - LiveView event name, sent when the component emits its "combo box beingselected" event. The custom event fired before a combo box item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_combo_box_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "combo box beingtoggled" event. The custom event fired before the open state of this combo box is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_combo_box_selected` (`:string`) - LiveView event name, sent when the component emits its "combo box selected" event. The custom event fired after a combo box item is selected upon a user gesture. Defaults to `nil`.
* `on_combo_box_toggled` (`:string`) - LiveView event name, sent when the component emits its "combo box toggled" event. The custom event fired after the open state of this combo box is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_date_picker`

A form-associated preview of `Carbon.fluid_date_picker`.

Identical to `Carbon.fluid_date_picker` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

For a range, `value` is a single `start/end` string, as in v2.

Renders the Carbon `preview fluid date picker` web component.

## Example

```heex
<Carbon.preview_fluid_date_picker id="my-preview-fluid-date-picker" on_date_picker_changed="my_event">
  ...
</Carbon.preview_fluid_date_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_date_picker_changed` - The custom event fired on this element when Flatpickr updates its value.
  * `on_date_picker_flatpickr_error` - The name of the custom event when Flatpickr throws an error.

## Attributes

* `allow_input` (`:boolean`) - flatpickr prop passthrough. Allows the user to enter a date directly into the input field Carbon default: `true`. Defaults to `nil`.
* `close_on_select` (`:boolean`) - flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection. Carbon default: `true`. Defaults to `nil`.
* `date_format` (`:string`) - The date format to let Flatpickr use. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enabled_range` (`:string`) - The date range that a user can pick in calendar dropdown. Defaults to `nil`.
* `max_date` (`:string`) - The maximum date that a user can start picking from. Defaults to `nil`.
* `min_date` (`:string`) - The minimum date that a user can start picking from. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the date picker should be open. Carbon default: `false`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates. Defaults to `nil`.
* `on_date_picker_changed` (`:string`) - LiveView event name, sent when the component emits its "date picker changed" event. The custom event fired on this element when Flatpickr updates its value. Defaults to `nil`.
* `on_date_picker_flatpickr_error` (`:string`) - LiveView event name, sent when the component emits its "date picker flatpickr error" event. The name of the custom event when Flatpickr throws an error. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_dropdown`

A form-associated preview of `Carbon.fluid_dropdown`.

Identical to `Carbon.fluid_dropdown` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview fluid dropdown` web component.

## Example

```heex
<Carbon.preview_fluid_dropdown id="my-preview-fluid-dropdown" on_dropdown_beingselected="my_event">
  ...
</Carbon.preview_fluid_dropdown>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `is_condensed` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_multi_select`

A form-associated preview of `Carbon.fluid_multi_select`.

Identical to `Carbon.fluid_multi_select` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Submits the same joined `value` string the v2 component does, so the wire
format is unchanged.

Renders the Carbon `preview fluid multi select` web component.

## Example

```heex
<Carbon.preview_fluid_multi_select id="my-preview-fluid-multi-select" on_multi_select_beingselected="my_event">
  ...
</Carbon.preview_fluid_multi_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_multi_select_beingselected` - The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_multi_select_selected` - The custom event fired after a multi select item is selected upon a user gesture.
  * `on_multi_select_beingtoggled` - The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_multi_select_toggled` - The custom event fired after the open state of this multi select is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `is_condensed` (`:boolean`) - Specify if the `FluidMultiSelect` should render its menu items in condensed mode Carbon default: `false`. Defaults to `nil`.
* `filterable` (`:any`) - . Defaults to `nil`.
* `autocomplete` (`:string`) - The native `autocomplete` attribute for the filterable input. Carbon default: `"off"`. Defaults to `nil`.
* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `""`. Defaults to `nil`.
* `clear_selection_description` (`:string`) - Specify the text that should be read for screen readers that describes total items selected Carbon default: `"Total items selected: "`. Defaults to `nil`.
* `clear_selection_text` (`:string`) - Specify the text that should be read for screen readers to clear selection. Carbon default: `"To clear selection, press Delete or Backspace."`. Defaults to `nil`.
* `locale` (`:string`) - Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control. Carbon default: `"en"`. Defaults to `nil`.
* `select_all` (`:boolean`) - Enables rendering of a “Select all” multi-select-item Carbon default: `false`. Defaults to `nil`.
* `selection_feedback` (`:any`) - Specify feedback (mode) of the selection. `top`: selected item jumps to top `fixed`: selected item stays at it's position `top-after-reopen`: selected item jump to top after reopen dropdown Carbon default: `"top-after-reopen"`. Must be one of `"fixed"`, `"top"`, or `"top-after-reopen"`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_multi_select_beingselected` (`:string`) - LiveView event name, sent when the component emits its "multi select beingselected" event. The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_multi_select_selected` (`:string`) - LiveView event name, sent when the component emits its "multi select selected" event. The custom event fired after a multi select item is selected upon a user gesture. Defaults to `nil`.
* `on_multi_select_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "multi select beingtoggled" event. The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_multi_select_toggled` (`:string`) - LiveView event name, sent when the component emits its "multi select toggled" event. The custom event fired after the open state of this multi select is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_search`

A form-associated preview of `Carbon.fluid_search`.

Identical to `Carbon.fluid_search` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview fluid search` web component.

## Example

```heex
<Carbon.preview_fluid_search id="my-preview-fluid-search" on_search_input="my_event">
  ...
</Carbon.preview_fluid_search>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_search_input` - The custom event fired after the search content is changed upon a user gesture.

## Attributes

* `autocomplete` (`:string`) - Specify an optional value for the autocomplete property on the underlying <input>, defaults to "off" Carbon default: `"off"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `close_button_label_text` (`:string`) - Specify a label to be read by screen readers on the "close" button Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the search box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `expandable` (`:boolean`) - `true` if the search bar can be expandable Carbon default: `false`. Defaults to `nil`.
* `expanded` (`:boolean`) - `true` if the expandable search has been expanded Carbon default: `false`. Defaults to `nil`.
* `has_custom_icon` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name in `FormData`. Carbon default: `""`. Defaults to `nil`.
* `role` (`:string`) - Specify the role for the underlying <input>, defaults to searchbox Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Carbon default: `"Search"`. Defaults to `nil`.
* `size` (`:any`) - The search box size. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - The `<input>` name. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Carbon default: `""`. Defaults to `nil`.
* `on_search_input` (`:string`) - LiveView event name, sent when the component emits its "search input" event. The custom event fired after the search content is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_select`

A form-associated preview of `Carbon.fluid_select`.

Identical to `Carbon.fluid_select` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview fluid select` web component.

## Example

```heex
<Carbon.preview_fluid_select id="my-preview-fluid-select" on_select_selected="my_event">
  ...
</Carbon.preview_fluid_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_select_selected` - The name of the custom event fired after an item is selected.

## Attributes

* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the select to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the select Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - ID to link the `label` and `select` Carbon default: `"select"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:boolean`) - Specify if the currently value is warn. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Message which is displayed if the value is warn. Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `label_styles_disable` (`:boolean`) - Specify if you want to disable the default label styling Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - Specify whether you want the inline version of this control Carbon default: `false`. Defaults to `nil`.
* `multiple` (`:boolean`) - `true` to enable multiple selection. Defaults to `nil`.
* `name` (`:string`) - Name for the select in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the select against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the select has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Controls the readonly state of the select Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `selected_index` (`:any`) - The selected index. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `value` (`:string`) - The value of the text area. Carbon default: `""`. Defaults to `nil`.
* `on_select_selected` (`:string`) - LiveView event name, sent when the component emits its "select selected" event. The name of the custom event fired after an item is selected. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_text_input`

A form-associated preview of `Carbon.fluid_text_input`.

Identical to `Carbon.fluid_text_input` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview fluid text input` web component.

## Example

```heex
<Carbon.preview_fluid_text_input>
  ...
</Carbon.preview_fluid_text_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the input against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The type of the input. Can be one of the types listed in the INPUT_TYPE enum Carbon default: `"text"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_fluid_time_picker`

A form-associated preview of `Carbon.fluid_time_picker`.

Identical to `Carbon.fluid_time_picker` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview fluid time picker` web component.

## Example

```heex
<Carbon.preview_fluid_time_picker>
  ...
</Carbon.preview_fluid_time_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - Specify whether the control is disabled Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Provide the text that is displayed when the control is in an invalid state Carbon default: `"Invalid time format."`. Defaults to `nil`.
* `warning` (`:boolean`) - Specify whether the control is in warning state Carbon default: `false`. Defaults to `nil`.
* `warning_text` (`:string`) - Provide the text that is displayed when the control is in a warning state Carbon default: `"Warning message."`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in FormData Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - Provide label text to be read by screen readers Carbon default: `"Select a time"`. Defaults to `nil`.
* `placeholder` (`:string`) - Placeholder text for the input Carbon default: `"hh:mm"`. Defaults to `nil`.
* `read_only` (`:boolean`) - Specify whether the control should be read-only Carbon default: `false`. Defaults to `nil`.
* `max_length` (`:any`) - Specify the maximum length of the input value Carbon default: `5`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern for input validation Carbon default: `"(1[012]|[1-9]):[0-5][0-9](\\s)?"`. Defaults to `nil`.
* `size` (`:any`) - Size of the time picker Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - Input type Carbon default: `"text"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the control is currently invalid Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Whether the input is required Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - Custom message for required validation Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - Validity message Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_multi_select`

A form-associated v3 preview of `Carbon.multi_select`.

Identical to `Carbon.multi_select` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Submits the same joined `value` string the v2 component does, so the
wire format is unchanged. Emitting one entry per selection would be a
deliberate API change and is tracked in the migration guide.

Renders the Carbon `preview multi select` web component.

## Example

```heex
<Carbon.preview_multi_select id="my-preview-multi-select" on_multi_select_beingselected="my_event">
  ...
</Carbon.preview_multi_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_multi_select_beingselected` - The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_multi_select_selected` - The custom event fired after a multi select item is selected upon a user gesture.
  * `on_multi_select_beingtoggled` - The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_multi_select_toggled` - The custom event fired after the open state of this multi select is toggled upon a user gesture.
  * `on_dropdown_beingselected` - The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_dropdown_beingtoggled` - The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling.
  * `on_dropdown_selected` - The custom event fired after a dropdown item is selected upon a user gesture.
  * `on_dropdown_toggled` - The custom event fired after the open state of this dropdown is toggled upon a user gesture.

## Attributes

* `filterable` (`:any`) - . Defaults to `nil`.
* `autocomplete` (`:string`) - The native `autocomplete` attribute for the filterable input. Carbon default: `"off"`. Defaults to `nil`.
* `clear_selection_label` (`:string`) - The `aria-label` attribute for the icon to clear selection. Carbon default: `""`. Defaults to `nil`.
* `clear_selection_description` (`:string`) - Specify the text that should be read for screen readers that describes total items selected Carbon default: `"Total items selected: "`. Defaults to `nil`.
* `clear_selection_text` (`:string`) - Specify the text that should be read for screen readers to clear selection. Carbon default: `"To clear selection, press Delete or Backspace."`. Defaults to `nil`.
* `locale` (`:string`) - Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control. Carbon default: `"en"`. Defaults to `nil`.
* `select_all` (`:boolean`) - Enables rendering of a “Select all” multi-select-item Carbon default: `false`. Defaults to `nil`.
* `selection_feedback` (`:any`) - Specify feedback (mode) of the selection. `top`: selected item jumps to top `fixed`: selected item stays at it's position `top-after-reopen`: selected item jump to top after reopen dropdown Carbon default: `"top-after-reopen"`. Must be one of `"fixed"`, `"top"`, or `"top-after-reopen"`.
* `aria_label` (`:string`) - 'aria-label' of the ListBox component. Specify a label to be read by screen readers on the container node Carbon default: `""`. Defaults to `nil`.
* `direction` (`:any`) - Specify the direction of the dropdown. Can be either top or bottom. Carbon default: `"bottom"`. Must be one of `"top"`, or `"bottom"`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this dropdown should be disabled. Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the title text should be hidden or not Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `title_text` (`:string`) - Provide the title text that will be read by a screen reader when visiting this control Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the dropdown in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if this dropdown should be open. Carbon default: `false`. Defaults to `nil`.
* `read_only` (`:boolean`) - Whether or not the Dropdown is readonly Carbon default: `false`. Defaults to `nil`.
* `is_fluid` (`:boolean`) - Specify whether the dropdown is fluid or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Dropdown size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `toggle_label_closed` (`:string`) - The `aria-label` attribute for the UI indicating the closed state. Carbon default: `""`. Defaults to `nil`.
* `toggle_label_open` (`:string`) - The `aria-label` attribute for the UI indicating the open state. Carbon default: `""`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - `true` if this dropdown should use the inline UI variant. Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - `true` to show the UI of the invalid state. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the value is required. Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `on_multi_select_beingselected` (`:string`) - LiveView event name, sent when the component emits its "multi select beingselected" event. The custom event fired before a multi select item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_multi_select_selected` (`:string`) - LiveView event name, sent when the component emits its "multi select selected" event. The custom event fired after a multi select item is selected upon a user gesture. Defaults to `nil`.
* `on_multi_select_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "multi select beingtoggled" event. The custom event fired before the open state of this multi select is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_multi_select_toggled` (`:string`) - LiveView event name, sent when the component emits its "multi select toggled" event. The custom event fired after the open state of this multi select is toggled upon a user gesture. Defaults to `nil`.
* `on_dropdown_beingselected` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingselected" event. The custom event fired before a dropdown item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_dropdown_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown beingtoggled" event. The custom event fired before the open state of this dropdown is toggled upon a user gesture. Cancellation of this event stops the user-initiated toggling. Defaults to `nil`.
* `on_dropdown_selected` (`:string`) - LiveView event name, sent when the component emits its "dropdown selected" event. The custom event fired after a dropdown item is selected upon a user gesture. Defaults to `nil`.
* `on_dropdown_toggled` (`:string`) - LiveView event name, sent when the component emits its "dropdown toggled" event. The custom event fired after the open state of this dropdown is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_number_input`

A form-associated v3 preview of `Carbon.number_input`.

Identical to `Carbon.number_input` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview number input` web component.

## Example

```heex
<Carbon.preview_number_input id="my-preview-number-input" on_number_input="my_event">
  ...
</Carbon.preview_number_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_number_input` - The name of the custom event fired after the value is changed upon a user gesture.

## Attributes

* `min` (`:string`) - The minimum value allowed in the input. Defaults to `nil`.
* `max` (`:string`) - The maximum value allowed in the input. Defaults to `nil`.
* `step` (`:string`) - The amount the value should increase or decrease by. Defaults to `nil`.
* `icon_description` (`:string`) - Provide a description for up/down icons that can be read by screen readers Carbon default: `""`. Defaults to `nil`.
* `increment_button_assistive_text` (`:string`) - Aria text for the button that increments the value Carbon default: `"increase number input"`. Defaults to `nil`.
* `decrement_button_assistive_text` (`:string`) - Aria text for the button that decrements the value Carbon default: `"decrease number input"`. Defaults to `nil`.
* `hide_steppers` (`:boolean`) - Specify whether you want the steppers to be hidden Carbon default: `false`. Defaults to `nil`.
* `allow_empty` (`:boolean`) - `true` to allow empty string. Carbon default: `false`. Defaults to `nil`.
* `default_value` (`:string`) - Optional starting value for uncontrolled state Carbon default: `""`. Defaults to `nil`.
* `disable_wheel` (`:boolean`) - Specify if the wheel functionality for the input should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `locale` (`:string`) - **Experimental:** Specify a BCP47 language code for parsing and formatting. Use with `type="text"`, has no effect when `type="number"`. Carbon default: `"en-US"`. Defaults to `nil`.
* `format_options` (`:any`) - **Experimental:** Specify Intl.NumberFormat options applied to internal number parsing and formatting. Use with `type="text"`, has no effect when `type="number"`. Type: `NumberFormatOptions`. Carbon default: `{}`. Defaults to `nil`.
* `input_mode` (`:any`) - Instruct the browser which keyboard to display on mobile devices. Carbon default: `"decimal"`. Must be one of `"text"`, `"none"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, or `"search"`.
* `step_start_value` (`:any`) - Provide the value stepping should begin at when the input is empty Carbon default: `0`. Defaults to `nil`.
* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - When type="text", provide an optional pattern to restrict user input. Carbon default: `"[0-9]*"`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Set to true to use the fluid variant. Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - **Experimental**: Specify if the input should be of type text or number. Use type="text" with `locale`, `formatOptions`, and guide user input with `pattern` and `inputMode`. Carbon default: `"number"`. Must be one of `"number"`, or `"text"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Override value setter to handle formatting for type="text". Defaults to `nil`.
* `on_number_input` (`:string`) - LiveView event name, sent when the component emits its "number input" event. The name of the custom event fired after the value is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_password_input`

A form-associated v3 preview of `Carbon.password_input`.

Identical to `Carbon.password_input` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview password input` web component.

## Example

```heex
<Carbon.preview_password_input>
  ...
</Carbon.preview_password_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the input against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Set to true to use the fluid version. Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"end"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The native `<input>` type. Defaults to “password”. Carbon default: `"password"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_radio_button_group`

A form-associated v3 preview of `Carbon.radio_button_group`.

Identical to `Carbon.radio_button_group` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

v2 `Carbon.radio_button` children work unchanged.

Renders the Carbon `preview radio button group` web component.

## Example

```heex
<Carbon.preview_radio_button_group id="my-preview-radio-button-group" on_radio_button_group_changed="my_event">
  ...
</Carbon.preview_radio_button_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_radio_button_group_changed` - The custom event fired after this radio button group changes its selected item.
  * `on_radio_button_changed` - The name of the custom event fired after a radio button changes its checked state.

## Attributes

* `default_selected` (`:string`) - The `value` attribute for the `<input>` for selection. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the radio button group should be disabled. Carbon default: `false`. Defaults to `nil`.
* `label_position` (`:any`) - The label position. Carbon default: `"right"`. Must be one of `"left"`, or `"right"`.
* `legend_text` (`:string`) - The label position. Carbon default: `""`. Defaults to `nil`.
* `helper_text` (`:any`) - The helper text. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The `name` attribute for the `<input>` for selection. Defaults to `nil`.
* `orientation` (`:any`) - The orientation to lay out radio buttons. Carbon default: `"horizontal"`. Must be one of `"horizontal"`, or `"vertical"`.
* `read_only` (`:boolean`) - Controls the readonly state of the radio button group. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` to specify if input selection in group is required. Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The `value` attribute for the `<input>` for selection. Defaults to `nil`.
* `on_radio_button_group_changed` (`:string`) - LiveView event name, sent when the component emits its "radio button group changed" event. The custom event fired after this radio button group changes its selected item. Defaults to `nil`.
* `on_radio_button_changed` (`:string`) - LiveView event name, sent when the component emits its "radio button changed" event. The name of the custom event fired after a radio button changes its checked state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_search`

A form-associated v3 preview of `Carbon.search`.

Identical to `Carbon.search` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview search` web component.

## Example

```heex
<Carbon.preview_search id="my-preview-search" on_search_input="my_event">
  ...
</Carbon.preview_search>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_search_input` - The custom event fired after the search content is changed upon a user gesture.

## Attributes

* `autocomplete` (`:string`) - Specify an optional value for the autocomplete property on the underlying <input>, defaults to "off" Carbon default: `"off"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `close_button_label_text` (`:string`) - Specify a label to be read by screen readers on the "close" button Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the search box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `expandable` (`:boolean`) - `true` if the search bar can be expandable Carbon default: `false`. Defaults to `nil`.
* `expanded` (`:boolean`) - `true` if the expandable search has been expanded Carbon default: `false`. Defaults to `nil`.
* `has_custom_icon` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name in `FormData`. Carbon default: `""`. Defaults to `nil`.
* `role` (`:string`) - Specify the role for the underlying <input>, defaults to searchbox Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Carbon default: `"Search"`. Defaults to `nil`.
* `size` (`:any`) - The search box size. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - The `<input>` name. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Carbon default: `""`. Defaults to `nil`.
* `on_search_input` (`:string`) - LiveView event name, sent when the component emits its "search input" event. The custom event fired after the search content is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_select`

A form-associated v3 preview of `Carbon.select`.

Identical to `Carbon.select` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview select` web component.

## Example

```heex
<Carbon.preview_select id="my-preview-select" on_select_selected="my_event">
  ...
</Carbon.preview_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_select_selected` - The name of the custom event fired after an item is selected.

## Attributes

* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the select to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the select Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - ID to link the `label` and `select` Carbon default: `"select"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:boolean`) - Specify if the currently value is warn. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Message which is displayed if the value is warn. Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `label_styles_disable` (`:boolean`) - Specify if you want to disable the default label styling Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - Specify whether you want the inline version of this control Carbon default: `false`. Defaults to `nil`.
* `multiple` (`:boolean`) - `true` to enable multiple selection. Defaults to `nil`.
* `name` (`:string`) - Name for the select in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the select against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the select has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Controls the readonly state of the select Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `selected_index` (`:any`) - The selected index. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `value` (`:string`) - The value of the text area. Carbon default: `""`. Defaults to `nil`.
* `on_select_selected` (`:string`) - LiveView event name, sent when the component emits its "select selected" event. The name of the custom event fired after an item is selected. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_slider`

A form-associated v3 preview of `Carbon.slider`.

Identical to `Carbon.slider` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Unlike the v2 component, a slider with no `value` submits no entry
rather than the string `"undefined"`.

Renders the Carbon `preview slider` web component.

## Example

```heex
<Carbon.preview_slider id="my-preview-slider" on_slider_input_changed="my_event">
  ...
</Carbon.preview_slider>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_slider_input_changed` - The name of the custom event fired after the value is changed in `Carbon.slider_input` by user gesture.
  * `on_slider_changed` - The custom event fired after the value is changed by user gesture.

## Attributes

* `value_upper` (`:any`) - The upper bound when there are two handles.. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the check box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - true to specify if the control is required. Carbon default: `false`. Defaults to `nil`.
* `readonly` (`:boolean`) - Whether the slider should be read-only Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `max_label` (`:string`) - The label associated with the maximum value. Carbon default: `""`. Defaults to `nil`.
* `min_label` (`:string`) - The label associated with the minimum value. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `max` (`:string`) - The maximum value. Defaults to `nil`.
* `min` (`:string`) - The minimum value. Defaults to `nil`.
* `name` (`:string`) - The form name. Defaults to `nil`.
* `invalid` (`:boolean`) - true to specify if the control is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:boolean`) - true to specify if the control should display warn icon and text. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_text_input` (`:boolean`) - Checks whether the input field is hidden or not Carbon default: `false`. Defaults to `nil`.
* `step` (`:string`) - The snapping step of the value. Defaults to `nil`.
* `step_multiplier` (`:string`) - A value determining how much the value should increase/decrease by Shift+arrow keys, which will be `(max - min) / stepMultiplier`. Defaults to `nil`.
* `value` (`:any`) - The value. Defaults to `nil`.
* `is_valid` (`:any`) - is slide input valid. Defaults to `nil`.
* `on_slider_input_changed` (`:string`) - LiveView event name, sent when the component emits its "slider input changed" event. The name of the custom event fired after the value is changed in `Carbon.slider_input` by user gesture. Defaults to `nil`.
* `on_slider_changed` (`:string`) - LiveView event name, sent when the component emits its "slider changed" event. The custom event fired after the value is changed by user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_text_input`

A form-associated v3 preview of `Carbon.text_input`.

Identical to `Carbon.text_input` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview text input` web component.

## Example

```heex
<Carbon.preview_text_input>
  ...
</Carbon.preview_text_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the input against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The type of the input. Can be one of the types listed in the INPUT_TYPE enum Carbon default: `"text"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_textarea`

A form-associated v3 preview of `Carbon.textarea`.

Identical to `Carbon.textarea` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview textarea` web component.

## Example

```heex
<Carbon.preview_textarea>
  ...
</Carbon.preview_textarea>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `cols` (`:any`) - The number of columns for the textarea to show by default. Defaults to `nil`.
* `counter_mode` (`:any`) - Specify the method used for calculating the counter number Carbon default: `"character"`. Must be one of `"character"`, or `"word"`.
* `id` (`:string`) - ID to link the `label` and `textarea` Carbon default: `""`. Defaults to `nil`.
* `rows` (`:any`) - The number of rows for the textarea to show by default Carbon default: `4`. Defaults to `nil`.
* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the textarea against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The type of the input. Can be one of the types listed in the INPUT_TYPE enum Carbon default: `"text"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_time_picker`

A form-associated preview of `Carbon.time_picker`.

Identical to `Carbon.time_picker` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

A `Carbon.time_picker_select` inside it is a separate form control that
submits its own entry, as in v2.

Renders the Carbon `preview time picker` web component.

## Example

```heex
<Carbon.preview_time_picker>
  ...
</Carbon.preview_time_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - Specify whether the control is disabled Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Provide the text that is displayed when the control is in an invalid state Carbon default: `"Invalid time format."`. Defaults to `nil`.
* `warning` (`:boolean`) - Specify whether the control is in warning state Carbon default: `false`. Defaults to `nil`.
* `warning_text` (`:string`) - Provide the text that is displayed when the control is in a warning state Carbon default: `"Warning message."`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in FormData Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - Provide label text to be read by screen readers Carbon default: `"Select a time"`. Defaults to `nil`.
* `placeholder` (`:string`) - Placeholder text for the input Carbon default: `"hh:mm"`. Defaults to `nil`.
* `read_only` (`:boolean`) - Specify whether the control should be read-only Carbon default: `false`. Defaults to `nil`.
* `max_length` (`:any`) - Specify the maximum length of the input value Carbon default: `5`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern for input validation Carbon default: `"(1[012]|[1-9]):[0-5][0-9](\\s)?"`. Defaults to `nil`.
* `size` (`:any`) - Size of the time picker Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - Input type Carbon default: `"text"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the control is currently invalid Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Whether the input is required Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - Custom message for required validation Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - Validity message Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `preview_time_picker_select`

A form-associated preview of `Carbon.time_picker_select`.

Identical to `Carbon.time_picker_select` in markup, styling and events. The only
difference is that it participates in its form natively through
`ElementInternals` instead of the deprecated `formdata` event, so
`<label for>`, `form.elements`, `form.reset()` and `<fieldset disabled>` all
work as they do for a native control.

Renders the Carbon `preview time picker select` web component.

## Example

```heex
<Carbon.preview_time_picker_select>
  ...
</Carbon.preview_time_picker_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `aria_label` (`:string`) - The ARIA label for the UI control. Carbon default: `"open list of options"`. Defaults to `nil`.
* `default_value` (`:string`) - Optionally provide the default value of the select Carbon default: `""`. Defaults to `nil`.
* `read_only` (`:boolean`) - Controls the readOnly state of the select Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the control is disabled Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - Specify a custom id for the select box Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the select in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the select. Carbon default: `""`. Defaults to `nil`.
* `size` (`:any`) - Size of the time picker select Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `progress_bar`

Progress bar.

Renders the Carbon `progress bar` web component.

## Example

```heex
<Carbon.progress_bar>
  ...
</Carbon.progress_bar>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `helper_text` (`:any`) - The current progress as a textual representation. Defaults to `nil`.
* `hide_label` (`:any`) - Whether the label should be visually hidden. Defaults to `nil`.
* `label` (`:any`) - A label describing the progress bar. Defaults to `nil`.
* `max` (`:any`) - The maximum value. Carbon default: `100`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the ProgressBar. Carbon default: `"big"`. Must be one of `"small"`, or `"big"`.
* `status` (`:any`) - Specify the status. Carbon default: `"active"`. Must be one of `"active"`, `"finished"`, or `"error"`.
* `type` (`:any`) - Defines the alignment variant of the progress bar. Carbon default: `"default"`. Must be one of `"default"`, `"inline"`, or `"indented"`.
* `value` (`:any`) - The current value. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `progress_indicator`

Progress indicator.

Renders the Carbon `progress indicator` web component.

## Example

```heex
<Carbon.progress_indicator>
  ...
</Carbon.progress_indicator>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `vertical` (`:boolean`) - Determines whether or not the progress indicator should be rendered vertically. Carbon default: `false`. Defaults to `nil`.
* `space_equally` (`:boolean`) - Specify whether the progress steps should be split equally in size in the container (horizontal only). Carbon default: `false`. Defaults to `nil`.
* `current_index` (`:any`) - Optionally specify the current step array index. Carbon default: `0`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `progress_step`

Progress step.

Renders the Carbon `progress step` web component.

## Example

```heex
<Carbon.progress_step>
  ...
</Carbon.progress_step>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` if the progress step should be disabled. Carbon default: `false`. Defaults to `nil`.
* `icon_label` (`:string`) - The a11y text for the icon. Defaults to `nil`.
* `description` (`:string`) - . Defaults to `nil`.
* `label` (`:string`) - . Defaults to `nil`.
* `secondary_label_text` (`:string`) - The secondary progress label. Defaults to `nil`.
* `secondary_label` (`:string`) - . Defaults to `nil`.
* `state` (`:any`) - The progress state. Carbon default: `"incomplete"`. Must be one of `"complete"`, `"current"`, `"incomplete"`, or `"invalid"`.
* `clickable` (`:boolean`) - Set by the parent indicator. If true, the step is interactive unless it is current or disabled. This mirrors React's "onChange prop exists" semantics. Carbon default: `false`. Defaults to `nil`.
* `complete` (`:boolean`) - Specify whether the step has been completed Carbon default: `false`. Defaults to `nil`.
* `current` (`:boolean`) - Specify whether the step is the current step Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the step is invalid Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `radio_button`

Radio button.

Renders the Carbon `radio button` web component.

## Example

```heex
<Carbon.radio_button id="my-radio-button" on_changed="my_event">
  ...
</Carbon.radio_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired after this radio button changes its checked state.

## Attributes

* `checked` (`:boolean`) - `true` if this radio button should be checked. Carbon default: `false`. Defaults to `nil`.
* `data_table` (`:boolean`) - `true` if the radio button is used in a data table Carbon default: `false`. Defaults to `nil`.
* `default_checked` (`:boolean`) - Specify whether the `<radio-button>` should be checked by default Carbon default: `false`. Defaults to `nil`.
* `disabled_item` (`:boolean`) - `true` if the radio button item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the radio button group should be disabled. Carbon default: `false`. Defaults to `nil`.
* `hide_label` (`:boolean`) - `true` if the label should be hidden. Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `label_position` (`:any`) - The label position. Carbon default: `"right"`. Must be one of `"left"`, or `"right"`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The `name` attribute for the `<input>` for selection. Defaults to `nil`.
* `orientation` (`:any`) - The orientation to lay out radio buttons. Carbon default: `"horizontal"`. Must be one of `"horizontal"`, or `"vertical"`.
* `read_only` (`:boolean`) - `true` if the radio button group should be disabled. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` if the radio button is required. Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The `value` attribute for the `<input>` for selection. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "radio button changed" event. The custom event fired after this radio button changes its checked state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `radio_button_group`

Radio button group.

Renders the Carbon `radio button group` web component.

## Example

```heex
<Carbon.radio_button_group id="my-radio-button-group" on_changed="my_event">
  ...
</Carbon.radio_button_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired after this radio button group changes its selected item.
  * `on_radio_button_changed` - The name of the custom event fired after a radio button changes its checked state.

## Attributes

* `default_selected` (`:string`) - The `value` attribute for the `<input>` for selection. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the radio button group should be disabled. Carbon default: `false`. Defaults to `nil`.
* `label_position` (`:any`) - The label position. Carbon default: `"right"`. Must be one of `"left"`, or `"right"`.
* `legend_text` (`:string`) - The label position. Carbon default: `""`. Defaults to `nil`.
* `helper_text` (`:any`) - The helper text. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The `name` attribute for the `<input>` for selection. Defaults to `nil`.
* `orientation` (`:any`) - The orientation to lay out radio buttons. Carbon default: `"horizontal"`. Must be one of `"horizontal"`, or `"vertical"`.
* `read_only` (`:boolean`) - Controls the readonly state of the radio button group. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - `true` to specify if input selection in group is required. Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The `value` attribute for the `<input>` for selection. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "radio button group changed" event. The custom event fired after this radio button group changes its selected item. Defaults to `nil`.
* `on_radio_button_changed` (`:string`) - LiveView event name, sent when the component emits its "radio button changed" event. The name of the custom event fired after a radio button changes its checked state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `radio_tile`

Radio tile.

Renders the Carbon `radio tile` web component.

## Example

```heex
<Carbon.radio_tile id="my-radio-tile" on_selected="my_event">
  ...
</Carbon.radio_tile>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_selected` - The name of the custom event fired after this radio tile changes its selected state.
  * `on_selectable_tile_changed` - The custom event fired after this selectable tile changes its selected state.

## Attributes

* `checkmark_label` (`:string`) - The a11y text for the checkmark icon of the selected state. Defaults to `nil`.
* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `disabled` (`:boolean`) - `true` if the selectable tile should be disabled. Carbon default: `false`. Defaults to `nil`.
* `has_rounded_corners` (`:boolean`) - Specify if the `SeletableTile` component should be rendered with rounded corners. Only valid when `ai-label` prop is present Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - . Defaults to `nil`.
* `selected` (`:boolean`) - `true` to show the selected state. Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - . Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "radio tile selected" event. The name of the custom event fired after this radio tile changes its selected state. Defaults to `nil`.
* `on_selectable_tile_changed` (`:string`) - LiveView event name, sent when the component emits its "selectable tile changed" event. The custom event fired after this selectable tile changes its selected state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `resizer_grid`

Resizer grid component for managing resizable panels.

Renders the Carbon `resizer grid` web component.

## Example

```heex
<Carbon.resizer_grid>
  ...
</Carbon.resizer_grid>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `resizer_handle`

Resizer handle component for resizing panels.

Renders the Carbon `resizer handle` web component.

## Example

```heex
<Carbon.resizer_handle>
  ...
</Carbon.resizer_handle>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `axis` (`:any`) - Resize axis — determined automatically from slot, or set explicitly. Type: `ResizerAxis`. Carbon default: `"y"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `resizer_handle_pivot`

Resizer handle pivot — corner handle that delegates drag operations to its
sibling Carbon.resizer_handle[slot="handle-horizontal"].

Renders the Carbon resizer handle pivot web component.

## Example

heex
<Carbon.resizer_handle_pivot>
  ...
</Carbon.resizer_handle_pivot>

Child content is rendered inside the component. To fill a named slot of the
component, set slot="name" on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `resizer_panel`

Resizer panel component for resizable content areas.

Renders the Carbon `resizer panel` web component.

## Example

```heex
<Carbon.resizer_panel>
  ...
</Carbon.resizer_panel>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `search`

Search box.

Renders the Carbon `search` web component.

## Example

```heex
<Carbon.search id="my-search" on_input="my_event">
  ...
</Carbon.search>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_input` - The custom event fired after the search content is changed upon a user gesture.

## Attributes

* `autocomplete` (`:string`) - Specify an optional value for the autocomplete property on the underlying <input>, defaults to "off" Carbon default: `"off"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `close_button_label_text` (`:string`) - Specify a label to be read by screen readers on the "close" button Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the search box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `expandable` (`:boolean`) - `true` if the search bar can be expandable Carbon default: `false`. Defaults to `nil`.
* `expanded` (`:boolean`) - `true` if the expandable search has been expanded Carbon default: `false`. Defaults to `nil`.
* `has_custom_icon` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name in `FormData`. Carbon default: `""`. Defaults to `nil`.
* `role` (`:string`) - Specify the role for the underlying <input>, defaults to searchbox Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Carbon default: `"Search"`. Defaults to `nil`.
* `size` (`:any`) - The search box size. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - The `<input>` name. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Carbon default: `""`. Defaults to `nil`.
* `on_input` (`:string`) - LiveView event name, sent when the component emits its "search input" event. The custom event fired after the search content is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `select`

Select box.

Renders the Carbon `select` web component.

## Example

```heex
<Carbon.select id="my-select" on_selected="my_event">
  ...
</Carbon.select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_selected` - The name of the custom event fired after an item is selected.

## Attributes

* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the select to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the select Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - ID to link the `label` and `select` Carbon default: `"select"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:boolean`) - Specify if the currently value is warn. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Message which is displayed if the value is warn. Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `label_styles_disable` (`:boolean`) - Specify if you want to disable the default label styling Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - Specify whether you want the inline version of this control Carbon default: `false`. Defaults to `nil`.
* `multiple` (`:boolean`) - `true` to enable multiple selection. Defaults to `nil`.
* `name` (`:string`) - Name for the select in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the select against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the select has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Controls the readonly state of the select Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `selected_index` (`:any`) - The selected index. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `value` (`:string`) - The value of the text area. Carbon default: `""`. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "select selected" event. The name of the custom event fired after an item is selected. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `select_item`

An option in select box.

Renders the Carbon `select item` web component.

## Example

```heex
<Carbon.select_item>
  ...
</Carbon.select_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` to disable this option. Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - The label. If this is not specified, the child text content is used. Carbon default: `""`. Defaults to `nil`.
* `selected` (`:boolean`) - `true` to select this option. Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The value. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `select_item_group`

An option group in select box.

Renders the Carbon `select item group` web component.

## Example

```heex
<Carbon.select_item_group>
  ...
</Carbon.select_item_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - `true` to disable this option. Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - The label. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `selectable_tag`

Selectable tag.

Renders the Carbon `selectable tag` web component.

## Example

```heex
<Carbon.selectable_tag id="my-selectable-tag" on_beforeselected="my_event">
  ...
</Carbon.selectable_tag>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beforeselected` - The custom event fired as the element is being selected
  * `on_selected` - The custom event fired after the element has been selected

## Attributes

* `disabled` (`:boolean`) - `true` if the tag should be disabled Carbon default: `false`. Defaults to `nil`.
* `selected` (`:boolean`) - Specify the state of the selectable tag. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The size of the tag. Carbon default: `"md"`. Must be one of `"lg"`, `"md"`, or `"sm"`.
* `text` (`:string`) - Provide text to be rendered inside of a the tag. Carbon default: `""`. Defaults to `nil`.
* `on_beforeselected` (`:string`) - LiveView event name, sent when the component emits its "selectable tag beforeselected" event. The custom event fired as the element is being selected. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "selectable tag selected" event. The custom event fired after the element has been selected. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `selectable_tile`

Multi-selectable tile.

Renders the Carbon `selectable tile` web component.

## Example

```heex
<Carbon.selectable_tile id="my-selectable-tile" on_changed="my_event">
  ...
</Carbon.selectable_tile>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired after this selectable tile changes its selected state.

## Attributes

* `checkmark_label` (`:string`) - The a11y text for the checkmark icon of the selected state. Defaults to `nil`.
* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `disabled` (`:boolean`) - `true` if the selectable tile should be disabled. Carbon default: `false`. Defaults to `nil`.
* `has_rounded_corners` (`:boolean`) - Specify if the `SeletableTile` component should be rendered with rounded corners. Only valid when `ai-label` prop is present Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - . Defaults to `nil`.
* `selected` (`:boolean`) - `true` to show the selected state. Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - . Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "selectable tile changed" event. The custom event fired after this selectable tile changes its selected state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `shape_indicator`

Shape Indicator.

Renders the Carbon `shape indicator` web component.

## Example

```heex
<Carbon.shape_indicator>
  ...
</Carbon.shape_indicator>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:any`) - Specify how the tooltip should align with the shape in compact mode Carbon default: `"right"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `autoalign` (`:any`) - Will auto-align the tooltip in compact mode. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `compact` (`:boolean`) - When true, displays only the shape with the label in a tooltip Carbon default: `false`. Defaults to `nil`.
* `shape_description` (`:any`) - Description for the shape announced to screen readers in compact mode. Defaults to `label` when not provided. Defaults to `nil`.
* `text_size` (`:any`) - Shape indicator size (12 or 14) Carbon default: `12`. Defaults to `nil`.
* `label` (`:string`) - Label next to the shape. Defaults to `nil`.
* `kind` (`:any`) - Shape Indicator kind. Must be one of `"failed"`, `"critical"`, `"high"`, `"medium"`, `"low"`, `"cautious"`, `"undefined"`, `"stable"`, `"informative"`, `"incomplete"`, or `"draft"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `side_nav`

Side nav.

Renders the Carbon `side nav` web component.

## Example

```heex
<Carbon.side_nav id="my-side-nav" on_header_menu_button_toggled="my_event">
  ...
</Carbon.side_nav>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_header_menu_button_toggled` - The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.

## Attributes

* `collapse_mode` (`:any`) - Collapse mode of the side nav. Carbon default: `"responsive"`. Must be one of `"fixed"`, `"rail"`, or `"responsive"`.
* `expanded` (`:boolean`) - `true` to expand the side nav. Carbon default: `false`. Defaults to `nil`.
* `is_not_child_of_header` (`:boolean`) - If `true` will style the side nav to sit below the header Carbon default: `false`. Defaults to `nil`.
* `is_not_persistent` (`:boolean`) - Specify if the side-nav will be persistent above the lg breakpoint Carbon default: `false`. Defaults to `nil`.
* `on_header_menu_button_toggled` (`:string`) - LiveView event name, sent when the component emits its "header menu button toggled" event. The name of the custom event fired after the header menu button in the document is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `side_nav_divider`

A divider in side nav.

Renders the Carbon `side nav divider` web component.

## Example

```heex
<Carbon.side_nav_divider>
  ...
</Carbon.side_nav_divider>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `side_nav_items`

Side nav items.

Renders the Carbon `side nav items` web component.

## Example

```heex
<Carbon.side_nav_items>
  ...
</Carbon.side_nav_items>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `side_nav_link`

Side nav menu item.

Renders the Carbon `side nav link` web component.

## Example

```heex
<Carbon.side_nav_link>
  ...
</Carbon.side_nav_link>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `active` (`:boolean`) - `true` if the menu item should be active. Carbon default: `false`. Defaults to `nil`.
* `as` (`:any`) - The element to render for the side nav link. Carbon default: `"a"`. Must be one of `"button"`, or `"a"`.
* `href` (`:string`) - Link `href`. Carbon default: `""`. Defaults to `nil`.
* `rel` (`:string`) - The link type. Defaults to `nil`.
* `target` (`:string`) - The link target. Defaults to `nil`.
* `large` (`:boolean`) - Specify if this is a large variation of the side nav link Carbon default: `false`. Defaults to `nil`.
* `title` (`:string`) - The title. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `side_nav_menu`

Side nav menu.

Renders the Carbon `side nav menu` web component.

## Example

```heex
<Carbon.side_nav_menu id="my-side-nav-menu" on_beingtoggled="my_event">
  ...
</Carbon.side_nav_menu>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingtoggled` - The name of the custom event fired before this side nav menu is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling this side nav menu.
  * `on_toggled` - The name of the custom event fired after this side nav menu is toggled upon a user gesture.

## Attributes

* `active` (`:boolean`) - `true` if the menu has active menu item. Carbon default: `false`. Defaults to `nil`.
* `expanded` (`:boolean`) - `true` if the menu should be open. Carbon default: `false`. Defaults to `nil`.
* `large` (`:boolean`) - Specify if this is a large variation of the side nav menu Carbon default: `false`. Defaults to `nil`.
* `force_collapsed` (`:boolean`) - `true` if the menu should be forced collapsed upon side nav's expanded state. Carbon default: `false`. Defaults to `nil`.
* `title` (`:string`) - The title text. Carbon default: `""`. Defaults to `nil`.
* `on_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "side nav menu beingtoggled" event. The name of the custom event fired before this side nav menu is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling this side nav menu. Defaults to `nil`.
* `on_toggled` (`:string`) - LiveView event name, sent when the component emits its "side nav menu toggled" event. The name of the custom event fired after this side nav menu is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `side_nav_menu_item`

Side nav menu item.

Renders the Carbon `side nav menu item` web component.

## Example

```heex
<Carbon.side_nav_menu_item>
  ...
</Carbon.side_nav_menu_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `active` (`:boolean`) - `true` if the menu item should be active. Carbon default: `false`. Defaults to `nil`.
* `as` (`:any`) - The element to render for the side nav menu item. Carbon default: `"a"`. Must be one of `"button"`, or `"a"`.
* `href` (`:string`) - Link `href`. Carbon default: `""`. Defaults to `nil`.
* `target` (`:string`) - Link `target`. Defaults to `nil`.
* `title` (`:string`) - The title. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `side_panel`

SidePanel.

Renders the Carbon `side panel` web component.

## Example

```heex
<Carbon.side_panel id="my-side-panel" on_beingclosed="my_event">
  ...
</Carbon.side_panel>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - The custom event fired before this side-panel is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this side-panel.
  * `on_closed` - The custom event fired after this side-panel is closed upon a user gesture.
  * `on_navigate_back` - custom event fired when clicking navigate back (available when step > 0)

## Attributes

* `animate_title` (`:boolean`) - Determines if the title will animate on scroll Carbon default: `true`. Defaults to `nil`.
* `close_icon_description` (`:string`) - Sets the close button icon description Carbon default: `"Close"`. Defaults to `nil`.
* `close_icon_tooltip_alignment` (`:string`) - Sets the close button tooltip alignment Carbon default: `"left"`. Defaults to `nil`.
* `condensed_actions` (`:boolean`) - Determines whether the side panel should render the condensed version (affects action buttons primarily) Carbon default: `false`. Defaults to `nil`.
* `current_step` (`:any`) - Sets the current step of the side panel. Defaults to `nil`.
* `include_overlay` (`:boolean`) - Determines whether the side panel should render with an overlay Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:any`) - Sets the label text which will display above the title text. Defaults to `nil`.
* `navigation_back_icon_description` (`:string`) - Sets the icon description for the navigation back icon button Carbon default: `"Back"`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the side-panel should be open. Carbon default: `false`. Defaults to `nil`.
* `placement` (`:any`) - SidePanel placement. Carbon default: `"right"`. Must be one of `"right"`, or `"left"`.
* `prevent_close_on_click_outside` (`:boolean`) - Prevent closing on click outside of side-panel Carbon default: `false`. Defaults to `nil`.
* `selector_initial_focus` (`:any`) - The initial location of focus in the side panel. Defaults to `nil`.
* `selector_page_content` (`:string`) - Selector for page content, used to push content to side except Carbon default: `""`. Defaults to `nil`.
* `hide_close_button` (`:boolean`) - Show/hide the "X" close button Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - SidePanel size. Carbon default: `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`.
* `slide_in` (`:boolean`) - Determines if this panel slides in Carbon default: `false`. Defaults to `nil`.
* `resizable` (`:boolean`) - Determines if the side panel is resizable Carbon default: `false`. Defaults to `nil`.
* `title` (`:any`) - Sets the title text. Defaults to `nil`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "side panel beingclosed" event. The custom event fired before this side-panel is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this side-panel. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "side panel closed" event. The custom event fired after this side-panel is closed upon a user gesture. Defaults to `nil`.
* `on_navigate_back` (`:string`) - LiveView event name, sent when the component emits its "side panel navigate back" event. custom event fired when clicking navigate back (available when step > 0). Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `skeleton_icon`

Skeleton icon.

Renders the Carbon `skeleton icon` web component.

## Example

```heex
<Carbon.skeleton_icon>
  ...
</Carbon.skeleton_icon>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `skeleton_placeholder`

Skeleton placeholder.

Renders the Carbon `skeleton placeholder` web component.

## Example

```heex
<Carbon.skeleton_placeholder>
  ...
</Carbon.skeleton_placeholder>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `optional_classes` (`:any`) - Specify optional classes to be added to your SkeletonText. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `skeleton_text`

Skeleton text.

Renders the Carbon `skeleton text` web component.

## Example

```heex
<Carbon.skeleton_text>
  ...
</Carbon.skeleton_text>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `optional_classes` (`:any`) - Specify optional classes to be added to your SkeletonText. Defaults to `nil`.
* `type` (`:any`) - The type of skeleton text. Carbon default: `""`. Must be one of `""`, or `"heading"`.
* `heading` (`:boolean`) - Determines if the skeleton text should be rendered as a heading. Carbon default: `false`. Defaults to `nil`.
* `width` (`:string`) - width (in px or %) of single line of text or max-width of paragraph lines Carbon default: `"100%"`. Defaults to `nil`.
* `paragraph` (`:boolean`) - will generate multiple lines of text Carbon default: `false`. Defaults to `nil`.
* `line_count` (`:any`) - the number of lines in a paragraph Carbon default: `3`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `skip_to_content`

Skip-to-content link.

Renders the Carbon `skip to content` web component.

## Example

```heex
<Carbon.skip_to_content>
  ...
</Carbon.skip_to_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `link_assistive_text` (`:string`) - The assistive text for the link, Carbon default: `"Skip to main content"`. Defaults to `nil`.
* `href` (`:any`) - The skip link href. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `slider`

Slider.

Renders the Carbon `slider` web component.

## Example

```heex
<Carbon.slider id="my-slider" on_input_changed="my_event">
  ...
</Carbon.slider>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_input_changed` - The name of the custom event fired after the value is changed in `Carbon.slider_input` by user gesture.
  * `on_changed` - The custom event fired after the value is changed by user gesture.

## Attributes

* `value_upper` (`:any`) - The upper bound when there are two handles.. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the check box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - true to specify if the control is required. Carbon default: `false`. Defaults to `nil`.
* `readonly` (`:boolean`) - Whether the slider should be read-only Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `max_label` (`:string`) - The label associated with the maximum value. Carbon default: `""`. Defaults to `nil`.
* `min_label` (`:string`) - The label associated with the minimum value. Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `max` (`:string`) - The maximum value. Defaults to `nil`.
* `min` (`:string`) - The minimum value. Defaults to `nil`.
* `name` (`:string`) - The form name. Defaults to `nil`.
* `invalid` (`:boolean`) - true to specify if the control is invalid. Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `warn` (`:boolean`) - true to specify if the control should display warn icon and text. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_text_input` (`:boolean`) - Checks whether the input field is hidden or not Carbon default: `false`. Defaults to `nil`.
* `step` (`:string`) - The snapping step of the value. Defaults to `nil`.
* `step_multiplier` (`:string`) - A value determining how much the value should increase/decrease by Shift+arrow keys, which will be `(max - min) / stepMultiplier`. Defaults to `nil`.
* `value` (`:any`) - The value. Defaults to `nil`.
* `is_valid` (`:any`) - is slide input valid. Defaults to `nil`.
* `on_input_changed` (`:string`) - LiveView event name, sent when the component emits its "slider input changed" event. The name of the custom event fired after the value is changed in `Carbon.slider_input` by user gesture. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "slider changed" event. The custom event fired after the value is changed by user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `slider_input`

The `<input>` box for slider.

Renders the Carbon `slider input` web component.

## Example

```heex
<Carbon.slider_input id="my-slider-input" on_changed="my_event">
  ...
</Carbon.slider_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired after the value is changed by user gesture.

## Attributes

* `disabled` (`:boolean`) - `true` if the input should be disabled. Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - true to specify if the control is invalid. Carbon default: `false`. Defaults to `nil`.
* `warn` (`:boolean`) - true to specify if the control should display warn icon and text. Carbon default: `false`. Defaults to `nil`.
* `hide_text_input` (`:boolean`) - true to specify if the control should display warn icon and text. Carbon default: `false`. Defaults to `nil`.
* `max` (`:string`) - The maximum value. Defaults to `nil`.
* `min` (`:string`) - The minimum value. Defaults to `nil`.
* `step` (`:string`) - The snapping step of the value. Defaults to `nil`.
* `type` (`:string`) - The type of the `<input>`. Carbon default: `"number"`. Defaults to `nil`.
* `value` (`:any`) - The value. Defaults to `nil`.
* `readonly` (`:boolean`) - true if the input should be readonly. Carbon default: `false`. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "slider input changed" event. The custom event fired after the value is changed by user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `slug`

Basic slug.

Renders the Carbon `slug` web component.

## Example

```heex
<Carbon.slug>
  ...
</Carbon.slug>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - Carbon default: `"slug"`. Defaults to `nil`.
* `ai_text` (`:string`) - Specify the correct translation of the AI text Carbon default: `"AI"`. Defaults to `nil`.
* `ai_text_label` (`:string`) - Specify additional text to be rendered next to the AI label in the inline variant Carbon default: `""`. Defaults to `nil`.
* `kind` (`:any`) - Specify the type of Slug, from the following list of types: (default, inline) Carbon default: `""`. Must be one of `""`, or `"inline"`.
* `revert_active` (`:boolean`) - Specify whether the revert button should be visible Carbon default: `false`. Defaults to `nil`.
* `revert_label` (`:string`) - Specify whether the revert button should be visible Carbon default: `"Revert to AI input"`. Defaults to `nil`.
* `size` (`:any`) - Slug size should be mini, 2xs, xs, sm, md, lg, xl. Carbon default: `"xs"`. Must be one of `"mini"`, `"2xs"`, `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `slug_label` (`:string`) - Specify the text that will be provided to the aria-label of the `Slug` button Carbon default: `"Show information"`. Defaults to `nil`.
* `previous_value` (`:any`) - . Defaults to `nil`.
* `alignment` (`:any`) - How the tooltip is aligned to the trigger button. Carbon default: `"top"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `alignment_axis_offset` (`:any`) - **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled. Carbon default: `0`. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `button_label` (`:string`) - The label for the toggle button Carbon default: `"Show information"`. Defaults to `nil`.
* `open` (`:boolean`) - Set whether toggletip is open Carbon default: `false`. Defaults to `nil`.
* `default_open` (`:boolean`) - Set whether toggletip is open by default. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `slug_action_button`

Slug action button.

Renders the Carbon `slug action button` web component.

## Example

```heex
<Carbon.slug_action_button>
  ...
</Carbon.slug_action_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - The shadow slot this slug-action should be in. Carbon default: `"actions"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `stack`

The Stack component is a useful layout utility in a component-based model.
This allows components to not use margin and instead delegate the
responsibility of positioning and layout to parent components.

In the case of the Stack component, it uses the spacing scale from the
Design Language in order to determine how much space there should be between
items rendered by the Stack component. It also supports a custom `gap` prop
which will allow a user to provide a custom value for the gap of the layout.

This component supports both horizontal and vertical orientations.

Renders the Carbon `stack` web component.

## Example

```heex
<Carbon.stack>
  ...
</Carbon.stack>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `orientation` (`:any`) - Specify the orientation of them items in the Stack Carbon default: `"vertical"`. Must be one of `"vertical"`, or `"horizontal"`.
* `gap` (`:any`) - Provide either a custom value or a step from the spacing scale to be used as the gap in the layout. Defaults to `nil`.
* `use_custom_gap_value` (`:boolean`) - Turn on when passing in custom value to 'gap' attribute (ie. gap="2rem") Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `structured_list`

Structured list wrapper.

Renders the Carbon `structured list` web component.

## Example

```heex
<Carbon.structured_list>
  ...
</Carbon.structured_list>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `selection_name` (`:string`) - The `name` attribute for the `<input>` for selection. If present, this structured list will be a selectable one. Carbon default: `""`. Defaults to `nil`.
* `condensed` (`:boolean`) - Specify if structured list is condensed, default is false Carbon default: `false`. Defaults to `nil`.
* `flush` (`:boolean`) - Specify if structured list is flush, default is false Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `structured_list_body`

Structured list body.

Renders the Carbon `structured list body` web component.

## Example

```heex
<Carbon.structured_list_body>
  ...
</Carbon.structured_list_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `structured_list_cell`

Structured list cell.

Renders the Carbon `structured list cell` web component.

## Example

```heex
<Carbon.structured_list_cell>
  ...
</Carbon.structured_list_cell>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `structured_list_head`

Structured list header.

Renders the Carbon `structured list head` web component.

## Example

```heex
<Carbon.structured_list_head>
  ...
</Carbon.structured_list_head>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `structured_list_header_cell`

Structured list header cell.

Renders the Carbon `structured list header cell` web component.

## Example

```heex
<Carbon.structured_list_header_cell>
  ...
</Carbon.structured_list_header_cell>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `structured_list_header_row`

Structured list header row.

Renders the Carbon `structured list header row` web component.

## Example

```heex
<Carbon.structured_list_header_row>
  ...
</Carbon.structured_list_header_row>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `selection_name` (`:string`) - The `name` attribute for the `<input>` for selection. If present, this structured list header row will show its selectable version of the UI. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `structured_list_row`

Structured list row.

Renders the Carbon `structured list row` web component.

## Example

```heex
<Carbon.structured_list_row>
  ...
</Carbon.structured_list_row>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `selected` (`:boolean`) - `true` if this structured list row should be selectable and selected. Carbon default: `false`. Defaults to `nil`.
* `selection_name` (`:string`) - The `name` attribute for the `<input>` for selection. If present, this structured list row will be a selectable one. Carbon default: `""`. Defaults to `nil`.
* `selection_value` (`:string`) - The `value` attribute for the `<input>` for selection. Carbon default: `""`. Defaults to `nil`.
* `selection_icon_title` (`:string`) - The content to put into the `<title>` attribute of the selection icon. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `switcher`

Switcher

Renders the Carbon `switcher` web component.

## Example

```heex
<Carbon.switcher>
  ...
</Carbon.switcher>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `aria_label` (`:any`) - Required props for accessibility label on the underlying menu. Defaults to `nil`.
* `aria_labelledby` (`:any`) - Prop for accessibility labelled by on the underlying menu. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `switcher_divider`

A divider in switcher.

Renders the Carbon `switcher divider` web component.

## Example

```heex
<Carbon.switcher_divider>
  ...
</Carbon.switcher_divider>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `switcher_item`

Switcher menu item.

Renders the Carbon `switcher item` web component.

## Example

```heex
<Carbon.switcher_item>
  ...
</Carbon.switcher_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `aria_label` (`:any`) - Required props for accessibility label. Defaults to `nil`.
* `aria_labelledby` (`:any`) - Props for accessibility labelled by. Defaults to `nil`.
* `href` (`:string`) - Link `href`. Carbon default: `""`. Defaults to `nil`.
* `selected` (`:boolean`) - Specify if this is a large variation of the side nav link Carbon default: `false`. Defaults to `nil`.
* `tab_index` (`:any`) - Specify if this is a large variation of the side nav link Carbon default: `0`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tab`

Basic tab.

Renders the Carbon `tab` web component.

## Example

```heex
<Carbon.tab id="my-tab" on_beingclosed="my_event">
  ...
</Carbon.tab>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - The custom event fired before a tab is closed upon a user gesture. Cancellation of this event stops changing the user-initiated action.
  * `on_closed` - The custom event fired after a a tab is closed upon a user gesture.

## Attributes

* `type` (`:any`) - Tab type. Carbon default: `""`. Must be one of `""`, `"container"`, or `"contained"`.
* `vertical` (`:boolean`) - `true` if the tab is in vertical orientation. This is automatically set by the parent `Carbon.tabs` when it's in vertical mode. Carbon default: `false`. Defaults to `nil`.
* `icon_only` (`:boolean`) - `true` if this tab is icon-only. Carbon default: `false`. Defaults to `nil`.
* `icon_size` (`:any`) - Specify the icon size used by icon-only tabs. Must be one of `"default"`, or `"lg"`.
* `tab_title` (`:any`) - The tab text content. Defaults to `nil`.
* `secondary_label` (`:any`) - An optional label to render under the primary tab label. Only useful for contained tabs. Defaults to `nil`.
* `badge_indicator` (`:boolean`) - **Experimental**: Display an empty dot badge on the Tab. Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this content switcher item should be disabled. Carbon default: `false`. Defaults to `nil`.
* `target` (`:string`) - The element ID of target panel. Defaults to `nil`.
* `value` (`:string`) - The `value` attribute that is set to the parent `Carbon.content_switcher` when this content switcher item is selected. Carbon default: `""`. Defaults to `nil`.
* `icon` (`:boolean`) - `true` if the content switcher button should be icon-only. Carbon default: `false`. Defaults to `nil`.
* `low_contrast` (`:boolean`) - `true` to use the low contrast version. Synced from the parent switcher. Carbon default: `false`. Defaults to `nil`.
* `align` (`:string`) - Specify how the trigger should align with the tooltip for icon-only switcher item Carbon default: `"top"`. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Determines whether the tooltip should close when inner content is activated (click, Enter or Space) Carbon default: `true`. Defaults to `nil`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "tab beingclosed" event. The custom event fired before a tab is closed upon a user gesture. Cancellation of this event stops changing the user-initiated action. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "tab closed" event. The custom event fired after a a tab is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tab_skeleton`

Skeleton of tab.

Renders the Carbon `tab skeleton` web component.

## Example

```heex
<Carbon.tab_skeleton>
  ...
</Carbon.tab_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table`

Data table.

Renders the Carbon `table` web component.

## Example

```heex
<Carbon.table id="my-table" on_header_cell_sort="my_event">
  ...
</Carbon.table>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_header_cell_sort` - The name of the custom event fired before a new sort direction is set upon a user gesture. Cancellation of this event stops the user-initiated change in sort direction.
  * `on_search` - input The name of the custom event fired during search bar input
  * `on_change_selection_all` - The name of the custom event fired before header row is selected/unselected upon a user gesture.
  * `on_row_change_selection` - The name of the custom event fired before a row is selected/unselected upon a user gesture.
  * `on_batch_actions_cancel_clicked` - The name of the custom event fired after the Cancel button is clicked.
  * `on_row_expando_toggled` - The name of the custom event fired after the expanded state of a row is toggled upon a user gesture.
  * `on_row_selected` - The name of the custom event fired after a row has been selected.
  * `on_row_all_selected` - The name of the custom event fired after all rows have been selected.
  * `on_sorted` - The name of the custom event fired after the table has been sorted.
  * `on_filtered` - The name of the custom event fired after the table has been filtered containing remaining rows.

## Attributes

* `batch_expansion` (`:boolean`) - `true` if this table should support batch expansion Carbon default: `false`. Defaults to `nil`.
* `expandable` (`:boolean`) - Specify whether the rows should be able to be expandable Carbon default: `false`. Defaults to `nil`.
* `filter_rows` (`:any`) - The method used when filtering the table with the search bar. Can be replaced with custom method. Type: `(rowText: string, searchString: string) => boolean`. Carbon default: `"(rowText: string, searchString: string) =>\n rowText.toLowerCase().indexOf(searchString.toLowerCase()) < 0"`. Defaults to `nil`.
* `header_count` (`:any`) - The total headers Carbon default: `0`. Defaults to `nil`.
* `is_selectable` (`:boolean`) - `true` if this table contains selectable rows Carbon default: `false`. Defaults to `nil`.
* `is_sortable` (`:boolean`) - `true` if this table should support sorting. Carbon default: `false`. Defaults to `nil`.
* `locale` (`:string`) - The table size. Carbon default: `"en"`. Defaults to `nil`.
* `overflow_menu_on_hover` (`:boolean`) - Specify whether the overflow menu (if it exists) should be shown always, or only on hover Carbon default: `false`. Defaults to `nil`.
* `radio` (`:boolean`) - Specify whether the control should be a radio button or inline checkbox Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The table size. Carbon default: `"lg"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `use_static_width` (`:boolean`) - TODO: Uncomment when Carbon fully implements sticky header Specify whether the header should be sticky. Still experimental: may not work with every combination of table props Carbon default: `false`. Defaults to `nil`.
* `use_zebra_styles` (`:boolean`) - true to add useZebraStyles striping. Carbon default: `false`. Defaults to `nil`.
* `with_header` (`:any`) - . Defaults to `nil`.
* `with_row_ai_labels` (`:boolean`) - true if AI Labels are added in the rows Carbon default: `false`. Defaults to `nil`.
* `with_row_slugs` (`:boolean`) - true if slugs are added in the rows Carbon default: `false`. Defaults to `nil`.
* `on_header_cell_sort` (`:string`) - LiveView event name, sent when the component emits its "table header cell sort" event. The name of the custom event fired before a new sort direction is set upon a user gesture. Cancellation of this event stops the user-initiated change in sort direction. Defaults to `nil`.
* `on_search` (`:string`) - LiveView event name, sent when the component emits its "search" event. input The name of the custom event fired during search bar input. Defaults to `nil`.
* `on_change_selection_all` (`:string`) - LiveView event name, sent when the component emits its "table change selection all" event. The name of the custom event fired before header row is selected/unselected upon a user gesture. Defaults to `nil`.
* `on_row_change_selection` (`:string`) - LiveView event name, sent when the component emits its "table row change selection" event. The name of the custom event fired before a row is selected/unselected upon a user gesture. Defaults to `nil`.
* `on_batch_actions_cancel_clicked` (`:string`) - LiveView event name, sent when the component emits its "table batch actions cancel clicked" event. The name of the custom event fired after the Cancel button is clicked. Defaults to `nil`.
* `on_row_expando_toggled` (`:string`) - LiveView event name, sent when the component emits its "table row expando toggled" event. The name of the custom event fired after the expanded state of a row is toggled upon a user gesture. Defaults to `nil`.
* `on_row_selected` (`:string`) - LiveView event name, sent when the component emits its "table row selected" event. The name of the custom event fired after a row has been selected. Defaults to `nil`.
* `on_row_all_selected` (`:string`) - LiveView event name, sent when the component emits its "table row all selected" event. The name of the custom event fired after all rows have been selected. Defaults to `nil`.
* `on_sorted` (`:string`) - LiveView event name, sent when the component emits its "table sorted" event. The name of the custom event fired after the table has been sorted. Defaults to `nil`.
* `on_filtered` (`:string`) - LiveView event name, sent when the component emits its "table filtered" event. The name of the custom event fired after the table has been filtered containing remaining rows. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_batch_actions`

Table batch actions.

Renders the Carbon `table batch actions` web component.

## Example

```heex
<Carbon.table_batch_actions id="my-table-batch-actions" on_cancel_clicked="my_event">
  ...
</Carbon.table_batch_actions>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_cancel_clicked` - The custom event fired after the Cancel button is clicked.
  * `on_select_all_clicked` - The custom event fired after the Select all button is clicked.

## Attributes

* `active` (`:boolean`) - `true` if this batch actions bar should be active. Carbon default: `false`. Defaults to `nil`.
* `selected_rows_count` (`:any`) - Numeric representation of the total number of items selected in a table. This number is used to derive the selection message. Carbon default: `0`. Defaults to `nil`.
* `total_rows_count` (`:any`) - Numeric representation of the total number of items in a table. This number is used in the select all button text This property controls the rendering of the Select all button Carbon default: `0`. Defaults to `nil`.
* `size` (`:string`) - The table size. Carbon default: `"lg"`. Defaults to `nil`.
* `on_cancel_clicked` (`:string`) - LiveView event name, sent when the component emits its "table batch actions cancel clicked" event. The custom event fired after the Cancel button is clicked. Defaults to `nil`.
* `on_select_all_clicked` (`:string`) - LiveView event name, sent when the component emits its "table batch actions select all clicked" event. The custom event fired after the Select all button is clicked. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_body`

Data table body.

Renders the Carbon `table body` web component.

## Example

```heex
<Carbon.table_body>
  ...
</Carbon.table_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `use_zebra_styles` (`:boolean`) - TODO: Uncomment when Carbon fully implements sticky header Specify whether the header should be sticky. Still experimental: may not work with every combination of table props Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_cell`

Data table cell.

Renders the Carbon `table cell` web component.

## Example

```heex
<Carbon.table_cell>
  ...
</Carbon.table_cell>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `overflow_menu_on_hover` (`:boolean`) - Specify whether the overflow menu (if it exists) should be shown always, or only on hover Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The table size. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_cell_content`

Data table cell content.

Renders the Carbon `table cell content` web component.

## Example

```heex
<Carbon.table_cell_content>
  ...
</Carbon.table_cell_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_expanded_row`

Table row of collapsible details.

Renders the Carbon `table expanded row` web component.

## Example

```heex
<Carbon.table_expanded_row>
  ...
</Carbon.table_expanded_row>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `colspan` (`:any`) - The colspan. Carbon default: `1`. Defaults to `nil`.
* `expanded` (`:boolean`) - `true` if the table row should be expanded. Carbon default: `false`. Defaults to `nil`.
* `filtered` (`:boolean`) - `true` if the table row should be filtered. Carbon default: `false`. Defaults to `nil`.
* `highlighted` (`:boolean`) - `true` if the table row should be highlighted. Carbon default: `false`. Defaults to `nil`.
* `selected` (`:boolean`) - `true` if the previous table row has been selected Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_head`

Data table header.

Renders the Carbon `table head` web component.

## Example

```heex
<Carbon.table_head>
  ...
</Carbon.table_head>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_header_cell`

Data table header cell.

Renders the Carbon `table header cell` web component.

## Example

```heex
<Carbon.table_header_cell id="my-table-header-cell" on_sort="my_event">
  ...
</Carbon.table_header_cell>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_sort` - The custom event fired before a new sort direction is set upon a user gesture. Cancellation of this event stops the user-initiated change in sort direction.

## Attributes

* `expandable` (`:boolean`) - `true` if the table has expandable rows Carbon default: `false`. Defaults to `nil`.
* `is_selectable` (`:boolean`) - `true` if this table has selectable rows Carbon default: `false`. Defaults to `nil`.
* `is_sortable` (`:boolean`) - `true` if this table header column should be sortable Carbon default: `false`. Defaults to `nil`.
* `sort_active` (`:boolean`) - `true` if this table header cell is of a primary sorting column. Carbon default: `false`. Defaults to `nil`.
* `sort_cycle` (`:any`) - The table sort cycle in use. Must be one of `"bi-states-from-ascending"`, `"bi-states-from-descending"`, `"tri-states-from-ascending"`, or `"tri-states-from-descending"`.
* `sort_direction` (`:any`) - The table sort direction. If present, this table header cell will have a sorting UI. Choose between `ascending` or `descending`. Must be one of `"none"`, `"ascending"`, or `"descending"`.
* `on_sort` (`:string`) - LiveView event name, sent when the component emits its "table header cell sort" event. The custom event fired before a new sort direction is set upon a user gesture. Cancellation of this event stops the user-initiated change in sort direction. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_header_description`

Data table header description

Renders the Carbon `table header description` web component.

## Example

```heex
<Carbon.table_header_description>
  ...
</Carbon.table_header_description>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_header_row`

Data table header row.

Renders the Carbon `table header row` web component.

## Example

```heex
<Carbon.table_header_row id="my-table-header-row" on_table_change_selection_all="my_event">
  ...
</Carbon.table_header_row>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_table_change_selection_all` - The name of the custom event fired before this row is selected/unselected upon a user gesture. Cancellation of this event stops the user-initiated change in selection.
  * `on_table_row_change_selection` - The custom event fired before this row is selected/unselected upon a user gesture. Cancellation of this event stops the user-initiated change in selection.
  * `on_radio_button_changed` - The name of the custom event fired after this radio button changes its checked state.
  * `on_checkbox_changed` - The name of the custom event fired after this checkbox changes its checked state.
  * `on_table_row_expando_beingtoggled` - The name of the custom event fired before the expanded state of this row is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling the expanded state.
  * `on_table_row_expando_toggled` - The name of the custom event fired after the expanded state of this row is toggled upon a user gesture.

## Attributes

* `batch_expansion` (`:boolean`) - `true` if this table should support batch expansion Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this table row should be disabled. Carbon default: `false`. Defaults to `nil`.
* `filtered` (`:boolean`) - `true` if this table row should be filtered out. Carbon default: `false`. Defaults to `nil`.
* `hide_checkbox` (`:boolean`) - Specify whether the checkbox should be present in the DOM, but invisible and uninteractable. Carbon default: `false`. Defaults to `nil`.
* `highlighted` (`:boolean`) - `true` if the table row should be highlighted. Carbon default: `false`. Defaults to `nil`.
* `overflow_menu_on_hover` (`:boolean`) - Specify whether the overflow menu (if it exists) should be shown always, or only on hover Carbon default: `false`. Defaults to `nil`.
* `selected` (`:boolean`) - `true` if this table row should be selected. Carbon default: `false`. Defaults to `nil`.
* `selection_label` (`:string`) - The `aria-label` attribute for the `<label>` for selection. Carbon default: `"Select row"`. Defaults to `nil`.
* `selection_name` (`:string`) - The `name` attribute for the `<input>` for selection. If present, this table row will be a selectable one. Carbon default: `""`. Defaults to `nil`.
* `selection_value` (`:string`) - The `value` attribute for the `<input>` for selection. Carbon default: `""`. Defaults to `nil`.
* `on_table_change_selection_all` (`:string`) - LiveView event name, sent when the component emits its "table change selection all" event. The name of the custom event fired before this row is selected/unselected upon a user gesture. Cancellation of this event stops the user-initiated change in selection. Defaults to `nil`.
* `on_table_row_change_selection` (`:string`) - LiveView event name, sent when the component emits its "table row change selection" event. The custom event fired before this row is selected/unselected upon a user gesture. Cancellation of this event stops the user-initiated change in selection. Defaults to `nil`.
* `on_radio_button_changed` (`:string`) - LiveView event name, sent when the component emits its "radio button changed" event. The name of the custom event fired after this radio button changes its checked state. Defaults to `nil`.
* `on_checkbox_changed` (`:string`) - LiveView event name, sent when the component emits its "checkbox changed" event. The name of the custom event fired after this checkbox changes its checked state. Defaults to `nil`.
* `on_table_row_expando_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "table row expando beingtoggled" event. The name of the custom event fired before the expanded state of this row is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling the expanded state. Defaults to `nil`.
* `on_table_row_expando_toggled` (`:string`) - LiveView event name, sent when the component emits its "table row expando toggled" event. The name of the custom event fired after the expanded state of this row is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_header_title`

Data table header title

Renders the Carbon `table header title` web component.

## Example

```heex
<Carbon.table_header_title>
  ...
</Carbon.table_header_title>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_row`

Data table row.

Renders the Carbon `table row` web component.

## Example

```heex
<Carbon.table_row id="my-table-row" on_change_selection="my_event">
  ...
</Carbon.table_row>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_change_selection` - The custom event fired before this row is selected/unselected upon a user gesture. Cancellation of this event stops the user-initiated change in selection.
  * `on_radio_button_changed` - The name of the custom event fired after this radio button changes its checked state.
  * `on_checkbox_changed` - The name of the custom event fired after this checkbox changes its checked state.
  * `on_expando_beingtoggled` - The name of the custom event fired before the expanded state of this row is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling the expanded state.
  * `on_expando_toggled` - The name of the custom event fired after the expanded state of this row is toggled upon a user gesture.

## Attributes

* `batch_expansion` (`:boolean`) - `true` if this table should support batch expansion Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if this table row should be disabled. Carbon default: `false`. Defaults to `nil`.
* `filtered` (`:boolean`) - `true` if this table row should be filtered out. Carbon default: `false`. Defaults to `nil`.
* `hide_checkbox` (`:boolean`) - Specify whether the checkbox should be present in the DOM, but invisible and uninteractable. Carbon default: `false`. Defaults to `nil`.
* `highlighted` (`:boolean`) - `true` if the table row should be highlighted. Carbon default: `false`. Defaults to `nil`.
* `overflow_menu_on_hover` (`:boolean`) - Specify whether the overflow menu (if it exists) should be shown always, or only on hover Carbon default: `false`. Defaults to `nil`.
* `selected` (`:boolean`) - `true` if this table row should be selected. Carbon default: `false`. Defaults to `nil`.
* `selection_label` (`:string`) - The `aria-label` attribute for the `<label>` for selection. Carbon default: `"Select row"`. Defaults to `nil`.
* `selection_name` (`:string`) - The `name` attribute for the `<input>` for selection. If present, this table row will be a selectable one. Carbon default: `""`. Defaults to `nil`.
* `selection_value` (`:string`) - The `value` attribute for the `<input>` for selection. Carbon default: `""`. Defaults to `nil`.
* `on_change_selection` (`:string`) - LiveView event name, sent when the component emits its "table row change selection" event. The custom event fired before this row is selected/unselected upon a user gesture. Cancellation of this event stops the user-initiated change in selection. Defaults to `nil`.
* `on_radio_button_changed` (`:string`) - LiveView event name, sent when the component emits its "radio button changed" event. The name of the custom event fired after this radio button changes its checked state. Defaults to `nil`.
* `on_checkbox_changed` (`:string`) - LiveView event name, sent when the component emits its "checkbox changed" event. The name of the custom event fired after this checkbox changes its checked state. Defaults to `nil`.
* `on_expando_beingtoggled` (`:string`) - LiveView event name, sent when the component emits its "table row expando beingtoggled" event. The name of the custom event fired before the expanded state of this row is being toggled upon a user gesture. Cancellation of this event stops the user-initiated action of toggling the expanded state. Defaults to `nil`.
* `on_expando_toggled` (`:string`) - LiveView event name, sent when the component emits its "table row expando toggled" event. The name of the custom event fired after the expanded state of this row is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_skeleton`

Data table skeleton

Renders the Carbon `table skeleton` web component.

## Example

```heex
<Carbon.table_skeleton>
  ...
</Carbon.table_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `column_count` (`:any`) - Specify the number of columns that you want to render in the skeleton state Carbon default: `5`. Defaults to `nil`.
* `row_count` (`:any`) - Specify the number of rows that you want to render in the skeleton state Carbon default: `5`. Defaults to `nil`.
* `show_header` (`:boolean`) - Specify if the table header should be rendered as part of the skeleton. Carbon default: `true`. Defaults to `nil`.
* `show_toolbar` (`:boolean`) - Specify if the table toolbar should be rendered as part of the skeleton. Carbon default: `true`. Defaults to `nil`.
* `zebra` (`:boolean`) - true to add useZebraStyles striping. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_toolbar`

Table toolbar.

Renders the Carbon `table toolbar` web component.

## Example

```heex
<Carbon.table_toolbar>
  ...
</Carbon.table_toolbar>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - Toolbar size. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_toolbar_content`

Table toolbar content.

Renders the Carbon `table toolbar content` web component.

## Example

```heex
<Carbon.table_toolbar_content>
  ...
</Carbon.table_toolbar_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `has_batch_actions` (`:boolean`) - `true` if this batch actions bar is active. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Table toolbar contents size. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `table_toolbar_search`

Table toolbar search.

Renders the Carbon `table toolbar search` web component.

## Example

```heex
<Carbon.table_toolbar_search id="my-table-toolbar-search" on_search_input="my_event">
  ...
</Carbon.table_toolbar_search>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_search_input` - The custom event fired after the search content is changed upon a user gesture.

## Attributes

* `persistent` (`:boolean`) - `true` if the search box should be always be open. Carbon default: `false`. Defaults to `nil`.
* `autocomplete` (`:string`) - Specify an optional value for the autocomplete property on the underlying <input>, defaults to "off" Carbon default: `"off"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `close_button_label_text` (`:string`) - Specify a label to be read by screen readers on the "close" button Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the search box should be disabled. Carbon default: `false`. Defaults to `nil`.
* `expandable` (`:boolean`) - `true` if the search bar can be expandable Carbon default: `false`. Defaults to `nil`.
* `expanded` (`:boolean`) - `true` if the search box should be expanded. Carbon default: `false`. Defaults to `nil`.
* `has_custom_icon` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - The label text. Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name in `FormData`. Carbon default: `""`. Defaults to `nil`.
* `role` (`:string`) - Specify the role for the underlying <input>, defaults to searchbox Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - The placeholder text. Carbon default: `"Search"`. Defaults to `nil`.
* `size` (`:any`) - The search box size. Carbon default: `"lg"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - The `<input>` name. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Carbon default: `""`. Defaults to `nil`.
* `on_search_input` (`:string`) - LiveView event name, sent when the component emits its "search input" event. The custom event fired after the search content is changed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tabs`

Tabs.

Renders the Carbon `tabs` web component.

## Example

```heex
<Carbon.tabs id="my-tabs" on_beingselected="my_event">
  ...
</Carbon.tabs>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingselected` - The custom event fired before a tab is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_selected` - The custom event fired after a a tab is selected upon a user gesture.
  * `on_content_switcher_beingselected` - The custom event fired before a content switcher item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection.
  * `on_content_switcher_selected` - The custom event fired after a a content switcher item is selected upon a user gesture.

## Attributes

* `selecting_items_assistive_text` (`:string`) - An assistive text for screen reader to announce, telling the open state. Carbon default: `"Selecting items. Use up and down arrow keys to navigate."`. Defaults to `nil`.
* `selected_item_assistive_text` (`:string`) - An assistive text for screen reader to announce, telling that an item is selected. Carbon default: `"Selected an item."`. Defaults to `nil`.
* `trigger_content` (`:string`) - The content of the trigger button for narrow mode. Carbon default: `""`. Defaults to `nil`.
* `type` (`:any`) - Tabs type. Carbon default: `""`. Must be one of `""`, `"container"`, or `"contained"`.
* `vertical` (`:boolean`) - `true` if the tabs are in vertical orientation. This is automatically set by `Carbon.tabs_vertical`. Carbon default: `false`. Defaults to `nil`.
* `dismissable` (`:any`) - Whether the rendered Tab children should be dismissable. Defaults to `nil`.
* `icon_size` (`:any`) - Specify the icon size used by icon-only tabs. Must be one of `"default"`, or `"lg"`.
* `full_width` (`:boolean`) - Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children Carbon default: `false`. Defaults to `nil`.
* `value` (`:string`) - The value of the selected item. Carbon default: `""`. Defaults to `nil`.
* `selected_index` (`:any`) - Specify a selected index for the initially selected content Carbon default: `0`. Defaults to `nil`.
* `selection_mode` (`:string`) - Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic' Carbon default: `"automatic"`. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the tabs. Supports `sm` and `md` for line tabs. Supports `sm`, `md`, and `lg` for contained tabs. Supports `xl` only when `vertical` is set; otherwise `xl` falls back to `lg`. Carbon default: `""`. Must be one of `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `icon` (`:boolean`) - Icon only. Carbon default: `false`. Defaults to `nil`.
* `low_contrast` (`:boolean`) - `true` to use the low contrast version. Carbon default: `false`. Defaults to `nil`.
* `on_beingselected` (`:string`) - LiveView event name, sent when the component emits its "tabs beingselected" event. The custom event fired before a tab is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_selected` (`:string`) - LiveView event name, sent when the component emits its "tabs selected" event. The custom event fired after a a tab is selected upon a user gesture. Defaults to `nil`.
* `on_content_switcher_beingselected` (`:string`) - LiveView event name, sent when the component emits its "content switcher beingselected" event. The custom event fired before a content switcher item is selected upon a user gesture. Cancellation of this event stops changing the user-initiated selection. Defaults to `nil`.
* `on_content_switcher_selected` (`:string`) - LiveView event name, sent when the component emits its "content switcher selected" event. The custom event fired after a a content switcher item is selected upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tabs_skeleton`

Skeleton of tabs.

Renders the Carbon `tabs skeleton` web component.

## Example

```heex
<Carbon.tabs_skeleton>
  ...
</Carbon.tabs_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `contained` (`:boolean`) - Provide the type of Tab Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tabs_vertical`

Vertical tabs container component.

Renders the Carbon `tabs vertical` web component.

## Example

```heex
<Carbon.tabs_vertical>
  ...
</Carbon.tabs_vertical>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `custom_height` (`:any`) - Option to set a height style only if using vertical variation. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tag`

Tag.

Renders the Carbon `tag` web component.

## Example

```heex
<Carbon.tag id="my-tag" on_beingclosed="my_event">
  ...
</Carbon.tag>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - The custom event fired as the element is being closed
  * `on_closed` - The custom event fired after the element has been closed

## Attributes

* `title` (`:string`) - Text to show on filter tag "clear" buttons. Corresponds to the attribute with the same name Carbon default: `"Clear filter"`. Defaults to `nil`.
* `disabled` (`:boolean`) - `true` if the tag should be disabled Carbon default: `false`. Defaults to `nil`.
* `filter` (`:boolean`) - Determine if is a filter/chip Carbon default: `false`. Defaults to `nil`.
* `has_custom_icon` (`:boolean`) - `true` if there is a custom icon. Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the tag should be open. Carbon default: `true`. Defaults to `nil`.
* `size` (`:any`) - The size of the tag. Carbon default: `"md"`. Must be one of `"lg"`, `"md"`, or `"sm"`.
* `type` (`:any`) - The type of the tag. Carbon default: `"gray"`. Must be one of `"red"`, `"magenta"`, `"purple"`, `"blue"`, `"cyan"`, `"teal"`, `"green"`, `"gray"`, `"cool-gray"`, or `"warm-gray"`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "tag beingclosed" event. The custom event fired as the element is being closed. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "tag closed" event. The custom event fired after the element has been closed. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tag_skeleton`

Skeleton of tag.

Renders the Carbon `tag skeleton` web component.

## Example

```heex
<Carbon.tag_skeleton>
  ...
</Carbon.tag_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `size` (`:any`) - Specify the size of the Tag. Currently supports either `sm`, `md` (default) or `lg` sizes. Carbon default: `"sm"`. Must be one of `"lg"`, `"md"`, or `"sm"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet`

Tearsheet component - A slide-out panel for displaying detailed content.

Renders the Carbon `tearsheet` web component.

## Example

```heex
<Carbon.tearsheet id="my-tearsheet" on_beingclosed="my_event">
  ...
</Carbon.tearsheet>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_beingclosed` - Fired when the tearsheet is about to close
  * `on_closed` - Fired after the tearsheet has closed
  * `on_collapse_change` - Fired when the header collapse state changes. `event.detail.collapsed` is `true` when collapsing, `false` when expanding.

## Attributes

* `open` (`:boolean`) - Specifies whether the tearsheet is currently open. Carbon default: `false`. Defaults to `nil`.
* `container_class_name` (`:string`) - User can pass any class names that will be added to the modal container Carbon default: `""`. Defaults to `nil`.
* `influencer_width` (`:string`) - Default influencer takes 256px, this allows override eg: 300px, 20rem Carbon default: `""`. Defaults to `nil`.
* `summary_content_width` (`:string`) - Default summary content takes 256px, this allows override eg: 300px, 20rem Carbon default: `""`. Defaults to `nil`.
* `vertical_gap` (`:string`) - Defines the gap from top of the viewport. Defaulted to 3rem Carbon default: `""`. Defaults to `nil`.
* `variant` (`:any`) - Default to wide variant. Pass in narrow for narrow tearsheet Carbon default: `"wide"`. Must be one of `"wide"`, or `"narrow"`.
* `selectors_floating_menus` (`:string`) - Specify the CSS selectors that match the floating menus (comma-separated) Carbon default: `""`. Defaults to `nil`.
* `selector_primary_focus` (`:string`) - Specify a CSS selector that matches the DOM element that should be focused when the Modal opens Carbon default: `""`. Defaults to `nil`.
* `prevent_close_on_click_outside` (`:boolean`) - Prevents the modal from closing when clicking outside Carbon default: `false`. Defaults to `nil`.
* `aria_label` (`:string`) - aria-label for the tearsheet dialog Carbon default: `""`. Defaults to `nil`.
* `on_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "tearsheet beingclosed" event. Fired when the tearsheet is about to close. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "tearsheet closed" event. Fired after the tearsheet has closed. Defaults to `nil`.
* `on_collapse_change` (`:string`) - LiveView event name, sent when the component emits its "tearsheet collapse change" event. Fired when the header collapse state changes. `event.detail.collapsed` is `true` when collapsing, `false` when expanding. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_body`

Tearsheet Body component - Contains the main content area with optional influencer and summary panels.
Supports automatic header collapse on scroll.

Renders the Carbon `tearsheet body` web component.

## Example

```heex
<Carbon.tearsheet_body>
  ...
</Carbon.tearsheet_body>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - Carbon default: `"body"`. Defaults to `nil`.
* `is_flush` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_footer`

Tearsheet Footer component - Contains action buttons at the bottom of the tearsheet.

Renders the Carbon `tearsheet footer` web component.

## Example

```heex
<Carbon.tearsheet_footer>
  ...
</Carbon.tearsheet_footer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - Carbon default: `"footer"`. Defaults to `nil`.
* `actions` (`:any`) - Type: `ActionButton[]`. Carbon default: `[]`. Defaults to `nil`.
* `button_size` (`:any`) - . Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_header`

Tearsheet Header component - Contains the header section with title, description, and actions.

Renders the Carbon `tearsheet header` web component.

## Example

```heex
<Carbon.tearsheet_header id="my-tearsheet-header" on_collapse_change="my_event">
  ...
</Carbon.tearsheet_header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_collapse_change` - Internal event; parent tearsheet re-dispatches this as the public `Carbon.tearsheet_collapse_change` event.

## Attributes

* `slot` (`:string`) - Carbon default: `"header"`. Defaults to `nil`.
* `close_icon_description` (`:string`) - Carbon default: `"Close"`. Defaults to `nil`.
* `hide_close_button` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `disable_header_collapse` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `on_collapse_change` (`:string`) - LiveView event name, sent when the component emits its "tearsheet header collapse change" event. Internal event; parent tearsheet re-dispatches this as the public `Carbon.tearsheet_collapse_change` event. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_header_content`

Tearsheet Header Content component - Contains the title, description, and decorative elements.

Renders the Carbon `tearsheet header content` web component.

## Example

```heex
<Carbon.tearsheet_header_content>
  ...
</Carbon.tearsheet_header_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - Carbon default: `"header-content"`. Defaults to `nil`.
* `title` (`:string`) - Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_influencer`

Tearsheet Influencer component - Left-side panel for contextual information.
Automatically converts to a slide-in panel on small screens.

Renders the Carbon `tearsheet influencer` web component.

## Example

```heex
<Carbon.tearsheet_influencer id="my-tearsheet-influencer" on_closed="my_event">
  ...
</Carbon.tearsheet_influencer>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_closed` - Fired when the influencer panel is closed (mobile only)

## Attributes

* `slot` (`:string`) - Carbon default: `"influencer"`. Defaults to `nil`.
* `is_flush` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `influencer_panel_open` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `influencer_panel_aria_label` (`:string`) - Carbon default: `"Influencer panel"`. Defaults to `nil`.
* `on_closed` (`:string`) - LiveView event name, sent when the component emits its "tearsheet influencer closed" event. Fired when the influencer panel is closed (mobile only). Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_navigation_bar`

tearsheet navigation bar at the bottom of the header

Renders the Carbon `tearsheet navigation bar` web component.

## Example

```heex
<Carbon.tearsheet_navigation_bar>
  ...
</Carbon.tearsheet_navigation_bar>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - Carbon default: `"navigation-bar"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_scroller`

Tearsheet Scroller button

Renders the Carbon `tearsheet scroller` web component.

## Example

```heex
<Carbon.tearsheet_scroller>
  ...
</Carbon.tearsheet_scroller>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `slot` (`:string`) - Carbon default: `"scroller"`. Defaults to `nil`.
* `align` (`:string`) - Carbon default: `"left"`. Defaults to `nil`.
* `collapse_text` (`:string`) - Carbon default: `"Collapse"`. Defaults to `nil`.
* `expand_text` (`:string`) - Carbon default: `"Expand"`. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:string`) - Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` Carbon default: `"md"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_stack`

Tearsheet Stack wrapper component - Enables stacking behavior for child tearsheets.

This component provides a context for tearsheet stacking, similar to React's StackProvider.
Wrap multiple tearsheets with this component to enable stacking behavior.

Renders the Carbon `tearsheet stack` web component.

## Example

```heex
<Carbon.tearsheet_stack>
  ...
</Carbon.tearsheet_stack>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `stack_step_size` (`:any`) - Defines the step size for stacking offset. - 'sm': 0.5rem buffer - 'md': 0.75rem buffer - 'lg': 1rem buffer (default) Type: `StackStepSize`. Carbon default: `"lg"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tearsheet_summary_content`

Tearsheet Summary Content component - Right-side panel for summary details.
Automatically converts to a slide-in panel on small screens.

Renders the Carbon `tearsheet summary content` web component.

## Example

```heex
<Carbon.tearsheet_summary_content id="my-tearsheet-summary-content" on_tearsheet_summary_closed="my_event">
  ...
</Carbon.tearsheet_summary_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_tearsheet_summary_closed` - Fired when the summary panel is closed (mobile only)

## Attributes

* `slot` (`:string`) - Carbon default: `"summary-content"`. Defaults to `nil`.
* `is_flush` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `summary_panel_open` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `summary_panel_aria_label` (`:string`) - Carbon default: `"Summary panel"`. Defaults to `nil`.
* `on_tearsheet_summary_closed` (`:string`) - LiveView event name, sent when the component emits its "tearsheet summary closed" event. Fired when the summary panel is closed (mobile only). Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `text_input`

Text Input element. Supports all the usual attributes for textual input types

Renders the Carbon `text input` web component.

## Example

```heex
<Carbon.text_input>
  ...
</Carbon.text_input>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the input against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The type of the input. Can be one of the types listed in the INPUT_TYPE enum Carbon default: `"text"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `text_input_skeleton`

The text input skeleton component.

Renders the Carbon `text input skeleton` web component.

## Example

```heex
<Carbon.text_input_skeleton>
  ...
</Carbon.text_input_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The text-input-skeleton size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `textarea`

Text area.

Renders the Carbon `textarea` web component.

## Example

```heex
<Carbon.textarea>
  ...
</Carbon.textarea>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `cols` (`:any`) - The number of columns for the textarea to show by default. Defaults to `nil`.
* `counter_mode` (`:any`) - Specify the method used for calculating the counter number Carbon default: `"character"`. Must be one of `"character"`, or `"word"`.
* `id` (`:string`) - ID to link the `label` and `textarea` Carbon default: `""`. Defaults to `nil`.
* `rows` (`:any`) - The number of rows for the textarea to show by default Carbon default: `4`. Defaults to `nil`.
* `autocomplete` (`:string`) - May be any of the standard HTML autocomplete options Carbon default: `""`. Defaults to `nil`.
* `autofocus` (`:boolean`) - Sets the input to be focussed automatically on page load. Defaults to false Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Controls the disabled state of the input Carbon default: `false`. Defaults to `nil`.
* `enable_counter` (`:boolean`) - Specify whether to display the character counter Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:string`) - The helper text. Carbon default: `""`. Defaults to `nil`.
* `invalid_text` (`:string`) - Message which is displayed if the value is invalid. Carbon default: `""`. Defaults to `nil`.
* `max_count` (`:any`) - Max character count allowed for input. This is needed in order for enableCounter to display. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the control is currently in warning state Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:string`) - Provide the text that is displayed when the control is in warning state Carbon default: `""`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether you want the underlying label to be visually hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Generic label that will be used as the textual representation of what this field is for Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern to validate the textarea against for HTML validity checking Carbon default: `""`. Defaults to `nil`.
* `placeholder` (`:string`) - Value to display when the input has an empty `value` Carbon default: `""`. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify if the component should be read-only Carbon default: `false`. Defaults to `nil`.
* `hide_password_label` (`:string`) - "Hide password" tooltip text on password visibility toggle Carbon default: `"Hide password"`. Defaults to `nil`.
* `show_password_label` (`:string`) - "Show password" tooltip text on password visibility toggle Carbon default: `"Show password"`. Defaults to `nil`.
* `show_password_visibility_toggle` (`:boolean`) - Boolean property to render password visibility toggle Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - The input box size. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `is_fluid` (`:boolean`) - Specify whether the textarea is fluid or not Carbon default: `false`. Defaults to `nil`.
* `inline` (`:boolean`) - true to use the inline version. Carbon default: `false`. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `"center"`. Must be one of `"start"`, `"center"`, or `"end"`.
* `tooltip_direction` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"bottom"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `type` (`:any`) - The type of the input. Can be one of the types listed in the INPUT_TYPE enum Carbon default: `"text"`. Must be one of `"email"`, `"password"`, `"tel"`, `"text"`, or `"url"`.
* `invalid` (`:boolean`) - Specify if the currently value is invalid. Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Boolean property to set the required status Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - The special validity message for `required`. Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - The validity message. If present and non-empty, this input shows the UI of its invalid state. Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `textarea_skeleton`

The textarea skeleton component.

Renders the Carbon `textarea skeleton` web component.

## Example

```heex
<Carbon.textarea_skeleton>
  ...
</Carbon.textarea_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - Specify whether the label should be hidden, or not Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tile`

Basic tile.

Renders the Carbon `tile` web component.

## Example

```heex
<Carbon.tile>
  ...
</Carbon.tile>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `color_scheme` (`:any`) - The color scheme. Carbon default: `""`. Must be one of `""`, or `"light"`.
* `has_rounded_corners` (`:boolean`) - Specify if the `Tile` component should be rendered with rounded corners. Only valid when `ai-label` prop is present Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tile_group`

Tile group.

Renders the Carbon `tile group` web component.

## Example

```heex
<Carbon.tile_group id="my-tile-group" on_current_radio_tile_selection="my_event">
  ...
</Carbon.tile_group>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_current_radio_tile_selection` - The name of the custom event fired after a radio tile changes its selected state.
  * `on_current_selectable_tile_selections` - The name of the custom event fired after a selectable tile changes its selected state.

## Attributes

* `fieldset_class_name` (`:any`) - Provide an optional className to be applied to the component. Defaults to `nil`.
* `disabled` (`:any`) - Specify whether the group is disabled. Defaults to `nil`.
* `current_radio_selection` (`:any`) - . Defaults to `nil`.
* `current_selections` (`:any`) - Carbon default: `[]`. Defaults to `nil`.
* `radio_tiles` (`:any`) - . Defaults to `nil`.
* `selectable_tiles` (`:any`) - . Defaults to `nil`.
* `on_current_radio_tile_selection` (`:string`) - LiveView event name, sent when the component emits its "current radio tile selection" event. The name of the custom event fired after a radio tile changes its selected state. Defaults to `nil`.
* `on_current_selectable_tile_selections` (`:string`) - LiveView event name, sent when the component emits its "current selectable tile selections" event. The name of the custom event fired after a selectable tile changes its selected state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `time_picker`

Time Picker component.

Renders the Carbon `time picker` web component.

## Example

```heex
<Carbon.time_picker>
  ...
</Carbon.time_picker>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `disabled` (`:boolean`) - Specify whether the control is disabled Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:string`) - Provide the text that is displayed when the control is in an invalid state Carbon default: `"Invalid time format."`. Defaults to `nil`.
* `warning` (`:boolean`) - Specify whether the control is in warning state Carbon default: `false`. Defaults to `nil`.
* `warning_text` (`:string`) - Provide the text that is displayed when the control is in a warning state Carbon default: `"Warning message."`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Specify whether the label should be hidden Carbon default: `false`. Defaults to `nil`.
* `name` (`:string`) - Name for the input in FormData Carbon default: `""`. Defaults to `nil`.
* `label_text` (`:string`) - Provide label text to be read by screen readers Carbon default: `"Select a time"`. Defaults to `nil`.
* `placeholder` (`:string`) - Placeholder text for the input Carbon default: `"hh:mm"`. Defaults to `nil`.
* `read_only` (`:boolean`) - Specify whether the control should be read-only Carbon default: `false`. Defaults to `nil`.
* `max_length` (`:any`) - Specify the maximum length of the input value Carbon default: `5`. Defaults to `nil`.
* `pattern` (`:string`) - Pattern for input validation Carbon default: `"(1[012]|[1-9]):[0-5][0-9](\\s)?"`. Defaults to `nil`.
* `size` (`:any`) - Size of the time picker Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `type` (`:string`) - Input type Carbon default: `"text"`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the control is currently invalid Carbon default: `false`. Defaults to `nil`.
* `required` (`:boolean`) - Whether the input is required Carbon default: `false`. Defaults to `nil`.
* `required_validity_message` (`:string`) - Custom message for required validation Carbon default: `"Please fill out this field."`. Defaults to `nil`.
* `validity_message` (`:string`) - Validity message Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - Value of the input. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `time_picker_select`

Time picker select dropdown.

Renders the Carbon `time picker select` web component.

## Example

```heex
<Carbon.time_picker_select>
  ...
</Carbon.time_picker_select>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `aria_label` (`:string`) - The ARIA label for the UI control. Carbon default: `"open list of options"`. Defaults to `nil`.
* `default_value` (`:string`) - Optionally provide the default value of the select Carbon default: `""`. Defaults to `nil`.
* `read_only` (`:boolean`) - Controls the readOnly state of the select Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the control is disabled Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - Specify a custom id for the select box Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - Name for the select in the `FormData` Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value of the select. Carbon default: `""`. Defaults to `nil`.
* `size` (`:any`) - Size of the time picker select Carbon default: `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `toast_notification`

Toast notification.

Renders the Carbon `toast notification` web component.

## Example

```heex
<Carbon.toast_notification id="my-toast-notification" on_notification_beingclosed="my_event">
  ...
</Carbon.toast_notification>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_notification_beingclosed` - The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification.
  * `on_notification_closed` - The custom event fired after this notification is closed upon a user gesture.

## Attributes

* `caption` (`:string`) - Specify the caption Carbon default: `""`. Defaults to `nil`.
* `aria_label` (`:string`) - Provide a description for "close" icon button that can be read by screen readers. Defaults to `nil`.
* `hide_close_button` (`:boolean`) - `true` to hide the close button. Carbon default: `false`. Defaults to `nil`.
* `status_icon_description` (`:string`) - Provide a description for "status" icon that can be read by screen readers. Defaults to `nil`.
* `kind` (`:any`) - Notification kind. Carbon default: `"success"`. Must be one of `"success"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"error"`.
* `low_contrast` (`:boolean`) - Low contrast mode Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - `true` if the notification should be open. Carbon default: `true`. Defaults to `nil`.
* `timeout` (`:any`) - Specify an optional duration the notification should be closed in. Defaults to `nil`.
* `subtitle` (`:string`) - The subtitle. Carbon default: `""`. Defaults to `nil`.
* `title` (`:string`) - The title. Carbon default: `""`. Defaults to `nil`.
* `on_notification_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "notification beingclosed" event. The custom event fired before this notification is being closed upon a user gesture. Cancellation of this event stops the user-initiated action of closing this notification. Defaults to `nil`.
* `on_notification_closed` (`:string`) - LiveView event name, sent when the component emits its "notification closed" event. The custom event fired after this notification is closed upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `toggle`

Basic toggle.

Renders the Carbon `toggle` web component.

## Example

```heex
<Carbon.toggle id="my-toggle" on_changed="my_event">
  ...
</Carbon.toggle>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_changed` - The custom event fired after this changebox changes its checked state.
  * `on_checkbox_changed` - The custom event fired after this changebox changes its checked state.

## Attributes

* `toggled` (`:boolean`) - Specify whether the control is toggled. Defaults to `nil`.
* `aria_labelledby` (`:any`) - Specify another element's id to be used as the label for this toggle. Defaults to `nil`.
* `label_a` (`:string`) - Specify the label for the "on" position Carbon default: `"On"`. Defaults to `nil`.
* `read_only` (`:boolean`) - Read only boolean. Carbon default: `false`. Defaults to `nil`.
* `size` (`:any`) - Toggle size. Carbon default: `""`. Must be one of `""`, or `"sm"`.
* `label_b` (`:string`) - Specify the label for the "off" position Carbon default: `"Off"`. Defaults to `nil`.
* `checked` (`:boolean`) - **Deprecated:** Use `toggled` instead. The `checked` attribute will be removed in the next major version. Carbon default: `false`. Defaults to `nil`.
* `data_table` (`:boolean`) - Specify if checkbox is being used in a data table Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Checkbox should be disabled Carbon default: `false`. Defaults to `nil`.
* `helper_text` (`:any`) - Provide text for the form group for additional help. Defaults to `nil`.
* `hide_checkbox` (`:boolean`) - Specify whether the checkbox should be present in the DOM, but invisible and uninteractable. Used for data-table purposes. Carbon default: `false`. Defaults to `nil`.
* `hide_label` (`:boolean`) - Hide label text. Carbon default: `false`. Defaults to `nil`.
* `id` (`:string`) - Specify a custom id for the checkbox Carbon default: `"checkbox"`. Defaults to `nil`.
* `indeterminate` (`:boolean`) - Specify whether the Checkbox is in an indeterminate state Carbon default: `false`. Defaults to `nil`.
* `label_text` (`:string`) - Provide a label to provide a description of the Checkbox input that you are exposing to the user Carbon default: `""`. Defaults to `nil`.
* `name` (`:string`) - The form name. Defaults to `nil`.
* `readonly` (`:boolean`) - Specify whether the Checkbox is read-only Carbon default: `false`. Defaults to `nil`.
* `invalid` (`:boolean`) - Specify whether the Checkbox is currently invalid Carbon default: `false`. Defaults to `nil`.
* `invalid_text` (`:any`) - Provide the text that is displayed when the Checkbox is in an invalid state. Defaults to `nil`.
* `title` (`:string`) - Specify a title for the node for the Checkbox Carbon default: `""`. Defaults to `nil`.
* `value` (`:string`) - The value. Defaults to `nil`.
* `warn` (`:boolean`) - Specify whether the Checkbox is in a warning state. Carbon default: `false`. Defaults to `nil`.
* `warn_text` (`:boolean`) - Provide the text displayed when the Checkbox is in a warning state. Carbon default: `false`. Defaults to `nil`.
* `default_checked` (`:any`) - Specify whether the underlying input should be checked by default. Defaults to `nil`.
* `on_changed` (`:string`) - LiveView event name, sent when the component emits its "toggle changed" event. The custom event fired after this changebox changes its checked state. Defaults to `nil`.
* `on_checkbox_changed` (`:string`) - LiveView event name, sent when the component emits its "checkbox changed" event. The custom event fired after this changebox changes its checked state. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `toggle_skeleton`

The toggle skeleton component.

Renders the Carbon `toggle skeleton` web component.

## Example

```heex
<Carbon.toggle_skeleton>
  ...
</Carbon.toggle_skeleton>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `toggletip`

Definition tooltip.

Renders the Carbon `toggletip` web component.

## Example

```heex
<Carbon.toggletip>
  ...
</Carbon.toggletip>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `alignment` (`:any`) - How the tooltip is aligned to the trigger button. Carbon default: `"top"`. Must be one of `"top"`, `"top-left"`, `"top-right"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"bottom-start"`, `"bottom-end"`, `"left"`, `"left-bottom"`, `"left-top"`, `"left-start"`, `"left-end"`, `"right"`, `"right-bottom"`, `"right-top"`, `"right-start"`, or `"right-end"`.
* `alignment_axis_offset` (`:any`) - **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled. Carbon default: `0`. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `button_label` (`:string`) - The label for the toggle button Carbon default: `"Show information"`. Defaults to `nil`.
* `open` (`:boolean`) - Set whether toggletip is open Carbon default: `false`. Defaults to `nil`.
* `default_open` (`:boolean`) - Set whether toggletip is open by default. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tooltip`

Trigger button of tooltip.

Renders the Carbon `tooltip` web component.

## Example

```heex
<Carbon.tooltip id="my-tooltip" on_popover_beingclosed="my_event">
  ...
</Carbon.tooltip>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_popover_beingclosed` - before the popover closes via focusout/outsideclick.
  * `on_popover_closed` - when the popover closes via focusout/outsideclick

## Attributes

* `data_table` (`:boolean`) - `true` if this tooltip is in a data table row Carbon default: `false`. Defaults to `nil`.
* `close_on_activation` (`:boolean`) - Specify whether the tooltip should be closed when clicked Carbon default: `false`. Defaults to `nil`.
* `default_open` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `enter_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before displaying the tooltip Carbon default: `100`. Defaults to `nil`.
* `leave_delay_ms` (`:any`) - Specify the duration in milliseconds to delay before hiding the tooltip Carbon default: `300`. Defaults to `nil`.
* `keyboard_only` (`:boolean`) - Only open tooltip on keyboard interactions, this is used for interactive tags (ie. operational-tag, selectable-tag) Carbon default: `false`. Defaults to `nil`.
* `size` (`:boolean`) - Specify the size of the tooltip Carbon default: `false`. Defaults to `nil`.
* `timeout_id` (`:any`) - Specify the timeout reference for the tooltip Carbon default: `0`. Defaults to `nil`.
* `toolbar_action` (`:boolean`) - Specify whether the tooltip should be open when it first renders Carbon default: `false`. Defaults to `nil`.
* `align` (`:string`) - Specify how the trigger should align with the tooltip Carbon default: `"top"`. Defaults to `nil`.
* `alignment_axis_offset` (`:any`) - **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `caret` (`:boolean`) - Carbon default: `true`. Defaults to `nil`.
* `drop_shadow` (`:boolean`) - Specify whether a dropShadow should be rendered Carbon default: `true`. Defaults to `nil`.
* `border` (`:boolean`) - Specify whether a border should be rendered on the popover Carbon default: `false`. Defaults to `nil`.
* `high_contrast` (`:boolean`) - Render the component using the high-contrast variant Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - Specify whether the component is currently open or closed Carbon default: `false`. Defaults to `nil`.
* `tab_tip` (`:boolean`) - Render the component using the tab tip variant Carbon default: `false`. Defaults to `nil`.
* `background_token` (`:any`) - Specify the background token to use. Default is 'layer'. Carbon default: `"layer"`. Must be one of `"layer"`, or `"background"`.
* `autoalign_boundary` (`:any`) - Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. Takes one of the following: 'clippingAncestors', '#elementid', '#elementid_1, #elementid_2', 'rect(x, y, width, height)' This prop is currently experimental and is subject to future changes. Defaults to `nil`.
* `on_popover_beingclosed` (`:string`) - LiveView event name, sent when the component emits its "popover beingclosed" event. before the popover closes via focusout/outsideclick. Defaults to `nil`.
* `on_popover_closed` (`:string`) - LiveView event name, sent when the component emits its "popover closed" event. when the popover closes via focusout/outsideclick. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tooltip_content`

Tooltip content.

Renders the Carbon `tooltip content` web component.

## Example

```heex
<Carbon.tooltip_content>
  ...
</Carbon.tooltip_content>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:string`) - Specify the popover alignment Carbon default: `""`. Defaults to `nil`.
* `autoalign` (`:boolean`) - Specify whether auto-align is enabled Carbon default: `false`. Defaults to `nil`.
* `caret` (`:any`) - Specify whether a caret should be rendered. Defaults to `nil`.
* `drop_shadow` (`:boolean`) - Specify whether a dropShadow should be rendered Carbon default: `true`. Defaults to `nil`.
* `border` (`:boolean`) - Specify whether a border should be rendered on the popover Carbon default: `false`. Defaults to `nil`.
* `high_contrast` (`:boolean`) - Render the component using the high-contrast variant Carbon default: `false`. Defaults to `nil`.
* `open` (`:boolean`) - Specify whether the component is currently open or closed Carbon default: `false`. Defaults to `nil`.
* `tab_tip` (`:boolean`) - Render the component using the tab tip variant Carbon default: `false`. Defaults to `nil`.
* `background_token` (`:any`) - Specify the background token to use. Default is 'layer'. Carbon default: `"layer"`. Must be one of `"layer"`, or `"background"`.
* `slot` (`:string`) - The shadow slot this popover content should be in. Carbon default: `"content"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tree_node`

Tree node.

Renders the Carbon `tree node` web component.

## Example

```heex
<Carbon.tree_node>
  ...
</Carbon.tree_node>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `active` (`:boolean`) - sets if tree node is active Carbon default: `false`. Defaults to `nil`.
* `disabled` (`:boolean`) - disabled property Carbon default: `false`. Defaults to `nil`.
* `is_expanded` (`:boolean`) - Specify if the TreeNode is expanded (only applicable to parent nodes) Carbon default: `false`. Defaults to `nil`.
* `href` (`:any`) - Optional: The URL the TreeNode is linking to. Defaults to `nil`.
* `id` (`:string`) - Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns Carbon default: `"Math.random().toString(16).slice(2)"`. Defaults to `nil`.
* `label` (`:string`) - Rendered label for the TreeNode. Defaults to `nil`.
* `selected` (`:boolean`) - sets if tree node is selected Carbon default: `false`. Defaults to `nil`.
* `on_click` (`:any`) - when adding an href to control the click functionality Type: `((event: Event) => void) | undefined`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `tree_view`

Tree view.

Renders the Carbon `tree view` web component.

## Example

```heex
<Carbon.tree_view>
  ...
</Carbon.tree_view>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `hide_label` (`:boolean`) - Specify whether or not the label should be hidden Carbon default: `false`. Defaults to `nil`.
* `label` (`:string`) - Provide the label text that will be read by a screen reader. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the tree from a list of available sizes. Carbon default: `"sm"`. Must be one of `"sm"`, or `"xs"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `truncated_text`

TruncatedText.

Renders the Carbon `truncated text` web component.

## Example

```heex
<Carbon.truncated_text>
  ...
</Carbon.truncated_text>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `align` (`:string`) - Specify how the tooltip should align with the content. Carbon default: `"top"`. Defaults to `nil`.
* `autoalign` (`:any`) - Specify whether auto-align is enabled. Defaults to `true` when `enable-v12-autoalign` is enabled, and to `false` otherwise. Defaults to `nil`.
* `collapse_label` (`:string`) - The label on the collapse button. Carbon default: `""`. Defaults to `nil`.
* `expand_label` (`:string`) - The label on expand button. Carbon default: `""`. Defaults to `nil`.
* `id` (`:string`) - Unique identifier for the element. Carbon default: `""`. Defaults to `nil`.
* `lines` (`:any`) - The maximum number of lines to display before truncation. Defaults to `0` (no truncation applied). Note: the React counterpart defaults to `2` — consumers migrating from React should set this explicitly. Carbon default: `0`. Defaults to `nil`.
* `type` (`:any`) - The method to display the full text when truncated. Options are "tooltip" or "expand". if not passed, the text would just be truncated with ellipsis. Carbon default: `"tooltip"`. Must be one of `"tooltip"`, or `"expand"`.
* `value` (`:string`) - The string value to be truncated. Carbon default: `""`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header`

Header.

Renders the Carbon `header` web component.

## Example

```heex
<Carbon.header>
  ...
</Carbon.header>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_global_action`

Header global action button

Renders the Carbon `header global action` web component.

## Example

```heex
<Carbon.header_global_action>
  ...
</Carbon.header_global_action>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `active` (`:any`) - Specify whether the action is currently active. Defaults to `nil`.
* `panel_id` (`:any`) - Specify which header panel the button is associated with. Defaults to `nil`.
* `button_label_active` (`:any`) - The `aria-label` attribute for the button in its active state. Defaults to `nil`.
* `button_label_inactive` (`:any`) - The `aria-label` attribute for the button in its inactive state. Defaults to `nil`.
* `autofocus` (`:boolean`) - `true` if the button should have input focus when the page loads. Carbon default: `false`. Defaults to `nil`.
* `batch_action` (`:boolean`) - `true` if the button is being used within a data table batch action toolbar Carbon default: `false`. Defaults to `nil`.
* `button_class_name` (`:any`) - Specify an optional className to be added to your Button. Defaults to `nil`.
* `danger_description` (`:string`) - Specify the message read by screen readers for the danger button variants Carbon default: `""`. Defaults to `nil`.
* `disabled` (`:boolean`) - Specify whether the Button should be disabled, or not Carbon default: `false`. Defaults to `nil`.
* `download` (`:string`) - The default file name, used if this button is rendered as `<a>`. Defaults to `nil`.
* `has_main_content` (`:boolean`) - `true` if there is a non-icon content. Carbon default: `false`. Defaults to `nil`.
* `href` (`:string`) - Optionally specify an href for your Button to become an `<a>` element. Defaults to `nil`.
* `hreflang` (`:string`) - The language of what `href` points to, if this button is rendered as `<a>`. Defaults to `nil`.
* `is_expressive` (`:boolean`) - Specify whether the Button is expressive, or not. Carbon default: `false`. Defaults to `nil`.
* `is_selected` (`:boolean`) - Specify whether the Button is currently selected. Only applies to the icon only Ghost variant. Carbon default: `false`. Defaults to `nil`.
* `kind` (`:any`) - Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost` Carbon default: `"primary"`. Must be one of `"primary"`, `"secondary"`, `"tertiary"`, `"ghost"`, `"danger"`, `"danger-primary"`, `"danger-tertiary"`, or `"danger-ghost"`.
* `link_role` (`:string`) - The a11y role for `<a>`. Carbon default: `"button"`. Defaults to `nil`.
* `open_tooltip` (`:boolean`) - Boolean to determine if tooltip is open. Carbon default: `false`. Defaults to `nil`.
* `ping` (`:string`) - URLs to ping, if this button is rendered as `<a>`. Defaults to `nil`.
* `rel` (`:string`) - Optionally specify a `rel` when using an `<a>` element. Defaults to `nil`.
* `size` (`:any`) - Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` Carbon default: `"lg"`. Defaults to `nil`.
* `tab_index` (`:any`) - Optional prop to specify the tabIndex of the Button Carbon default: `0`. Defaults to `nil`.
* `target` (`:string`) - Optionally specify a `target` when using an `<a>` element. Defaults to `nil`.
* `tooltip_alignment` (`:any`) - Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end. Carbon default: `""`. Must be one of `"left"`, `""`, or `"right"`.
* `tooltip_position` (`:any`) - Specify the direction of the tooltip for icon-only buttons. Can be either top, right, bottom, or left. Carbon default: `"top"`. Must be one of `"top"`, `"right"`, `"bottom"`, or `"left"`.
* `tooltip_text` (`:string`) - If rendering an `icon-only` button through `slot="icon"`, Specify the text to be rendered in the tooltip. If using `Carbon.badge_indicator` with no count prop then the text should include describing there is a new notification. Defaults to `nil`.
* `type` (`:any`) - Optional prop to specify the type of the Button. Carbon default: `"button"`. Must be one of `"button"`, `"reset"`, or `"submit"`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_menu`

Header menu.

Renders the Carbon `header menu` web component.

## Example

```heex
<Carbon.header_menu>
  ...
</Carbon.header_menu>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `expanded` (`:boolean`) - `true` if the menu should be expanded. Carbon default: `false`. Defaults to `nil`.
* `is_active` (`:boolean`) - Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`. Carbon default: `false`. Defaults to `nil`.
* `trigger_content` (`:string`) - The content of the trigger button. Carbon default: `""`. Defaults to `nil`.
* `menu_label` (`:string`) - The `aria-label` attribute for the menu UI. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_menu_button`

The trigger button for side nav in header nav.

Renders the Carbon `header menu button` web component.

## Example

```heex
<Carbon.header_menu_button id="my-header-menu-button" on_toggled="my_event">
  ...
</Carbon.header_menu_button>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Events

Each `on_*` attribute takes the name of a LiveView event and requires an `id`.
The LiveView receives `%{"detail" => ..., "value" => ..., "id" => ...}`.

  * `on_toggled` - The custom event fired after this header menu button is toggled upon a user gesture.

## Attributes

* `active` (`:boolean`) - `true` if the button should represent its active state. Carbon default: `false`. Defaults to `nil`.
* `button_label_active` (`:string`) - The `aria-label` attribute for the button in its active state. Carbon default: `"Close navigation menu"`. Defaults to `nil`.
* `button_label_inactive` (`:string`) - The `aria-label` attribute for the button in its inactive state. Carbon default: `"Open navigation menu"`. Defaults to `nil`.
* `collapse_mode` (`:any`) - Collapse mode of the side nav. Carbon default: `"responsive"`. Must be one of `"fixed"`, `"rail"`, or `"responsive"`.
* `disabled` (`:boolean`) - `true` if the button should be disabled. Carbon default: `false`. Defaults to `nil`.
* `is_not_child_of_header` (`:boolean`) - If `true` will style the side nav to sit below the header Carbon default: `false`. Defaults to `nil`.
* `on_toggled` (`:string`) - LiveView event name, sent when the component emits its "header menu button toggled" event. The custom event fired after this header menu button is toggled upon a user gesture. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_menu_item`

Header submenu item.

Renders the Carbon `header menu item` web component.

## Example

```heex
<Carbon.header_menu_item>
  ...
</Carbon.header_menu_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `href` (`:string`) - Link `href`. Defaults to `nil`.
* `rel` (`:string`) - The link type. Defaults to `nil`.
* `target` (`:string`) - The link target. Defaults to `nil`.
* `title` (`:string`) - The title. Defaults to `nil`.
* `is_active` (`:boolean`) - Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`. Carbon default: `false`. Defaults to `nil`.
* `aria_current` (`:any`) - indicates that this element represents the current item. Defaults to `nil`.
* `role` (`:string`) - As child of <ul>, this element must have role of listitem Carbon default: `"listitem"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_name`

The product name UI in header nav.

Renders the Carbon `header name` web component.

## Example

```heex
<Carbon.header_name>
  ...
</Carbon.header_name>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `href` (`:string`) - Link `href`. Defaults to `nil`.
* `prefix` (`:string`) - The product name prefix. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_nav`

Header.

Renders the Carbon `header nav` web component.

## Example

```heex
<Carbon.header_nav>
  ...
</Carbon.header_nav>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `menu_bar_label` (`:string`) - The `aria-label` attribute for the menu bar UI. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_nav_item`

Header nav item.

Renders the Carbon `header nav item` web component.

## Example

```heex
<Carbon.header_nav_item>
  ...
</Carbon.header_nav_item>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `href` (`:string`) - Link `href`. Defaults to `nil`.
* `rel` (`:string`) - The link type. Defaults to `nil`.
* `target` (`:string`) - The link target. Defaults to `nil`.
* `title` (`:string`) - The title. Defaults to `nil`.
* `is_active` (`:boolean`) - Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`. Carbon default: `false`. Defaults to `nil`.
* `aria_current` (`:any`) - indicates that this element represents the current item. Defaults to `nil`.
* `role` (`:string`) - As child of <ul>, this element must have role of listitem Carbon default: `"listitem"`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_panel`

Header panel

Renders the Carbon `header panel` web component.

## Example

```heex
<Carbon.header_panel>
  ...
</Carbon.header_panel>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `expanded` (`:any`) - Specify whether the panel is expanded. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `header_side_nav_items`

Header Side Nav Items section

Renders the Carbon `header side nav items` web component.

## Example

```heex
<Carbon.header_side_nav_items>
  ...
</Carbon.header_side_nav_items>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `has_divider` (`:boolean`) - Optionally specify if container will have a bottom divider to differentiate between original sidenav items and header menu items. False by default. Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `unordered_list`

Unordered list.

Renders the Carbon `unordered list` web component.

## Example

```heex
<Carbon.unordered_list>
  ...
</Carbon.unordered_list>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `is_expressive` (`:boolean`) - `true` if expressive theme enabled. Carbon default: `false`. Defaults to `nil`.
* `nested` (`:boolean`) - Specify whether the list is nested, or not Carbon default: `false`. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

# `user_avatar`

User Avatar.

Renders the Carbon `user avatar` web component.

## Example

```heex
<Carbon.user_avatar>
  ...
</Carbon.user_avatar>
```

Child content is rendered inside the component. To fill a named slot of the
component, set `slot="name"` on the child element.

## Attributes

* `tooltip_text` (`:any`) - Specify the text of the tooltip. Can be string. Defaults to `nil`.
* `tooltip_alignment` (`:string`) - Specify the alignment of the tooltip. Carbon default: `"bottom"`. Defaults to `nil`.
* `name` (`:any`) - When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name. Defaults to `nil`.
* `size` (`:string`) - Set the size of the avatar circle. Carbon default: `"md"`. Defaults to `nil`.
* `image` (`:any`) - When passing the image prop, supply a full path to the image to be displayed. Defaults to `nil`.
* `image_description` (`:any`) - When passing the image prop use the imageDescription prop to describe the image for screen reader. Defaults to `nil`.
* `background_color` (`:string`) - Specify the background color for UserAvatar. Carbon default: `"order-1-cyan"`. Defaults to `nil`.
* `theme` (`:any`) - Set theme in which the component will be rendered. Defaults to `nil`.
* Global attributes are accepted. any additional HTML attributes, e.g. `class`, `id`, `slot`, `phx-*`.
## Slots

* `inner_block`

---

*Consult [api-reference.md](api-reference.md) for complete listing*