@gitlab/ui 134.8.0 → 135.0.0

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

@@ -23,7 +23,7 @@
     }
   }
 
-  &:not(.disabled):focus {
+  &:not(.disabled):focus-visible {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-focus);
       background-color: var(--gl-dropdown-option-background-color-unselected-focus);
@@ -31,7 +31,7 @@
   }
 
   &:not(.disabled):active,
-  &:not(.disabled):focus:active {
+  &:not(.disabled):focus-visible:active {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-active);
       background-color: var(--gl-dropdown-option-background-color-unselected-active);
@@ -59,7 +59,7 @@
       }
     }
 
-    &:not(.disabled):focus {
+    &:not(.disabled):focus-visible {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-focus);
       }
@@ -70,7 +70,7 @@
     }
 
     &:not(.disabled):active,
-    &:not(.disabled):focus:active {
+    &:not(.disabled):focus-visible:active {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-active);
       }
@@ -86,14 +86,14 @@
   }
 
   &:not(.disabled):active,
-  &:not(.disabled):focus,
-  &:not(.disabled):focus:active {
+  &:not(.disabled):focus-visible,
+  &:not(.disabled):focus-visible:active {
     .gl-new-dropdown-item-content {
       @include gl-focus($inset: true);
     }
   }
 
-  &:focus {
+  &:focus-visible {
     .gl-new-dropdown-item-content {
       z-index: 1;
     }
@@ -180,7 +180,7 @@
       }
     }
 
-    &:focus {
+    &:focus-visible {
       .gl-new-dropdown-item-content {
         color: var(--gl-action-danger-foreground-color-focus);
         background-color: var(--gl-action-danger-background-color-focus);
@@ -188,7 +188,7 @@
     }
 
     &:active,
-    &:focus:active {
+    &:focus-visible:active {
       .gl-new-dropdown-item-content {
         color: var(--gl-action-danger-foreground-color-active);
         background-color: var(--gl-action-danger-background-color-active);

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

@@ -17,7 +17,7 @@ $clear-button-size: 24px;
     @apply gl-text-default;
     background-color: var(--gl-dropdown-search-background-color);
 
-    &:focus {
+    &:focus-visible {
       @include gl-focus($inset: true);
     }
 

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

@@ -380,6 +380,9 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Screen-reader-only label for results count.
+     */
     srOnlyResultsLabel: {
       type: Function,
       required: false,
@@ -1065,7 +1068,7 @@ export default {
         <gl-button
           v-if="showResetButton"
           category="tertiary"
-          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-focus-inset"
+          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus-visible:!gl-focus-inset"
           size="small"
           data-testid="listbox-reset-button"
           @click="onResetButtonClicked"
@@ -1075,7 +1078,7 @@ export default {
         <gl-button
           v-if="showSelectAllButton"
           category="tertiary"
-          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-focus-inset"
+          class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus-visible:!gl-focus-inset"
           size="small"
           data-testid="listbox-select-all-button"
           @click="onSelectAllButtonClicked"

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

@@ -4,10 +4,16 @@ import { uniqueId } from 'lodash-es';
 export default {
   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/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -9,26 +9,41 @@ export default {
     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/src/components/base/pagination/pagination.scss

@@ -5,6 +5,7 @@
   ul {
     border-radius: var(--gl-action-border-radius);
     @apply gl-flex;
+    @apply gl-m-0;
     @apply gl-pl-0;
     @apply gl-list-none;
   }
@@ -37,8 +38,8 @@
     @apply gl-no-underline;
   }
 
-  &:focus,
-  &:active:focus {
+  &:focus-visible,
+  &:active:focus-visible {
     @apply gl-no-underline;
     @apply gl-focus;
   }

package/src/components/base/path/path.scss

@@ -91,7 +91,7 @@ $path-chevron-right-margin: px-to-rem(14px);
       color: var(--gl-action-neutral-foreground-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
       background-color: var(--gl-action-neutral-background-color-focus);
       color: var(--gl-action-neutral-foreground-color-focus);
     }
@@ -102,8 +102,8 @@ $path-chevron-right-margin: px-to-rem(14px);
     }
 
     &:active,
-    &:focus,
-    &:focus:active {
+    &:focus-visible,
+    &:focus-visible:active {
       // Custom focus to account for path shape
       box-shadow:
         5px -3px 0 -2px var(--gl-focus-ring-inner-color),

package/src/components/base/search_box_by_click/search_box_by_click.vue

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

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -47,7 +47,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   border-radius: 0;
   padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
 
-  &:not(.form-control-plaintext):focus {
+  &:not(.form-control-plaintext):focus-visible {
     @include gl-focus($inset: true);
   }
 

package/src/components/base/segmented_control/segmented_control.vue

@@ -24,11 +24,17 @@ export default {
     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,

package/src/components/base/table_lite/table_lite.vue

@@ -10,6 +10,9 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS classes to apply to the table element.
+     */
     tableClass,
     /**
      * Array of items displayed in the table as rows.
@@ -19,11 +22,17 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Array of field definitions for table columns.
+     */
     fields: {
       type: Array,
       required: false,
       default: null,
     },
+    /**
+     * When true, makes the table header sticky.
+     */
     stickyHeader: {
       type: Boolean,
       default: false,

package/src/components/base/tabs/tab/tab.vue

@@ -14,6 +14,9 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS classes to apply to the tab title link.
+     */
     titleLinkClass: {
       type: [String, Array, Object],
       required: false,

package/src/components/base/tabs/tabs/tabs.scss

@@ -48,7 +48,7 @@
     translate: 0;
   }
 
-  &:focus {
+  &:focus-visible {
     @apply gl-rounded-default;
   }
 
@@ -80,8 +80,8 @@
   z-index: 1;
 
   &:active,
-  &:focus,
-  &:focus:active {
+  &:focus-visible,
+  &:focus-visible:active {
     @include gl-focus($color: var(--gl-action-neutral-border-color-active));
 
     .gl-scrollable-tabs-nav & {

package/src/components/base/tabs/tabs/tabs.vue

@@ -14,34 +14,52 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Configuration for the primary action button in the tabs.
+     */
     actionPrimary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Configuration for the secondary action button in the tabs.
+     */
     actionSecondary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Configuration for the tertiary action button in the tabs.
+     */
     actionTertiary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Additional CSS classes to apply to the tab content area.
+     */
     contentClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * Additional CSS classes to apply to the tab navigation.
+     */
     navClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * When true, makes the tabs stretch to fill the available width.
+     */
     justified: {
       type: Boolean,
       required: false,
@@ -63,6 +81,9 @@ export default {
       required: false,
       default: 'tab',
     },
+    /**
+     * The currently active tab value.
+     */
     value: {
       type: Number,
       required: false,

package/src/components/base/toast/toast.vue

@@ -11,19 +11,31 @@ export default {
     CloseButton,
   },
   props: {
+    /**
+     * Unique identifier for the toast notification.
+     */
     toastId: {
       type: String,
       required: true,
     },
+    /**
+     * The message text to display in the toast.
+     */
     message: {
       type: String,
       required: true,
     },
+    /**
+     * Action button configuration for the toast.
+     */
     action: {
       type: Object,
       required: false,
       default: null,
     },
+    /**
+     * Delay in milliseconds before auto-hiding the toast.
+     */
     autoHideDelay: {
       type: Number,
       required: false,

package/src/components/base/toggle/toggle.scss

@@ -100,7 +100,7 @@ $toggle-height: 2.5 * $grid-size;
     }
   }
 
-  &:focus {
+  &:focus-visible {
     color: var(--gl-toggle-switch-icon-color-unchecked-focus);
     background-color: var(--gl-toggle-switch-track-color-unchecked-focus);
     @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
@@ -167,7 +167,7 @@ $toggle-height: 2.5 * $grid-size;
       box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
       color: var(--gl-toggle-switch-icon-color-checked-focus);
       background-color: var(--gl-toggle-switch-track-color-checked-focus);
       @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
@@ -214,8 +214,8 @@ $toggle-height: 2.5 * $grid-size;
     }
 
     &:active,
-    &:focus,
-    &:focus:active {
+    &:focus-visible,
+    &:focus-visible:active {
       @include gl-focus($color: var(--gl-action-disabled-border-color), $important: true);
     }
   }

package/src/components/base/toggle/toggle.vue

@@ -18,6 +18,9 @@ export default {
     event: 'change',
   },
   props: {
+    /**
+     * The name attribute for the hidden input element.
+     */
     name: {
       type: String,
       required: false,

package/src/components/base/token_selector/token_container.vue

@@ -7,21 +7,33 @@ export default {
   name: 'GlTokenContainer',
   components: { GlToken, GlButton },
   props: {
+    /**
+     * Array of token objects to display.
+     */
     tokens: {
       type: Array,
       // All tokens need to have an `id` key
       validator: tokensValidator,
       required: true,
     },
+    /**
+     * Function to register focus handling on tokens.
+     */
     registerFocusOnToken: {
       type: Function,
       required: true,
     },
+    /**
+     * When true, renders tokens in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, shows a button to clear all tokens.
+     */
     showClearAllButton: {
       type: Boolean,
       required: false,

package/src/components/base/token_selector/token_selector.scss

@@ -14,7 +14,7 @@
   }
 }
 
-.gl-token-selector-token-container:focus .gl-token {
+.gl-token-selector-token-container:focus-visible .gl-token {
   background-color: var(--gl-token-selector-token-container-token-background-color-focus);
   @apply gl-focus;
 }

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -7,42 +7,69 @@ export default {
   name: 'GlTokenSelectorDropdown',
   components: { GlDropdownItem },
   props: {
+    /**
+     * When true, shows the dropdown.
+     */
     show: {
       type: Boolean,
       required: true,
     },
+    /**
+     * Additional CSS classes for the dropdown menu.
+     */
     menuClass: {
       type: [String, Array, Object],
       required: false,
       default: '',
     },
+    /**
+     * When true, shows a loading state in the dropdown.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Array of items to display in the dropdown.
+     */
     dropdownItems: {
       type: Array,
       // All items need to have an `id` key
       validator: tokensValidator,
       required: true,
     },
+    /**
+     * Current text in the search input.
+     */
     inputText: {
       type: String,
       required: true,
     },
+    /**
+     * When true, allows user-defined tokens to be added.
+     */
     userDefinedTokenCanBeAdded: {
       type: Boolean,
       required: true,
     },
+    /**
+     * Unique identifier for the component.
+     */
     componentId: {
       type: String,
       required: true,
     },
+    /**
+     * Function to register event handlers for the dropdown.
+     */
     registerDropdownEventHandlers: {
       type: Function,
       required: true,
     },
+    /**
+     * Function to register reset of focused dropdown item.
+     */
     registerResetFocusedDropdownItem: {
       type: Function,
       required: true,

package/src/components/charts/area/area.vue

@@ -51,30 +51,48 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The chart data series to render.
+     */
     data: {
       type: Array,
       required: true,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Array of threshold line configurations.
+     */
     thresholds: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Array of annotation configurations.
+     */
     annotations: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * When true, includes average and maximum values in the legend.
+     */
     includeLegendAvgMax: {
       type: Boolean,
       required: false,
       default: true,
     },
+    /**
+     * Custom function to format annotation tooltip text.
+     */
     formatAnnotationsTooltipText: {
       type: Function,
       required: false,
@@ -91,26 +109,41 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Custom text for the average value in the legend.
+     */
     legendAverageText: {
       type: String,
       required: false,
       default: LEGEND_AVERAGE_TEXT,
     },
+    /**
+     * Custom text for the maximum value in the legend.
+     */
     legendMaxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT,
     },
+    /**
+     * Custom text for the minimum value in the legend.
+     */
     legendMinText: {
       type: String,
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Custom text for the current value in the legend.
+     */
     legendCurrentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Layout configuration for the legend.
+     */
     legendLayout: {
       type: String,
       required: false,
@@ -127,6 +160,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Series information for the legend.
+     */
     legendSeriesInfo: {
       type: Array,
       required: false,