@gitlab/ui 134.8.0 → 135.0.0

package/src/components/charts/stacked_column/stacked_column.vue

@@ -47,84 +47,136 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Array of bar series data for stacked columns.
+     */
     bars: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Array of line series data to overlay on the columns.
+     */
     lines: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Secondary data series for an additional axis.
+     */
     secondaryData: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Presentation mode (e.g., 'absolute', 'percent').
+     */
     presentation: {
       type: String,
       required: false,
       default: stackedPresentationOptions.stacked,
       validator: (value) => Object.values(stackedPresentationOptions).indexOf(value) !== -1,
     },
+    /**
+     * Category labels for the X axis (passed to ECharts `xAxis.data`).
+     * Only used when `xAxisType` is 'category'.
+     */
     groupBy: {
       type: Array,
       required: true,
     },
+    /**
+     * Type of the X axis (e.g., 'category', 'value').
+     */
     xAxisType: {
       type: String,
       required: true,
       validator: (value) => ['value', 'category', 'time', 'log'].indexOf(value) !== -1,
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the secondary data axis.
+     */
     secondaryDataTitle: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Array of names for each data series.
+     */
     seriesNames: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * When true, includes average and maximum values in the legend.
+     */
     includeLegendAvgMax: {
       type: Boolean,
       required: false,
       default: true,
     },
+    /**
+     * Custom text for the average value in the legend.
+     */
     legendAverageText: {
       type: String,
       required: false,
       default: LEGEND_AVERAGE_TEXT,
     },
+    /**
+     * Custom text for the maximum value in the legend.
+     */
     legendMaxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT,
     },
+    /**
+     * Custom text for the minimum value label.
+     */
     legendMinText: {
       type: String,
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Custom text for the current value label.
+     */
     legendCurrentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Layout configuration for the legend.
+     */
     legendLayout: {
       type: String,
       required: false,
@@ -144,6 +196,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Custom color palette for the chart series.
+     */
     customPalette: {
       type: Array,
       required: false,

package/src/components/regions/empty_state/empty_state.vue

@@ -102,6 +102,9 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * When true, inverts the empty state illustration colors in dark mode.
+     */
     invertInDarkMode: {
       type: Boolean,
       required: false,

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -3,7 +3,7 @@
   @apply gl-border-none;
   @apply gl-cursor-pointer;
 
-  &:focus {
+  &:focus-visible {
     @apply gl-focus;
   }
 }

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -12,11 +12,17 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    /**
+     * The title attribute for the clear button.
+     */
     title: {
       type: String,
       required: false,
       default: () => translate('ClearIconButton.title', 'Clear'),
     },
+    /**
+     * Container element for the tooltip.
+     */
     tooltipContainer: {
       required: false,
       default: false,

package/src/components/shared_components/close_button/close_button.vue

@@ -8,6 +8,9 @@ export default {
     GlButton,
   },
   props: {
+    /**
+     * The aria-label for the close button.
+     */
     label: {
       type: String,
       required: false,

package/src/components/utilities/animated_number/animated_number.vue

@@ -4,6 +4,9 @@ import { formatNumberToLocale } from '../../../utils/number_utils';
 export default {
   name: 'AnimatedNumber',
   props: {
+    /**
+     * The numeric value to animate.
+     */
     number: {
       type: Number,
       required: true,
@@ -24,11 +27,17 @@ export default {
       required: false,
       default: 0,
     },
+    /**
+     * When true, formats the number with digit group separators.
+     */
     useDelimiters: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, animates the number when the component is mounted.
+     */
     animateOnMount: {
       type: Boolean,
       required: false,

package/src/components/utilities/intersperse/intersperse.vue

@@ -44,11 +44,17 @@ export default {
   name: 'GlIntersperse',
   functional: true,
   props: {
+    /**
+     * The separator content to place between items.
+     */
     separator: {
       type: String,
       default: ', ',
       required: false,
     },
+    /**
+     * The separator content to place before the last item.
+     */
     lastSeparator: {
       type: String,
       default: '',

package/src/scss/mixins.scss

@@ -269,7 +269,7 @@
     border-color: var(--gl-action-selected-border-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     color: var(--gl-action-selected-foreground-color-focus);
     background-color: var(--gl-action-selected-background-color-focus);
     border-color: var(--gl-action-selected-border-color-focus);

package/src/tokens/build/css/tokens.css

@@ -1016,9 +1016,6 @@
   --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
   --gl-toggle-switch-track-color-unchecked-default: var(--gl-control-border-color-default); /** Used for the track color of an unchecked toggle switch in the default state. */
-  --gl-toggle-switch-track-color-unchecked-hover: var(--gl-control-border-color-hover); /** Used for the track color of an unchecked toggle switch in the hover state. */
-  --gl-toggle-switch-track-color-unchecked-focus: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the focus state. */
-  --gl-toggle-switch-track-color-unchecked-active: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the active state. */
   --gl-toggle-switch-track-color-checked-focus: var(--gl-toggle-switch-track-color-checked-hover); /** Used for the track color of a checked toggle switch in the focus state. */
   --gl-toggle-switch-background-color-unchecked-default: var(--gl-control-indicator-color-selected); /** Used for the background color of the unchecked toggle switch thumb in the default state. */
   --gl-toggle-switch-background-color-checked-default: var(--gl-action-strong-confirm-foreground-color-default); /** Used for the background color of the checked toggle switch thumb in the default state. */
@@ -1228,6 +1225,7 @@
   --gl-nav-item-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the background of a selected navigation item in the focus state. */
   --gl-tab-selected-indicator-color-default: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */
+  --gl-toggle-switch-track-color-unchecked-hover: var(--gl-toggle-switch-track-color-unchecked-default); /** Used for the track color of an unchecked toggle switch in the hover state. */
   --gl-toggle-switch-background-color-unchecked-hover: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the hover state. */
   --gl-toggle-switch-background-color-unchecked-focus: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the focus state. */
   --gl-toggle-switch-background-color-unchecked-active: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the active state. */
@@ -1244,6 +1242,7 @@
   --gl-control-border-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
   --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the active state. */
   --gl-nav-item-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected navigation item in the focus state. */
+  --gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-hover); /** Used for the track color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-background-color-checked-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the background color of the checked toggle switch thumb in the focus state. */
   --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
   --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */
@@ -1251,5 +1250,6 @@
   --gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-focus); /** Used for the foreground of a strong neutral action in the active state. */
   --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */
   --gl-nav-item-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */
+  --gl-toggle-switch-track-color-unchecked-active: var(--gl-toggle-switch-track-color-unchecked-focus); /** Used for the track color of an unchecked toggle switch in the active state. */
   --gl-toggle-switch-background-color-checked-active: var(--gl-action-strong-confirm-foreground-color-active); /** Used for the background color of the checked toggle switch thumb in the active state. */
 }

package/src/tokens/build/css/tokens.dark.css

@@ -1023,9 +1023,6 @@
   --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
   --gl-toggle-switch-track-color-unchecked-default: var(--gl-control-border-color-default); /** Used for the track color of an unchecked toggle switch in the default state. */
-  --gl-toggle-switch-track-color-unchecked-hover: var(--gl-control-border-color-hover); /** Used for the track color of an unchecked toggle switch in the hover state. */
-  --gl-toggle-switch-track-color-unchecked-focus: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the focus state. */
-  --gl-toggle-switch-track-color-unchecked-active: var(--gl-control-border-color-focus); /** Used for the track color of an unchecked toggle switch in the active state. */
   --gl-toggle-switch-track-color-checked-focus: var(--gl-toggle-switch-track-color-checked-hover); /** Used for the track color of a checked toggle switch in the focus state. */
   --gl-toggle-switch-background-color-unchecked-default: var(--gl-control-indicator-color-selected); /** Used for the background color of the unchecked toggle switch thumb in the default state. */
   --gl-toggle-switch-background-color-checked-default: var(--gl-action-strong-confirm-foreground-color-default); /** Used for the background color of the checked toggle switch thumb in the default state. */
@@ -1230,6 +1227,7 @@
   --gl-nav-item-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the background of a selected navigation item in the focus state. */
   --gl-tab-selected-indicator-color-default: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */
+  --gl-toggle-switch-track-color-unchecked-hover: var(--gl-toggle-switch-track-color-unchecked-default); /** Used for the track color of an unchecked toggle switch in the hover state. */
   --gl-toggle-switch-background-color-unchecked-hover: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the hover state. */
   --gl-toggle-switch-background-color-unchecked-focus: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the focus state. */
   --gl-toggle-switch-background-color-unchecked-active: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the active state. */
@@ -1245,11 +1243,13 @@
   --gl-control-border-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
   --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the active state. */
   --gl-nav-item-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected navigation item in the focus state. */
+  --gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-hover); /** Used for the track color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-background-color-checked-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the background color of the checked toggle switch thumb in the focus state. */
   --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
   --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */
   --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /** Used for the border of a strong confirm action in the active state. */
   --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */
   --gl-nav-item-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */
+  --gl-toggle-switch-track-color-unchecked-active: var(--gl-toggle-switch-track-color-unchecked-focus); /** Used for the track color of an unchecked toggle switch in the active state. */
   --gl-toggle-switch-background-color-checked-active: var(--gl-action-strong-confirm-foreground-color-active); /** Used for the background color of the checked toggle switch thumb in the active state. */
 }

package/src/tokens/build/figma/mode.dark.json

@@ -5115,37 +5115,41 @@
     "$description": "Used for the track color of an unchecked toggle switch in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
   "🔒/toggle-switch-track-color-unchecked-hover": {
-    "$value": "{control-border-color-hover}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-default}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
   "🔒/toggle-switch-track-color-unchecked-focus": {
-    "$value": "{control-border-color-focus}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-hover}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
   "🔒/toggle-switch-track-color-unchecked-active": {
-    "$value": "{control-border-color-focus}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-focus}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5155,7 +5159,8 @@
     "$description": "Used for the track color of a checked toggle switch in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5165,7 +5170,8 @@
     "$description": "Used for the track color of a checked toggle switch in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5175,7 +5181,8 @@
     "$description": "Used for the track color of a checked toggle switch in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5185,7 +5192,8 @@
     "$description": "Used for the track color of a checked toggle switch in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5195,7 +5203,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5205,7 +5214,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5215,7 +5225,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5225,7 +5236,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5235,7 +5247,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5245,7 +5258,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5255,7 +5269,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5265,7 +5280,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5275,7 +5291,8 @@
     "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },

package/src/tokens/build/figma/mode.json

@@ -5059,37 +5059,41 @@
     "$description": "Used for the track color of an unchecked toggle switch in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
   "🔒/toggle-switch-track-color-unchecked-hover": {
-    "$value": "{control-border-color-hover}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-default}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
   "🔒/toggle-switch-track-color-unchecked-focus": {
-    "$value": "{control-border-color-focus}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-hover}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
   "🔒/toggle-switch-track-color-unchecked-active": {
-    "$value": "{control-border-color-focus}",
+    "$value": "{🔒/toggle-switch-track-color-unchecked-focus}",
     "$type": "color",
     "$description": "Used for the track color of an unchecked toggle switch in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5099,7 +5103,8 @@
     "$description": "Used for the track color of a checked toggle switch in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5109,7 +5114,8 @@
     "$description": "Used for the track color of a checked toggle switch in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5119,7 +5125,8 @@
     "$description": "Used for the track color of a checked toggle switch in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5129,7 +5136,8 @@
     "$description": "Used for the track color of a checked toggle switch in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5139,7 +5147,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5149,7 +5158,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5159,7 +5169,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5169,7 +5180,8 @@
     "$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5179,7 +5191,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5189,7 +5202,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5199,7 +5213,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5209,7 +5224,8 @@
     "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },
@@ -5219,7 +5235,8 @@
     "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
     "$extensions": {
       "com.figma.scopes": [
-        "SHAPE_FILL"
+        "SHAPE_FILL",
+        "FRAME_FILL"
       ]
     }
   },