@salesforce/afv-skills 1.22.0 → 1.24.0

package/skills/applying-slds/metadata/blueprints/components/checkbox-button-group.yaml

@@ -1,192 +0,0 @@
-name: "Checkbox Button Group"
-
-description: "A styled checkable input group that communicates if an option(s) are true, false or indeterminate. A set of checkbox buttons wrapped in a fieldset that is also a form element."
-
-category: "Input"
-
-slds_classes:
-  root: "slds-checkbox_button-group"
-  elements:
-    - class: "slds-checkbox_button"
-      description: "Individual checkbox button within the group"
-      purpose: "Container for each checkbox option in the button group"
-    - class: "slds-checkbox_faux"
-      description: "Visual checkbox replacement styled as a button"
-      purpose: "Custom-styled checkbox appearance that looks like a button"
-    - class: "slds-checkbox_button__label"
-      description: "Label element for the checkbox button"
-      purpose: "Provides clickable area and contains the checkbox faux element"
-  modifiers: []
-  states:
-    - class: "slds-has-error"
-      description: "Error state styling for the form element"
-      trigger: "When checkbox group validation fails"
-    - class: "slds-is-disabled"
-      description: "Disabled state styling"
-      trigger: "When checkbox group is not interactive"
-
-variants:
-  - name: "Base"
-    description: "Standard checkbox button group"
-    classes: ["slds-checkbox_button-group"]
-    usage_context: "Default checkbox button group implementation"
-    differences: "Group of checkbox buttons with shared border and styling"
-
-lightning_component:
-  name: ""
-  url: "https://developer.salesforce.com/docs/component-library/overview/components"
-  mapping_notes: "No direct Lightning Base Component - use checkbox-button components in a group"
-
-accessibility:
-  keyboard_support:
-    - "Tab to navigate between checkbox buttons"
-    - "Space to toggle checkbox state"
-    - "Arrow keys may navigate between options in some implementations"
-  screen_reader:
-    - "Fieldset legend announced as group label"
-    - "Checkbox state announced (checked/unchecked)"
-    - "Label text read with each checkbox"
-    - "Error messages associated and announced"
-  aria_attributes:
-    - "aria-describedby for error messages"
-    - "aria-invalid when validation fails"
-    - "aria-required for required checkbox groups"
-    - "fieldset and legend for group semantics"
-
-usage_guidelines:
-  when_to_use:
-    - "When users need to select multiple options from a related set"
-    - "For compact selection interfaces where button styling is preferred"
-    - "When options are closely related and benefit from visual grouping"
-    - "For scheduling, filtering, or multi-select scenarios"
-  when_not_to_use:
-    - "For mutually exclusive options (use radio button group instead)"
-    - "When only one option can be selected"
-    - "For simple binary choices (use single checkbox)"
-    - "When space is very limited (consider dropdown instead)"
-  best_practices:
-    - "Use clear, descriptive legend text for the group"
-    - "Keep option labels short and concise"
-    - "Group related options logically"
-    - "Provide immediate visual feedback for selections"
-    - "Ensure adequate touch target size for mobile"
-    - "Use error states to indicate validation issues"
-  common_mistakes:
-    - "Using checkbox button group for mutually exclusive options"
-    - "Making labels too long or unclear"
-    - "Not providing proper fieldset/legend structure"
-    - "Missing error state handling"
-    - "Inadequate spacing between buttons"
-
-code_examples:
-  - title: "Basic Checkbox Button Group"
-    code: |
-      <fieldset class="slds-form-element">
-        <legend class="slds-form-element__legend slds-form-element__label">
-          Scheduled Day(s)
-        </legend>
-        <div class="slds-form-element__control">
-          <div class="slds-checkbox_button-group">
-            <span class="slds-button slds-checkbox_button">
-              <input type="checkbox" name="checkbox" id="checkbox-monday" value="monday" />
-              <label class="slds-checkbox_button__label" for="checkbox-monday">
-                <span class="slds-checkbox_faux">Monday</span>
-              </label>
-            </span>
-            <span class="slds-button slds-checkbox_button">
-              <input type="checkbox" name="checkbox" id="checkbox-tuesday" value="tuesday" />
-              <label class="slds-checkbox_button__label" for="checkbox-tuesday">
-                <span class="slds-checkbox_faux">Tuesday</span>
-              </label>
-            </span>
-            <span class="slds-button slds-checkbox_button">
-              <input type="checkbox" name="checkbox" id="checkbox-wednesday" value="wednesday" />
-              <label class="slds-checkbox_button__label" for="checkbox-wednesday">
-                <span class="slds-checkbox_faux">Wednesday</span>
-              </label>
-            </span>
-          </div>
-        </div>
-      </fieldset>
-    description: "Basic checkbox button group with three day options"
-  - title: "Checkbox Button Group with Error State"
-    code: |
-      <fieldset class="slds-form-element slds-has-error">
-        <legend class="slds-form-element__legend slds-form-element__label">
-          Select at least one option
-        </legend>
-        <div class="slds-form-element__control">
-          <div class="slds-checkbox_button-group">
-            <span class="slds-button slds-checkbox_button">
-              <input type="checkbox" name="checkbox" id="checkbox-error-1" value="option1" aria-describedby="checkbox-error-message" />
-              <label class="slds-checkbox_button__label" for="checkbox-error-1">
-                <span class="slds-checkbox_faux">Option 1</span>
-              </label>
-            </span>
-            <span class="slds-button slds-checkbox_button">
-              <input type="checkbox" name="checkbox" id="checkbox-error-2" value="option2" />
-              <label class="slds-checkbox_button__label" for="checkbox-error-2">
-                <span class="slds-checkbox_faux">Option 2</span>
-              </label>
-            </span>
-          </div>
-        </div>
-        <div id="checkbox-error-message" class="slds-form-element__help">This field is required</div>
-      </fieldset>
-    description: "Checkbox button group with error state and validation message"
-  - title: "Disabled Checkbox Button Group"
-    code: |
-      <fieldset class="slds-form-element">
-        <legend class="slds-form-element__legend slds-form-element__label">
-          Disabled Options
-        </legend>
-        <div class="slds-form-element__control">
-          <div class="slds-checkbox_button-group">
-            <span class="slds-button slds-checkbox_button">
-              <input type="checkbox" name="checkbox" id="checkbox-disabled-1" value="option1" disabled />
-              <label class="slds-checkbox_button__label" for="checkbox-disabled-1">
-                <span class="slds-checkbox_faux">Disabled Option 1</span>
-              </label>
-            </span>
-            <span class="slds-button slds-checkbox_button">
-              <input type="checkbox" name="checkbox" id="checkbox-disabled-2" value="option2" disabled checked />
-              <label class="slds-checkbox_button__label" for="checkbox-disabled-2">
-                <span class="slds-checkbox_faux">Disabled Option 2 (Checked)</span>
-              </label>
-            </span>
-          </div>
-        </div>
-      </fieldset>
-    description: "Checkbox button group with disabled state options"
-
-styling_hooks: []
-
-dependencies:
-  css_files: ["checkbox-button-group.css", "form-element.css", "checkbox-button.css"]
-  javascript: []
-  icons: []
-  other_components: ["form-element", "checkbox-button"]
-
-related_components:
-  - name: "Checkbox Button"
-    relationship: "similar"
-    description: "Individual checkbox buttons that make up the group"
-  - name: "Radio Button Group"
-    relationship: "alternative"
-    description: "For mutually exclusive options"
-  - name: "Checkbox"
-    relationship: "similar"
-    description: "Standard checkbox input for single selections"
-
-references:
-  official_docs: "https://v1.lightningdesignsystem.com/components/checkbox-button-group/"
-  design_guidelines: "https://v1.lightningdesignsystem.com/components/checkbox-button-group/"
-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 with CSS selector annotations"
-

package/skills/applying-slds/metadata/blueprints/components/checkbox-button.yaml

@@ -1,204 +0,0 @@
-name: Checkbox Button
-description: A checkbox input styled as a button that allows users to toggle selection states, providing an alternative visual
-  presentation to traditional checkboxes with enhanced interaction design.
-category: Input
-slds_classes:
-  root: slds-checkbox_button
-  elements:
-  - class: slds-checkbox_button-group
-    description: Container for checkbox button groups
-    purpose: Groups related checkbox buttons
-  - class: slds-checkbox_button
-    description: Checkbox button wrapper
-    purpose: Contains checkbox input and label styling
-  - class: slds-checkbox_button__label
-    description: Checkbox button label
-    purpose: Provides the button appearance and text
-  - class: slds-checkbox_faux
-    description: Visual checkbox indicator
-    purpose: Button-styled visual representation
-  modifiers: []
-  states:
-  - class: slds-is-selected
-    description: Selected checkbox button state
-    trigger: Applied when checkbox is checked
-  - class: slds-has-focus
-    description: Focused checkbox button state
-    trigger: Applied when checkbox button has focus
-  - class: slds-is-disabled
-    description: Disabled checkbox button state
-    trigger: Applied when checkbox is disabled
-variants:
-- name: Base
-  description: Standard checkbox button
-  classes:
-  - slds-checkbox_button
-  usage_context: Default implementation for button-style checkboxes
-  differences: Basic button-styled checkbox with standard sizing
-- name: Group
-  description: Multiple checkbox buttons in a group
-  classes:
-  - slds-checkbox_button-group
-  usage_context: When multiple related checkbox buttons are used together
-  differences: Grouped layout with consistent spacing and alignment
-- name: Stretch
-  description: Full-width checkbox button
-  classes:
-  - slds-checkbox_button
-  usage_context: When button should fill container width
-  differences: Button stretches to full container width
-lightning_component:
-  name: lightning-checkbox-button
-  url: https://developer.salesforce.com/docs/component-library/overview/components
-  mapping_notes: Checkbox button functionality often implemented through lightning-checkbox-group or custom implementations
-accessibility:
-  keyboard_support:
-  - Tab navigation to checkbox buttons
-  - Space to toggle checkbox selection
-  - Arrow keys for group navigation
-  - Enter to activate checkbox button
-  screen_reader:
-  - Checkbox button state clearly announced
-  - Selection changes communicated
-  - Group relationships described
-  aria_attributes:
-  - aria-checked for checkbox state
-  - aria-describedby for additional information
-  - aria-labelledby for group labeling
-  - role='checkbox' for button checkboxes
-usage_guidelines:
-  when_to_use:
-  - When checkbox needs button-like appearance
-  - For toggle selections that benefit from button styling
-  - In interfaces where buttons provide better UX than checkboxes
-  - For multi-select options with prominent visual treatment
-  when_not_to_use:
-  - For single yes/no decisions (use radio buttons)
-  - When traditional checkbox styling is more appropriate
-  - For simple form inputs without special styling needs
-  best_practices:
-  - Provide clear visual feedback for selection states
-  - Use consistent sizing within groups
-  - Ensure adequate touch targets for mobile
-  - Group related checkbox buttons logically
-  - Maintain keyboard accessibility
-  common_mistakes:
-  - Using checkbox buttons for mutually exclusive options
-  - Poor visual distinction between selected/unselected states
-  - Inconsistent button sizing within groups
-  - Missing keyboard accessibility
-code_examples:
-- title: Basic Checkbox Button
-  description: Single checkbox styled as a button
-  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Select Options</label>\n     \
-    \ <div class=\"slds-form-element__control\">\n        <span class=\"slds-checkbox_button\">\n          <input type=\"\
-    checkbox\" id=\"checkbox-button-01\" value=\"option1\" />\n          <label class=\"slds-checkbox_button__label\" for=\"\
-    checkbox-button-01\">\n            <span class=\"slds-checkbox_faux\">Option 1</span>\n          </label>\n        </span>\n\
-    \      </div>\n      </div>\n"
-- title: Checkbox Button Group
-  description: Multiple checkbox buttons grouped together
-  code: "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\"\
-    >\n        Choose Your Interests\n      </legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"\
-    slds-checkbox_button-group\" role=\"group\" aria-labelledby=\"checkbox-group-label\">\n          <span class=\"slds-checkbox_button\"\
-    >\n            <input type=\"checkbox\" id=\"checkbox-button-02\" name=\"interests\" value=\"technology\" />\n       \
-    \     <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-02\">\n              <span class=\"slds-checkbox_faux\"\
-    >Technology</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n       \
-    \     <input type=\"checkbox\" id=\"checkbox-button-03\" name=\"interests\" value=\"sports\" />\n            <label class=\"\
-    slds-checkbox_button__label\" for=\"checkbox-button-03\">\n              <span class=\"slds-checkbox_faux\">Sports</span>\n\
-    \            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"\
-    checkbox\" id=\"checkbox-button-04\" name=\"interests\" value=\"music\" />\n            <label class=\"slds-checkbox_button__label\"\
-    \ for=\"checkbox-button-04\">\n              <span class=\"slds-checkbox_faux\">Music</span>\n            </label>\n \
-    \         </span>\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-05\"\
-    \ name=\"interests\" value=\"travel\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-05\"\
-    >\n              <span class=\"slds-checkbox_faux\">Travel</span>\n            </label>\n          </span>\n        </div>\n\
-    \      </div>\n      </fieldset>\n"
-- title: Stretch Checkbox Buttons
-  description: Full-width checkbox buttons for mobile or constrained layouts
-  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Notification Preferences</label>\n\
-    \      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span\
-    \ class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-06\" name=\"notifications\"\
-    \ value=\"email\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-06\">\n \
-    \             <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\"\
-    \ aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#email\"></use>\n\
-    \                </svg>\n                Email Notifications\n              </span>\n            </label>\n          </span>\n\
-    \          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-07\" name=\"\
-    notifications\" value=\"sms\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-07\"\
-    >\n              <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\"\
-    \ aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#sms\"></use>\n\
-    \                </svg>\n                SMS Notifications\n              </span>\n            </label>\n          </span>\n\
-    \          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-08\" name=\"\
-    notifications\" value=\"push\" checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-08\"\
-    >\n              <span class=\"slds-checkbox_faux\">\n                <svg class=\"slds-icon slds-icon_x-small slds-m-right_small\"\
-    \ aria-hidden=\"true\">\n                  <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#notification\"\
-    ></use>\n                </svg>\n                Push Notifications\n              </span>\n            </label>\n   \
-    \       </span>\n        </div>\n      </div>\n      </div>\n"
-- title: Compact Checkbox Buttons
-  description: Compact checkbox buttons for limited space
-  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Quick Filters</label>\n      <div\
-    \ class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"\
-    slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-09\" name=\"filters\" value=\"active\"\
-    \ checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-09\">\n              <span\
-    \ class=\"slds-checkbox_faux\">Active</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\"\
-    >\n            <input type=\"checkbox\" id=\"checkbox-button-10\" name=\"filters\" value=\"pending\" />\n            <label\
-    \ class=\"slds-checkbox_button__label\" for=\"checkbox-button-10\">\n              <span class=\"slds-checkbox_faux\"\
-    >Pending</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\">\n          \
-    \  <input type=\"checkbox\" id=\"checkbox-button-11\" name=\"filters\" value=\"closed\" />\n            <label class=\"\
-    slds-checkbox_button__label\" for=\"checkbox-button-11\">\n              <span class=\"slds-checkbox_faux\">Closed</span>\n\
-    \            </label>\n          </span>\n        </div>\n      </div>\n      </div>\n"
-- title: Disabled Checkbox Button
-  description: Checkbox button in disabled state
-  code: "<div class=\"slds-form-element\">\n      <label class=\"slds-form-element__label\">Available Options</label>\n  \
-    \    <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\">\n          <span class=\"\
-    slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-12\" name=\"options\" value=\"basic\"\
-    \ checked />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-12\">\n              <span\
-    \ class=\"slds-checkbox_faux\">Basic Plan</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\"\
-    >\n            <input type=\"checkbox\" id=\"checkbox-button-13\" name=\"options\" value=\"premium\" />\n            <label\
-    \ class=\"slds-checkbox_button__label\" for=\"checkbox-button-13\">\n              <span class=\"slds-checkbox_faux\"\
-    >Premium Plan</span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button slds-is-disabled\"\
-    >\n            <input type=\"checkbox\" id=\"checkbox-button-14\" name=\"options\" value=\"enterprise\" disabled />\n\
-    \            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-14\">\n              <span class=\"slds-checkbox_faux\"\
-    >Enterprise Plan (Coming Soon)</span>\n            </label>\n          </span>\n        </div>\n      </div>\n      </div>\n"
-- title: Checkbox Buttons with Description
-  description: Checkbox buttons with additional descriptive text
-  code: "<fieldset class=\"slds-form-element\">\n      <legend class=\"slds-form-element__legend slds-form-element__label\"\
-    >\n        Select Features\n      </legend>\n      <div class=\"slds-form-element__control\">\n        <div class=\"slds-checkbox_button-group\"\
-    >\n          <span class=\"slds-checkbox_button\">\n            <input type=\"checkbox\" id=\"checkbox-button-15\" name=\"\
-    features\" value=\"analytics\" />\n            <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-15\"\
-    >\n              <span class=\"slds-checkbox_faux\">\n                <div class=\"slds-text-align_left\">\n         \
-    \         <div class=\"slds-text-body_regular\">Advanced Analytics</div>\n                  <div class=\"slds-text-body_small\
-    \ slds-text-color_weak\">\n                    Detailed reporting and insights\n                  </div>\n           \
-    \     </div>\n              </span>\n            </label>\n          </span>\n          <span class=\"slds-checkbox_button\"\
-    >\n            <input type=\"checkbox\" id=\"checkbox-button-16\" name=\"features\" value=\"api\" checked />\n       \
-    \     <label class=\"slds-checkbox_button__label\" for=\"checkbox-button-16\">\n              <span class=\"slds-checkbox_faux\"\
-    >\n                <div class=\"slds-text-align_left\">\n                  <div class=\"slds-text-body_regular\">API Access</div>\n\
-    \                  <div class=\"slds-text-body_small slds-text-color_weak\">\n                    Integrate with external\
-    \ systems\n                  </div>\n                </div>\n              </span>\n            </label>\n          </span>\n\
-    \        </div>\n      </div>\n      </fieldset>\n"
-dependencies:
-  css_files:
-  - checkbox-button.css
-  - form-element.css
-  javascript:
-  - checkbox-button.js
-  icons:
-  - utility-sprite.svg
-  other_components:
-  - form-element
-  - checkbox
-related_components:
-- name: Checkbox
-  relationship: alternative
-  description: Traditional checkbox alternative
-- name: Radio Button Group
-  relationship: similar
-  description: Similar grouped selection concept
-- name: Button Group
-  relationship: similar
-  description: Similar button grouping layout
-references:
-  official_docs: https://v1.lightningdesignsystem.com/components/checkbox-button/
-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/checkbox-toggle.yaml

@@ -1,177 +0,0 @@
-name: "Checkbox Toggle"
-description: "A checkable input that communicates if an option is true, false or indeterminate. A toggle-style checkbox that provides a visual switch interface for binary choices."
-category: "Input"
-slds_classes:
-  root: "slds-checkbox_toggle"
-  elements:
-    - class: "slds-checkbox_faux"
-      description: "Visual toggle switch element"
-      purpose: "Custom-styled toggle switch appearance that replaces the native checkbox"
-    - class: "slds-checkbox_faux_container"
-      description: "Container for the faux checkbox element and text labels"
-      purpose: "Wraps the toggle switch and provides structure for on/off text"
-    - class: "slds-checkbox_off"
-      description: "Container for text shown when toggle is off"
-      purpose: "Displays text when checkbox is unchecked"
-    - class: "slds-checkbox_on"
-      description: "Container for text shown when toggle is on"
-      purpose: "Displays text when checkbox is checked"
-  modifiers: []
-  states:
-    - class: "slds-is-disabled"
-      description: "Disabled state styling"
-      trigger: "When checkbox toggle is not interactive"
-variants:
-  - name: "Base"
-    description: "Standard checkbox toggle"
-    classes:
-      - "slds-checkbox_toggle"
-    usage_context: "Default checkbox toggle implementation"
-    differences: "Toggle switch with optional on/off text labels"
-lightning_component:
-  name: ""
-  url: "https://developer.salesforce.com/docs/component-library/overview/components"
-  mapping_notes: "No direct Lightning Base Component - use custom implementation with SLDS classes"
-accessibility:
-  keyboard_support:
-    - "Tab to focus the checkbox toggle"
-    - "Space to toggle checkbox state"
-    - "Enter may toggle in some contexts"
-  screen_reader:
-    - "Checkbox state announced (checked/unchecked)"
-    - "Label text read with the checkbox"
-    - "Required state announced when applicable"
-    - "Error messages associated and announced"
-  aria_attributes:
-    - "aria-describedby for error messages"
-    - "aria-invalid when validation fails"
-    - "aria-required for required checkboxes"
-    - "aria-checked for state indication"
-    - "fieldset and legend for grouped toggles"
-usage_guidelines:
-  when_to_use:
-    - "For binary choices where toggle switch UI is preferred"
-    - "When you want a more visual, switch-like interface"
-    - "For settings, preferences, or feature toggles"
-    - "When space allows for the toggle switch design"
-  when_not_to_use:
-    - "For mutually exclusive options (use radio buttons)"
-    - "When multiple options can be selected (use checkboxes)"
-    - "In very constrained spaces (use standard checkbox)"
-    - "For actions (use buttons instead)"
-  best_practices:
-    - "Use clear, descriptive labels"
-    - "Provide on/off text labels when helpful"
-    - "Use fieldset and legend for grouped toggles"
-    - "Ensure adequate touch target size for mobile"
-    - "Provide immediate visual feedback for state changes"
-    - "Use consistent toggle styling throughout the interface"
-  common_mistakes:
-    - "Using toggles for mutually exclusive options"
-    - "Making labels too long or unclear"
-    - "Not providing proper fieldset/legend structure for groups"
-    - "Missing required state indicators"
-    - "Inadequate spacing or touch targets"
-code_examples:
-  - title: "Basic Checkbox Toggle"
-    code: |
-      <div class="slds-form-element">
-            <div class="slds-form-element__control">
-              <label class="slds-checkbox_toggle slds-grid">
-                <input type="checkbox" name="checkbox-toggle" id="toggle-1" />
-                <span class="slds-checkbox_faux_container" aria-live="polite">
-                  <span class="slds-checkbox_faux"></span>
-                  <span class="slds-checkbox_off">Off</span>
-                  <span class="slds-checkbox_on">On</span>
-                </span>
-                <span class="slds-form-element__label">Toggle this setting</span>
-              </label>
-            </div>
-            </div>
-  - title: "Checkbox Toggle Checked State"
-    code: |
-      <div class="slds-form-element">
-            <div class="slds-form-element__control">
-              <label class="slds-checkbox_toggle slds-grid">
-                <input type="checkbox" name="checkbox-toggle" id="toggle-2" checked />
-                <span class="slds-checkbox_faux_container" aria-live="polite">
-                  <span class="slds-checkbox_faux"></span>
-                  <span class="slds-checkbox_off">Off</span>
-                  <span class="slds-checkbox_on">On</span>
-                </span>
-                <span class="slds-form-element__label">Toggle enabled</span>
-              </label>
-            </div>
-            </div>
-  - title: "Disabled Checkbox Toggle"
-    code: |
-      <div class="slds-form-element">
-            <div class="slds-form-element__control">
-              <label class="slds-checkbox_toggle slds-grid">
-                <input type="checkbox" name="checkbox-toggle" id="toggle-3" disabled />
-                <span class="slds-checkbox_faux_container" aria-live="polite">
-                  <span class="slds-checkbox_faux"></span>
-                  <span class="slds-checkbox_off">Off</span>
-                  <span class="slds-checkbox_on">On</span>
-                </span>
-                <span class="slds-form-element__label">Disabled toggle</span>
-              </label>
-            </div>
-            </div>
-styling_hooks:
-  - name: "--slds-c-checkbox-toggle-color-border"
-    description: "Border color for the toggle switch"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-color-border-hover"
-    description: "Border color for the toggle switch on hover"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-color-background"
-    description: "Background color for the toggle switch"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-color-background-hover"
-    description: "Hover background color for the toggle switch"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-color-background-checked-focus"
-    description: "Background color when toggle is checked and focused"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-switch-color-background"
-    description: "Background color for the toggle switch slider/knob"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-switch-color-background-checked"
-    description: "Background color for the toggle switch slider/knob when checked"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-mark-color-foreground"
-    description: "Foreground color for the checkmark when toggle is checked"
-    category: "color"
-  - name: "--slds-c-checkbox-toggle-radius-border"
-    description: "Border radius for the toggle switch (pill shape)"
-    category: "border"
-  - name: "--slds-c-checkbox-toggle-shadow"
-    description: "Box shadow for the toggle switch"
-    category: "shadow"
-dependencies:
-  css_files:
-    - "checkbox-toggle.css"
-    - "form-element.css"
-  javascript: []
-  icons: []
-  other_components:
-    - "form-element"
-related_components:
-  - name: "Checkbox"
-    relationship: "alternative"
-    description: "Standard checkbox for binary choices"
-  - name: "Toggle"
-    relationship: "similar"
-    description: "Alternative toggle-style input control"
-references:
-  official_docs: "https://v1.lightningdesignsystem.com/components/checkbox-toggle/"
-  design_guidelines: "https://v1.lightningdesignsystem.com/components/checkbox-toggle/"
-metadata:
-  version: "1.0.0"
-  last_updated: "2025-11-12"
-  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 with CSS selector annotations. Includes comprehensive styling hooks from SCSS annotations. Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."