@gitlab/ui 128.14.3 → 128.15.1

package/dist/tokens/build/js/tokens.js

@@ -1137,7 +1137,7 @@ const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#2f5ca0';
 const GL_CONTROL_BORDER_RADIUS = '0.5rem';
 const GL_CONTROL_TEXT_COLOR_ERROR = '#c02f12';
 const GL_CONTROL_TEXT_COLOR_VALID = '#2f7549';
-const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
+const GL_CONTROL_PLACEHOLDER_COLOR = '#737278';
 const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
 const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278';
 const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.14.3",
+  "version": "128.15.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -129,10 +129,10 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.16.0",
     "acorn-walk": "^8.3.5",
-    "autoprefixer": "10.4.24",
+    "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.10.0",
+    "cypress": "15.11.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -208,6 +208,11 @@ export default {
     },
     computedLocalCheckedWatcher(newValue, oldValue) {
       if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when checked state is changed.
+         *
+         * @event input
+         */
         this.$emit('input', newValue);
 
         const { input } = this.$refs;
@@ -237,11 +242,20 @@ export default {
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
       this.$nextTick(() => {
-        // Change is only emitted on user interaction
+        /**
+         * Emitted when selected value(s) is changed due to user interaction.
+         *
+         * @event change
+         */
         this.$emit('change', localChecked);
 
         // If this is a child of a group, we emit a change event on it as well
         if (this.isGroup) {
+          /**
+           * Emitted when selected value(s) is changed due to user interaction.
+           *
+           * @event change
+           */
           this.group.$emit('change', localChecked);
         }
 
@@ -285,8 +299,10 @@ export default {
       @change="handleChange"
     />
     <label :for="internalId" class="custom-control-label">
+      <!-- @slot The checkbox content to display. -->
       <slot></slot>
       <p v-if="Boolean($scopedSlots.help)" class="help-text">
+        <!-- @slot The help text to display. -->
         <slot name="help"></slot>
       </p>
     </label>

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -141,6 +141,11 @@ export default {
     },
     localChecked(newValue, oldValue) {
       if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the checked value is changed.
+         *
+         * @event input
+         */
         this.$emit('input', newValue);
       }
     },
@@ -155,6 +160,7 @@ export default {
     tabindex="-1"
     class="gl-form-checkbox-group gl-outline-none"
   >
+    <!-- @slot Slot for GlFormCheckboxes that will appear before checkboxes generated from options prop -->
     <slot name="first"></slot>
     <gl-form-checkbox
       v-for="(option, idx) in formOptions"
@@ -166,6 +172,7 @@ export default {
       <span v-if="option.html" v-safe-html="option.html"></span>
       <span v-else>{{ option.text }}</span>
     </gl-form-checkbox>
+    <!-- @slot Slot for GlFormCheckboxes that will appear after checkboxes generated from options prop -->
     <slot></slot>
   </div>
 </template>

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -16,22 +16,22 @@
     @apply gl-mb-0;
   }
 
-  &:hover {
+  &:not(.disabled):hover {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-hover);
       background-color: var(--gl-dropdown-option-background-color-unselected-hover);
     }
   }
 
-  &:focus {
+  &:not(.disabled):focus {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-focus);
       background-color: var(--gl-dropdown-option-background-color-unselected-focus);
     }
   }
 
-  &:active,
-  &:focus:active {
+  &:not(.disabled):active,
+  &:not(.disabled):focus:active {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-active);
       background-color: var(--gl-dropdown-option-background-color-unselected-active);
@@ -43,7 +43,13 @@
       background-color: var(--gl-dropdown-option-background-color-selected-default);
     }
 
-    &:hover {
+    &.disabled {
+      .gl-new-dropdown-item-content {
+        background-color: var(--gl-background-color-disabled);
+      }
+    }
+
+    &:not(.disabled):hover {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-hover);
       }
@@ -53,7 +59,7 @@
       }
     }
 
-    &:focus {
+    &:not(.disabled):focus {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-focus);
       }
@@ -63,8 +69,8 @@
       }
     }
 
-    &:active,
-    &:focus:active {
+    &:not(.disabled):active,
+    &:not(.disabled):focus:active {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-active);
       }
@@ -79,9 +85,9 @@
     outline: none;
   }
 
-  &:active,
-  &:focus,
-  &:focus:active {
+  &:not(.disabled):active,
+  &:not(.disabled):focus,
+  &:not(.disabled):focus:active {
     .gl-new-dropdown-item-content {
       @include gl-focus($inset: true);
     }
@@ -100,6 +106,20 @@
     @include gl-focus($inset: true);
   }
 
+  &.disabled {
+    cursor: not-allowed;
+    user-select: none;
+
+    .gl-new-dropdown-item-content {
+      color: var(--gl-text-color-disabled);
+      pointer-events: none;
+
+      .gl-new-dropdown-item-check-icon {
+        color: var(--gl-icon-color-disabled);
+      }
+    }
+  }
+
   .gl-new-dropdown-item-content {
     transition:
       background-color $gl-transition-duration-fast $gl-easing-out-cubic,

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -603,10 +603,10 @@ export default {
 
           /**
            * Every time the list of items changes, and there is a search string,
-           * we want to visually highlight the first item
+           * we want to visually highlight the first enabled item
            */
           if (this.searchHasOptions) {
-            this.nextFocusedItemIndex = 0;
+            this.nextFocusedItemIndex = this.getFirstEnabledIndex();
           } else {
             this.nextFocusedItemIndex = null;
           }
@@ -677,16 +677,22 @@ export default {
         this.focusSearchInput();
 
         /**
-         * If the search string is not empty, highlight the first item
+         * If the search string is not empty, highlight the first enabled item
          */
         if (this.searchHasOptions) {
-          this.nextFocusedItemIndex = 0;
-          // Set activeItemId for the first item
-          const firstItem = this.flattenedOptions[0];
+          const firstEnabledIndex = this.getFirstEnabledIndex();
+          this.nextFocusedItemIndex = firstEnabledIndex;
+          // Set activeItemId for the first enabled item
+          const firstItem = this.flattenedOptions[firstEnabledIndex];
           this.activeItemId = this.generateItemId(firstItem);
         }
       } else {
-        this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
+        const selectedIndex = this.selectedIndices[0];
+        const initialIndex =
+          selectedIndex !== undefined && !this.flattenedOptions[selectedIndex]?.disabled
+            ? selectedIndex
+            : this.getFirstEnabledIndex();
+        this.focusItem(initialIndex, this.getFocusableListItemElements());
       }
       /**
        * Emitted when dropdown is shown
@@ -707,13 +713,26 @@ export default {
       this.$emit('blur', event);
     },
     getNextIndex(currentIndex, keyCode, totalLength) {
-      // For UP: move up or wrap to end
-      if (keyCode === ARROW_UP) {
-        return currentIndex > 0 ? currentIndex - 1 : totalLength - 1;
+      const direction = keyCode === ARROW_UP ? -1 : 1;
+      let nextIndex = currentIndex;
+
+      for (let i = 0; i < totalLength; i += 1) {
+        nextIndex += direction;
+        if (nextIndex < 0) nextIndex = totalLength - 1;
+        if (nextIndex >= totalLength) nextIndex = 0;
+
+        if (!this.flattenedOptions[nextIndex]?.disabled) {
+          return nextIndex;
+        }
       }
 
-      // For DOWN: move down or wrap to start
-      return currentIndex < totalLength - 1 ? currentIndex + 1 : 0;
+      return currentIndex;
+    },
+    getFirstEnabledIndex() {
+      return this.flattenedOptions.findIndex((item) => !item.disabled);
+    },
+    getLastEnabledIndex() {
+      return this.flattenedOptions.findLastIndex((item) => !item.disabled);
     },
     handleListNavigation(keyCode, elements) {
       const currentIndex = this.nextFocusedItemIndex ?? -1;
@@ -731,16 +750,16 @@ export default {
 
       switch (code) {
         case HOME:
-          // Jump to first item if searchable or not in search input
+          // Jump to first enabled item if searchable or not in search input
           if (this.searchable || !isSearchInput) {
-            this.focusItem(0, elements, this.searchable);
+            this.focusItem(this.getFirstEnabledIndex(), elements, this.searchable);
           }
           break;
 
         case END:
-          // Jump to last item if searchable or not in search input
+          // Jump to last enabled item if searchable or not in search input
           if (this.searchable || !isSearchInput) {
-            this.focusItem(elements.length - 1, elements, this.searchable);
+            this.focusItem(this.getLastEnabledIndex(), elements, this.searchable);
           }
           break;
 
@@ -753,9 +772,9 @@ export default {
           break;
 
         case ARROW_DOWN:
-          // Focus first item from search input, otherwise navigate down
+          // Focus first enabled item from search input, otherwise navigate down
           if (isSearchInput && !this.searchable) {
-            this.focusItem(0, elements);
+            this.focusItem(this.getFirstEnabledIndex(), elements);
           } else {
             this.handleListNavigation(ARROW_DOWN, elements);
           }
@@ -763,10 +782,12 @@ export default {
 
         case ENTER:
           if (isSearchInput) {
-            // Toggle selection of highlighted item if one exists
+            // Toggle selection of highlighted item if one exists and is not disabled
             if (elements.length > 0 && this.nextFocusedItemIndex !== null) {
               const highlightedItem = this.flattenedOptions[this.nextFocusedItemIndex];
-              this.onSelect(highlightedItem, !this.isSelected(highlightedItem));
+              if (!highlightedItem?.disabled) {
+                this.onSelect(highlightedItem, !this.isSelected(highlightedItem));
+              }
             }
           } else {
             stop = false;
@@ -834,6 +855,9 @@ export default {
     isFocused(item) {
       return this.nextFocusedItemIndex === this.flattenedOptions.indexOf(item);
     },
+    isDisabled(item) {
+      return item.disabled;
+    },
     onSingleSelect(value, isSelected) {
       if (isSelected) {
         /**
@@ -1109,6 +1133,7 @@ export default {
               :is-selected="isSelected(item)"
               :is-focused="isFocused(item)"
               :is-check-centered="isCheckCentered"
+              :is-disabled="isDisabled(item)"
               v-bind="listboxItemMoreItemsAriaAttributes(index)"
               @select="onSelect(item, $event)"
             >
@@ -1140,6 +1165,7 @@ export default {
                 :is-selected="isSelected(option)"
                 :is-focused="isFocused(option)"
                 :is-check-centered="isCheckCentered"
+                :is-disabled="isDisabled(option)"
                 @select="onSelect(option, $event)"
               >
                 <!-- @slot Custom template of the listbox item -->

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -29,6 +29,11 @@ export default {
       default: false,
       required: false,
     },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     checkedClasses() {
@@ -40,7 +45,13 @@ export default {
     },
   },
   methods: {
+    onMousedown(event) {
+      if (this.isDisabled) {
+        stopEvent(event);
+      }
+    },
     toggleSelection() {
+      if (this.isDisabled) return;
       this.$emit('select', !this.isSelected);
     },
     onKeydown(event) {
@@ -57,10 +68,18 @@ export default {
 
 <template>
   <li
-    :class="['gl-new-dropdown-item', { 'gl-new-dropdown-item-highlighted': isHighlighted }]"
+    :class="[
+      'gl-new-dropdown-item',
+      {
+        'gl-new-dropdown-item-highlighted': isHighlighted,
+        disabled: isDisabled,
+      },
+    ]"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"
+    :aria-disabled="isDisabled"
+    @mousedown="onMousedown"
     @click="toggleSelection"
     @keydown="onKeydown"
   >

package/src/components/base/new_dropdowns/listbox/mock_data.js

@@ -14,14 +14,17 @@ export const mockOptions = [
   {
     value: 'leg',
     text: 'Legal',
+    disabled: true,
   },
   {
     value: 'eng',
     text: 'Engineering',
+    disabled: true,
   },
   {
     value: 'sales',
     text: 'Sales',
+    disabled: false,
   },
   {
     value: 'marketing',
@@ -30,6 +33,7 @@ export const mockOptions = [
   {
     value: 'acc',
     text: 'Accounting',
+    disabled: true,
   },
   {
     value: 'hr',
@@ -50,6 +54,7 @@ export const mockOptions = [
   {
     value: null,
     text: 'None',
+    disabled: true,
   },
 ];
 
@@ -134,6 +139,12 @@ export const mockUsers = [
     secondaryText: '@ohoral',
     icon: 'bar',
   },
+  {
+    value: 'jdoe',
+    text: 'Jane Doe',
+    secondaryText: '@jdoe',
+    disabled: true,
+  },
   {
     value: 'markian',
     text: 'Mark Florian',

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

@@ -919,6 +919,7 @@
   --gl-control-border-color-selected-default: var(--gl-color-blue-500); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-selected-hover: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-placeholder-color: var(--gl-color-neutral-500); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /** Used for checkbox and radio button state indicators. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
@@ -1190,7 +1191,6 @@
   --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
-  --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
   --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */

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

@@ -936,6 +936,7 @@
   --gl-control-border-color-selected-default: var(--gl-color-blue-400); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-placeholder-color: var(--gl-color-neutral-400); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /** Used for checkbox and radio button state indicators. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
@@ -1196,7 +1197,6 @@
   --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
-  --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
   --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -15655,7 +15655,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         },
         "filePath": "src/tokens/constant/border.tokens.json",
@@ -15666,7 +15666,7 @@
           "$description": "Used when a border needs to be present, but not visibly perceived.",
           "$extensions": {
             "com.figma.scopes": [
-              "ALL_SCOPES"
+              "STROKE_COLOR"
             ]
           },
           "key": "{border.color.transparent}"
@@ -32590,7 +32590,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{text.color.disabled}",
+          "$value": "{color.neutral.400}",
           "$type": "color",
           "$description": "Used for placeholder text within inputs.",
           "$extensions": {

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -15655,7 +15655,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         },
         "filePath": "src/tokens/constant/border.tokens.json",
@@ -15666,7 +15666,7 @@
           "$description": "Used when a border needs to be present, but not visibly perceived.",
           "$extensions": {
             "com.figma.scopes": [
-              "ALL_SCOPES"
+              "STROKE_COLOR"
             ]
           },
           "key": "{border.color.transparent}"
@@ -32579,7 +32579,7 @@
     "control": {
       "placeholder": {
         "key": "{control.placeholder.color}",
-        "$value": "#89888d",
+        "$value": "#737278",
         "$type": "color",
         "$description": "Used for placeholder text within inputs.",
         "$extensions": {
@@ -32590,7 +32590,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{text.color.disabled}",
+          "$value": "{color.neutral.500}",
           "$type": "color",
           "$description": "Used for placeholder text within inputs.",
           "$extensions": {

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

@@ -5,7 +5,7 @@
     "$description": "Used when a border needs to be present, but not visibly perceived.",
     "$extensions": {
       "com.figma.scopes": [
-        "ALL_SCOPES"
+        "STROKE_COLOR"
       ]
     }
   },

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

@@ -5,7 +5,7 @@
     "$description": "Used when a border needs to be present, but not visibly perceived.",
     "$extensions": {
       "com.figma.scopes": [
-        "ALL_SCOPES"
+        "STROKE_COLOR"
       ]
     }
   },

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

@@ -78,7 +78,9 @@
     "$value": "{spacing-scale-5}",
     "$type": "dimension",
     "$extensions": {
-      "com.figma.scopes": []
+      "com.figma.scopes": [
+        "PARAGRAPH_SPACING"
+      ]
     }
   },
   "line-height-heading": {
@@ -6055,7 +6057,7 @@
     }
   },
   "control-placeholder-color": {
-    "$value": "{text-color-disabled}",
+    "$value": "{color-neutral-400}",
     "$type": "color",
     "$description": "Used for placeholder text within inputs.",
     "$extensions": {

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

@@ -78,7 +78,9 @@
     "$value": "{spacing-scale-5}",
     "$type": "dimension",
     "$extensions": {
-      "com.figma.scopes": []
+      "com.figma.scopes": [
+        "PARAGRAPH_SPACING"
+      ]
     }
   },
   "line-height-heading": {
@@ -5967,7 +5969,7 @@
     }
   },
   "control-placeholder-color": {
-    "$value": "{text-color-disabled}",
+    "$value": "{color-neutral-500}",
     "$type": "color",
     "$description": "Used for placeholder text within inputs.",
     "$extensions": {

package/src/tokens/build/js/tokens.js

@@ -1180,7 +1180,7 @@ export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#2f5ca0';
 export const GL_CONTROL_BORDER_RADIUS = '0.5rem';
 export const GL_CONTROL_TEXT_COLOR_ERROR = '#c02f12';
 export const GL_CONTROL_TEXT_COLOR_VALID = '#2f7549';
-export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
+export const GL_CONTROL_PLACEHOLDER_COLOR = '#737278';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278';
 export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';

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

@@ -8,7 +8,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         },
         "filePath": "src/tokens/constant/border.tokens.json",
@@ -19,7 +19,7 @@
           "$description": "Used when a border needs to be present, but not visibly perceived.",
           "$extensions": {
             "com.figma.scopes": [
-              "ALL_SCOPES"
+              "STROKE_COLOR"
             ]
           },
           "key": "{border.color.transparent}"
@@ -7871,7 +7871,9 @@
           "$value": "1rem",
           "$type": "dimension",
           "$extensions": {
-            "com.figma.scopes": []
+            "com.figma.scopes": [
+              "PARAGRAPH_SPACING"
+            ]
           },
           "filePath": "src/tokens/semantic/heading.tokens.json",
           "isSource": true,
@@ -7879,7 +7881,9 @@
             "$value": "{spacing-scale.5}",
             "$type": "dimension",
             "$extensions": {
-              "com.figma.scopes": []
+              "com.figma.scopes": [
+                "PARAGRAPH_SPACING"
+              ]
             },
             "key": "{heading.default.margin.bottom}"
           },
@@ -35704,7 +35708,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{text.color.disabled}",
+          "$value": "{color.neutral.400}",
           "$type": "color",
           "$description": "Used for placeholder text within inputs.",
           "$extensions": {