@awes-io/ui 2.143.0 → 2.144.0

package/docs/components/atoms/aw-flow.md

@@ -22,38 +22,75 @@ The `AwFlow` component provides a flexible flow layout system with configurable
 
 ```markup
 <AwFlow>
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
+    <AwButton>Item 1</AwButton>
+    <AwButton>Item 2</AwButton>
+    <AwButton>Item 3</AwButton>
 </AwFlow>
 ```
 
-### With Custom Gap
+### Vertical Layout
+
+In vertical mode, items stack vertically. Use the `align` prop to control horizontal alignment.
 
 ```markup
-<AwFlow :gap="8">
-    <div>Item 1</div>
-    <div>Item 2</div>
+<AwFlow vertical :gap="2">
+    <AwButton>Item 1</AwButton>
+    <AwButton>Item 2</AwButton>
+    <AwButton>Item 3</AwButton>
 </AwFlow>
 ```
 
-### Vertical Layout
+### Vertical with Alignment
+
+When the `vertical` prop is set, `align` controls horizontal alignment (items-center, items-end, items-start) and `justify` controls vertical distribution.
+
+```markup
+<AwFlow vertical align="center" justify="center" :gap="2">
+    <AwButton>Centered Vertically</AwButton>
+    <AwButton>and Horizontally</AwButton>
+</AwFlow>
+```
+
+### Horizontal with Alignment
+
+In horizontal mode (default), `align` controls vertical alignment and `justify` controls horizontal distribution. Note: horizontal mode has `align="center"` by default.
 
 ```markup
-<AwFlow vertical :gap="4">
-    <div>Item 1</div>
-    <div>Item 2</div>
+<AwFlow justify="center" :gap="6">
+    <AwButton>Centered Item</AwButton>
 </AwFlow>
 ```
 
-### With Alignment
+### With Wrap
+
+The `wrap` prop allows items to wrap to the next line when they exceed the container width.
 
 ```markup
-<AwFlow justify="center" align="center" :gap="6">
-    <div>Centered Item</div>
+<AwFlow wrap :gap="2">
+    <AwButton>Item 1</AwButton>
+    <AwButton>Item 2</AwButton>
+    <AwButton>Item 3</AwButton>
+    <AwButton>Item 4</AwButton>
+    <AwButton>Item 5</AwButton>
+    <AwButton>Item 6</AwButton>
 </AwFlow>
 ```
 
+### Inline Flow
+
+Use the `inline` prop to render as inline-flex, allowing the flow to sit inline with surrounding content.
+
+```markup
+<AwDescription tag="div">
+    This is text before
+    <AwFlow inline :gap="2">
+        <AwButton size="sm">Action 1</AwButton>
+        <AwButton size="sm">Action 2</AwButton>
+    </AwFlow>
+    and text after.
+</AwDescription>
+```
+
 ## API
 
 ### Props
@@ -61,11 +98,12 @@ The `AwFlow` component provides a flexible flow layout system with configurable
 | Name | Description | Type | Required | Default |
 |------|-------------|------|----------|---------|
 | tag | HTML tag to render | `String` | `false` | `'span'` |
-| gap | Gap scale (spacing multiplier) | `Number` | `false` | `4` |
-| wrapChildren | Whether to wrap each child in a container | `Boolean` | `false` | `true` |
-| justify | Horizontal alignment (center, end) | `String` | `false` | `''` |
-| align | Vertical alignment (start, center, end) | `String` | `false` | `''` |
-| vertical | Use vertical layout | `Boolean` | `false` | `false` |
+| gap | Gap scale (spacing multiplier, supports: 1, 2, 3, 4, 5, 6, 8) | `Number` | `false` | `4` |
+| justify | Flexbox justify-content (start, center, between, end) | `String` | `false` | `''` |
+| align | Flexbox align-items (start, center, end) | `String` | `false` | `'center'` (horizontal mode only) |
+| vertical | Use vertical layout (flex-col) | `Boolean` | `false` | `false` |
+| wrap | Allow items to wrap to next line (flex-wrap) | `Boolean` | `false` | `false` |
+| inline | Use inline-flex instead of flex | `Boolean` | `false` | `false` |
 
 ### Slots
 
@@ -85,8 +123,18 @@ No events are emitted by this component.
 ## Notes
 
 - **Import Method:** Global - Available as atom component
-- Gap is a scale multiplier, not pixels
-- Empty nodes are automatically filtered out
-- When `wrapChildren` is false, children are not wrapped in containers
-- Supports responsive alignment and justification
+- Built on top of Tailwind's flexbox utilities
+- **Gap values:** Accepts numbers 1-6 and 8, which map to Tailwind's gap classes (gap-1 through gap-8)
+- **Default alignment behavior:**
+  - Horizontal mode (default): Items have `align="center"` by default for vertical centering
+  - Vertical mode: No default alignment, items align to start unless specified
+- **Alignment and justify behavior:**
+  - **Horizontal mode:** `align` controls vertical alignment (items-*), `justify` controls horizontal distribution (justify-*)
+  - **Vertical mode:** `align` controls horizontal alignment (items-*), `justify` controls vertical distribution (justify-*)
+- **Available alignment values:**
+  - `align`: `start`, `center`, `end`
+  - `justify`: `start`, `center`, `between`, `end`
+- Use `wrap` prop to enable multi-line layouts when items exceed container width
+- Use `inline` prop to render as inline-flex instead of block-level flex
+- Component renders as a `<span>` by default (can be changed via `tag` prop)
 

package/docs/components/atoms/aw-grid.md

@@ -40,20 +40,26 @@ The `AwGrid` component provides a CSS Grid-based layout system with configurable
 
 ### With Column Spanning
 
+Children can span multiple columns using the `span` attribute:
+
 ```markup
 <AwGrid :col="3" :gap="6">
-    <div span="2">Spans 2 columns</div>
+    <div :span="2">Spans 2 columns</div>
     <div>Normal</div>
     <div>Normal</div>
 </AwGrid>
 ```
 
-### With Alignment
+### Responsive Spanning
+
+Spanning can also be responsive:
 
 ```markup
-<AwGrid :col="2" align="center" :gap="4">
-    <div>Centered Item 1</div>
-    <div>Centered Item 2</div>
+<AwGrid :col="{ default: 1, md: 3 }" :gap="6">
+    <div :span="{ default: 1, md: 2 }">
+        Spans full width on mobile, 2 columns on desktop
+    </div>
+    <div>Normal</div>
 </AwGrid>
 ```
 
@@ -63,9 +69,10 @@ The `AwGrid` component provides a CSS Grid-based layout system with configurable
 
 | Name | Description | Type | Required | Default |
 |------|-------------|------|----------|---------|
-| col | Number of columns or responsive object | `Number` / `Object` | `false` | `1` |
-| gap | Gap scale or responsive object | `Number` / `Object` | `false` | `6` |
-| align | Vertical alignment (start, center, end) | `String` | `false` | `'start'` |
+| col | Number of columns or responsive object (e.g., `{ default: 1, md: 2, lg: 3 }`) | `Number` / `Object` | `false` | `1` |
+| gap | Gap scale or responsive object (supports same values as AwFlow: 1-6, 8) | `Number` / `Object` | `false` | `6` |
+| align | Vertical alignment within grid cells (start, center, end) | `String` | `false` | `'start'` |
+| span | Column span for the grid itself (used when nesting grids) | `Number` / `Object` | `false` | `null` |
 
 ### Slots
 
@@ -85,7 +92,18 @@ No events are emitted by this component.
 ## Notes
 
 - **Import Method:** Global - Available as atom component
-- Gap is a scale multiplier, not pixels
-- Empty nodes are automatically filtered out
-- Children can use `span` attribute to span multiple columns
-- Supports responsive column and gap configuration via objects (e.g., `{ default: 1, md: 2, lg: 3 }`)
+- **Functional Component:** AwGrid is a functional component (no instance, lighter weight)
+- Built on top of Tailwind's CSS Grid utilities
+- **Gap values:** Accepts numbers 1-6 and 8, which map to Tailwind's gap classes (gap-1 through gap-8)
+- **Responsive configuration:** Both `col` and `gap` support responsive objects
+  - Use `{ default: 1, md: 2, lg: 3 }` syntax for responsive columns
+  - The `default` key is used for the base (mobile) value
+  - Available breakpoints: `sm`, `md`, `lg`, `xl`, `2xl`
+- **Column spanning:** Children can use the `span` attribute to span multiple columns
+  - Use `:span="2"` for static spanning
+  - Use `:span="{ default: 1, md: 2 }"` for responsive spanning
+  - The `span` attribute is automatically converted to `col-span-*` classes
+- **Grid nesting:** The grid component itself can have a `span` prop when nested inside another grid
+- **Alignment:** The `align` prop controls vertical alignment of items within grid cells (items-start, items-center, items-end)
+- Empty nodes (whitespace, comments) are automatically filtered out
+- Component always renders as a `<div>` element

package/docs/components/atoms/aw-icon-system-color.md

@@ -112,6 +112,7 @@ The component renders inline SVG, allowing CSS styling:
 ## Notes
 
 - **Import Method:** Global - Available as atom component
+- **Preferred Usage:** Use `<AwIcon name="awesiocolor/icon-name" />` instead of using this component directly. The AwIcon component automatically detects the icon type and provides a simpler API.
 - Icons maintain their original colors from design
 - Inline SVG allows for advanced CSS styling
 - Icon viewBox and content come from icon library

package/docs/components/atoms/aw-icon-system-mono.md

@@ -193,6 +193,7 @@ The component automatically includes `aria-hidden="true"` since icons are decora
 ## Notes
 
 - **Import Method:** Global - Available as atom component
+- **Preferred Usage:** Use `<AwIcon name="awesio/icon-name" />` instead of using this component directly. The AwIcon component automatically detects the icon type and provides a simpler API.
 - Functional component for optimal performance
 - Icons inherit current text color
 - SVG paths defined in `@AwUtils/icons/mono`

package/docs/components/atoms/aw-icon.md

@@ -39,7 +39,7 @@ It automatically detects the icon type and renders the appropriate component.
 ### With Color
 
 ```markup
-<AwIcon name="star" color="accent-500" />
+<AwIcon name="star" color="accent" />
 ```
 
 ### System Icons
@@ -67,9 +67,9 @@ It automatically detects the icon type and renders the appropriate component.
 
 | Name | Description | Type | Required | Default |
 |------|-------------|------|----------|---------|
-| name | Icon name (required) | `String` | `true` | - |
+| name | Icon name (required) - see [Built-in Icons](/reference/icons) | `String` | `true` | - |
 | size | Icon size (pixels or number) | `String` / `Number` | `false` | `null` |
-| color | Icon fill color | `String` | `false` | `''` |
+| color | Icon fill color - see [Built-in Colors](/reference/colors) | `String` | `false` | `''` |
 | viewBox | Custom SVG viewBox | `String` | `false` | `null` |
 | className | Additional CSS class | `String` | `false` | - |
 

package/docs/components/atoms/aw-info.md

@@ -76,6 +76,42 @@ No events are emitted by this component.
 - `AwLabel` - Label component
 - `AwInput` - Input component
 
+## Component Behavior
+
+### Label Display
+- Label is rendered only when `label` prop is provided
+- Label uses `AwDescription` component with `<span>` tag
+- When `required` is true, label receives `aw-info__label--required` class for styling
+
+### Help Tooltip
+- Help icon appears only when `help` prop is provided
+- Tooltip is positioned to the right of the label
+- Tooltip uses Vue tooltip directive with `:right.prepend` modifiers
+- Default help icon is `info-circle` from AwIconSystemMono
+- Help icon can be customized using the `icon` slot
+
+### Content Display
+- Default slot takes precedence over `text` prop
+- When default slot has content, `text` prop is ignored
+- When no slot content and no `text` prop, displays '—' (em dash)
+- Slot detection uses `notEmptyNode` utility to filter empty nodes
+- Text content is rendered in a `<div>` wrapper
+
+### Structure
+```
+<div class="aw-info">
+  <div class="aw-info__label" [class.aw-info__label--required]>
+    <AwDescription tag="span">{{ label }}</AwDescription>
+    <slot name="icon">
+      <span v-tooltip>
+        <AwIconSystemMono name="info-circle" />
+      </span>
+    </slot>
+  </div>
+  <slot /> or <div>{{ text || '—' }}</div>
+</div>
+```
+
 ## Notes
 
 - **Import Method:** Global - Available as atom component
@@ -83,3 +119,5 @@ No events are emitted by this component.
 - Help icon appears when `help` prop is provided
 - Default help icon is `info-circle` from system icons
 - Use for displaying read-only information in forms or detail views
+- Component checks for non-empty slot nodes using `$scopedSlots` API
+- Supports both string and number values for `text` prop

package/docs/components/atoms/aw-input.md

@@ -46,7 +46,7 @@ The `AwInput` component is a styled text input field with label, error handling,
 ```markup
 <AwInput v-model="search" label="Search">
     <template #icon>
-        <AwIcon name="awesio/search" />
+        <AwIcon name="awesio/search" class="mx-3" />
     </template>
 </AwInput>
 ```
@@ -102,6 +102,91 @@ export default {
 }
 ```
 
+## Component Behavior
+
+### Input Type Validation
+- Invalid types (checkbox, radio, date, tel, color) trigger console errors
+- Invalid type suggestions:
+  - `checkbox` → Use `<AwCheckbox />` or `<AwSwitcher />`
+  - `radio` → Use `<AwRadio />`
+  - `date/datetime/time/month/week` → Use `<AwDate />`
+  - `tel` → Use `<AwTel />`
+- Type validation runs via prop validator
+- **Preferred alternatives for number/money:**
+  - For number inputs → Use `<AwNumber />` (preferred over `type="number"`)
+  - For money/currency inputs → Use `<AwMoney />` (preferred over `type="number"` with prefix/postfix)
+
+### Label Behavior
+- Label appears only when `label` prop or `label` slot is provided
+- Label is rendered inside the input wrapper (floating label pattern)
+- Required indicator shown when `isRequired` is true (from TextFieldMixin)
+- Label receives `aw-text-field__label--required` class when required
+
+### Prefix and Postfix
+- Prefix/postfix can be text (via props) or custom content (via slots)
+- When using text props, wrapper receives `px-4` padding
+- Prefix appears before the input, postfix after
+- CSS classes: `aw-text-field__prefix`, `aw-text-field__postfix`
+- Wrapper adds `has-prefix` or `has-postfix` classes for styling
+
+### Icon Slot
+- Icon slot renders inside the input wrapper
+- When icon slot has content, wrapper adds `has-icon` class
+- Icon positioned with `aw-text-field__icon` class
+- Recommended to add `mx-3` class to icons for proper spacing
+
+### Size and Padding
+- Two sizes: `md` (default) and `sm`
+- Size affects input padding:
+  - `md` → `p-3` (12px padding)
+  - `sm` → `p-2` (8px padding)
+- Size validation checks against configured sizes in `_config.sizes`
+
+### Error Handling
+- Error state managed by TextFieldMixin
+- Error tooltip shows on input with `v-tooltip.show.prepend`
+- Input receives `data-error` attribute when error exists
+- Input uses `aria-describedby` for error accessibility
+- Error text and ID provided via scoped slot bindings
+
+### Theme Modifiers
+- `theme` prop accepts comma-separated modifiers
+- Each modifier adds `aw-text-field--{modifier}` class
+- Example: `theme="compact,bordered"` → `aw-text-field--compact aw-text-field--bordered`
+
+### Structure
+```
+<label class="aw-text-field is-{type} [has-icon] [has-prefix] [has-postfix]">
+  <div class="aw-text-field__prefix [px-4]">
+    <slot name="prefix">{{ prefix }}</slot>
+  </div>
+
+  <div class="relative w-full">
+    <slot name="element" v-bind="{ cssClass, value, errorTooltip, ... }">
+      <input
+        class="aw-text-field__element [p-3|p-2]"
+        :value="inputValue"
+        :aria-describedby="errorId"
+        :data-error="errorText"
+        v-tooltip.show.prepend="errorTooltip"
+      />
+    </slot>
+
+    <div class="aw-text-field__label [aw-text-field__label--required]">
+      <slot name="label">{{ label }}</slot>
+    </div>
+
+    <span class="aw-text-field__icon">
+      <slot name="icon" />
+    </span>
+  </div>
+
+  <div class="aw-text-field__postfix [px-4]">
+    <slot name="postfix">{{ postfix }}</slot>
+  </div>
+</label>
+```
+
 ## Related Components
 
 - `AwTextarea` - Multi-line text input
@@ -109,12 +194,19 @@ export default {
 - `AwSelect` - Select dropdown
 - `AwDate` - Date input
 - `AwTel` - Telephone input
+- `AwNumber` - Number input with formatting
+- `AwMoney` - Money/currency input with formatting
 
 ## Notes
 
 - **Import Method:** Global - Available as atom component
-- Extends `TextFieldMixin` for common field functionality
+- Extends `TextFieldMixin` for common field functionality (value, error, label, validation)
 - Supports error states with tooltip display
 - Invalid input types (checkbox, radio, date, tel, color) will show console errors
 - Use appropriate specialized components for specific input types
 - Size affects padding: `md` uses `p-3`, `sm` uses `p-2`
+- Base CSS class: `aw-text-field` (from config)
+- Wrapper is a `<label>` element for better accessibility
+- Input element uses `mergedAttributes` (combines type, skipAttr, $attrs, and id)
+- All standard HTML input attributes supported via `$attrs` (inheritAttrs enabled)
+- All standard input events supported via `mergedListeners`

package/docs/components/atoms/aw-label.md

@@ -27,15 +27,15 @@ The `AwLabel` component displays a styled label with optional icons and customiz
 ### With Icons
 
 ```markup
-<AwLabel label="Featured" icon="star" />
+<AwLabel label="Featured" icon="awesio/star" />
 <AwLabel label="Verified" icon="awesio/check" icon-second="awesio/close" />
 ```
 
 ### With Colors
 
 ```markup
-<AwLabel label="Success" color="success-500" />
-<AwLabel label="Warning" color="warning-500" on-color="white" />
+<AwLabel label="Success" color="success" />
+<AwLabel label="Warning" color="warning" />
 ```
 
 ### Boolean Icon
@@ -51,10 +51,10 @@ The `AwLabel` component displays a styled label with optional icons and customiz
 | Name | Description | Type | Required | Default |
 |------|-------------|------|----------|---------|
 | label | Label text | `String` | `true` | - |
-| color | Background color | `String` | `false` | `''` |
-| onColor | Text/icon color | `String` | `false` | `''` |
-| icon | Leading icon (boolean for default, string for custom) | `Boolean` / `String` | `false` | `null` |
-| iconSecond | Trailing icon name | `String` | `false` | `null` |
+| color | Background color - see [Built-in Colors](/reference/colors) | `String` | `false` | `''` |
+| onColor | Text/icon color - see [Built-in Colors](/reference/colors) | `String` | `false` | `''` |
+| icon | Leading icon (boolean for default, string for custom) - see [Built-in Icons](/reference/icons) | `Boolean` / `String` | `false` | `null` |
+| iconSecond | Trailing icon name - see [Built-in Icons](/reference/icons) | `String` | `false` | `null` |
 
 ### Slots
 
@@ -66,6 +66,56 @@ The `AwLabel` component displays a styled label with optional icons and customiz
 
 No events are emitted by this component.
 
+## Component Behavior
+
+### Icon Handling
+- **Boolean icon:** When `icon` is `true`, displays `awesio/circle` icon
+- **String icon:** When `icon` is a string, displays that icon name
+- **Null/false icon:** When `icon` is `null` or `false`, no icon displayed
+- Icons are automatically rendered using `AwIcon` component with size 16
+- Icons have `aria-hidden="true"` for accessibility
+
+### Icon Type Detection
+- Component checks if icon exists in mono icon set
+- System icons (mono) are detected automatically
+- Non-system icons handled via AwIcon component
+
+### Color System
+- **Default colors (no color/onColor specified):**
+  - Background: `var(--c-mono-900)`
+  - Text/icon: `var(--c-mono-400)`
+- **With color prop:**
+  - Background: Uses `toColor(color)` utility
+  - Text/icon: Auto-calculated using `toOnColor(color)` for contrast
+- **With onColor prop:**
+  - Overrides automatic text/icon color
+  - Uses `toColor(onColor)` utility
+
+### Available Colors
+- **Semantic colors:** `success`, `warning`, `error`, `info`, `accent`, `notify`
+- **Mono scale:** `mono-0` through `mono-900` (in increments of 50/100)
+- **Named colors:** `red`, `peach`, `yellow`, `magenta`, `purple`, `light-blue`, `blue`, `green`, `lime`, `grey`, `light-grey`, `black`, `forest`, `brown`
+- All colors automatically get proper contrast text/icon colors via `toOnColor` utility
+
+### Style Variables
+Component uses CSS custom properties:
+- `--aw-label-bg` - Background color
+- `--aw-label-on-color` - Text and icon color
+
+### Rendering
+- Component only renders if `label` prop is provided
+- Default slot replaces label text but label prop is still required
+- Icons positioned via flexbox: leading icon → text → trailing icon
+
+### Structure
+```
+<div class="aw-label" :style="{ --aw-label-bg, --aw-label-on-color }">
+  <AwIcon v-if="_icon" :name="_icon" size="16" />
+  <slot>{{ label }}</slot>
+  <AwIcon v-if="iconSecond" :name="iconSecond" size="16" />
+</div>
+```
+
 ## Related Components
 
 - `AwTag` - Tag component
@@ -75,9 +125,12 @@ No events are emitted by this component.
 ## Notes
 
 - **Import Method:** Global - Available as atom component
-- When `icon` is `true`, displays default circle icon
+- When `icon` is `true`, displays default circle icon (`awesio/circle`)
 - When `icon` is a string, displays that icon
-- System icons are automatically detected and use `AwIconSystemMono`
+- System icons are automatically detected from mono icon set
 - Default colors are mono-900 background with mono-400 text if no colors specified
 - Use `onColor` to override text color when using custom background color
+- Label prop is required even when using default slot
+- Icons are always size 16 and have aria-hidden attribute
+- Color utilities (`toColor`, `toOnColor`) handle color name to CSS variable conversion
 

package/docs/components/atoms/aw-link.md

@@ -30,16 +30,16 @@ The `AwLink` component is a flexible link component that supports routing, exter
 <AwLink href="https://example.com">External Link</AwLink>
 ```
 
-### With Router
+### With Router Object
 
 ```markup
-<AwLink :to="{ name: 'page', params: { id: 1 } }">Router Link</AwLink>
+<AwLink :href="{ name: 'page', params: { id: 1 } }">Router Link</AwLink>
 ```
 
 ### With Custom Color
 
 ```markup
-<AwLink href="/page" color="accent-500">Colored Link</AwLink>
+<AwLink href="/page" color="accent">Colored Link</AwLink>
 ```
 
 ### Reset Styling
@@ -54,11 +54,11 @@ The `AwLink` component is a flexible link component that supports routing, exter
 
 | Name | Description | Type | Required | Default |
 |------|-------------|------|----------|---------|
-| href | Link destination (string or router object) | `String` / `Object` | `false` | - |
-| to | Router destination (alternative to href) | `String` / `Object` | `false` | - |
+| href | Link destination (string or router object) | `String` / `Object` | `false` | `''` |
+| back | Enable back button behavior | `Boolean` | `false` | `false` |
 | className | CSS class name | `String` | `false` | From config |
 | text | Link text content | `String` | `false` | - |
-| color | Link color | `String` | `false` | `null` |
+| color | Link color - see [Built-in Colors](/reference/colors) | `String` | `false` | `null` |
 | reset | Remove default link styling | `Boolean` | `false` | `false` |
 
 ### Slots
@@ -84,6 +84,51 @@ export default {
 }
 ```
 
+## Component Behavior
+
+### Link Type Detection
+- **Internal links:** Uses router component (default: `router-link`) when no protocol detected
+- **External links:** Uses `<a>` tag when URL starts with `http://` or `https://`
+- Detection handled by linkMixin
+
+### Routing
+- **href prop:** Accepts string URL or router object
+- **String href:** Direct URL path (e.g., `/page` or `https://example.com`)
+- **Object href:** Vue Router location descriptor
+  - Named routes: `{ name: 'routeName' }`
+  - Path with params: `{ path: '/path', query: { ... } }`
+  - All Vue Router location options supported
+- **Internal conversion:** `href` is converted to `to` prop when rendering NuxtLink/router-link
+
+### Component Rendering
+- Uses dynamic component (`:is="_linkComponent"`)
+- Component type determined by linkMixin based on URL
+- Router component configurable via `_config.routerComponent`
+
+### Styling System
+- **Default:** Uses `baseClass` from config (`link`)
+- **With color:** Sets `--btn-color` CSS variable via `colorStyle`
+- **With reset:** Removes all default classes when `reset={true}`
+- **Custom className:** Can override default class via `className` prop
+
+### Color Handling
+- Color prop uses `toColor` utility for conversion
+- Sets CSS custom property `--btn-color`
+- Supports all color names (semantic, mono, named)
+- Color is optional (default: null)
+
+### Content
+- **Default slot:** Primary way to add content
+- **Text prop:** Alternative to slot for simple text
+- **Slot takes precedence:** If slot has content, text prop ignored
+
+### Structure
+```
+<component :is="router-link | a" :class="className" :style="colorStyle">
+  <slot>{{ text }}</slot>
+</component>
+```
+
 ## Related Components
 
 - `AwButton` - Button component that extends AwLink
@@ -92,8 +137,15 @@ export default {
 ## Notes
 
 - **Import Method:** Global - Available as atom component
+- Extends `linkMixin` for consistent link behavior
 - Automatically uses `router-link` for internal links and `<a>` for external links
 - External links are detected by protocol (http://, https://)
-- Supports both `href` and `to` props for routing
-- Color prop sets CSS custom property for link color
-- Reset prop removes default link styling
+- Only `href` prop is used - it accepts both strings and router objects
+- Internally converts `href` to `to` when rendering router-link component
+- `back` prop enables special back button behavior with router
+- Color prop sets CSS custom property `--btn-color` for link color
+- Reset prop removes default link styling completely
+- All standard link events supported via `$listeners`
+- Component type (router-link vs a vs button) determined automatically at runtime
+- Config allows customizing router component name
+- Renders as `<button>` when no href provided or when disabled