@salesforce/afv-skills 1.14.0 → 1.16.0

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

@@ -0,0 +1,126 @@
+---
+id: slds.guidance.utilities.scrollable
+title: Scrollable Utilities
+description: SLDS scrollable utility classes for managing overflow behavior
+summary: "Utilities for controlling scroll behavior (x, y, both, none)."
+
+artifact_type: reference
+domain: utilities
+topic: scrollable
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+
+tags: [utilities, scrollable, overflow, scroll]
+keywords: [slds-scrollable, overflow, scroll, scrollable-x, scrollable-y]
+---
+
+# Scrollable - Overflow Management
+
+Controlling scroll behavior in fixed-size containers.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-scrollable` | Enables scrolling on both axes when content exceeds container dimensions |
+| `slds-scrollable_x` | Enables horizontal scrolling only when content exceeds width |
+| `slds-scrollable_y` | Enables vertical scrolling only when content exceeds height |
+| `slds-scrollable_none` | Prevents scrolling and hides overflow content |
+
+## Common Patterns
+
+```html
+<!-- Data table with horizontal scroll -->
+<div class="slds-scrollable_x" style="max-width: 600px;">
+  <!-- Table scrolls horizontally when wider than 600px -->
+  <table class="slds-table slds-table_bordered">
+    <thead>
+      <tr>
+        <th>Column 1</th>
+        <th>Column 2</th>
+        <th>Column 3</th>
+        <th>Column 4</th>
+        <th>Column 5</th>
+        <th>Column 6</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Table rows -->
+    </tbody>
+  </table>
+</div>
+
+<!-- List with vertical scroll -->
+<div class="slds-scrollable_y" style="height: 300px;">
+  <!-- List scrolls vertically when taller than 300px -->
+  <ul class="slds-has-dividers_bottom">
+    <li class="slds-p-around_small">Item 1</li>
+    <li class="slds-p-around_small">Item 2</li>
+    <li class="slds-p-around_small">Item 3</li>
+    <li class="slds-p-around_small">Item 4</li>
+    <li class="slds-p-around_small">Item 5</li>
+    <li class="slds-p-around_small">Item 6</li>
+    <li class="slds-p-around_small">Item 7</li>
+    <li class="slds-p-around_small">Item 8</li>
+  </ul>
+</div>
+
+<!-- Modal with scrollable content -->
+<div class="slds-modal__container">
+  <div class="slds-modal__header">
+    <h2>Modal Title</h2>
+  </div>
+  <div class="slds-modal__content slds-scrollable_y" style="height: 400px;">
+    <!-- Content scrolls when exceeding 400px height -->
+    <div class="slds-p-around_medium">
+      Long form content that exceeds the modal height...
+    </div>
+  </div>
+  <div class="slds-modal__footer">
+    <button class="slds-button">Cancel</button>
+    <button class="slds-button slds-button_brand">Save</button>
+  </div>
+</div>
+
+<!-- Code block with both-axis scrolling -->
+<div class="slds-scrollable slds-box" style="max-width: 500px; max-height: 200px;">
+  <!-- Code scrolls both horizontally and vertically -->
+  <pre class="slds-p-around_small">
+    Long code snippet that exceeds both width and height...
+    Multiple lines of code...
+    With very long lines that exceed the container width...
+  </pre>
+</div>
+
+<!-- Card with hidden overflow -->
+<div class="slds-card">
+  <div class="slds-card__body slds-scrollable_none" style="height: 150px;">
+    <!-- Overflow content is hidden, not scrollable -->
+    <div class="slds-p-around_medium">
+      Content that might exceed the fixed height is clipped
+    </div>
+  </div>
+</div>
+```
+
+## Best Practices
+
+✅ Use `slds-scrollable_x` for wide tables in responsive layouts
+✅ Use `slds-scrollable_y` for long lists with fixed height containers
+✅ Use `slds-scrollable` for code blocks or content that may overflow in both directions
+✅ Set explicit height on containers using `slds-scrollable_y`
+✅ Set explicit width on containers using `slds-scrollable_x`
+✅ Include touch scrolling support for mobile devices (automatically included)
+
+❌ Avoid nesting multiple scrollable containers
+❌ Avoid using `slds-scrollable_none` on content users need to access
+❌ Avoid scrollable areas without visual scroll indicators
+❌ Avoid horizontal scrolling on mobile when vertical layout works better

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

@@ -0,0 +1,190 @@
+---
+id: slds.guidance.utilities.sizing
+title: Sizing Utilities
+description: SLDS width sizing utility classes for responsive layouts
+summary: "Utilities for width sizing. Fractional widths (1-of-2 through 1-of-12), absolute sizes, responsive breakpoints, and flex ordering."
+
+artifact_type: reference
+domain: utilities
+topic: sizing
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.utilities.grid
+
+tags: [utilities, sizing, width, responsive, fractional]
+keywords: [slds-size, slds-order, fractional width, responsive sizing]
+---
+
+# Sizing - Width Control
+
+Width sizing and flex ordering.
+
+## Core Classes
+
+### Fractional Widths
+
+Based on 12-column grid system with denominators of 2, 3, 4, 5, 6, 7, 8, and 12.
+
+| Class | Purpose |
+|-------|---------|
+| `slds-size_1-of-2` | Sets width to 50% |
+| `slds-size_1-of-3` | Sets width to 33.333% |
+| `slds-size_2-of-3` | Sets width to 66.6667% |
+| `slds-size_1-of-4` | Sets width to 25% |
+| `slds-size_3-of-4` | Sets width to 75% |
+| `slds-size_1-of-5` | Sets width to 20% |
+| `slds-size_2-of-5` | Sets width to 40% |
+| `slds-size_3-of-5` | Sets width to 60% |
+| `slds-size_4-of-5` | Sets width to 80% |
+| `slds-size_1-of-6` | Sets width to 16.6667% |
+| `slds-size_5-of-6` | Sets width to 83.3333% |
+| `slds-size_1-of-7` | Sets width to 14.2857% |
+| `slds-size_1-of-8` | Sets width to 12.5% |
+| `slds-size_1-of-12` | Sets width to 8.3333% |
+| `slds-size_5-of-12` | Sets width to 41.6667% |
+| `slds-size_7-of-12` | Sets width to 58.3333% |
+| `slds-size_11-of-12` | Sets width to 91.6667% |
+
+### Absolute Sizes
+
+Fixed widths in rem units.
+
+| Class | Purpose |
+|-------|---------|
+| `slds-size_xxx-small` | Sets width to 3rem (48px) |
+| `slds-size_xx-small` | Sets width to 6rem (96px) |
+| `slds-size_x-small` | Sets width to 12rem (192px) |
+| `slds-size_small` | Sets width to 15rem (240px) |
+| `slds-size_medium` | Sets width to 20rem (320px) |
+| `slds-size_large` | Sets width to 25rem (400px) |
+| `slds-size_x-large` | Sets width to 40rem (640px) |
+| `slds-size_xx-large` | Sets width to 60rem (960px) |
+| `slds-size_full` | Sets width to 100% |
+
+### Responsive Breakpoints
+
+Breakpoint-specific sizing with mobile-first approach.
+
+| Breakpoint | Viewport Width | Prefix |
+|------------|---------------|--------|
+| x-small | ≥ 320px (20em) | `slds-x-small-size_*` |
+| small | ≥ 480px (30em) | `slds-small-size_*` |
+| medium | ≥ 768px (48em) | `slds-medium-size_*` |
+| large | ≥ 1024px (64em) | `slds-large-size_*` |
+| x-large | ≥ 1280px (80em) | `slds-x-large-size_*` |
+| max-small | < 480px (30em) | `slds-max-small-size_*` |
+| max-medium | < 768px (48em) | `slds-max-medium-size_*` |
+| max-large | < 1024px (64em) | `slds-max-large-size_*` |
+
+### Flex Ordering
+
+Controls visual order in flexbox layouts.
+
+| Class | Purpose |
+|-------|---------|
+| `slds-order_1` | Sets flex order to 1 |
+| `slds-order_2` | Sets flex order to 2 |
+| `slds-order_3` | Sets flex order to 3 |
+| `slds-order_4` | Sets flex order to 4 |
+| `slds-order_5` | Sets flex order to 5 |
+| `slds-order_6` through `slds-order_12` | Sets flex order 6-12 |
+
+## Common Patterns
+
+### Three-Column Layout
+```html
+<!-- Three equal columns -->
+<div class="slds-grid slds-wrap">
+  <div class="slds-size_1-of-3">
+    <!-- Column 1: 33.333% width -->
+  </div>
+  <div class="slds-size_1-of-3">
+    <!-- Column 2: 33.333% width -->
+  </div>
+  <div class="slds-size_1-of-3">
+    <!-- Column 3: 33.333% width -->
+  </div>
+</div>
+```
+
+### Responsive Grid
+```html
+<!-- Full width mobile, half tablet, quarter desktop -->
+<div class="slds-grid slds-wrap">
+  <div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-4">
+    <!-- Card adapts from 100% → 50% → 25% -->
+  </div>
+  <div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-4">
+    <!-- Card adapts from 100% → 50% → 25% -->
+  </div>
+</div>
+```
+
+### Sidebar Layout
+```html
+<!-- Fixed sidebar with flexible content -->
+<div class="slds-grid">
+  <nav class="slds-size_medium">
+    <!-- Sidebar: 320px fixed width -->
+  </nav>
+  <main class="slds-col">
+    <!-- Content: Fills remaining space -->
+  </main>
+</div>
+```
+
+### Reordered Content
+```html
+<!-- Visual order differs from DOM order -->
+<div class="slds-grid">
+  <div class="slds-size_1-of-3 slds-order_3">
+    <!-- Appears third visually -->
+  </div>
+  <div class="slds-size_1-of-3 slds-order_1">
+    <!-- Appears first visually -->
+  </div>
+  <div class="slds-size_1-of-3 slds-order_2">
+    <!-- Appears second visually -->
+  </div>
+</div>
+```
+
+### Form Layout
+```html
+<!-- Two-column form with responsive stacking -->
+<div class="slds-form" role="form">
+  <div class="slds-grid slds-wrap slds-gutters">
+    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+      <!-- First Name field: Full width mobile, half desktop -->
+    </div>
+    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+      <!-- Last Name field: Full width mobile, half desktop -->
+    </div>
+    <div class="slds-col slds-size_1-of-1">
+      <!-- Email field: Always full width -->
+    </div>
+  </div>
+</div>
+```
+
+## Best Practices
+
+✅ Use fractional widths for flexible grid layouts
+✅ Apply responsive classes for mobile-first design
+✅ Combine with `slds-grid` and `slds-wrap` for proper grid behavior
+✅ Use `slds-col` for flexible remaining space
+✅ Apply `slds-gutters` to parent grid for consistent spacing
+✅ Use semantic HTML elements with sizing utilities
+
+❌ Avoid mixing fractional and absolute sizes on siblings
+❌ Never use sizing utilities without proper grid container
+❌ Avoid using more than 12 total columns per row
+❌ Never rely solely on `slds-order_*` for accessibility - maintain logical DOM order

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

@@ -0,0 +1,121 @@
+---
+id: slds.guidance.utilities.themes
+title: Themes Utilities
+description: SLDS theme utility classes for background and text colors
+summary: "Utilities for applying color themes including default, shade, inverse, and semantic states (success, info, warning, error, offline)."
+
+artifact_type: reference
+domain: utilities
+topic: themes
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.hooks.color
+
+tags: [utilities, themes, colors, backgrounds]
+keywords: [slds-theme, background colors, semantic colors, inverse themes]
+---
+
+# Themes - Color & Background
+
+Applying consistent color themes to containers and components.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-theme_default` | White background with default text color |
+| `slds-theme_shade` | Gray background (#F3F3F3) for subtle contrast |
+| `slds-theme_inverse` | Dark blue background with white text |
+| `slds-theme_alt-inverse` | Darker blue background variant |
+
+## Semantic State Themes
+
+| Class | Background Color | Text Color |
+|-------|-----------------|------------|
+| `slds-theme_success` | Green (#4BCA81) | White |
+| `slds-theme_info` | Gray-blue (#706E6B) | White |
+| `slds-theme_warning` | Yellow (#FFB75D) | Black |
+| `slds-theme_error` | Red (#EA001E) | White |
+| `slds-theme_offline` | Black (#444) | White |
+
+## Texture Modifier
+
+| Class | Purpose |
+|-------|---------|
+| `slds-theme_alert-texture` | Adds diagonal striped pattern overlay |
+
+## Common Patterns
+
+```html
+<!-- Card with default theme -->
+<div class="slds-card slds-theme_default">
+  <div class="slds-card__header">Default themed card</div>
+  <div class="slds-card__body">Card content with white background</div>
+</div>
+
+<!-- Section with shade background -->
+<section class="slds-theme_shade slds-p-around_medium">
+  <!-- Gray background for visual separation -->
+  <h2>Section Title</h2>
+  <p>Content on subtle gray background</p>
+</section>
+
+<!-- Success notification banner -->
+<div class="slds-theme_success slds-p-around_small">
+  <!-- Green background with white text -->
+  <span class="slds-icon_container">
+    <svg class="slds-icon slds-icon_small">...</svg>
+  </span>
+  <span>Operation completed successfully</span>
+</div>
+
+<!-- Warning alert with texture -->
+<div class="slds-theme_warning slds-theme_alert-texture slds-p-around_medium">
+  <!-- Yellow background with striped texture -->
+  <strong>Warning:</strong> This action cannot be undone
+</div>
+
+<!-- Inverse header section -->
+<header class="slds-theme_inverse slds-p-around_large">
+  <!-- Dark blue background with white text -->
+  <h1>Dashboard</h1>
+  <p>All text and links are automatically styled for dark backgrounds</p>
+</header>
+```
+
+## Best Practices
+
+✅ Use `slds-theme_default` for standard white backgrounds
+✅ Apply `slds-theme_shade` to visually separate sections
+✅ Use semantic themes (success, error, warning) for status messages
+✅ Combine `slds-theme_alert-texture` with semantic themes for critical alerts
+✅ Apply themes to container elements, not individual text elements
+✅ Use `slds-theme_inverse` for headers and navigation areas
+
+❌ Nest multiple theme classes on the same element
+❌ Override theme colors with inline styles
+❌ Use semantic themes for decorative purposes
+❌ Apply themes to elements smaller than 44×44px touch targets
+
+## Deprecation Notes
+
+The following double-dash variants are deprecated but still supported:
+- `slds-theme--default` → Use `slds-theme_default`
+- `slds-theme--shade` → Use `slds-theme_shade`
+- `slds-theme--inverse` → Use `slds-theme_inverse`
+- `slds-theme--alt-inverse` → Use `slds-theme_alt-inverse`
+- `slds-theme--success` → Use `slds-theme_success`
+- `slds-theme--info` → Use `slds-theme_info`
+- `slds-theme--warning` → Use `slds-theme_warning`
+- `slds-theme--error` → Use `slds-theme_error`
+- `slds-theme--offline` → Use `slds-theme_offline`
+- `slds-theme--alert-texture` → Use `slds-theme_alert-texture`
+- `slds-theme--inverse-text` → Use `slds-theme_inverse-text`

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

@@ -0,0 +1,127 @@
+---
+id: slds.guidance.utilities.truncate
+title: Truncate Utilities
+description: SLDS text truncation utility classes
+summary: "Utilities for text truncation. Single-line truncation with ellipsis and container-based percentage truncation."
+
+artifact_type: reference
+domain: utilities
+topic: truncate
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.utilities.line-clamp
+
+tags: [utilities, truncate, text-overflow, ellipsis]
+keywords: [slds-truncate, text overflow, ellipsis, truncation]
+---
+
+# Truncate - Text Overflow
+
+Text truncation with ellipsis.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-truncate` | Truncates text at 100% container width with ellipsis |
+| `slds-truncate_container_25` | Truncates text at 25% of parent width |
+| `slds-truncate_container_33` | Truncates text at 33% of parent width |
+| `slds-truncate_container_50` | Truncates text at 50% of parent width |
+| `slds-truncate_container_66` | Truncates text at 66% of parent width |
+| `slds-truncate_container_75` | Truncates text at 75% of parent width |
+| `slds-has-flexi-truncate` | Applied to flex container to enable truncation in nested flexbox layouts |
+
+## Common Patterns
+
+### Table Cell Truncation
+```html
+<!-- Truncate long text in table cells -->
+<table class="slds-table slds-table_cell-buffer">
+  <tbody>
+    <tr>
+      <td class="slds-truncate" title="Complete text for accessibility">
+        <!-- Long customer name truncates with ellipsis -->
+        Very Long Customer Name That Will Be Truncated
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### List Item with Truncation
+```html
+<!-- Email recipient list with truncation -->
+<ul class="slds-list_horizontal">
+  <li class="slds-list__item">
+    <span>To:</span>
+    <span class="slds-truncate slds-m-left_xx-small" title="john.doe@example.com">
+      <!-- Email truncates to fit available space -->
+      john.doe@example.com
+    </span>
+  </li>
+</ul>
+```
+
+### Card Header Truncation
+```html
+<!-- Card with truncated title -->
+<article class="slds-card">
+  <div class="slds-card__header">
+    <h2 class="slds-truncate" title="Full opportunity name">
+      <!-- Title truncates if too long -->
+      Very Long Opportunity Name - Q4 2024 Enterprise Deal
+    </h2>
+  </div>
+</article>
+```
+
+### Partial Width Truncation
+```html
+<!-- Truncate at specific percentage of parent -->
+<div class="slds-grid">
+  <div class="slds-truncate_container_50">
+    <!-- Truncates at 50% of parent container -->
+    This text will truncate at half the parent width
+  </div>
+  <div class="slds-col">
+    <!-- Remaining content -->
+  </div>
+</div>
+```
+
+### Flexbox with Truncation
+```html
+<!-- Use with flexbox layouts -->
+<div class="slds-grid">
+  <div class="slds-col slds-has-flexi-truncate">
+    <span class="slds-truncate" title="Full file name">
+      <!-- Truncates within flexible column -->
+      very-long-filename-with-many-words.pdf
+    </span>
+  </div>
+  <div class="slds-col_fixed">
+    <button class="slds-button">Download</button>
+  </div>
+</div>
+```
+
+## Best Practices
+
+✅ Always include `title` attribute with full text for accessibility
+✅ Use `slds-has-flexi-truncate` on flex container when truncating within flexbox
+✅ Apply truncation to inline or block elements containing text
+✅ Use container percentage classes for predictable truncation points
+✅ Test truncation behavior across different viewport sizes
+
+❌ Never truncate text without providing full text in title attribute
+❌ Avoid truncating critical information like error messages
+❌ Never use truncation on interactive elements without proper tooltips
+❌ Avoid nested truncation classes