@salesforce/afv-skills 1.21.0 → 1.22.0

package/skills/design-systems-slds-apply/guidance/utilities/box.md

@@ -0,0 +1,125 @@
+---
+id: slds.guidance.utilities.box
+title: Box Utilities
+description: SLDS box utility classes for containers with padding and borders
+summary: "Utilities for creating styled containers with padding, borders, and interactive states. Use with theme utilities for semantic colors."
+
+artifact_type: reference
+domain: utilities
+topic: box
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.utilities.themes
+  - slds.guidance.utilities.borders
+  - slds.guidance.utilities.padding
+
+tags: [utilities, box, containers, padding, borders]
+keywords: [slds-box, slds-box_xx-small, slds-box_x-small, slds-box_small, slds-box_link, container, padding]
+---
+
+# Box Utilities
+
+Utilities for creating styled containers with consistent padding, borders, and interactive states.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-box` | Creates a container with 16px padding, rounded corners, and subtle border |
+| `slds-box_xx-small` | Container with 4px padding for compact layouts |
+| `slds-box_x-small` | Container with 8px padding for small content areas |
+| `slds-box_small` | Container with 12px padding for slightly reduced spacing |
+| `slds-box_link` | Makes box clickable with hover/focus states and accent border |
+
+## Related Utilities
+
+- **Themes Utilities** - For background colors and semantic theming (success, error, warning, info), see [Themes Utilities](ref:slds.guidance.utilities.themes)
+- **Borders Utilities** - For directional borders, see [Borders Utilities](ref:slds.guidance.utilities.borders)
+- **Spacing Utilities** - For padding control, see [Padding Utilities](ref:slds.guidance.utilities.padding)
+
+## Common Patterns
+
+### Basic Container
+```html
+<!-- Standard box container with default 16px padding -->
+<div class="slds-box">
+  <h3 class="slds-text-heading_small">Container Title</h3>
+  <p>Content with consistent padding and subtle border styling.</p>
+</div>
+```
+
+### Themed Notification Box
+```html
+<!-- Success notification with semantic colors (see themes.md for theme utilities) -->
+<div class="slds-box slds-theme_success">
+  <div class="slds-media">
+    <div class="slds-media__figure">
+      <span class="slds-icon_container">
+        <svg class="slds-icon slds-icon_small">
+          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
+        </svg>
+      </span>
+    </div>
+    <div class="slds-media__body">
+      <p>Operation completed successfully.</p>
+    </div>
+  </div>
+</div>
+```
+
+### Interactive Box Link
+```html
+<!-- Clickable box that navigates to detail view -->
+<a href="/record/detail" class="slds-box slds-box_link">
+  <h3 class="slds-text-heading_small">Account Name</h3>
+  <dl class="slds-list_horizontal slds-wrap">
+    <dt class="slds-item_label">Type:</dt>
+    <dd class="slds-item_detail">Customer</dd>
+    <dt class="slds-item_label">Revenue:</dt>
+    <dd class="slds-item_detail">$1.2M</dd>
+  </dl>
+</a>
+```
+
+### Compact Info Card
+```html
+<!-- Small padding variant for dense layouts (see themes.md for theme utilities) -->
+<div class="slds-box slds-box_x-small slds-theme_shade">
+  <div class="slds-grid slds-grid_align-spread">
+    <span class="slds-text-body_small">Last Updated</span>
+    <span class="slds-text-body_small">2 hours ago</span>
+  </div>
+</div>
+```
+
+### Error Message Box
+```html
+<!-- Error state with semantic styling (see themes.md for theme utilities) -->
+<div class="slds-box slds-theme_error" role="alert">
+  <h3 class="slds-text-heading_small">Validation Error</h3>
+  <ul class="slds-list_dotted">
+    <li>Email address is required</li>
+    <li>Phone number format is invalid</li>
+  </ul>
+</div>
+```
+
+## Best Practices
+
+✅ Use `slds-box` for consistent container styling across components
+✅ Combine box utilities with theme utilities (see [Themes Utilities](ref:slds.guidance.utilities.themes)) for semantic state communication
+✅ Use `slds-box_link` for entire containers that are clickable
+✅ Combine size variants with theme classes for flexible layouts
+✅ Apply `role="alert"` to error and warning themed boxes for accessibility
+
+❌ Don't nest multiple `slds-box` containers without purpose
+❌ Don't apply `slds-box_link` to non-interactive elements
+❌ Don't override box padding with inline styles - use the size variants instead

package/skills/design-systems-slds-apply/guidance/utilities/color.md

@@ -0,0 +1,165 @@
+---
+id: slds.guidance.utilities.color
+title: Color Utilities
+description: SLDS color utility classes for text, background, border, and fill properties
+summary: "Utilities for applying neutral gray colors. Includes text, background, border, and fill classes across a 12-step neutral palette."
+
+artifact_type: reference
+domain: utilities
+topic: color
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.hooks.color
+
+tags: [utilities, color, neutral-palette, accessibility]
+keywords: [slds-color, text-gray, background-gray, border-gray, fill-gray]
+---
+
+# Color - Neutral Palette
+
+Utilities for applying neutral gray colors to text, backgrounds, borders, and SVG fills.
+
+## Core Classes
+
+### Text Colors
+
+| Class | Purpose | Token Value |
+|-------|---------|-------------|
+| `slds-color__text_gray-1` | Apply lightest gray text color | `--slds-g-color-neutral-base-100` |
+| `slds-color__text_gray-2` | Apply gray-2 text color | `--slds-g-color-neutral-base-95` |
+| `slds-color__text_gray-3` | Apply gray-3 text color | `--slds-g-color-neutral-base-95` |
+| `slds-color__text_gray-4` | Apply gray-4 text color | `--slds-g-color-neutral-base-90` |
+| `slds-color__text_gray-5` | Apply gray-5 text color | `--slds-g-color-neutral-base-90` |
+| `slds-color__text_gray-6` | Apply gray-6 text color | `--slds-g-color-neutral-base-80` |
+| `slds-color__text_gray-7` | Apply gray-7 text color | `--slds-g-color-neutral-base-70` |
+| `slds-color__text_gray-8` | Apply gray-8 text color | `--slds-g-color-neutral-base-60` |
+| `slds-color__text_gray-9` | Apply gray-9 text color | `--slds-g-color-neutral-base-50` |
+| `slds-color__text_gray-10` | Apply gray-10 text color | `--slds-g-color-neutral-base-30` |
+| `slds-color__text_gray-11` | Apply gray-11 text color | `--slds-g-color-neutral-base-30` |
+| `slds-color__text_gray-12` | Apply darkest gray text color | `--slds-g-color-neutral-base-20` |
+
+### Background Colors
+
+| Class | Purpose | Token Value |
+|-------|---------|-------------|
+| `slds-color__background_gray-1` | Apply lightest gray background | `--slds-g-color-neutral-base-100` |
+| `slds-color__background_gray-2` | Apply gray-2 background | `--slds-g-color-neutral-base-95` |
+| `slds-color__background_gray-3` | Apply gray-3 background | `--slds-g-color-neutral-base-95` |
+| `slds-color__background_gray-4` | Apply gray-4 background | `--slds-g-color-neutral-base-90` |
+| `slds-color__background_gray-5` | Apply gray-5 background | `--slds-g-color-neutral-base-90` |
+| `slds-color__background_gray-6` | Apply gray-6 background | `--slds-g-color-neutral-base-80` |
+| `slds-color__background_gray-7` | Apply gray-7 background | `--slds-g-color-neutral-base-70` |
+| `slds-color__background_gray-8` | Apply gray-8 background | `--slds-g-color-neutral-base-60` |
+| `slds-color__background_gray-9` | Apply gray-9 background | `--slds-g-color-neutral-base-50` |
+| `slds-color__background_gray-10` | Apply gray-10 background | `--slds-g-color-neutral-base-30` |
+| `slds-color__background_gray-11` | Apply gray-11 background | `--slds-g-color-neutral-base-30` |
+| `slds-color__background_gray-12` | Apply darkest gray background | `--slds-g-color-neutral-base-20` |
+
+### Border Colors
+
+| Class | Purpose | Token Value |
+|-------|---------|-------------|
+| `slds-color__border_gray-1` | Apply lightest gray border | `--slds-g-color-neutral-base-100` |
+| `slds-color__border_gray-2` | Apply gray-2 border | `--slds-g-color-neutral-base-95` |
+| `slds-color__border_gray-3` | Apply gray-3 border | `--slds-g-color-neutral-base-95` |
+| `slds-color__border_gray-4` | Apply gray-4 border | `--slds-g-color-neutral-base-90` |
+| `slds-color__border_gray-5` | Apply gray-5 border | `--slds-g-color-neutral-base-90` |
+| `slds-color__border_gray-6` | Apply gray-6 border | `--slds-g-color-neutral-base-80` |
+| `slds-color__border_gray-7` | Apply gray-7 border | `--slds-g-color-neutral-base-70` |
+| `slds-color__border_gray-8` | Apply gray-8 border | `--slds-g-color-neutral-base-60` |
+| `slds-color__border_gray-9` | Apply gray-9 border | `--slds-g-color-neutral-base-50` |
+| `slds-color__border_gray-10` | Apply gray-10 border | `--slds-g-color-neutral-base-30` |
+| `slds-color__border_gray-11` | Apply gray-11 border | `--slds-g-color-neutral-base-30` |
+| `slds-color__border_gray-12` | Apply darkest gray border | `--slds-g-color-neutral-base-20` |
+
+### SVG Fill Colors
+
+| Class | Purpose | Token Value |
+|-------|---------|-------------|
+| `slds-color__fill_gray-1` | Apply lightest gray SVG fill | `--slds-g-color-neutral-base-100` |
+| `slds-color__fill_gray-2` | Apply gray-2 SVG fill | `--slds-g-color-neutral-base-95` |
+| `slds-color__fill_gray-3` | Apply gray-3 SVG fill | `--slds-g-color-neutral-base-95` |
+| `slds-color__fill_gray-4` | Apply gray-4 SVG fill | `--slds-g-color-neutral-base-90` |
+| `slds-color__fill_gray-5` | Apply gray-5 SVG fill | `--slds-g-color-neutral-base-90` |
+| `slds-color__fill_gray-6` | Apply gray-6 SVG fill | `--slds-g-color-neutral-base-80` |
+| `slds-color__fill_gray-7` | Apply gray-7 SVG fill | `--slds-g-color-neutral-base-70` |
+| `slds-color__fill_gray-8` | Apply gray-8 SVG fill | `--slds-g-color-neutral-base-60` |
+| `slds-color__fill_gray-9` | Apply gray-9 SVG fill | `--slds-g-color-neutral-base-50` |
+| `slds-color__fill_gray-10` | Apply gray-10 SVG fill | `--slds-g-color-neutral-base-30` |
+| `slds-color__fill_gray-11` | Apply gray-11 SVG fill | `--slds-g-color-neutral-base-30` |
+| `slds-color__fill_gray-12` | Apply darkest gray SVG fill | `--slds-g-color-neutral-base-20` |
+
+## Common Patterns
+
+### Card with Neutral Background
+```html
+<!-- Card with gray-2 background and darker text -->
+<div class="slds-card slds-color__background_gray-2 slds-p-around_medium">
+  <h2 class="slds-text-heading_medium slds-color__text_gray-12">Card Title</h2>
+  <p class="slds-color__text_gray-10">Card content with readable contrast</p>
+</div>
+```
+
+### Status Indicator with Border
+```html
+<!-- Status box with colored border -->
+<div class="slds-box slds-color__border_gray-7 slds-border_top slds-border_bottom">
+  <span class="slds-color__text_gray-9">Pending Review</span>
+</div>
+```
+
+### Icon with Custom Fill Color
+```html
+<!-- SVG icon with gray fill -->
+<svg class="slds-icon slds-icon_small slds-color__fill_gray-8">
+  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
+</svg>
+```
+
+### Alternating Row Colors
+```html
+<!-- Table rows with alternating backgrounds -->
+<table class="slds-table">
+  <tbody>
+    <tr class="slds-color__background_gray-1">
+      <td>Row 1 with gray-1 background</td>
+    </tr>
+    <tr class="slds-color__background_gray-2">
+      <td>Row 2 with gray-2 background</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### Text Hierarchy with Gray Scale
+```html
+<!-- Content with visual hierarchy using grays -->
+<article class="slds-card__body">
+  <h3 class="slds-color__text_gray-12">Primary Heading</h3>
+  <h4 class="slds-color__text_gray-10">Secondary Heading</h4>
+  <p class="slds-color__text_gray-8">Body text content</p>
+  <small class="slds-color__text_gray-6">Supporting metadata</small>
+</article>
+```
+
+## Best Practices
+
+✅ Maintain WCAG AA contrast ratio of 4.5:1 for normal text
+✅ Maintain WCAG AA contrast ratio of 3:1 for large text (18pt or 14pt bold)
+✅ Use `slds-color__text_gray-12` on light backgrounds for maximum readability
+✅ Use `slds-color__text_gray-1` on dark backgrounds for maximum readability
+✅ Test color combinations with accessibility tools before deployment
+✅ Use consistent gray levels across similar UI elements
+
+❌ Never use gray-1 through gray-5 text on white backgrounds (insufficient contrast)
+❌ Avoid using similar gray values for foreground and background
+❌ Never rely solely on color to convey information
+❌ Avoid using `slds-color__text_gray-6` or lighter for body text

package/skills/design-systems-slds-apply/guidance/utilities/dark-mode.md

@@ -0,0 +1,111 @@
+---
+id: slds.guidance.utilities.dark-mode
+title: Dark Mode Utilities
+description: SLDS color scheme utility classes for controlling light, dark, and system color preferences
+summary: "Utilities for controlling color scheme preferences. Forces light mode, dark mode, or respects system preference."
+
+artifact_type: reference
+domain: utilities
+topic: dark-mode
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.hooks.color
+  - slds.guidance.utilities.themes
+
+tags: [utilities, dark-mode, color-scheme, theme]
+keywords: [slds-color-scheme, dark mode, light mode, system preference]
+---
+
+# Dark Mode - Color Scheme Control
+
+Utilities for controlling browser color scheme preferences. Uses CSS `color-scheme` property.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-color-scheme--light` | Forces light mode only |
+| `slds-color-scheme--dark` | Forces dark mode only |
+| `slds-color-scheme--system` | Respects system preference |
+
+## Common Patterns
+
+```html
+<!-- Force light mode on entire application -->
+<body class="slds-color-scheme--light">
+  <!-- All content renders in light mode -->
+</body>
+
+<!-- Force dark mode on specific component -->
+<div class="slds-card slds-color-scheme--dark">
+  <!-- Card content renders in dark mode -->
+</div>
+
+<!-- System preference for modal -->
+<div class="slds-modal slds-color-scheme--system">
+  <!-- Modal adapts to user's OS preference -->
+</div>
+
+<!-- Mixed mode layout -->
+<div class="slds-page">
+  <nav class="slds-color-scheme--dark">
+    <!-- Navigation always dark -->
+  </nav>
+  <main class="slds-color-scheme--system">
+    <!-- Content follows system preference -->
+  </main>
+</div>
+
+<!-- Override system preference locally -->
+<body class="slds-color-scheme--system">
+  <div class="slds-box slds-color-scheme--light">
+    <!-- Box always light even if system is dark -->
+  </div>
+</body>
+```
+
+## Implementation Details
+
+### How It Works
+- Uses CSS `color-scheme` property
+- Applies to element and descendants
+- When on `<body>`, affects entire document via `:has()` selector
+- Browser automatically adjusts form controls, scrollbars, and system colors
+
+### Property Values
+| Class | CSS Property | Effect |
+|-------|--------------|--------|
+| `slds-color-scheme--light` | `color-scheme: only light` | Forces light colors |
+| `slds-color-scheme--dark` | `color-scheme: only dark` | Forces dark colors |
+| `slds-color-scheme--system` | `color-scheme: light dark` | Allows both schemes |
+
+## Best Practices
+
+✅ Apply `slds-color-scheme--system` to `<body>` for app-wide system preference support
+✅ Use `slds-color-scheme--dark` for navigation bars and headers
+✅ Use `slds-color-scheme--light` for data-heavy tables and forms
+✅ Test both light and dark modes for all components
+✅ Use modern double-dash syntax (`--`) for new implementations
+
+❌ Don't use deprecated underscore syntax (`_`) in new code
+❌ Don't mix color scheme classes on the same element
+❌ Don't assume dark mode without testing contrast ratios
+❌ Don't override user system preference without clear UI controls
+
+## Deprecated Classes
+
+The following BEM-style classes are deprecated. Use double-dash syntax instead:
+
+| Deprecated | Use Instead |
+|------------|-------------|
+| `slds-color-scheme_light` | `slds-color-scheme--light` |
+| `slds-color-scheme_dark` | `slds-color-scheme--dark` |
+| `slds-color-scheme_system` | `slds-color-scheme--system` |

package/skills/design-systems-slds-apply/guidance/utilities/description-list.md

@@ -0,0 +1,168 @@
+---
+id: slds.guidance.utilities.description-list
+title: Description List Utilities
+description: SLDS description list utility classes for semantic key-value displays
+summary: "Utilities for creating description lists with inline and horizontal layout variants."
+
+artifact_type: reference
+domain: utilities
+topic: description-list
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.hooks.spacing
+
+tags: [utilities, description-list, layout, semantic]
+keywords: [slds-dl_inline, slds-dl_horizontal, description-list, dl]
+---
+
+# Description List - Semantic Key-Value Layouts
+
+Utilities for creating responsive description lists with inline and horizontal layouts.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-dl_inline` | Creates inline layout where terms and descriptions flow horizontally |
+| `slds-dl_inline__label` | Marks the term (`<dt>`) in an inline description list |
+| `slds-dl_inline__detail` | Marks the description (`<dd>`) in an inline description list |
+| `slds-dl_horizontal` | Creates horizontal layout with 30/70 width split |
+| `slds-dl_horizontal__label` | Marks the term (`<dt>`) with 30% width |
+| `slds-dl_horizontal__detail` | Marks the description (`<dd>`) with 70% width |
+
+## Layout Variants
+
+### Inline Layout
+Terms and descriptions display side-by-side in a flowing layout. Responsive at `min-width: 30em`.
+
+| Property | Value |
+|----------|-------|
+| Term float | `inline-start` with `clear` |
+| Description float | `inline-start` |
+| Description padding | `--slds-g-spacing-1` (4px) |
+
+### Horizontal Layout
+Terms and descriptions align in columns with fixed proportions. Responsive at `min-width: 30em`.
+
+| Property | Value |
+|----------|-------|
+| Layout | `flex` with `wrap` |
+| Term width | 30% |
+| Description width | 70% |
+| Term padding | `--slds-g-spacing-3` (12px) end |
+
+## Common Patterns
+
+### Basic Inline Description List
+```html
+<!-- Inline layout: terms and descriptions flow horizontally -->
+<dl class="slds-dl_inline">
+  <dt class="slds-dl_inline__label">Status:</dt>
+  <dd class="slds-dl_inline__detail">Active</dd>
+
+  <dt class="slds-dl_inline__label">Created:</dt>
+  <dd class="slds-dl_inline__detail">January 15, 2024</dd>
+
+  <dt class="slds-dl_inline__label">Owner:</dt>
+  <dd class="slds-dl_inline__detail">Sarah Johnson</dd>
+</dl>
+```
+
+### Horizontal Description List with Column Layout
+```html
+<!-- Horizontal layout: 30/70 column split for structured data -->
+<dl class="slds-dl_horizontal">
+  <dt class="slds-dl_horizontal__label">Account Name:</dt>
+  <dd class="slds-dl_horizontal__detail">Acme Corporation</dd>
+
+  <dt class="slds-dl_horizontal__label">Industry:</dt>
+  <dd class="slds-dl_horizontal__detail">Technology</dd>
+
+  <dt class="slds-dl_horizontal__label">Annual Revenue:</dt>
+  <dd class="slds-dl_horizontal__detail">$50M - $100M</dd>
+</dl>
+```
+
+### Inline Layout in Narrow Region
+```html
+<!-- Inline layout adapts to narrow containers -->
+<div class="slds-region_narrow">
+  <dl class="slds-dl_inline">
+    <dt class="slds-dl_inline__label">Type:</dt>
+    <dd class="slds-dl_inline__detail">Customer</dd>
+
+    <dt class="slds-dl_inline__label">Priority:</dt>
+    <dd class="slds-dl_inline__detail">High</dd>
+  </dl>
+</div>
+```
+
+### Horizontal Layout in Narrow Region
+```html
+<!-- Horizontal layout maintains column structure in narrow containers -->
+<div class="slds-region_narrow">
+  <dl class="slds-dl_horizontal">
+    <dt class="slds-dl_horizontal__label">Contact:</dt>
+    <dd class="slds-dl_horizontal__detail">John Smith</dd>
+
+    <dt class="slds-dl_horizontal__label">Email:</dt>
+    <dd class="slds-dl_horizontal__detail">john.smith@acme.com</dd>
+
+    <dt class="slds-dl_horizontal__label">Phone:</dt>
+    <dd class="slds-dl_horizontal__detail">(555) 123-4567</dd>
+  </dl>
+</div>
+```
+
+### Mixed Content Description List
+```html
+<!-- Horizontal layout with varied content types -->
+<dl class="slds-dl_horizontal">
+  <dt class="slds-dl_horizontal__label">Description:</dt>
+  <dd class="slds-dl_horizontal__detail">
+    Enterprise customer with multiple product installations requiring
+    dedicated support and quarterly business reviews.
+  </dd>
+
+  <dt class="slds-dl_horizontal__label">Products:</dt>
+  <dd class="slds-dl_horizontal__detail">
+    Sales Cloud, Service Cloud, Marketing Cloud
+  </dd>
+
+  <dt class="slds-dl_horizontal__label">Support Level:</dt>
+  <dd class="slds-dl_horizontal__detail">Premium</dd>
+</dl>
+```
+
+## Responsive Behavior
+
+### Breakpoint Activation
+All description list utilities activate at `min-width: 30em` (480px):
+- Below breakpoint: Standard stacked `<dl>` layout
+- Above breakpoint: Applied utility layout (inline or horizontal)
+
+### Narrow Region Support
+Use `.slds-region_narrow` container to force responsive styles regardless of viewport:
+- Inline layout maintains float behavior
+- Horizontal layout maintains flex column structure
+
+## Best Practices
+
+✅ Use `slds-dl_inline` for compact, single-line key-value pairs
+✅ Use `slds-dl_horizontal` for detailed information with longer descriptions
+✅ Apply matching label and detail classes to all `<dt>` and `<dd>` elements
+✅ Wrap in `.slds-region_narrow` for consistent layout in sidebars or modals
+✅ Use semantic HTML (`<dl>`, `<dt>`, `<dd>`) for accessibility
+
+❌ Never mix inline and horizontal classes on the same list
+❌ Never omit the child classes (`__label`, `__detail`) when using parent classes
+❌ Never use for non-semantic layouts (use grid or flexbox utilities instead)
+❌ Never override the 30/70 width ratio for horizontal layouts

package/skills/design-systems-slds-apply/guidance/utilities/floats.md

@@ -0,0 +1,117 @@
+---
+id: slds.guidance.utilities.floats
+title: Floats Utilities
+description: SLDS float and clearfix utility classes for legacy layouts
+summary: "Utilities for floating elements (float left/right/none, clear, clearfix). Mark as legacy - prefer Grid for new implementations."
+
+artifact_type: reference
+domain: utilities
+topic: floats
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.utilities.grid
+
+tags: [utilities, floats, clearfix, legacy]
+keywords: [slds-float, slds-clear, slds-clearfix, float-left, float-right]
+---
+
+# Floats - Legacy Layout Utilities
+
+Utilities for floating elements and clearing floats. **Legacy approach** - use Grid utilities for new implementations.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-float_left` | Floats element to the left using `inline-start` for RTL support |
+| `slds-float_right` | Floats element to the right using `inline-end` for RTL support |
+| `slds-float_none` | Removes float from an element with existing float |
+| `slds-clear` | Clears floats on both sides with `clear: both` |
+| `slds-clearfix` | Contains floats using `::after` pseudo-element technique |
+
+## Common Patterns
+
+### Basic Float Layout
+```html
+<!-- Image floated left with text wrapping -->
+<div class="slds-clearfix">
+  <img class="slds-float_left" src="avatar.jpg" alt="User avatar" />
+  <p>Content wraps around the floated image on the left side.</p>
+</div>
+```
+
+### Two-Column Float Layout
+```html
+<!-- Legacy two-column layout with floats -->
+<div class="slds-clearfix">
+  <div class="slds-float_left" style="width: 30%;">
+    <!-- Sidebar content floated left -->
+    <nav>Navigation items</nav>
+  </div>
+  <div class="slds-float_right" style="width: 65%;">
+    <!-- Main content floated right -->
+    <main>Main content area</main>
+  </div>
+</div>
+```
+
+### Clear Float After Element
+```html
+<!-- Clear floats to prevent wrapping -->
+<div>
+  <div class="slds-float_left">Floated element</div>
+  <div class="slds-clear">This element starts below the float</div>
+</div>
+```
+
+### Remove Float Conditionally
+```html
+<!-- Remove float at certain breakpoints -->
+<div class="slds-float_left slds-medium-float_none">
+  <!-- Floats on small screens, no float on medium+ -->
+  Responsive float behavior
+</div>
+```
+
+### Clearfix Container Pattern
+```html
+<!-- Parent contains all floated children -->
+<section class="slds-clearfix">
+  <div class="slds-float_left">Left column</div>
+  <div class="slds-float_left">Center column</div>
+  <div class="slds-float_right">Right column</div>
+  <!-- Parent expands to contain all floats -->
+</section>
+```
+
+## Best Practices
+
+✅ Use [Grid Utilities](ref:slds.guidance.utilities.grid) (`slds-grid`) for new layouts instead of floats
+✅ Apply `slds-clearfix` to parent containers of floated elements
+✅ Place floated elements first in document flow, even when floating right
+✅ Use `slds-float_none` to remove floats at specific breakpoints
+
+❌ Do not use floats for complex multi-column layouts - use [Grid Utilities](ref:slds.guidance.utilities.grid)
+❌ Do not forget `slds-clearfix` on parent containers - causes collapse
+❌ Do not mix floats with flexbox or grid on the same element
+
+## Migration Note
+
+**Float utilities are legacy.** For new implementations, see [Grid Utilities](ref:slds.guidance.utilities.grid):
+- Use `slds-grid` and `slds-col` for multi-column layouts
+- Use `slds-grid_align-spread` for spacing elements apart
+- Use `slds-grid_pull-padded` for content wrapping patterns
+
+## Technical Details
+
+- **Logical Properties**: Uses `inline-start` and `inline-end` for RTL support
+- **Clearfix Method**: Implements `::after` pseudo-element with `display: table`
+- **Browser Support**: Works in all supported browsers including IE11