@gitlab/ui 138.0.0 → 138.2.0

package/README.md

@@ -48,20 +48,11 @@ See <https://design.gitlab.com/storybook> for documentation.
 [GitPod](https://www.gitpod.io/docs/configure/authentication/gitlab) can be used to set up a
 UNIX-like environment in which to build it.
 
-Make sure you have [Node](https://nodejs.org/en/) 16.x (LTS) and [Yarn](https://yarnpkg.com/) 1.22
-or newer.
+Complete the [project setup](../../README.md#project-setup) in the repository root README, then
+build and launch Storybook:
 
 ```sh
-# Clone the project
-git clone git@gitlab.com:gitlab-org/gitlab-services/design.gitlab.com.git
-
-# Navigate to the root of the project
-cd design.gitlab.com/packages/gitlab-ui
-
-# Install all the dependencies of the project
-yarn # or yarn install
-
-# Build and launch storybook to see the components in the browser
+cd packages/gitlab-ui
 yarn storybook
 ```
 

package/dist/components/base/filtered_search/filtered_search_suggestion_list.js

@@ -104,7 +104,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('ul',{class:_vm.listClasses},[_c('li',{ref:"top"}),_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{class:_vm.listClasses},[_c('li',{ref:"top",attrs:{"aria-hidden":"true","role":"presentation"}}),_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_select/form_select.js

@@ -1,6 +1,7 @@
-import { isObject } from 'lodash-es';
-import { BFormSelect } from '../../../../vendor/bootstrap-vue/src/components/form-select/form-select';
+import { isObject, isBoolean, uniqueId, isPlainObject, get, isNull, isUndefined } from 'lodash-es';
 import { formInputWidths } from '../../../../utils/constants';
+import { isVisible } from '../../../../utils/utils';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 function _arrayLikeToArray(r, a) {
@@ -75,13 +76,180 @@ function _unsupportedIterableToArray(r, a) {
 const _excluded = ["default"];
 var script = {
   name: 'GlFormSelect',
-  components: {
-    BFormSelect
+  directives: {
+    SafeHtml: SafeHtmlDirective
   },
   inheritAttrs: false,
   props: {
     /**
-     * Width of the select element.
+     * Current value of the select. Should be set to an array when the 'multiple' prop is set
+     */
+    value: {
+      // Value can be any type!
+      type: undefined,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Array of items to render in the component
+     */
+    options: {
+      type: [Array, Object],
+      required: false,
+      default: undefined
+    },
+    /**
+     * When set to a number larger than 0, will set the number of display option rows. Note not all browser will respect this setting
+     * @deprecated Only useful with `multiple`, which is also deprecated.
+     */
+    selectSize: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Render the form control in plain mode, rather than custom styled mode
+     * @deprecated Use a native <select> element instead.
+     */
+    plain: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
+     * @deprecated Has no effect. Use the `width` prop instead.
+     */
+    size: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value
+     */
+    ariaInvalid: {
+      type: [Boolean, String],
+      required: false,
+      default: false
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
+    state: {
+      // Tri-state prop: true, false, null (or undefined)
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Field name in the `options` array that should be used for the value
+     */
+    valueField: {
+      type: String,
+      required: false,
+      default: 'value'
+    },
+    /**
+     * The key to use from the option object to get the label
+     */
+    labelField: {
+      type: String,
+      required: false,
+      default: 'label'
+    },
+    /**
+     * The key to use from the option object to get the options
+     */
+    optionsField: {
+      type: String,
+      required: false,
+      default: 'options'
+    },
+    /**
+     * Field name in the `options` array that should be used for the text label
+     */
+    textField: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
+    /**
+     * Field name in the `options` array that should be used for the disabled state
+     */
+    disabledField: {
+      type: String,
+      required: false,
+      default: 'disabled'
+    },
+    /**
+     * Field name in the `options` array that should be used for the html label instead of text field
+     * @deprecated Using the `.html` field (whatever its name) is potentially unsafe.
+     */
+    htmlField: {
+      type: String,
+      required: false,
+      default: 'html'
+    },
+    /**
+     * When set, allows multiple options to be selected (multi-select)
+     * @deprecated Use GlCollapsibleListbox instead.
+     */
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
+     */
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * ID of the form that the form control belongs to. Sets the `form` attribute on the control
+     */
+    form: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Adds the `required` attribute to the form control
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Maximum width of the Select
      */
     width: {
       type: [String, Object],
@@ -101,7 +269,32 @@ var script = {
       default: ''
     }
   },
+  data() {
+    return {
+      localValue: this.value,
+      localId: null
+    };
+  },
   computed: {
+    computedId() {
+      return this.id || this.localId;
+    },
+    computedSelectSize() {
+      // Custom selects with a size of zero causes the arrows to be hidden,
+      // so dont render the size attribute in this case
+      return !this.plain && this.selectSize === 0 ? null : this.selectSize;
+    },
+    computedAriaInvalid() {
+      const ariaInvalid = this.ariaInvalid;
+      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
+        return 'true';
+      }
+      return this.computedState === false ? 'true' : ariaInvalid;
+    },
+    computedState() {
+      // If not a boolean, ensure that value is null
+      return isBoolean(this.state) ? this.state : null;
+    },
     cssClasses() {
       if (this.width === null) {
         return [];
@@ -124,6 +317,129 @@ var script = {
 
       // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-select-${this.width}`];
+    },
+    stateClass() {
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
+    },
+    inputClass() {
+      return ['gl-form-select', this.plain ? 'form-control' : 'custom-select', this.size && this.plain ? `form-control-${this.size}` : null, this.size && !this.plain ? `custom-select-${this.size}` : null, this.stateClass, this.selectClass];
+    },
+    normalizedOptions() {
+      return this.normalizeOptions(this.options);
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.localValue = newValue;
+    },
+    localValue(newValue) {
+      /**
+       * Emitted when the select value changes
+       *
+       * @event input
+       * @type {any}
+       */
+      this.$emit('input', newValue);
+    }
+  },
+  activated() {
+    this.handleAutofocus();
+  },
+  async mounted() {
+    this.handleAutofocus();
+    await this.$nextTick();
+    // Update DOM with auto-generated ID after mount
+    // to prevent SSR hydration errors
+    this.localId = uniqueId('gl-form-select-');
+  },
+  methods: {
+    focus() {
+      var _this$$refs$select;
+      (_this$$refs$select = this.$refs.select) === null || _this$$refs$select === void 0 ? void 0 : _this$$refs$select.focus();
+    },
+    blur() {
+      var _this$$refs$select2;
+      (_this$$refs$select2 = this.$refs.select) === null || _this$$refs$select2 === void 0 ? void 0 : _this$$refs$select2.blur();
+    },
+    normalizeOptions(options) {
+      // Normalize the given options array
+      if (Array.isArray(options)) return options.map(option => this.normalizeOption(option));
+      if (isPlainObject(options)) {
+        if (process.env.NODE_ENV !== 'production') {
+          // Deprecate the object options format
+          // eslint-disable-next-line no-console
+          console.warn('[@gitlab/ui] GlFormSelect - Setting prop "options" to an object is deprecated. Use the array format instead.');
+        }
+
+        // Normalize a `options` object to an array of options
+        return Object.keys(options).map(key => this.normalizeOption(options[key] || {}, key));
+      }
+
+      // If not an array or object, return an empty array
+      return [];
+    },
+    normalizeOption(option) {
+      let key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      // When the option is an object, normalize it
+      if (isPlainObject(option)) {
+        const value = get(option, this.valueField);
+        const text = get(option, this.textField);
+        const options = get(option, this.optionsField, null);
+        // When it has options, create an <optgroup> object
+        if (!isNull(options)) {
+          return {
+            label: String(get(option, this.labelField) || text),
+            options: this.normalizeOptions(options)
+          };
+        }
+        // Otherwise create an <option> object
+        return {
+          value: isUndefined(value) ? key || text : value,
+          text: String(isUndefined(text) ? key : text),
+          html: get(option, this.htmlField),
+          disabled: Boolean(get(option, this.disabledField))
+        };
+      }
+      // Otherwise create an <option> object from the given value
+      return {
+        value: key || option,
+        text: String(option),
+        disabled: false
+      };
+    },
+    isOptionGroup(option) {
+      return Array.isArray(option.options);
+    },
+    async onChange(event) {
+      const target = event.target;
+      const selectedValue = Array.from(target.options).filter(option => option.selected)
+      // NOTE: the _value property is set up by both Vue 2 and 3 explicitly for the
+      // purpose of handling non-string values on form elements.
+      //
+      // See:
+      // - https://github.com/vuejs/vue/blob/v2.7.16/src/platforms/web/runtime/modules/dom-props.ts#L42-L44
+      // - https://github.com/vuejs/vue/blob/v2.7.16/test/unit/modules/vdom/modules/dom-props.spec.ts#L38
+      // - https://github.com/vuejs/core/blob/v3.4.27/packages/runtime-dom/src/modules/props.ts#L48-L50
+      // - https://github.com/vuejs/core/blob/v3.4.27/packages/runtime-dom/__tests__/patchProps.spec.ts#L25
+      // eslint-disable-next-line no-underscore-dangle
+      .map(option => '_value' in option ? option._value : option.value);
+      this.localValue = target.multiple ? selectedValue : selectedValue[0];
+      await this.$nextTick();
+      /**
+       * Emitted when the select value changes via user interaction
+       *
+       * @event change
+       * @type {any}
+       */
+      this.$emit('change', this.localValue);
+    },
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.select)) this.focus();
+      });
     }
   }
 };
@@ -132,7 +448,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('span',{staticClass:"gl-form-select-wrapper",class:_vm.cssClasses},[_c('b-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",class:_vm.selectClass,scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_vm.$attrs,false),_vm.$listeners))],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"gl-form-select-wrapper",class:_vm.cssClasses},[_c('select',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.localValue),expression:"localValue"}],ref:"select",class:_vm.inputClass,attrs:{"id":_vm.computedId,"aria-invalid":_vm.computedAriaInvalid,"aria-required":_vm.required ? 'true' : null,"disabled":_vm.disabled,"form":_vm.form,"multiple":_vm.multiple,"name":_vm.name,"required":_vm.required,"size":_vm.computedSelectSize},on:{"change":[function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return val}); _vm.localValue=$event.target.multiple ? $$selectedVal : $$selectedVal[0];},_vm.onChange]}},'select',_vm.$attrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.normalizedOptions),function(option,index){return [(_vm.isOptionGroup(option))?[_c('optgroup',{key:index,attrs:{"label":option.label}},[_vm._l((option.options),function(childOption,childIndex){return [(childOption.html)?_c('option',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(childOption.html),expression:"childOption.html"}],key:(childIndex + "-html"),attrs:{"disabled":childOption.disabled},domProps:{"value":childOption.value}}):_c('option',{key:childIndex,attrs:{"disabled":childOption.disabled},domProps:{"value":childOption.value}},[_vm._v("\n              "+_vm._s(childOption.text)+"\n            ")])]})],2)]:[(option.html)?_c('option',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}],key:(index + "-html"),attrs:{"disabled":option.disabled},domProps:{"value":option.value}}):_c('option',{key:index,attrs:{"disabled":option.disabled},domProps:{"value":option.value}},[_vm._v("\n          "+_vm._s(option.text)+"\n        ")])]]}),_vm._v(" "),_vm._t("default")],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/sorting/sorting.js

@@ -97,6 +97,15 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * Disables the entire sorting control (both the sort-by dropdown and the
+     * sort direction toggle) while keeping it visible.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -106,7 +115,13 @@ var script = {
     };
   },
   computed: {
+    unavailableLabel() {
+      return translate('GlSorting.sortingUnavailable', 'Sorting is unavailable');
+    },
     sortingListboxLabel() {
+      if (this.disabled) {
+        return this.unavailableLabel;
+      }
       return translate('GlSorting.sortByLabel', 'Sort by:');
     },
     localSortDirection() {
@@ -121,18 +136,23 @@ var script = {
     },
     isDirectionToggleDisabled() {
       var _this$selectedSortOpt3;
-      return Boolean((_this$selectedSortOpt3 = this.selectedSortOption) === null || _this$selectedSortOpt3 === void 0 ? void 0 : _this$selectedSortOpt3.directionToggleDisabled);
+      return this.disabled || Boolean((_this$selectedSortOpt3 = this.selectedSortOption) === null || _this$selectedSortOpt3 === void 0 ? void 0 : _this$selectedSortOpt3.directionToggleDisabled);
     },
     sortDirectionText() {
-      if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+      if (this.sortDirectionToolTip && !this.disabled) return this.sortDirectionToolTip;
       if (this.isDirectionToggleDisabled) {
-        return this.selectedSortText ? translate('GlSorting.sortDirectionUnavailableFor', 'Sort direction unavailable for %{sortField}', {
+        return this.selectedSortText ? translate('GlSorting.sortDirectionUnavailableFor', 'Sorting is unavailable for %{sortField}', {
           sortField: this.selectedSortText
-        }) : translate('GlSorting.sortDirectionUnavailable', 'Sort direction unavailable');
+        }) : this.unavailableLabel;
       }
       return this.isAscending ? translate('GlSorting.sortAscending', 'Sort direction: ascending') : translate('GlSorting.sortDescending', 'Sort direction: descending');
     }
   },
+  watch: {
+    disabled(isDisabled) {
+      if (isDisabled) this.$refs.listbox.close();
+    }
+  },
   methods: {
     toggleSortDirection() {
       if (this.isDirectionToggleDisabled) return;
@@ -149,6 +169,8 @@ var script = {
       this.$emit('sort-direction-change', newDirection);
     },
     onSortByChanged(event) {
+      if (this.disabled) return;
+
       /**
        * Emitted when the sort field is changed.
        *
@@ -167,7 +189,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-button-group',{staticClass:"gl-sorting gl-flex"},[_c('gl-collapsible-listbox',{staticClass:"gl-w-full",class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-id":_vm.toggleId,"toggle-aria-labelled-by":(_vm.sortingListboxId + " " + _vm.toggleId)},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText,"disabled":_vm.isDirectionToggleDisabled,"accessible-disabled":_vm.isDirectionToggleDisabled},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting gl-flex"},[_c('gl-collapsible-listbox',{ref:"listbox",staticClass:"gl-w-full",class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"disabled":_vm.disabled,"toggle-id":_vm.toggleId,"toggle-aria-labelled-by":(_vm.sortingListboxId + " " + _vm.toggleId)},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText,"disabled":_vm.isDirectionToggleDisabled,"accessible-disabled":_vm.isDirectionToggleDisabled},on:{"click":_vm.toggleSortDirection}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/toggle/toggle.js

@@ -1,4 +1,5 @@
 import { uniqueId } from 'lodash-es';
+import { glToggleConfig } from '../../../config';
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
@@ -41,6 +42,22 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Keep the toggle focusable while `disabled` is `true`. Uses `aria-disabled` so the toggle stays in the tab order and is announced by assistive technology.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: () => glToggleConfig.accessibleDisabledToggle
+    },
+    /**
+     * Space-separated ids of elements that describe the toggle, in addition to its help text.
+     */
+    ariaDescribedby: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     /**
      * Whether the toggle is in the loading state.
      */
@@ -108,6 +125,12 @@ var script = {
     helpId() {
       return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
+    describedBy() {
+      return [this.helpId, this.ariaDescribedby].filter(Boolean).join(' ') || undefined;
+    },
+    isNativeDisabled() {
+      return this.disabled && !this.accessibleDisabled;
+    },
     isChecked() {
       return this.value ? 'true' : 'false';
     },
@@ -146,7 +169,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       'is-checked': _vm.value,
       'is-disabled': _vm.disabled || _vm.isLoading,
       'is-loading': _vm.isLoading,
-    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"dark"}}):_c('span',{staticClass:"toggle-icon"},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":12}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
+    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.describedBy,"aria-disabled":_vm.disabled,"type":"button","disabled":_vm.isNativeDisabled},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"dark"}}):_c('span',{staticClass:"toggle-icon"},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":12}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/chart/chart.js

@@ -73,6 +73,15 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * A name for the chart that screen readers announce. It is added as a hidden title, which
+     * ECharts reads into the description it generates. Ignored when `options` sets a title.
+     */
+    accessibleTitle: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   data() {
@@ -96,6 +105,14 @@ var script = {
           }
         });
       }
+      if (this.accessibleTitle && !options.title) {
+        options = merge({}, options, {
+          title: {
+            text: this.accessibleTitle,
+            show: false
+          }
+        });
+      }
 
       // Add space at the top to fit the toolbox
       if (((_options$toolbox = options.toolbox) === null || _options$toolbox === void 0 ? void 0 : _options$toolbox.show) === true) {
@@ -116,6 +133,11 @@ var script = {
         this.draw();
       }
     },
+    accessibleTitle() {
+      if (this.chart) {
+        this.draw();
+      }
+    },
     width() {
       this.setChartSize();
     },

package/dist/config.js

@@ -5,6 +5,7 @@ const defaultConfig = {
   firstDayOfWeek: 0 // Defaults to 0 (Sunday)
 };
 const glButtonConfig = {};
+const glToggleConfig = {};
 let configured = false;
 
 /**
@@ -15,6 +16,7 @@ let configured = false;
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
  * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
  * @property {boolean} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
+ * @property {boolean} [accessibleDisabledToggle] Temporary flag to enable the accessible disabled toggle.
  *
  */
 const setConfigs = function () {
@@ -22,7 +24,9 @@ const setConfigs = function () {
     translations = _ref.translations,
     firstDayOfWeek = _ref.firstDayOfWeek,
     _ref$accessibleDisabl = _ref.accessibleDisabledButton,
-    accessibleDisabledButton = _ref$accessibleDisabl === void 0 ? false : _ref$accessibleDisabl;
+    accessibleDisabledButton = _ref$accessibleDisabl === void 0 ? false : _ref$accessibleDisabl,
+    _ref$accessibleDisabl2 = _ref.accessibleDisabledToggle,
+    accessibleDisabledToggle = _ref$accessibleDisabl2 === void 0 ? false : _ref$accessibleDisabl2;
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -67,6 +71,14 @@ const setConfigs = function () {
       accessibleDisabledButton
     });
   }
+
+  // Temporary flag for the accessible disabled toggle. Once validated, aria-disabled becomes
+  // the default for disabled toggles and this flag is removed.
+  if (typeof accessibleDisabledToggle === 'boolean') {
+    Object.assign(glToggleConfig, {
+      accessibleDisabledToggle
+    });
+  }
 };
 
-export { setConfigs as default, defaultConfig, glButtonConfig, i18n };
+export { setConfigs as default, defaultConfig, glButtonConfig, glToggleConfig, i18n };

package/dist/vendor/bootstrap-vue/src/constants/components.js

@@ -14,9 +14,6 @@ const NAME_FORM = 'BForm';
 const NAME_FORM_GROUP = 'BFormGroup';
 const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback';
 const NAME_FORM_ROW = 'BFormRow';
-const NAME_FORM_SELECT = 'BFormSelect';
-const NAME_FORM_SELECT_OPTION = 'BFormSelectOption';
-const NAME_FORM_SELECT_OPTION_GROUP = 'BFormSelectOptionGroup';
 const NAME_FORM_TEXT = 'BFormText';
 const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback';
 const NAME_LINK = 'BLink';
@@ -51,4 +48,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_TEXT, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "138.0.0",
+  "version": "138.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -89,14 +89,6 @@
     "tailwindcss": "^3",
     "vue": "^2.7.16"
   },
-  "resolutions": {
-    "chokidar": "^4.0.3",
-    "sane": "^5.0.1",
-    "jackspeak": "2.3.6",
-    "postcss": "8.5.28",
-    "json5": "2.2.3",
-    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
-  },
   "devDependencies": {
     "@adobe/leonardo-contrast-colors": "^1.1.0",
     "@babel/core": "^7.29.7",
@@ -107,7 +99,7 @@
     "@cypress/grep": "^4.1.1",
     "@figma/code-connect": "^1.5.3",
     "@gitlab/fonts": "^1.3.1",
-    "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.34",
+    "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.42",
     "@gitlab/svgs": "*",
     "@gitlab/vue-router-vue3": "npm:vue-router@^4.6.4",
     "@jest/test-sequencer": "30.5.2",
@@ -170,7 +162,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.105.0",
+    "sass": "^1.105.1",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",