@gitlab/ui 130.1.0 → 130.2.0

package/dist/components/base/button/button.js

@@ -347,8 +347,7 @@ var script = {
     }
   },
   mounted() {
-    // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-    if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
+    if (!('default' in this.$scopedSlots) && !this.$attrs['aria-label'] && !this.label) {
       logWarning('Accessible name missing. Please add inner text or aria-label.', {
         name: 'GlButton',
         element: this.$el

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -163,6 +163,14 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The `aria-label` attribute value for the toggle `button`.
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * Custom value to be passed to the offset middleware.
      * https://floating-ui.com/docs/offset
@@ -273,6 +281,7 @@ var script = {
         'aria-expanded': String(this.visible),
         'aria-haspopup': this.ariaHaspopup,
         'aria-labelledby': this.toggleLabelledBy,
+        'aria-label': this.ariaLabel || undefined,
         'aria-activedescendant': this.ariaActiveDescendant
       };
     },

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -1,5 +1,5 @@
 import { uniqueId, clamp } from 'lodash-es';
-import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { logWarning, stopEvent, filterVisible } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
@@ -143,6 +143,17 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The `aria-label` attribute value for the toggle button.
+     * Use when there is no visible label element to reference with `toggleAriaLabelledBy`.
+     * Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`.
+     * When both are present, `toggleAriaLabelledBy` takes precedence per the WAI-ARIA spec.
+     */
+    toggleAriaLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * The `aria-labelledby` attribute value for the list of options
      * Provide the string of ids seperated by space
@@ -230,6 +241,11 @@ var script = {
     }
   },
   mounted() {
+    if (this.toggleAriaLabel && this.toggleAriaLabelledBy) {
+      logWarning('Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`. ' + 'When both are present, `toggleAriaLabelledBy` takes precedence and `toggleAriaLabel` is ignored. ' + 'See https://design.gitlab.com/components/dropdown-disclosure/#accessibility', {
+        name: 'GlDisclosureDropdown'
+      });
+    }
     if (this.startOpened) {
       this.open();
     }
@@ -349,7 +365,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"aria-label":_vm.toggleAriaLabelledBy ? undefined : _vm.toggleAriaLabel,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/vendor/bootstrap-vue/src/mixins/dropdown.js

@@ -4,13 +4,12 @@ import { NAME_DROPDOWN } from '../constants/components';
 import { EVENT_NAME_SHOWN, EVENT_NAME_HIDDEN, EVENT_NAME_TOGGLE, EVENT_NAME_CLICK, EVENT_NAME_SHOW, EVENT_NAME_HIDE } from '../constants/events';
 import { CODE_ENTER, CODE_SPACE, CODE_DOWN, CODE_ESC, CODE_UP } from '../constants/key-codes';
 import { PLACEMENT_TOP_END, PLACEMENT_TOP_START, PLACEMENT_BOTTOM_START, PLACEMENT_RIGHT_START, PLACEMENT_LEFT_START, PLACEMENT_BOTTOM_END } from '../constants/popper';
-import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_OBJECT } from '../constants/props';
+import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER, PROP_TYPE_OBJECT } from '../constants/props';
 import { HTMLElement } from '../constants/safe-types';
 import { BvEvent } from '../utils/bv-event.class';
 import { requestAF, contains, closest, attemptFocus, selectAll, isVisible } from '../utils/dom';
 import { getRootEventName, stopEvent } from '../utils/events';
 import { sortKeys, mergeDeep } from '../utils/object';
-import { makeProp } from '../utils/props';
 import { warn } from '../utils/warn';
 import { clickOutMixin } from './click-out';
 import { focusInMixin } from './focus-in';
@@ -38,22 +37,58 @@ const props = sortKeys({
   ...props$1,
   // String: `scrollParent`, `window` or `viewport`
   // HTMLElement: HTML Element reference
-  boundary: makeProp([HTMLElement, PROP_TYPE_STRING], 'scrollParent'),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+  boundary: {
+    type: [HTMLElement, PROP_TYPE_STRING],
+    required: false,
+    default: 'scrollParent'
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Place left if possible
-  dropleft: makeProp(PROP_TYPE_BOOLEAN, false),
+  dropleft: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Place right if possible
-  dropright: makeProp(PROP_TYPE_BOOLEAN, false),
+  dropright: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Place on top if possible
-  dropup: makeProp(PROP_TYPE_BOOLEAN, false),
+  dropup: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Disable auto-flipping of menu from bottom <=> top
-  noFlip: makeProp(PROP_TYPE_BOOLEAN, false),
+  noFlip: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Number of pixels or a CSS unit value to offset menu
   // (i.e. `1px`, `1rem`, etc.)
-  offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
-  popperOpts: makeProp(PROP_TYPE_OBJECT, {}),
+  offset: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0
+  },
+  popperOpts: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: () => ({})
+  },
   // Right align menu (default is left align)
-  right: makeProp(PROP_TYPE_BOOLEAN, false)
+  right: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 });
 
 // --- Mixin ---

package/dist/vendor/bootstrap-vue/src/mixins/form-control.js

@@ -1,7 +1,6 @@
 import { extend } from '../vue';
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props';
 import { requestAF, isVisible, matches, select, attemptFocus } from '../utils/dom';
-import { makeProp } from '../utils/props';
 
 // --- Constants ---
 
@@ -10,12 +9,36 @@ const SELECTOR = 'input, textarea, select';
 // --- Props ---
 
 const props = {
-  autofocus: makeProp(PROP_TYPE_BOOLEAN, false),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  form: makeProp(PROP_TYPE_STRING),
-  id: makeProp(PROP_TYPE_STRING),
-  name: makeProp(PROP_TYPE_STRING),
-  required: makeProp(PROP_TYPE_BOOLEAN, false)
+  autofocus: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  form: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  name: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  required: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 };
 
 // --- Mixin ---

package/dist/vendor/bootstrap-vue/src/mixins/form-custom.js

@@ -1,11 +1,14 @@
 import { extend } from '../vue';
 import { PROP_TYPE_BOOLEAN } from '../constants/props';
-import { makeProp } from '../utils/props';
 
 // --- Props ---
 
 const props = {
-  plain: makeProp(PROP_TYPE_BOOLEAN, false)
+  plain: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 };
 
 // --- Mixin ---

package/dist/vendor/bootstrap-vue/src/mixins/form-options.js

@@ -1,10 +1,9 @@
 import { extend } from '../vue';
-import { PROP_TYPE_STRING, PROP_TYPE_ARRAY_OBJECT } from '../constants/props';
+import { PROP_TYPE_STRING, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../constants/props';
 import { get } from '../utils/get';
 import { stripTags } from '../utils/html';
 import { isPlainObject, isUndefined, isArray } from '../utils/inspect';
 import { keys } from '../utils/object';
-import { makeProp } from '../utils/props';
 import { warn } from '../utils/warn';
 
 // --- Constants ---
@@ -14,11 +13,31 @@ const OPTIONS_OBJECT_DEPRECATED_MSG = 'Setting prop "options" to an object is de
 // --- Props ---
 
 const props = {
-  disabledField: makeProp(PROP_TYPE_STRING, 'disabled'),
-  htmlField: makeProp(PROP_TYPE_STRING, 'html'),
-  options: makeProp(PROP_TYPE_ARRAY_OBJECT, []),
-  textField: makeProp(PROP_TYPE_STRING, 'text'),
-  valueField: makeProp(PROP_TYPE_STRING, 'value')
+  disabledField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'disabled'
+  },
+  htmlField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'html'
+  },
+  options: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT],
+    required: false,
+    default: () => []
+  },
+  textField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'text'
+  },
+  valueField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'value'
+  }
 };
 
 // --- Mixin ---

package/dist/vendor/bootstrap-vue/src/mixins/form-size.js

@@ -1,11 +1,14 @@
 import { extend } from '../vue';
 import { PROP_TYPE_STRING } from '../constants/props';
-import { makeProp } from '../utils/props';
 
 // --- Props ---
 
 const props = {
-  size: makeProp(PROP_TYPE_STRING)
+  size: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 };
 
 // --- Mixin ---

package/dist/vendor/bootstrap-vue/src/mixins/form-state.js

@@ -1,7 +1,6 @@
 import { extend } from '../vue';
 import { PROP_TYPE_BOOLEAN } from '../constants/props';
 import { isBoolean } from '../utils/inspect';
-import { makeProp } from '../utils/props';
 import { safeVueInstance } from '../utils/safe-vue-instance';
 
 /* Form control contextual state class computation
@@ -17,7 +16,11 @@ import { safeVueInstance } from '../utils/safe-vue-instance';
 
 const props = {
   // Tri-state prop: true, false, null (or undefined)
-  state: makeProp(PROP_TYPE_BOOLEAN, null)
+  state: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: null
+  }
 };
 
 // --- Mixin ---

package/dist/vendor/bootstrap-vue/src/mixins/form-text.js

@@ -1,6 +1,6 @@
 import { extend } from '../vue';
 import { EVENT_NAME_UPDATE, EVENT_NAME_INPUT, EVENT_NAME_CHANGE, EVENT_NAME_BLUR } from '../constants/events';
-import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING, PROP_TYPE_FUNCTION, PROP_TYPE_BOOLEAN } from '../constants/props';
+import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_NUMBER, PROP_TYPE_FUNCTION } from '../constants/props';
 import { attemptFocus, attemptBlur } from '../utils/dom';
 import { stopEvent } from '../utils/events';
 import { mathMax } from '../utils/math';
@@ -8,7 +8,6 @@ import { makeModelMixin } from '../utils/model';
 import { toInteger, toFloat } from '../utils/number';
 import { sortKeys } from '../utils/object';
 import { isFunction } from '../utils/inspect';
-import { makeProp } from '../utils/props';
 import { toString } from '../utils/string';
 
 // --- Constants ---
@@ -28,19 +27,63 @@ const {
 
 const props = sortKeys({
   ...modelProps,
-  ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-  autocomplete: makeProp(PROP_TYPE_STRING),
+  ariaInvalid: {
+    type: [PROP_TYPE_BOOLEAN, PROP_TYPE_STRING],
+    required: false,
+    default: false
+  },
+  autocomplete: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
   // Debounce timeout (in ms). Not applicable with `lazy` prop
-  debounce: makeProp(PROP_TYPE_NUMBER_STRING, 0),
-  formatter: makeProp(PROP_TYPE_FUNCTION),
+  debounce: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0
+  },
+  formatter: {
+    type: PROP_TYPE_FUNCTION,
+    required: false,
+    default: undefined
+  },
   // Only update the `v-model` on blur/change events
-  lazy: makeProp(PROP_TYPE_BOOLEAN, false),
-  lazyFormatter: makeProp(PROP_TYPE_BOOLEAN, false),
-  number: makeProp(PROP_TYPE_BOOLEAN, false),
-  placeholder: makeProp(PROP_TYPE_STRING),
-  plaintext: makeProp(PROP_TYPE_BOOLEAN, false),
-  readonly: makeProp(PROP_TYPE_BOOLEAN, false),
-  trim: makeProp(PROP_TYPE_BOOLEAN, false)
+  lazy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  lazyFormatter: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  number: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  placeholder: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  plaintext: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  readonly: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  trim: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 });
 
 // --- Mixin ---

package/dist/vendor/bootstrap-vue/src/mixins/id.js

@@ -1,6 +1,5 @@
 import { extend, COMPONENT_UID_KEY } from '../vue';
 import { PROP_TYPE_STRING } from '../constants/props';
-import { makeProp } from '../utils/props';
 
 // SSR safe client-side ID attribute generation
 // ID's can only be generated client-side, after mount
@@ -9,7 +8,11 @@ import { makeProp } from '../utils/props';
 // --- Props ---
 
 const props = {
-  id: makeProp(PROP_TYPE_STRING)
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 };
 
 // --- Mixin ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "130.1.0",
+  "version": "130.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -28,6 +28,7 @@
     "!src/vendor",
     "src/vendor/bootstrap-vue/src/**/*.{js,scss}",
     "src/vendor/bootstrap/scss/**/*.scss",
+    "!*.figma.{js,ts}",
     "!*.stories.js",
     "!*.snap",
     "!*.spec.{js,scss}"
@@ -38,6 +39,7 @@
     "copy-fonts": "make copy-fonts",
     "build-tokens": "make tokens",
     "sync-tokens": "node --env-file=.figma.env bin/figma_sync_tokens.mjs",
+    "figma:connect": "node --env-file=.figma.env node_modules/.bin/figma connect",
     "clean": "rm -r dist storybook",
     "cy:edge": "cypress run --browser edge --env grepTags=-@storybook",
     "cy:run": "cypress run --browser firefox --env grepTags=-@storybook",
@@ -99,6 +101,7 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@cypress/grep": "^4.1.1",
+    "@figma/code-connect": "^1.4.2",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.3.0",
@@ -132,7 +135,7 @@
     "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.12.0",
+    "cypress": "15.13.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",

package/src/components/base/button/button.vue

@@ -354,8 +354,7 @@ export default {
     },
   },
   mounted() {
-    // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-    if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
+    if (!('default' in this.$scopedSlots) && !this.$attrs['aria-label'] && !this.label) {
       logWarning('Accessible name missing. Please add inner text or aria-label.', {
         name: 'GlButton',
         element: this.$el,

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

@@ -195,6 +195,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The `aria-label` attribute value for the toggle `button`.
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
     /**
      * Custom value to be passed to the offset middleware.
      * https://floating-ui.com/docs/offset
@@ -302,6 +310,7 @@ export default {
         'aria-expanded': String(this.visible),
         'aria-haspopup': this.ariaHaspopup,
         'aria-labelledby': this.toggleLabelledBy,
+        'aria-label': this.ariaLabel || undefined,
         'aria-activedescendant': this.ariaActiveDescendant,
       };
     },

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -1,6 +1,6 @@
 <script>
 import { clamp, uniqueId } from 'lodash-es';
-import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { stopEvent, filterVisible, logWarning } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -163,6 +163,17 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The `aria-label` attribute value for the toggle button.
+     * Use when there is no visible label element to reference with `toggleAriaLabelledBy`.
+     * Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`.
+     * When both are present, `toggleAriaLabelledBy` takes precedence per the WAI-ARIA spec.
+     */
+    toggleAriaLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
     /**
      * The `aria-labelledby` attribute value for the list of options
      * Provide the string of ids seperated by space
@@ -251,6 +262,16 @@ export default {
     },
   },
   mounted() {
+    if (this.toggleAriaLabel && this.toggleAriaLabelledBy) {
+      logWarning(
+        'Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`. ' +
+          'When both are present, `toggleAriaLabelledBy` takes precedence and `toggleAriaLabel` is ignored. ' +
+          'See https://design.gitlab.com/components/dropdown-disclosure/#accessibility',
+        {
+          name: 'GlDisclosureDropdown',
+        },
+      );
+    }
     if (this.startOpened) {
       this.open();
     }
@@ -374,6 +395,7 @@ export default {
   <gl-base-dropdown
     ref="baseDropdown"
     :aria-labelledby="toggleAriaLabelledBy"
+    :aria-label="toggleAriaLabelledBy ? undefined : toggleAriaLabel"
     :arrow-element="$refs.disclosureArrow"
     :toggle-id="toggleId"
     :toggle-text="toggleText"

package/src/vendor/bootstrap-vue/src/mixins/dropdown.js

@@ -20,7 +20,7 @@ import {
 } from '../constants/popper'
 import {
   PROP_TYPE_BOOLEAN,
-  PROP_TYPE_NUMBER_STRING,
+  PROP_TYPE_NUMBER,
   PROP_TYPE_OBJECT,
   PROP_TYPE_STRING
 } from '../constants/props'
@@ -29,7 +29,6 @@ import { BvEvent } from '../utils/bv-event.class'
 import { attemptFocus, closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
 import { getRootEventName, stopEvent } from '../utils/events'
 import { mergeDeep, sortKeys } from '../utils/object'
-import { makeProp } from '../utils/props'
 import { warn } from '../utils/warn'
 import { clickOutMixin } from './click-out'
 import { focusInMixin } from './focus-in'
@@ -62,22 +61,58 @@ export const props = sortKeys({
   ...idProps,
   // String: `scrollParent`, `window` or `viewport`
   // HTMLElement: HTML Element reference
-  boundary: makeProp([HTMLElement, PROP_TYPE_STRING], 'scrollParent'),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+  boundary: {
+    type: [HTMLElement, PROP_TYPE_STRING],
+    required: false,
+    default: 'scrollParent'
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Place left if possible
-  dropleft: makeProp(PROP_TYPE_BOOLEAN, false),
+  dropleft: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Place right if possible
-  dropright: makeProp(PROP_TYPE_BOOLEAN, false),
+  dropright: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Place on top if possible
-  dropup: makeProp(PROP_TYPE_BOOLEAN, false),
+  dropup: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Disable auto-flipping of menu from bottom <=> top
-  noFlip: makeProp(PROP_TYPE_BOOLEAN, false),
+  noFlip: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Number of pixels or a CSS unit value to offset menu
   // (i.e. `1px`, `1rem`, etc.)
-  offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
-  popperOpts: makeProp(PROP_TYPE_OBJECT, {}),
+  offset: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0
+  },
+  popperOpts: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: () => ({})
+  },
   // Right align menu (default is left align)
-  right: makeProp(PROP_TYPE_BOOLEAN, false)
+  right: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 })
 
 // --- Mixin ---

package/src/vendor/bootstrap-vue/src/mixins/form-control.js

@@ -1,7 +1,6 @@
 import { extend } from '../vue'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props'
 import { attemptFocus, isVisible, matches, requestAF, select } from '../utils/dom'
-import { makeProp } from '../utils/props'
 
 // --- Constants ---
 
@@ -10,12 +9,36 @@ const SELECTOR = 'input, textarea, select'
 // --- Props ---
 
 export const props = {
-  autofocus: makeProp(PROP_TYPE_BOOLEAN, false),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  form: makeProp(PROP_TYPE_STRING),
-  id: makeProp(PROP_TYPE_STRING),
-  name: makeProp(PROP_TYPE_STRING),
-  required: makeProp(PROP_TYPE_BOOLEAN, false)
+  autofocus: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  form: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  name: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  required: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 }
 
 // --- Mixin ---

package/src/vendor/bootstrap-vue/src/mixins/form-custom.js

@@ -1,11 +1,14 @@
 import { extend } from '../vue'
 import { PROP_TYPE_BOOLEAN } from '../constants/props'
-import { makeProp } from '../utils/props'
 
 // --- Props ---
 
 export const props = {
-  plain: makeProp(PROP_TYPE_BOOLEAN, false)
+  plain: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 }
 
 // --- Mixin ---

package/src/vendor/bootstrap-vue/src/mixins/form-options.js

@@ -1,10 +1,9 @@
 import { extend } from '../vue'
-import { PROP_TYPE_ARRAY_OBJECT, PROP_TYPE_STRING } from '../constants/props'
+import { PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../constants/props'
 import { get } from '../utils/get'
 import { stripTags } from '../utils/html'
 import { isArray, isPlainObject, isUndefined } from '../utils/inspect'
 import { keys } from '../utils/object'
-import { makeProp } from '../utils/props'
 import { warn } from '../utils/warn'
 
 // --- Constants ---
@@ -15,11 +14,31 @@ const OPTIONS_OBJECT_DEPRECATED_MSG =
 // --- Props ---
 
 export const props = {
-  disabledField: makeProp(PROP_TYPE_STRING, 'disabled'),
-  htmlField: makeProp(PROP_TYPE_STRING, 'html'),
-  options: makeProp(PROP_TYPE_ARRAY_OBJECT, []),
-  textField: makeProp(PROP_TYPE_STRING, 'text'),
-  valueField: makeProp(PROP_TYPE_STRING, 'value')
+  disabledField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'disabled'
+  },
+  htmlField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'html'
+  },
+  options: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT],
+    required: false,
+    default: () => []
+  },
+  textField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'text'
+  },
+  valueField: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'value'
+  }
 }
 
 // --- Mixin ---

package/src/vendor/bootstrap-vue/src/mixins/form-size.js

@@ -1,11 +1,14 @@
 import { extend } from '../vue'
 import { PROP_TYPE_STRING } from '../constants/props'
-import { makeProp } from '../utils/props'
 
 // --- Props ---
 
 export const props = {
-  size: makeProp(PROP_TYPE_STRING)
+  size: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Mixin ---

package/src/vendor/bootstrap-vue/src/mixins/form-state.js

@@ -9,14 +9,17 @@
 import { extend } from '../vue'
 import { PROP_TYPE_BOOLEAN } from '../constants/props'
 import { isBoolean } from '../utils/inspect'
-import { makeProp } from '../utils/props'
 import { safeVueInstance } from '../utils/safe-vue-instance'
 
 // --- Props ---
 
 export const props = {
   // Tri-state prop: true, false, null (or undefined)
-  state: makeProp(PROP_TYPE_BOOLEAN, null)
+  state: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: null
+  }
 }
 
 // --- Mixin ---

package/src/vendor/bootstrap-vue/src/mixins/form-text.js

@@ -7,8 +7,8 @@ import {
 } from '../constants/events'
 import {
   PROP_TYPE_BOOLEAN,
-  PROP_TYPE_BOOLEAN_STRING,
   PROP_TYPE_FUNCTION,
+  PROP_TYPE_NUMBER,
   PROP_TYPE_NUMBER_STRING,
   PROP_TYPE_STRING
 } from '../constants/props'
@@ -19,7 +19,6 @@ import { makeModelMixin } from '../utils/model'
 import { toInteger, toFloat } from '../utils/number'
 import { sortKeys } from '../utils/object'
 import { isFunction } from '../utils/inspect'
-import { makeProp } from '../utils/props'
 import { toString } from '../utils/string'
 
 // --- Constants ---
@@ -41,19 +40,63 @@ export { MODEL_PROP_NAME, MODEL_EVENT_NAME }
 
 export const props = sortKeys({
   ...modelProps,
-  ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-  autocomplete: makeProp(PROP_TYPE_STRING),
+  ariaInvalid: {
+    type: [PROP_TYPE_BOOLEAN, PROP_TYPE_STRING],
+    required: false,
+    default: false
+  },
+  autocomplete: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
   // Debounce timeout (in ms). Not applicable with `lazy` prop
-  debounce: makeProp(PROP_TYPE_NUMBER_STRING, 0),
-  formatter: makeProp(PROP_TYPE_FUNCTION),
+  debounce: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0
+  },
+  formatter: {
+    type: PROP_TYPE_FUNCTION,
+    required: false,
+    default: undefined
+  },
   // Only update the `v-model` on blur/change events
-  lazy: makeProp(PROP_TYPE_BOOLEAN, false),
-  lazyFormatter: makeProp(PROP_TYPE_BOOLEAN, false),
-  number: makeProp(PROP_TYPE_BOOLEAN, false),
-  placeholder: makeProp(PROP_TYPE_STRING),
-  plaintext: makeProp(PROP_TYPE_BOOLEAN, false),
-  readonly: makeProp(PROP_TYPE_BOOLEAN, false),
-  trim: makeProp(PROP_TYPE_BOOLEAN, false)
+  lazy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  lazyFormatter: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  number: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  placeholder: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  plaintext: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  readonly: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  trim: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 })
 
 // --- Mixin ---

package/src/vendor/bootstrap-vue/src/mixins/id.js

@@ -3,12 +3,15 @@
 // `this._uid` is not synched between server and client
 import { COMPONENT_UID_KEY, extend } from '../vue'
 import { PROP_TYPE_STRING } from '../constants/props'
-import { makeProp } from '../utils/props'
 
 // --- Props ---
 
 export const props = {
-  id: makeProp(PROP_TYPE_STRING)
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Mixin ---