## `<w-attention>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| _actualDirection (JS only) | `unknown` | `-` | - |
| _initialPlacement (JS only) | `unknown` | `-` | - |
| activeAttentionType (JS only) | `activeAttentionType() => void` | `-` | - |
| callout | `boolean` | `false` | Renders the component as an inline callout. |
| can-close | `boolean` | `false` | Shows a close button inside the attention component. |
| close (JS only) | `close() => void` | `-` | - |
| cross-axis | `boolean` | `false` | Allows overflow checks on the cross axis when flipping. |
| defaultAriaLabel (JS only) | `defaultAriaLabel() => void` | `-` | - |
| distance | `number` | `8` | Distance offset between trigger and attention panel. |
| fallback-placements | `Directions[]` | `[]` | Ordered list of fallback placements. |
| flip | `boolean` | `false` | Enables automatic flipping when placement has no space. |
| handleDone (JS only) | `handleDone() => void` | `-` | - |
| highlight | `boolean` | `false` | Renders the component with highlight styling. |
| keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
| no-arrow | `boolean` | `false` | Hides the directional arrow of the attention component. |
| placement | [`Directions`](#directions) | `"bottom"` | Preferred placement relative to the trigger element. |
| pointingAtDirection (JS only) | `pointingAtDirection() => void` | `-` | - |
| popover | `boolean` | `false` | Enables native popover behavior for the attention element. |
| show | `boolean` | `false` | Controls whether the attention panel is visible. |
| skidding | `number` | `0` | Cross-axis offset for fine-grained positioning. |
| tooltip | `boolean` | `false` | Renders the component with tooltip styling and behavior. |

### Property Details

#### _actualDirection (JS only)



- Type: `unknown`
- Default: `-`

#### _initialPlacement (JS only)



- Type: `unknown`
- Default: `-`

#### activeAttentionType (JS only)



- Type: `activeAttentionType() => void`
- Default: `-`

#### callout

Renders the component as an inline callout.
Callout mode is used for always-in-flow informational content instead of floating overlay behavior.

- Type: `boolean`
- Default: `false`

#### can-close

Shows a close button inside the attention component.
Adds an internal dismiss action that lets users close the attention panel.

- Type: `boolean`
- Default: `false`

#### close (JS only)



- Type: `close() => void`
- Default: `-`

#### cross-axis

Allows overflow checks on the cross axis when flipping.
Use with `flip` to improve collision handling when space is constrained horizontally or vertically.

- Type: `boolean`
- Default: `false`

#### defaultAriaLabel (JS only)



- Type: `defaultAriaLabel() => void`
- Default: `-`

#### distance

Distance offset between trigger and attention panel.
Defines the main-axis spacing in pixels from the anchor element.

- Type: `number`
- Default: `8`

#### fallback-placements

Ordered list of fallback placements.
Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.

- Type: `Directions[]`
- Default: `[]`

#### flip

Enables automatic flipping when placement has no space.
Allows the component to choose an alternative side if the preferred placement would overflow.

- Type: `boolean`
- Default: `false`

#### handleDone (JS only)



- Type: `handleDone() => void`
- Default: `-`

#### highlight

Renders the component with highlight styling.
Use highlight mode to visually emphasize important contextual information.

- Type: `boolean`
- Default: `false`

#### keypressed (JS only)



- Type: `keypressed(e: KeyboardEvent) => void`
- Default: `-`

#### no-arrow

Hides the directional arrow of the attention component.
Disable the arrow when the visual connection to the trigger should not be shown.

- Type: `boolean`
- Default: `false`

#### placement

Preferred placement relative to the trigger element.
Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.

- Type: [`Directions`](#directions)
- Default: `"bottom"`

#### pointingAtDirection (JS only)



- Type: `pointingAtDirection() => void`
- Default: `-`

#### popover

Enables native popover behavior for the attention element.
When enabled, the component uses popover semantics and styling suitable for floating surface UI.

- Type: `boolean`
- Default: `false`

#### show

Controls whether the attention panel is visible.
Set to `true` to show the attention content and `false` to hide it.

- Type: `boolean`
- Default: `false`

#### skidding

Cross-axis offset for fine-grained positioning.
Moves the panel along the cross axis in pixels to adjust alignment with the trigger.

- Type: `number`
- Default: `0`

#### tooltip

Renders the component with tooltip styling and behavior.
Use for compact, non-modal contextual hints anchored to another element.

- Type: `boolean`
- Default: `false`

### Types

#### Directions

`'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'`