@salesforce/afv-skills 1.14.0 → 1.16.0

package/skills/applying-slds/metadata/blueprints/components/data-tables.yaml

@@ -0,0 +1,157 @@
+name: "Data Tables"
+description: "A structured display of data in rows and columns with support for sorting, selection, and various data types, optimized for large datasets."
+category: "Data"
+slds_classes:
+  root: "slds-table"
+  elements:
+    - class: "slds-table_bordered"
+      description: "Table with borders"
+      purpose: "Adds borders for visual separation"
+    - class: "slds-table_striped"
+      description: "Table with alternating row colors"
+      purpose: "Improves readability with striped rows"
+    - class: "slds-table_fixed-layout"
+      description: "Table with fixed layout"
+      purpose: "Consistent column widths for better control"
+    - class: "slds-table_resizable-cols"
+      description: "Table with resizable columns"
+      purpose: "Allows users to resize column widths"
+    - class: "slds-table_col-bordered"
+      description: "Table with column borders"
+      purpose: "Adds vertical borders between columns"
+  modifiers:
+    - class: "slds-table_header-fixed"
+      description: "Fixed table header"
+      usage: "Keep headers visible during scrolling"
+  states:
+    - class: "slds-is-selected"
+      description: "Selected row state"
+      trigger: "Indicates row is selected"
+    - class: "slds-is-sorted"
+      description: "Sorted column state"
+      trigger: "Indicates column is currently sorted"
+variants:
+  - name: "Base"
+    description: "Standard data table"
+    classes:
+      - "slds-table"
+    usage_context: "Default table implementation"
+    differences: "Basic table structure with rows and columns"
+  - name: "Striped"
+    description: "Table with alternating row colors"
+    classes:
+      - "slds-table"
+      - "slds-table_striped"
+    usage_context: "Improved readability for large datasets"
+    differences: "Alternating background colors on rows"
+  - name: "Bordered"
+    description: "Table with borders"
+    classes:
+      - "slds-table"
+      - "slds-table_bordered"
+    usage_context: "Clear visual separation between cells"
+    differences: "Visible borders around all cells"
+lightning_component:
+  name: "lightning-datatable"
+  url: "https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable"
+  mapping_notes: "Direct mapping - Lightning component implements SLDS data table blueprint with enhanced functionality"
+accessibility:
+  keyboard_support:
+    - "Tab navigation through interactive elements"
+    - "Arrow keys for cell navigation"
+    - "Enter/Space for cell activation"
+    - "Sorting activation through keyboard"
+  screen_reader:
+    - "Table structure announced with row and column counts"
+    - "Column headers associated with data cells"
+    - "Sort states and changes announced"
+    - "Selection states communicated"
+  aria_attributes:
+    - "role='table' for table container"
+    - "role='columnheader' for header cells"
+    - "role='gridcell' or 'cell' for data cells"
+    - "aria-sort for sortable columns"
+    - "aria-selected for selected rows"
+    - "aria-labelledby for column associations"
+usage_guidelines:
+  when_to_use:
+    - "For displaying structured data with multiple attributes"
+    - "When users need to compare data across rows and columns"
+    - "For large datasets that benefit from sorting and filtering"
+    - "When precise data layout is important"
+  when_not_to_use:
+    - "For simple lists (use list components instead)"
+    - "For unstructured content (use cards or other layouts)"
+    - "When data doesn't fit tabular format well"
+  best_practices:
+    - "Use clear, descriptive column headers"
+    - "Implement sorting for data comparison"
+    - "Provide loading states for async data"
+    - "Support keyboard navigation throughout"
+    - "Consider responsive behavior for mobile"
+    - "Use appropriate data types and formatting"
+  common_mistakes:
+    - "Overloading tables with too many columns"
+    - "Poor mobile responsiveness"
+    - "Inadequate loading and error states"
+    - "Missing keyboard navigation support"
+code_examples:
+  - title: "Basic Data Table"
+    code: |
+      <table class="slds-table slds-table_bordered slds-table_fixed-layout">
+            <thead>
+              <tr class="slds-line-height_reset">
+                <th class="slds-text-title_caps" scope="col">
+                  <div class="slds-truncate" title="Name">Name</div>
+                </th>
+                <th class="slds-text-title_caps" scope="col">
+                  <div class="slds-truncate" title="Account">Account</div>
+                </th>
+                <th class="slds-text-title_caps" scope="col">
+                  <div class="slds-truncate" title="Close Date">Close Date</div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="slds-hint-parent">
+                <td data-label="Name">
+                  <div class="slds-truncate" title="Acme Corp Deal">Acme Corp Deal</div>
+                </td>
+                <td data-label="Account">
+                  <div class="slds-truncate" title="Acme Corporation">Acme Corporation</div>
+                </td>
+                <td data-label="Close Date">
+                  <div class="slds-truncate" title="12/31/2024">12/31/2024</div>
+                </td>
+              </tr>
+            </tbody>
+            </table>
+styling_hooks: []
+dependencies:
+  css_files:
+    - "table.css"
+    - "truncate.css"
+  javascript:
+    - "table.js (for sorting, selection)"
+  icons:
+    - "utility-sprite.svg"
+  other_components:
+    - "truncate"
+    - "icons"
+related_components:
+  - name: "Tree Grid"
+    relationship: "similar"
+    description: "Hierarchical data table variant"
+  - name: "List"
+    relationship: "alternative"
+    description: "Alternative for simpler data display"
+  - name: "Cards"
+    relationship: "alternative"
+    description: "Alternative layout for complex data items"
+references:
+  official_docs: "https://v1.lightningdesignsystem.com/components/data-tables/"
+metadata:
+  version: "1.0.0"
+  last_updated: "2025-11-12"
+  review_status: "complete"
+  notes: " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."

package/skills/applying-slds/metadata/blueprints/components/datepickers.yaml

@@ -0,0 +1,130 @@
+name: Datepickers
+description: Input controls that allow users to select dates through a calendar interface, providing visual date selection
+  with navigation between months and years.
+category: Input
+slds_classes:
+  root: slds-datepicker
+  elements:
+  - class: slds-datepicker__filter
+    description: Container for month/year navigation
+    purpose: Holds navigation controls for calendar
+  - class: slds-datepicker__filter_month
+    description: Month selection control
+    purpose: Allows selection of specific month
+  - class: slds-datepicker__month
+    description: Calendar month grid container
+    purpose: Contains the calendar grid for date selection
+  - class: slds-day
+    description: Individual calendar day cell
+    purpose: Represents a single selectable date
+  modifiers: []
+  states:
+  - class: slds-is-today
+    description: Current date state
+    trigger: Highlights today's date
+  - class: slds-is-selected
+    description: Selected date state
+    trigger: Currently selected date
+variants:
+- name: Base
+  description: Standard calendar datepicker
+  classes:
+  - slds-datepicker
+  usage_context: Default datepicker for date selection
+  differences: Calendar grid with month/year navigation
+lightning_component:
+  name: lightning-input (type='date')
+  url: https://developer.salesforce.com/docs/component-library/bundle/lightning-input
+  mapping_notes: Mapped through lightning-input with type='date' which provides native datepicker
+accessibility:
+  keyboard_support:
+  - Tab to focus datepicker elements
+  - Arrow keys to navigate calendar dates
+  - Enter/Space to select dates
+  - Page Up/Down to navigate months
+  - Shift+Page Up/Down to navigate years
+  screen_reader:
+  - Current month and year announced
+  - Date selection changes communicated
+  - Navigation between calendar periods announced
+  - Today's date and selected date clearly identified
+  aria_attributes:
+  - role='grid' for calendar container
+  - role='gridcell' for individual dates
+  - aria-selected for chosen date
+  - aria-label for month/year navigation
+  - aria-live for dynamic date updates
+usage_guidelines:
+  when_to_use:
+  - For date selection in forms
+  - When users need visual calendar navigation
+  - For scheduling or planning interfaces
+  - When date ranges or specific dates are important
+  when_not_to_use:
+  - For approximate dates (use text input)
+  - When calendar interface is not helpful
+  - For very distant past or future dates
+  best_practices:
+  - Provide clear month and year navigation
+  - Highlight current date and selection clearly
+  - Support keyboard navigation throughout
+  - Handle date formatting consistently
+  - Provide appropriate date constraints
+  common_mistakes:
+  - Poor keyboard navigation implementation
+  - Unclear visual indicators for selection
+  - Not handling edge cases (leap years, etc.)
+  - Inconsistent date formatting
+code_examples:
+- title: Calendar Datepicker
+  code: "<div class=\"slds-datepicker\" role=\"dialog\" aria-label=\"Date picker\">\n      <div class=\"slds-datepicker__filter\
+    \ slds-grid\">\n        <div class=\"slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow\">\n   \
+    \       <button class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Previous Month\">\n        \
+    \    <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#left\"\
+    ></use>\n            </svg>\n            <span class=\"slds-assistive-text\">Previous Month</span>\n          </button>\n\
+    \          <h2 class=\"slds-align-middle\" aria-live=\"assertive\" aria-atomic=\"true\">October 2024</h2>\n          <button\
+    \ class=\"slds-button slds-button_icon slds-button_icon-container\" title=\"Next Month\">\n            <svg class=\"slds-button__icon\"\
+    \ aria-hidden=\"true\">\n              <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#right\"></use>\n\
+    \            </svg>\n            <span class=\"slds-assistive-text\">Next Month</span>\n          </button>\n        </div>\n\
+    \      </div>\n      <table class=\"slds-datepicker__month\" role=\"grid\" aria-labelledby=\"month\">\n        <thead>\n\
+    \          <tr>\n            <th scope=\"col\"><abbr title=\"Sunday\">Sun</abbr></th>\n            <th scope=\"col\"><abbr\
+    \ title=\"Monday\">Mon</abbr></th>\n            <th scope=\"col\"><abbr title=\"Tuesday\">Tue</abbr></th>\n          \
+    \  <th scope=\"col\"><abbr title=\"Wednesday\">Wed</abbr></th>\n            <th scope=\"col\"><abbr title=\"Thursday\"\
+    >Thu</abbr></th>\n            <th scope=\"col\"><abbr title=\"Friday\">Fri</abbr></th>\n            <th scope=\"col\"\
+    ><abbr title=\"Saturday\">Sat</abbr></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n      \
+    \      <td class=\"slds-day\" role=\"gridcell\" aria-selected=\"false\">\n              <span class=\"slds-day\">1</span>\n\
+    \            </td>\n            <td class=\"slds-day\" role=\"gridcell\" aria-selected=\"false\">\n              <span\
+    \ class=\"slds-day\">2</span>\n            </td>\n            <td class=\"slds-day slds-is-selected\" role=\"gridcell\"\
+    \ aria-selected=\"true\">\n              <span class=\"slds-day\">3</span>\n            </td>\n            <!-- Additional\
+    \ days... -->\n          </tr>\n        </tbody>\n      </table>\n      </div>\n"
+styling_hooks: []
+dependencies:
+  css_files:
+  - datepicker.css
+  - grid.css
+  - button.css
+  javascript:
+  - datepicker.js
+  icons:
+  - utility-sprite.svg
+  other_components:
+  - button-icon
+  - grid
+  - icons
+related_components:
+- name: Input
+  relationship: depends-on
+  description: Often combined with text input for date entry
+- name: Datetime Picker
+  relationship: variant
+  description: Extended version including time selection
+- name: Timepicker
+  relationship: similar
+  description: Complementary component for time selection
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/datepickers/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-12'
+  review_status: complete
+  notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'

package/skills/applying-slds/metadata/blueprints/components/datetime-picker.yaml

@@ -0,0 +1,155 @@
+name: Datetime Picker
+description: A datetime picker is used to select a day and a time. It combines a datepicker and timepicker into a single component
+  with two form elements, each containing a label and text input, and a dropdown menu containing a grid-based calendar and
+  time filters.
+category: Input
+slds_classes:
+  root: ''
+  elements:
+  - class: slds-dropdown-trigger
+    description: Container that triggers the dropdown menu
+    purpose: Wraps the date input and controls dropdown visibility
+  - class: slds-form-element__icon
+    description: Icon element within the form element
+    purpose: Contains icon for the datetime picker input
+  modifiers:
+  - class: slds-datetimepicker_has-tooltip
+    description: Modifier for datetime picker with tooltip
+    usage: Applied when tooltip is present on the datetime picker
+  - class: slds-is-open
+    description: State modifier for open dropdown
+    usage: Applied to dropdown-trigger when dropdown is visible
+  states:
+  - class: slds-has-focus
+    description: Focus state on timepicker listbox option
+    trigger: When a time option receives focus
+  - class: slds-is-selected
+    description: Selected state for date or time option
+    trigger: When a date or time option is selected
+  - class: slds-is-today
+    description: Today indicator for datepicker
+    trigger: Applied to the current day in the calendar
+variants:
+- name: Base
+  description: Standard datetime picker with date and time selection
+  classes: []
+  usage_context: Default datetime picker implementation combining datepicker and timepicker
+  differences: Two form elements - one for date, one for time, with dropdown menus
+lightning_component:
+  name: ''
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component - use lightning-input with type='datetime-local' or custom implementation
+accessibility:
+  keyboard_support:
+  - Tab to navigate between date and time inputs
+  - Enter or Space to open dropdown menus
+  - Arrow keys to navigate calendar dates or time options
+  - Escape to close dropdown menus
+  screen_reader:
+  - Date format message announced when date field receives focus
+  - Selected date and time announced
+  - Calendar navigation announced
+  - Time options announced when navigating
+  aria_attributes:
+  - role='combobox' on combobox element (desktop only)
+  - aria-expanded on dropdown trigger
+  - aria-haspopup on combobox
+  - aria-controls on input (desktop only)
+  - aria-autocomplete on input (desktop only)
+  - role='textbox' on input (desktop only)
+  - aria-describedby for date format messages
+  - Remove ARIA attributes on mobile when using datetime-local input type
+usage_guidelines:
+  when_to_use:
+  - When users need to select both a date and time
+  - For scheduling appointments or events
+  - When precise datetime selection is required
+  - For form inputs requiring date and time together
+  when_not_to_use:
+  - When only date is needed (use datepicker)
+  - When only time is needed (use timepicker)
+  - In data table cells (use popover instead)
+  - When space is very limited
+  best_practices:
+  - Use native datetime-local input on mobile devices
+  - Provide clear date format guidance
+  - Use required indicators with legends for required fields
+  - Ensure proper ARIA attributes for desktop, remove for mobile native inputs
+  - Provide visual feedback for selected date and time
+  - Handle timezone considerations appropriately
+  common_mistakes:
+  - Using in data table cells without popover
+  - Not removing ARIA attributes on mobile native inputs
+  - Missing date format guidance
+  - Not handling timezone correctly
+  - Inadequate keyboard navigation support
+code_examples:
+- title: Basic Datetime Picker
+  code: "<div class=\"\">\n  <div class=\"slds-form-element\">\n    <label class=\"slds-form-element__label\" for=\"date-input\"\
+    >\n      <abbr class=\"slds-required\" title=\"required\">*</abbr> Date\n    </label>\n    <div class=\"slds-form-element__control\"\
+    >\n      <div class=\"slds-dropdown-trigger slds-dropdown-trigger_click\">\n        <div class=\"slds-combobox_container\"\
+    >\n          <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"\
+    false\" aria-haspopup=\"listbox\">\n            <div class=\"slds-form-element__icon\">\n              <svg class=\"slds-icon\
+    \ slds-icon-text-default\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#event\"\
+    ></use>\n              </svg>\n            </div>\n            <input type=\"text\" class=\"slds-input slds-combobox__input\"\
+    \ id=\"date-input\" aria-controls=\"date-listbox\" aria-autocomplete=\"list\" role=\"textbox\" placeholder=\"Select a\
+    \ date\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"slds-form-element\"\
+    >\n    <label class=\"slds-form-element__label\" for=\"time-input\">\n      <abbr class=\"slds-required\" title=\"required\"\
+    >*</abbr> Time\n    </label>\n    <div class=\"slds-form-element__control\">\n      <div class=\"slds-combobox_container\"\
+    >\n        <div class=\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click\" role=\"combobox\" aria-expanded=\"\
+    false\" aria-haspopup=\"listbox\">\n          <input type=\"text\" class=\"slds-input slds-combobox__input\" id=\"time-input\"\
+    \ aria-controls=\"time-listbox\" aria-autocomplete=\"list\" role=\"textbox\" placeholder=\"Select a time\" />\n      \
+    \  </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
+  description: Basic datetime picker with date and time inputs
+- title: Mobile Datetime Picker (Native)
+  code: "<div class=\"\">\n  <div class=\"slds-form-element\">\n    <label class=\"slds-form-element__label\" for=\"datetime-mobile\"\
+    >\n      <abbr class=\"slds-required\" title=\"required\">*</abbr> Date and Time\n    </label>\n    <div class=\"slds-form-element__control\"\
+    >\n      <input type=\"datetime-local\" class=\"slds-input\" id=\"datetime-mobile\" />\n    </div>\n  </div>\n</div>\n"
+  description: Mobile datetime picker using native datetime-local input (ARIA attributes removed)
+styling_hooks: []
+dependencies:
+  css_files:
+  - datetime-picker.css
+  - form-element.css
+  - input.css
+  - datepicker.css
+  - timepicker.css
+  - combobox.css
+  - dropdown.css
+  javascript:
+  - Dropdown trigger functionality
+  - Calendar navigation
+  - Time option selection
+  - Date/time validation
+  icons:
+  - utility:event (for date icon)
+  other_components:
+  - form-element
+  - input
+  - datepicker
+  - timepicker
+  - combobox
+  - dropdown
+  - menus
+related_components:
+- name: Datepicker
+  relationship: depends-on
+  description: Date selection component used within datetime picker
+- name: Timepicker
+  relationship: depends-on
+  description: Time selection component used within datetime picker
+- name: Input
+  relationship: similar
+  description: Text input component used for date and time display
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/datetime-picker/
+  design_guidelines: https://v1.lightningdesignsystem.com/components/datetime-picker/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-01-15'
+  author: SLDS Documentation Team
+  slds_version: 2.27.2
+  review_status: complete
+  source: official-slds
+  notes: Created from official SLDS documentation and design-system-internal source code. Combines datepicker and timepicker
+    components. Mobile implementation uses native datetime-local input.

package/skills/applying-slds/metadata/blueprints/components/docked-composer.yaml

@@ -0,0 +1,201 @@
+name: Docked Composer
+description: A persistent composition interface that remains docked at the bottom of the screen, allowing users to create
+  content (emails, messages, posts) while maintaining context of their current workflow.
+category: Overlay
+slds_classes:
+  root: slds-docked-composer
+  elements:
+  - class: slds-docked-composer__header
+    description: Header section of the docked composer
+    purpose: Contains title, status indicators, and header controls
+  - class: slds-docked-composer__body
+    description: Main content area of the composer
+    purpose: Contains the primary composition interface and controls
+  - class: slds-docked-composer__footer
+    description: Footer section with action buttons
+    purpose: Contains send, save, and other action buttons
+  - class: slds-docked-composer__lead
+    description: Lead content area within composer
+    purpose: Primary content or recipient information
+  - class: slds-docked-composer__toolbar
+    description: Toolbar for composer actions
+    purpose: Contains formatting and composition tools
+  modifiers: []
+  states:
+  - class: slds-is-open
+    description: Expanded composer state
+    trigger: Applied when composer is expanded and active
+  - class: slds-is-closed
+    description: Minimized composer state
+    trigger: Applied when composer is minimized
+variants:
+- name: Base
+  description: Standard docked composer for general composition
+  classes:
+  - slds-docked-composer
+  usage_context: Default implementation for content composition
+  differences: Basic composer with header, body, and footer
+- name: Email
+  description: Email-specific docked composer
+  classes:
+  - slds-docked-composer
+  usage_context: For email composition workflows
+  differences: Email-specific fields and formatting options
+- name: Task
+  description: Task creation docked composer
+  classes:
+  - slds-docked-composer
+  usage_context: For task and reminder creation
+  differences: Task-specific fields and controls
+lightning_component:
+  name: No direct component
+  url: https://developer.salesforce.com/docs/component-library/overview/components
+  mapping_notes: No direct Lightning Base Component equivalent - typically implemented using custom components with lightning-modal
+    or lightning-card patterns
+accessibility:
+  keyboard_support:
+  - Tab navigation through composer elements
+  - Enter/Space to activate buttons and controls
+  - Escape to minimize or close composer
+  - Arrow keys for toolbar navigation
+  screen_reader:
+  - Composer purpose and state announced
+  - Form fields and labels properly associated
+  - Action buttons clearly described
+  - Status updates communicated
+  aria_attributes:
+  - role='dialog' for composer container
+  - aria-labelledby for composer title
+  - aria-describedby for composer content
+  - aria-expanded for minimize/expand state
+  - aria-live for status updates
+usage_guidelines:
+  when_to_use:
+  - For content composition that shouldn't interrupt workflow
+  - When users need to reference other content while composing
+  - For email, message, or document creation
+  - When composition is a secondary task
+  when_not_to_use:
+  - For simple, quick inputs (use modal instead)
+  - When composition is the primary task
+  - On small screens with limited space
+  best_practices:
+  - Provide clear minimize/maximize controls
+  - Save draft content automatically
+  - Allow multiple composers when appropriate
+  - Maintain scroll position when minimized
+  - Provide clear send/save actions
+  common_mistakes:
+  - Blocking user interaction with underlying content
+  - Not saving drafts automatically
+  - Poor mobile responsive behavior
+  - Unclear composer state indicators
+code_examples:
+- title: Basic Docked Composer
+  description: Standard docked composer for general content creation
+  code: "<section class=\"slds-docked-composer slds-is-open\" role=\"dialog\" aria-labelledby=\"composer-title\" aria-describedby=\"\
+    composer-body\">\n      <header class=\"slds-docked-composer__header\">\n        <div class=\"slds-media slds-media_center\"\
+    >\n          <div class=\"slds-media__figure\">\n            <span class=\"slds-icon_container slds-icon-standard-email\"\
+    >\n              <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#email\"\
+    ></use>\n              </svg>\n            </span>\n          </div>\n          <div class=\"slds-media__body\">\n   \
+    \         <h2 id=\"composer-title\" class=\"slds-truncate slds-text-heading_small\">New Email</h2>\n          </div>\n\
+    \          <div class=\"slds-media__figure slds-media__figure_reverse\">\n            <div class=\"slds-button-group\"\
+    >\n              <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Minimize\">\n        \
+    \        <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#minimize_window\"\
+    ></use>\n                </svg>\n                <span class=\"slds-assistive-text\">Minimize composer</span>\n      \
+    \        </button>\n              <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Expand\"\
+    >\n                <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#expand\"\
+    ></use>\n                </svg>\n                <span class=\"slds-assistive-text\">Expand composer</span>\n        \
+    \      </button>\n              <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Close\"\
+    >\n                <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"\
+    ></use>\n                </svg>\n                <span class=\"slds-assistive-text\">Close composer</span>\n         \
+    \     </button>\n            </div>\n          </div>\n        </div>\n      </header>\n      <div class=\"slds-docked-composer__body\"\
+    \ id=\"composer-body\">\n        <div class=\"slds-form-element slds-m-bottom_small\">\n          <label class=\"slds-form-element__label\"\
+    \ for=\"composer-to\">To</label>\n          <div class=\"slds-form-element__control\">\n            <input type=\"email\"\
+    \ id=\"composer-to\" class=\"slds-input\" placeholder=\"Enter recipient email\">\n          </div>\n        </div>\n \
+    \       <div class=\"slds-form-element slds-m-bottom_small\">\n          <label class=\"slds-form-element__label\" for=\"\
+    composer-subject\">Subject</label>\n          <div class=\"slds-form-element__control\">\n            <input type=\"text\"\
+    \ id=\"composer-subject\" class=\"slds-input\" placeholder=\"Enter subject\">\n          </div>\n        </div>\n    \
+    \    <div class=\"slds-form-element\">\n          <label class=\"slds-form-element__label\" for=\"composer-message\">Message</label>\n\
+    \          <div class=\"slds-form-element__control\">\n            <textarea id=\"composer-message\" class=\"slds-textarea\"\
+    \ rows=\"10\" placeholder=\"Enter your message\"></textarea>\n          </div>\n        </div>\n      </div>\n      <footer\
+    \ class=\"slds-docked-composer__footer\">\n        <div class=\"slds-grid slds-grid_align-spread\">\n          <div class=\"\
+    slds-col\">\n            <button class=\"slds-button slds-button_icon slds-button_icon-border\" title=\"Attach file\"\
+    >\n              <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#attach\"\
+    ></use>\n              </svg>\n              <span class=\"slds-assistive-text\">Attach file</span>\n            </button>\n\
+    \          </div>\n          <div class=\"slds-col slds-no-flex\">\n            <div class=\"slds-button-group\">\n  \
+    \            <button class=\"slds-button slds-button_neutral\">Save Draft</button>\n              <button class=\"slds-button\
+    \ slds-button_brand\">Send</button>\n            </div>\n          </div>\n        </div>\n      </footer>\n      </section>\n"
+- title: Minimized Docked Composer
+  description: Docked composer in minimized state
+  code: "<section class=\"slds-docked-composer slds-is-closed\" role=\"dialog\" aria-labelledby=\"composer-min-title\">\n\
+    \      <header class=\"slds-docked-composer__header\">\n        <div class=\"slds-media slds-media_center\">\n       \
+    \   <div class=\"slds-media__figure\">\n            <span class=\"slds-icon_container slds-icon-standard-email\">\n  \
+    \            <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#email\"\
+    ></use>\n              </svg>\n            </span>\n          </div>\n          <div class=\"slds-media__body\">\n   \
+    \         <h2 id=\"composer-min-title\" class=\"slds-truncate slds-text-heading_small\">Draft - New Email</h2>\n     \
+    \     </div>\n          <div class=\"slds-media__figure slds-media__figure_reverse\">\n            <button class=\"slds-button\
+    \ slds-button_icon slds-button_icon-border\" title=\"Expand\">\n              <svg class=\"slds-button__icon\" aria-hidden=\"\
+    true\">\n                <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#expand\"></use>\n            \
+    \  </svg>\n              <span class=\"slds-assistive-text\">Expand composer</span>\n            </button>\n         \
+    \ </div>\n        </div>\n      </header>\n      </section>\n"
+- title: Task Composer
+  description: Docked composer configured for task creation
+  code: "<section class=\"slds-docked-composer slds-is-open\" role=\"dialog\" aria-labelledby=\"task-composer-title\">\n \
+    \     <header class=\"slds-docked-composer__header\">\n        <div class=\"slds-media slds-media_center\">\n        \
+    \  <div class=\"slds-media__figure\">\n            <span class=\"slds-icon_container slds-icon-standard-task\">\n    \
+    \          <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"true\">\n                <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#task\"\
+    ></use>\n              </svg>\n            </span>\n          </div>\n          <div class=\"slds-media__body\">\n   \
+    \         <h2 id=\"task-composer-title\" class=\"slds-truncate slds-text-heading_small\">New Task</h2>\n          </div>\n\
+    \          <div class=\"slds-media__figure slds-media__figure_reverse\">\n            <button class=\"slds-button slds-button_icon\
+    \ slds-button_icon-border\" title=\"Close\">\n              <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n \
+    \               <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\n              </svg>\n\
+    \              <span class=\"slds-assistive-text\">Close composer</span>\n            </button>\n          </div>\n  \
+    \      </div>\n      </header>\n      <div class=\"slds-docked-composer__body\">\n        <div class=\"slds-form-element\
+    \ slds-m-bottom_small\">\n          <label class=\"slds-form-element__label\" for=\"task-subject\">Task Subject</label>\n\
+    \          <div class=\"slds-form-element__control\">\n            <input type=\"text\" id=\"task-subject\" class=\"slds-input\"\
+    \ placeholder=\"Enter task subject\">\n          </div>\n        </div>\n        <div class=\"slds-form-element slds-m-bottom_small\"\
+    >\n          <label class=\"slds-form-element__label\" for=\"task-due-date\">Due Date</label>\n          <div class=\"\
+    slds-form-element__control\">\n            <input type=\"date\" id=\"task-due-date\" class=\"slds-input\">\n         \
+    \ </div>\n        </div>\n        <div class=\"slds-form-element\">\n          <label class=\"slds-form-element__label\"\
+    \ for=\"task-description\">Description</label>\n          <div class=\"slds-form-element__control\">\n            <textarea\
+    \ id=\"task-description\" class=\"slds-textarea\" rows=\"6\" placeholder=\"Enter task description\"></textarea>\n    \
+    \      </div>\n        </div>\n      </div>\n      <footer class=\"slds-docked-composer__footer\">\n        <div class=\"\
+    slds-grid slds-grid_align-end\">\n          <div class=\"slds-col slds-no-flex\">\n            <div class=\"slds-button-group\"\
+    >\n              <button class=\"slds-button slds-button_neutral\">Save Draft</button>\n              <button class=\"\
+    slds-button slds-button_brand\">Create Task</button>\n            </div>\n          </div>\n        </div>\n      </footer>\n\
+    \      </section>\n"
+dependencies:
+  css_files:
+  - docked-composer.css
+  - form-element.css
+  - button.css
+  - input.css
+  - textarea.css
+  javascript:
+  - docked-composer.js
+  icons:
+  - standard-sprite.svg
+  - utility-sprite.svg
+  other_components:
+  - form-element
+  - button
+  - input
+  - textarea
+related_components:
+- name: Modal
+  relationship: alternative
+  description: Alternative for full-screen composition
+- name: Rich Text Editor
+  relationship: depends-on
+  description: Often includes rich text editing capabilities
+- name: Form Element
+  relationship: container
+  description: Contains form elements for data input
+references:
+  official_docs: https://v1.lightningdesignsystem.com/components/docked-composer/
+metadata:
+  version: 1.0.0
+  last_updated: '2025-11-12'
+  review_status: complete
+  notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'