@gitlab/ui 111.1.1 → 111.3.0

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -2,93 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
-$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
-$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
-$gl-action-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default);
-$gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover);
-$gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus);
-$gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active);
-$gl-action-selected-background-color-default: var(--gl-action-selected-background-color-default);
-$gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
-$gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
-$gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
-$gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
-$gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
-$gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
-$gl-action-selected-border-color-active: var(--gl-action-selected-border-color-active);
-$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
-$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
-$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
-$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
-$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
-$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
-$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
-$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
-$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
-$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
-$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
-$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
-$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
-$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
-$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
-$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
-$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
-$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
-$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
-$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
-$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
-$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
-$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
-$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
-$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
-$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
-$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
-$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
-$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
-$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
-$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
-$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
-$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
-$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
-$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
-$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
-$gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
-$gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
-$gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
-$gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
-$gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
-$gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
-$gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
-$gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
-$gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
-$gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
-$gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
-$gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
-$gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
-$gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
-$gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
-$gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
-$gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
-$gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
-$gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
-$gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
-$gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
-$gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
-$gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
-$gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
-$gl-background-color-default: var(--gl-background-color-default);
-$gl-background-color-subtle: var(--gl-background-color-subtle);
-$gl-background-color-strong: var(--gl-background-color-strong);
-$gl-background-color-disabled: var(--gl-background-color-disabled);
-$gl-background-color-overlap: var(--gl-background-color-overlap);
-$gl-background-color-section: var(--gl-background-color-section);
-$gl-background-color-overlay: var(--gl-background-color-overlay);
-$gl-border-color-default: var(--gl-border-color-default);
-$gl-border-color-subtle: var(--gl-border-color-subtle);
-$gl-border-color-strong: var(--gl-border-color-strong);
-$gl-border-color-section: var(--gl-border-color-section);
-$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);
@@ -315,6 +228,16 @@ $gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
 $gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
 $gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
 $gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
+$gl-line-height-12: var(--gl-line-height-12);
+$gl-line-height-16: var(--gl-line-height-16);
+$gl-line-height-20: var(--gl-line-height-20);
+$gl-line-height-24: var(--gl-line-height-24);
+$gl-line-height-28: var(--gl-line-height-28);
+$gl-line-height-32: var(--gl-line-height-32);
+$gl-line-height-36: var(--gl-line-height-36);
+$gl-line-height-42: var(--gl-line-height-42);
+$gl-line-height-44: var(--gl-line-height-44);
+$gl-line-height-52: var(--gl-line-height-52);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
@@ -734,26 +657,6 @@ $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disable
 $gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
-$gl-control-background-color-default: var(--gl-control-background-color-default);
-$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
-$gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
-$gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
-$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
-$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
-$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
-$gl-control-border-color-default: var(--gl-control-border-color-default);
-$gl-control-border-color-hover: var(--gl-control-border-color-hover);
-$gl-control-border-color-focus: var(--gl-control-border-color-focus);
-$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
-$gl-control-border-color-error: var(--gl-control-border-color-error);
-$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
-$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
-$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
-$gl-control-text-color-error: var(--gl-control-text-color-error);
-$gl-control-text-color-valid: var(--gl-control-text-color-valid);
-$gl-control-placeholder-color: var(--gl-control-placeholder-color);
-$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
-$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $data-viz-green-50: var(--data-viz-green-50);
 $data-viz-green-100: var(--data-viz-green-100);
 $data-viz-green-200: var(--data-viz-green-200);
@@ -974,6 +877,113 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
+$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
+$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
+$gl-action-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default);
+$gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover);
+$gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus);
+$gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active);
+$gl-action-selected-background-color-default: var(--gl-action-selected-background-color-default);
+$gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
+$gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
+$gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
+$gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
+$gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
+$gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
+$gl-action-selected-border-color-active: var(--gl-action-selected-border-color-active);
+$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
+$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
+$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
+$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
+$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
+$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
+$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
+$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
+$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
+$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
+$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
+$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
+$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
+$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
+$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
+$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
+$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
+$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
+$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
+$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
+$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
+$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
+$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
+$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
+$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
+$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
+$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
+$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
+$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
+$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
+$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
+$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
+$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
+$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
+$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
+$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
+$gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
+$gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
+$gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
+$gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
+$gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
+$gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
+$gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
+$gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
+$gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
+$gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
+$gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
+$gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
+$gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
+$gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
+$gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
+$gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
+$gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
+$gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
+$gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
+$gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
+$gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
+$gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
+$gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
+$gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
+$gl-background-color-default: var(--gl-background-color-default);
+$gl-background-color-subtle: var(--gl-background-color-subtle);
+$gl-background-color-strong: var(--gl-background-color-strong);
+$gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-background-color-overlap: var(--gl-background-color-overlap);
+$gl-background-color-section: var(--gl-background-color-section);
+$gl-background-color-overlay: var(--gl-background-color-overlay);
+$gl-border-color-default: var(--gl-border-color-default);
+$gl-border-color-subtle: var(--gl-border-color-subtle);
+$gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-section: var(--gl-border-color-section);
+$gl-border-color-transparent: var(--gl-border-color-transparent);
+$gl-control-background-color-default: var(--gl-control-background-color-default);
+$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
+$gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
+$gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
+$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
+$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
+$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
+$gl-control-border-color-default: var(--gl-control-border-color-default);
+$gl-control-border-color-hover: var(--gl-control-border-color-hover);
+$gl-control-border-color-focus: var(--gl-control-border-color-focus);
+$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
+$gl-control-border-color-error: var(--gl-control-border-color-error);
+$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
+$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
+$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
+$gl-control-text-color-error: var(--gl-control-text-color-error);
+$gl-control-text-color-valid: var(--gl-control-text-color-valid);
+$gl-control-placeholder-color: var(--gl-control-placeholder-color);
+$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
+$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
 $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
 $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);
@@ -1004,16 +1014,6 @@ $gl-icon-color-info: var(--gl-icon-color-info);
 $gl-icon-color-warning: var(--gl-icon-color-warning);
 $gl-icon-color-danger: var(--gl-icon-color-danger);
 $gl-icon-color-success: var(--gl-icon-color-success);
-$gl-line-height-12: var(--gl-line-height-12);
-$gl-line-height-16: var(--gl-line-height-16);
-$gl-line-height-20: var(--gl-line-height-20);
-$gl-line-height-24: var(--gl-line-height-24);
-$gl-line-height-28: var(--gl-line-height-28);
-$gl-line-height-32: var(--gl-line-height-32);
-$gl-line-height-36: var(--gl-line-height-36);
-$gl-line-height-42: var(--gl-line-height-42);
-$gl-line-height-44: var(--gl-line-height-44);
-$gl-line-height-52: var(--gl-line-height-52);
 $gl-shadow-color-default: var(--gl-shadow-color-default);
 $gl-status-neutral-background-color: var(--gl-status-neutral-background-color);
 $gl-status-neutral-text-color: var(--gl-status-neutral-text-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "111.1.1",
+  "version": "111.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -99,7 +99,7 @@
     "jackspeak": "2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.9",
+    "@babel/core": "^7.26.10",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.26.9",

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

@@ -27,6 +27,27 @@ Optionally, you can use `no-caret` to remove the caret and `category="tertiary"`
 >
 ```
 
+## Labeling the listbox
+
+The `toggleId` prop sets the `id` of the toggle element. This is useful for associating a label
+element with the toggle.
+
+```html
+<gl-form-group label="Department" label-for="department-picker">
+  <gl-collapsible-listbox
+    toggle-id="department-picker"
+    :items="departments"
+  />
+</gl-form-group>
+```
+
+Prefer using `toggleId` over `toggleAriaLabelledBy`, as it is more similar to how
+label elements are associated with other form components.
+
+**Note:** Do not use the `toggleId` prop in conjunction with the `toggle` slot.
+Instead, set the `id` directly on the custom toggle element, and pass the same
+value to `GlFormGroup`'s `labelFor` prop.
+
 ## Opening the listbox
 
 Listbox will open on toggle button click (if it was previously closed).

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

@@ -202,6 +202,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * The `id` attribute value for the toggle button
+     */
+    toggleId: {
+      type: String,
+      required: false,
+      default: null,
+    },
     /**
      * The `aria-labelledby` attribute value for the toggle button
      * Provide the string of ids seperated by space
@@ -364,7 +372,6 @@ export default {
   data() {
     return {
       selectedValues: [],
-      toggleId: uniqueId('dropdown-toggle-btn-'),
       listboxId: uniqueId('listbox-'),
       nextFocusedItemIndex: null,
       searchStr: '',
@@ -373,6 +380,9 @@ export default {
     };
   },
   computed: {
+    toggleIdComputed() {
+      return this.toggleId || uniqueId('dropdown-toggle-btn-');
+    },
     listboxTag() {
       if (!this.hasItems || isOption(this.items[0])) return 'ul';
       return 'div';
@@ -797,7 +807,7 @@ export default {
     aria-haspopup="listbox"
     :aria-labelledby="toggleAriaLabelledBy"
     :block="block"
-    :toggle-id="toggleId"
+    :toggle-id="toggleIdComputed"
     :toggle-text="listboxToggleText"
     :toggle-class="toggleButtonClasses"
     :text-sr-only="textSrOnly"
@@ -878,7 +888,7 @@ export default {
       v-if="showList"
       :id="listboxId"
       ref="list"
-      :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
+      :aria-labelledby="listAriaLabelledBy || headerId || toggleIdComputed"
       role="listbox"
       class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay"
       :class="listboxClasses"