@salesforce/afv-skills 1.22.0 → 1.24.0

package/skills/applying-slds/guidance/utilities/box.md

@@ -1,125 +0,0 @@
----
-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/applying-slds/guidance/utilities/color.md

@@ -1,165 +0,0 @@
----
-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/applying-slds/guidance/utilities/dark-mode.md

@@ -1,111 +0,0 @@
----
-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/applying-slds/guidance/utilities/description-list.md

@@ -1,168 +0,0 @@
----
-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/applying-slds/guidance/utilities/floats.md

@@ -1,117 +0,0 @@
----
-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