@gitlab/ui 134.9.0 → 135.0.1

package/dist/components/base/accordion/accordion_item.js

@@ -123,7 +123,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('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{attrs:{"variant":"link","button-text-classes":"gl-flex","aria-expanded":_vm.localVisible ? 'true' : 'false',"aria-controls":_vm.accordionItemId},on:{"click":_vm.onButtonClick}},[_c('gl-animated-chevron-right-down-icon',{attrs:{"is-on":_vm.localVisible}}),_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")],1)],1),_vm._v(" "),_c('gl-collapse',{attrs:{"id":_vm.accordionItemId,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.localVisible),callback:function ($$v) {_vm.localVisible=$$v;},expression:"localVisible"}},[_c('div',{staticClass:"gl-mt-3 gl-text-base"},[_vm._t("default")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{staticClass:"gl-max-w-full",attrs:{"variant":"link","button-text-classes":"gl-flex gl-items-start gl-gap-2","aria-expanded":_vm.localVisible ? 'true' : 'false',"aria-controls":_vm.accordionItemId},on:{"click":_vm.onButtonClick}},[_c('gl-animated-chevron-right-down-icon',{staticClass:"gl-shrink-0",attrs:{"is-on":_vm.localVisible}}),_vm._v(" "),_c('span',{staticClass:"gl-min-w-0 gl-text-wrap gl-break-words gl-text-left"},[_vm._v("\n        "+_vm._s(_vm.buttonTitle)+"\n      ")])],1)],1),_vm._v(" "),_c('gl-collapse',{attrs:{"id":_vm.accordionItemId,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.localVisible),callback:function ($$v) {_vm.localVisible=$$v;},expression:"localVisible"}},[_c('div',{staticClass:"gl-mt-3 gl-text-base"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/animated_icon/base_animated_icon.js

@@ -22,6 +22,9 @@ var script = {
       default: 'current',
       validator: value => Object.keys(animatedIconVariantOptions).includes(value)
     },
+    /**
+     * Controls the animated state of the icon.
+     */
     isOn: {
       type: Boolean,
       required: false,

package/dist/components/base/color_mode_toggle/color_mode_toggle.js

@@ -1,4 +1,5 @@
 import { translate } from '../../../utils/i18n';
+import { buttonSizeOptions } from '../../../utils/constants';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -16,6 +17,15 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Specify the size of the button.
+     */
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
+    },
     /**
      * The label when in dark mode. Screen-reader only.
      */
@@ -57,7 +67,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',{staticClass:"btn-icon",attrs:{"aria-label":_vm.ariaLabel,"category":"tertiary","icon":_vm.iconName},on:{"click":_vm.handleClick}})};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button',{staticClass:"btn-icon",attrs:{"aria-label":_vm.ariaLabel,"category":"tertiary","size":_vm.size,"icon":_vm.iconName},on:{"click":_vm.handleClick}})};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -133,11 +133,17 @@ var script = {
       required: false,
       default: 'Search'
     },
+    /**
+     * Title text for the clear button.
+     */
     clearButtonTitle: {
       type: String,
       required: false,
       default: 'Clear'
     },
+    /**
+     * Array of history items to display in the search.
+     */
     historyItems: {
       type: Array,
       required: false,
@@ -176,6 +182,9 @@ var script = {
       required: false,
       default: () => ({})
     },
+    /**
+     * When true, renders the filtered search in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,

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

@@ -17,6 +17,9 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * The value of the suggestion item.
+     */
     value: {
       required: true,
       validator: () => true

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

@@ -38,6 +38,9 @@ var script = {
         data: ''
       })
     },
+    /**
+     * Placeholder text for the search input.
+     */
     placeholder: {
       type: String,
       required: false,
@@ -67,6 +70,9 @@ var script = {
       required: false,
       default: () => []
     },
+    /**
+     * Position of the cursor in the input.
+     */
     cursorPosition: {
       type: String,
       required: false,
@@ -81,6 +87,9 @@ var script = {
       required: false,
       default: termTokenDefinition.title
     },
+    /**
+     * When true, renders in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,

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

@@ -26,6 +26,9 @@ var script = {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Array of available token definitions.
+     */
     availableTokens: {
       type: Array,
       required: false,
@@ -47,6 +50,9 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Array of pre-selected multi-select values.
+     */
     multiSelectValues: {
       type: Array,
       required: false,
@@ -71,17 +77,26 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Position of the cursor in the input.
+     */
     cursorPosition: {
       type: String,
       required: false,
       default: 'end',
       validator: value => ['start', 'end'].includes(value)
     },
+    /**
+     * When true, renders in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Attributes to bind to the input element of the data segment.
+     */
     dataSegmentInputAttributes: {
       type: Object,
       required: false,

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

@@ -88,31 +88,49 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Whether this segment represents a search term.
+     */
     isTerm: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Label text for the segment.
+     */
     label: {
       type: String,
       required: false,
       default: 'Search'
     },
+    /**
+     * When true, enables multi-select mode.
+     */
     multiSelect: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Array of selectable options.
+     */
     options: {
       type: Array,
       required: false,
       default: () => null
     },
+    /**
+     * The field name used for option display text.
+     */
     optionTextField: {
       type: String,
       required: false,
       default: 'title'
     },
+    /**
+     * Custom keydown event handler function.
+     */
     customInputKeydownHandler: {
       type: Function,
       required: false,
@@ -141,17 +159,26 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * The current value of the segment.
+     */
     currentValue: {
       type: Array,
       required: false,
       default: () => []
     },
+    /**
+     * Position of the cursor in the input.
+     */
     cursorPosition: {
       type: String,
       required: false,
       default: 'end',
       validator: value => ['start', 'end'].includes(value)
     },
+    /**
+     * When true, renders in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,

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

@@ -18,15 +18,24 @@ var script = {
     event: 'input'
   },
   props: {
+    /**
+     * Text for the combobox label.
+     */
     labelText: {
       type: String,
       required: true
     },
+    /**
+     * When true, visually hides the label while keeping it accessible to screen readers.
+     */
     labelSrOnly: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Array of tokens displayed in the combobox.
+     */
     tokenList: {
       type: Array,
       required: true
@@ -39,15 +48,24 @@ var script = {
       required: false,
       default: () => []
     },
+    /**
+     * The current value of the combobox.
+     */
     value: {
       type: [String, Object],
       required: true
     },
+    /**
+     * The attribute name used to match values against options.
+     */
     matchValueToAttr: {
       type: String,
       required: false,
       default: undefined
     },
+    /**
+     * When true, automatically focuses the combobox on mount.
+     */
     autofocus: {
       type: Boolean,
       required: false,

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

@@ -13,31 +13,49 @@ var script = {
     prop: 'value'
   },
   props: {
+    /**
+     * Unique identifier for the date input.
+     */
     id: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * Minimum allowed date value.
+     */
     min: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * Maximum allowed date value.
+     */
     max: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * Error message displayed when the value is below the minimum.
+     */
     minInvalidFeedback: {
       type: String,
       required: false,
       default: 'Must be after minimum date.'
     },
+    /**
+     * Error message displayed when the value exceeds the maximum.
+     */
     maxInvalidFeedback: {
       type: String,
       required: false,
       default: 'Must be before maximum date.'
     },
+    /**
+     * The current value of the date picker.
+     */
     value: {
       type: String,
       required: false,

package/dist/components/base/form/form_fields/form_field_validator.js

@@ -13,16 +13,25 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlFormFieldValidator',
   props: {
+    /**
+     * The value to validate.
+     */
     value: {
       required: true,
       // ESLint requires "validator" or "type". Any kind of value is valid.
       validator: () => true
     },
+    /**
+     * Array of validation functions or rules.
+     */
     validators: {
       type: Array,
       required: false,
       default: () => []
     },
+    /**
+     * When true, triggers validation.
+     */
     shouldValidate: {
       type: Boolean,
       required: false,

package/dist/components/base/form/form_fields/form_fields_loop.js

@@ -53,6 +53,9 @@ function _unsupportedIterableToArray(r, a) {
 var script = {
   name: 'GlFormFieldsLoop',
   props: {
+    /**
+     * Field configurations to render in a loop.
+     */
     fields: {
       type: Object,
       required: true

package/dist/components/base/markdown/markdown.js

@@ -3,6 +3,9 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlMarkdown',
   props: {
+    /**
+     * When true, renders the markdown in a compact style.
+     */
     compact: {
       type: Boolean,
       required: false,

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

@@ -101,59 +101,92 @@ var script = {
     }
   },
   props: {
+    /**
+     * Text displayed on the dropdown toggle button.
+     */
     toggleText: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, visually hides the toggle text while keeping it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, renders the dropdown at 100% width of its parent container.
+     */
     block: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Visual category of the dropdown toggle button.
+     */
     category: {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
       validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
+    /**
+     * Visual variant of the dropdown toggle button.
+     */
     variant: {
       type: String,
       required: false,
       default: dropdownVariantOptions.default,
       validator: value => Object.keys(dropdownVariantOptions).includes(value)
     },
+    /**
+     * Size of the dropdown toggle button.
+     */
     size: {
       type: String,
       required: false,
       default: 'medium',
       validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
+    /**
+     * Name of the icon to display in the toggle button.
+     */
     icon: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, disables the dropdown.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, shows a loading state on the toggle button.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Additional CSS classes to apply to the toggle element.
+     */
     toggleClass: {
       type: [String, Array, Object],
       required: false,
       default: null
     },
+    /**
+     * When true, hides the caret icon on the toggle button.
+     */
     noCaret: {
       type: Boolean,
       required: false,
@@ -167,6 +200,9 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Placement for the dropdown menu.
+     */
     placement: {
       type: String,
       required: false,
@@ -181,6 +217,9 @@ var script = {
       }
     },
     // ARIA props
+    /**
+     * ARIA haspopup attribute value for accessibility.
+     */
     ariaHaspopup: {
       type: [String, Boolean],
       required: false,
@@ -189,21 +228,33 @@ var script = {
         return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
       }
     },
+    /**
+     * ID of the currently active item for accessibility.
+     */
     activeItemId: {
       type: String,
       required: false,
       default: undefined
     },
+    /**
+     * When true, indicates the dropdown has an external label for accessibility.
+     */
     hasExternalLabel: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, renders a searchable listbox.
+     */
     hasSearchableListbox: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, renders as a disclosure dropdown.
+     */
     isDisclosure: {
       type: Boolean,
       required: false,
@@ -252,6 +303,9 @@ var script = {
         mainAxis: DEFAULT_OFFSET
       })
     },
+    /**
+     * When true, allows the dropdown to take the full width available.
+     */
     fluidWidth: {
       type: Boolean,
       required: false,

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

@@ -16,6 +16,9 @@ var script = {
     GlIcon
   },
   props: {
+    /**
+     * The item object to render as a disclosure dropdown item.
+     */
     item: {
       type: Object,
       required: false,

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

@@ -352,6 +352,9 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Screen-reader-only label for results count.
+     */
     srOnlyResultsLabel: {
       type: Function,
       required: false,

package/dist/components/base/new_dropdowns/listbox/listbox_group.js

@@ -4,10 +4,16 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlListboxGroup',
   props: {
+    /**
+     * The display name of the listbox group.
+     */
     name: {
       type: String,
       required: true
     },
+    /**
+     * When true, visually hides the group name while keeping it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,

package/dist/components/base/new_dropdowns/listbox/listbox_item.js

@@ -9,26 +9,41 @@ var script = {
     GlIcon
   },
   props: {
+    /**
+     * When true, marks the item as selected.
+     */
     isSelected: {
       type: Boolean,
       default: false,
       required: false
     },
+    /**
+     * When true, marks the item as focused.
+     */
     isFocused: {
       type: Boolean,
       default: false,
       required: false
     },
+    /**
+     * When true, centers the check icon.
+     */
     isCheckCentered: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, highlights the item.
+     */
     isHighlighted: {
       type: Boolean,
       default: false,
       required: false
     },
+    /**
+     * When true, disables the item.
+     */
     isDisabled: {
       type: Boolean,
       default: false,

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -47,6 +47,9 @@ var script = {
       required: false,
       default: 'Search'
     },
+    /**
+     * When true, shows a clear button to reset the search.
+     */
     clearable: {
       type: Boolean,
       required: false,
@@ -92,6 +95,9 @@ var script = {
       required: false,
       default: 'Clear recent searches'
     },
+    /**
+     * Text displayed when there are no recent searches.
+     */
     noRecentSearchesText: {
       type: String,
       required: false,

package/dist/components/base/segmented_control/segmented_control.js

@@ -22,11 +22,17 @@ var script = {
     GlButton
   },
   props: {
+    /**
+     * Array of option objects for the segmented control.
+     */
     options: {
       type: Array,
       required: true,
       validator: validateOptionsProp
     },
+    /**
+     * The currently selected value.
+     */
     value: {
       type: [String, Number, Boolean],
       required: true