@gitlab/ui 96.3.0 → 97.0.0

package/dist/utils/number_utils.js

@@ -121,4 +121,12 @@ const formatNumberToLocale = function (value) {
   return new Intl.NumberFormat(locales, options).format(value);
 };
 
-export { addition, average, engineeringNotation, formatNumberToLocale, modulo, sum };
+// Converts a value (string, number, etc.) to a number
+// Taken from bootstrap-vue
+const toFloat = function (value) {
+  let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : NaN;
+  const float = parseFloat(value);
+  return Number.isNaN(float) ? defaultValue : float;
+};
+
+export { addition, average, engineeringNotation, formatNumberToLocale, modulo, sum, toFloat };

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

@@ -44,8 +44,6 @@ const NAME_NAVBAR_BRAND = 'BNavbarBrand';
 const NAME_NAV_ITEM = 'BNavItem';
 const NAME_NAV_ITEM_DROPDOWN = 'BNavItemDropdown';
 const NAME_POPOVER = 'BPopover';
-const NAME_PROGRESS = 'BProgress';
-const NAME_PROGRESS_BAR = 'BProgressBar';
 const NAME_TAB = 'BTab';
 const NAME_TABLE = 'BTable';
 const NAME_TABLE_CELL = 'BTableCell';
@@ -76,4 +74,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, 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_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAVBAR, NAME_NAVBAR_BRAND, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_PROGRESS, NAME_PROGRESS_BAR, 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_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, 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_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAVBAR, NAME_NAVBAR_BRAND, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, 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/dist/vendor/bootstrap-vue/src/index.js

@@ -46,8 +46,6 @@ export { BNavItemDropdown } from './components/nav/nav-item-dropdown';
 export { BNavbar } from './components/navbar/navbar';
 export { BNavbarBrand } from './components/navbar/navbar-brand';
 export { BPopover } from './components/popover/popover';
-export { BProgress } from './components/progress/progress';
-export { BProgressBar } from './components/progress/progress-bar';
 export { BTable } from './components/table/table';
 export { BTableLite } from './components/table/table-lite';
 export { BTableSimple } from './components/table/table-simple';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "96.3.0",
+  "version": "97.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,13 +107,13 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.25.7",
+    "@babel/core": "^7.25.8",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-env": "^7.25.8",
     "@babel/preset-react": "^7.25.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "20.3.0",
+    "@gitlab/eslint-plugin": "20.4.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "3.117.0",
@@ -157,7 +157,7 @@
     "esbuild": "^0.18.0",
     "eslint": "8.57.1",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.5.0",
+    "eslint-plugin-cypress": "3.6.0",
     "eslint-plugin-storybook": "0.9.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
@@ -174,8 +174,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.47.2",
-    "playwright-core": "^1.47.2",
+    "playwright": "^1.48.0",
+    "playwright-core": "^1.48.0",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/base/alert/alert.vue

@@ -156,7 +156,7 @@ export default {
       }, []);
     },
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-alert-${this.variant}`;
     },
   },

package/src/components/base/avatar/avatar.vue

@@ -72,17 +72,17 @@ export default {
   computed: {
     sizeClasses() {
       if (isNumber(this.size)) {
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         return `gl-avatar-s${this.size}`;
       }
 
       const { default: defaultSize, ...nonDefaultSizes } = this.size;
 
       return [
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`,
         ...Object.entries(nonDefaultSizes).map(
-          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+          // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
           ([breakpoint, size]) => `gl-${breakpoint}-avatar-s${size}`
         ),
       ];
@@ -96,7 +96,7 @@ export default {
        * Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
        */
       const type = (this.entityId % IDENTICON_BG_COUNT) + 1;
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-avatar-identicon-bg${type}`;
     },
     identiconText() {

package/src/components/base/datepicker/datepicker.vue

@@ -245,7 +245,7 @@ export default {
         'gl-datepicker',
         'd-inline-block',
         'gl-w-full',
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         `gl-form-input-${this.computedWidth}`,
       ];
     },

package/src/components/base/drawer/drawer.vue

@@ -62,7 +62,7 @@ export default {
       return Boolean(this.$slots.footer);
     },
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-drawer-${this.variant}`;
     },
   },

package/src/components/base/form/form_input/form_input.vue

@@ -42,16 +42,16 @@ export default {
         const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
-          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+          // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
           ...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
-            // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+            // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
             ([breakpoint, width]) => `gl-${breakpoint}-form-input-${width}`
           ),
         ];
       }
 
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-input-${this.width}`];
     },
     listeners() {

package/src/components/base/form/form_select/form_select.vue

@@ -34,16 +34,16 @@ export default {
         const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
-          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+          // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
           ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
-            // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+            // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
             ([breakpoint, width]) => `gl-${breakpoint}-form-select-${width}`
           ),
         ];
       }
 
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-select-${this.width}`];
     },
   },

package/src/components/base/modal/modal.scss

@@ -1,7 +1,6 @@
 // variables
 $modal-body-height: 80px;
 $modal-body-line-height: 1.5;
-$modal-box-shadow: 0 4px 16px $t-gray-a-24;
 
 // mixins
 @mixin gl-tmp-modal-btn-group-ml {
@@ -38,7 +37,7 @@ body.modal-open {
   .modal-content {
     @apply gl-rounded-base;
     @apply gl-border-0;
-    box-shadow: $modal-box-shadow;
+    @apply gl-shadow-lg;
     background-color: var(--gl-background-color-overlap);
     color: var(--gl-text-color-default);
 

package/src/components/base/progress_bar/progress_bar.md

@@ -0,0 +1,25 @@
+The progress bar component can be used to show an amount of progress.
+It comes in 4 variants and supports setting a custom maximum and height.
+
+## Value
+
+The `value` prop can be a Number or String. If not given, it will default to `0`.
+
+## Variants
+
+The following variants are available:
+
+1. 'primary' (default)
+2. 'success'
+3. 'warning'
+4. 'danger'
+
+## Maximum
+
+A custom maximum can be set with the `max` prop. If not given, it will default to `100`.
+
+## Width and Height
+
+The `GlProgressBar` will always expand to the maximum width of its parent container.
+The height can be controlled with the `height` prop. The value should be a standard
+CSS dimension (`px`, `rem`, `em`, etc.) and given as a String, e.g. `'20px'`.

package/src/components/base/progress_bar/progress_bar.scss

@@ -1,5 +1,16 @@
 .gl-progress-bar {
   background-color: var(--gl-progress-bar-track-color);
+  
+  .gl-progress {
+    @apply gl-flex-col;
+    @apply gl-justify-center;
+    @apply gl-w-full;
+    @apply gl-overflow-hidden;
+    @apply gl-text-center;
+    @apply gl-whitespace-nowrap;
+    transition: transform 0.6s $gl-easing-out-cubic;
+    transform-origin: left;
+  }
 
   .bg-primary {
     background-color: var(--gl-progress-bar-indicator-color-default) !important;

package/src/components/base/progress_bar/progress_bar.vue

@@ -1,15 +1,64 @@
 <script>
-import { BProgress } from '../../../vendor/bootstrap-vue/src/components/progress/progress';
+import { progressBarVariantOptions } from '../../../utils/constants';
+import { toFloat } from '../../../utils/number_utils';
 
 export default {
   name: 'GlProgressBar',
-  components: {
-    BProgress,
+  props: {
+    value: {
+      type: [Number, String],
+      required: false,
+      default: 0,
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: (value) => Object.keys(progressBarVariantOptions).includes(value),
+    },
+    max: {
+      type: [Number, String],
+      required: false,
+      default: 100,
+    },
+    height: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    progressHeight() {
+      return { height: this.height };
+    },
+    computedValue() {
+      return toFloat(this.value, 0);
+    },
+    computedMax() {
+      const max = toFloat(this.max, 100);
+      return max > 0 ? max : 100;
+    },
+    progressBarStyles() {
+      return {
+        transform: `scaleX(${this.computedValue / this.computedMax})`,
+      };
+    },
+    classes() {
+      return ['gl-progress', `bg-${this.variant}`];
+    },
   },
-  inheritAttrs: false,
 };
 </script>
 
 <template>
-  <b-progress v-bind="$attrs" class="gl-progress-bar" />
+  <div class="gl-progress-bar progress" :style="progressHeight">
+    <div
+      :class="classes"
+      :style="progressBarStyles"
+      role="progressbar"
+      aria-valuemin="0"
+      :aria-valuemax="String(computedMax)"
+      :aria-valuenow="computedValue"
+    ></div>
+  </div>
 </template>

package/src/components/base/toast/toast.js

@@ -44,7 +44,7 @@ function renderTitle(h, toast, options) {
 }
 
 function showToast(message, options = {}) {
-  // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+  // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
   const id = `gl-toast-${toastsCount}`;
   toastsCount += 1;
   const hide = () => {

package/src/components/base/token/token.vue

@@ -35,7 +35,7 @@ export default {
   },
   computed: {
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-token-${this.variant}-variant`;
     },
     viewOnlyClass() {

package/src/utils/number_utils.js

@@ -118,3 +118,10 @@ export const formatNumberToLocale = (value, options = {}, locales = undefined) =
 
   return new Intl.NumberFormat(locales, options).format(value);
 };
+
+// Converts a value (string, number, etc.) to a number
+// Taken from bootstrap-vue
+export const toFloat = (value, defaultValue = NaN) => {
+  const float = parseFloat(value);
+  return Number.isNaN(float) ? defaultValue : float;
+};

package/src/vendor/bootstrap-vue/package.json

@@ -47,29 +47,22 @@
   "files": [
     "dist",
     "esm",
-    "nuxt",
     "src"
   ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss",
     "**/*.vue",
-    "./docs",
     "./types"
   ],
   "scripts": {
     "audit": "improved-yarn-audit --ignore-dev-deps --min-severity moderate -e 1488",
-    "build": "scripts/build.sh",
-    "docs-build": "cross-env NODE_ENV=docs nuxt build -c docs/nuxt.config.js",
-    "docs-dev": "cross-env NODE_ENV=docs nuxt dev -c docs/nuxt.config.js",
-    "docs-gen": "cross-env NODE_ENV=docs nuxt generate -c docs/nuxt.config.js",
     "lint": "eslint --ext .js,.md,.vue ./",
-    "prepare": "yarn run build",
     "prettify": "prettier --write '**/*.{js,json,md,scss,ts,vue}'",
-    "test": "yarn run test:lint && yarn run test:unit",
+    "test": "yarn run test:meta && yarn run test:lint && yarn run test:unit",
     "test:lint": "yarn run lint",
-    "test:unit": "jest",
-    "watch": "rollup -c scripts/rollup.config.js --watch"
+    "test:meta": "scripts/check-meta.sh",
+    "test:unit": "jest"
   },
   "dependencies": {
     "bootstrap": "^4.6.1",
@@ -78,32 +71,15 @@
     "vue-functional-data-merge": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
     "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.14.0",
-    "@babel/plugin-transform-runtime": "^7.16.5",
     "@babel/preset-env": "^7.14.2",
-    "@babel/standalone": "^7.16.6",
-    "@nuxt/content": "^1.14.0",
-    "@nuxtjs/google-analytics": "^2.4.0",
-    "@nuxtjs/pwa": "^3.3.5",
-    "@nuxtjs/robots": "^2.5.0",
-    "@nuxtjs/sitemap": "^2.4.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-dom": "^3.2.40",
     "@vue/test-utils": "^1.3.0",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
-    "autoprefixer": "^10.4.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
-    "babel-plugin-istanbul": "^6.0.0",
-    "clean-css-cli": "^4.3.0",
-    "codemirror": "^5.61.0",
-    "codesandbox": "^2.2.3",
     "core-js": "^3.12.1",
-    "cross-env": "^7.0.3",
     "eslint": "^7.26.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.2",
@@ -115,25 +91,10 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^7.9.0",
-    "highlight.js": "^10.7.2",
-    "html-loader": "^1.3.2",
     "improved-yarn-audit": "^3.0.0",
     "jest": "^26.6.3",
-    "loader-utils": "^2.0.0",
     "lodash": "^4.17.21",
-    "marked": "^2.0.3",
-    "nuxt": "^2.15.8",
-    "postcss": "^8.2.15",
-    "postcss-cli": "^8.3.1",
     "prettier": "1.14.3",
-    "require-context": "^1.1.0",
-    "rollup": "^2.47.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "sass": "^1.45.0",
-    "sass-loader": "^10.1.1",
-    "terser": "^5.15.0",
     "vue": "^2.6.12",
     "vue-router": "^3.5.1",
     "vue-server-renderer": "^2.6.12",

package/src/vendor/bootstrap-vue/src/components/badge/README.md

@@ -120,7 +120,7 @@ Quickly provide actionable badges with hover and focus states by specifying eith
 <!-- b-badge-action.vue -->
 ```
 
-Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
-props.
+Refer to the [Router support](?path=/docs/base-link--docs#router-link-support) reference page for
+router-link specific props.
 
 <!-- Component reference added automatically from component package.json -->

package/src/vendor/bootstrap-vue/src/components/breadcrumb/README.md

@@ -62,8 +62,8 @@ const items = [
 ]
 ```
 
-Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
-props.
+Refer to the [Router support](?path=/docs/base-link--docs#router-link-support) reference page for
+router-link specific props.
 
 ## Manually placed items
 

package/src/vendor/bootstrap-vue/src/components/button/README.md

@@ -252,13 +252,13 @@ modifier (available in Vue 2.3+) on the `pressed` property
 ```
 
 If using toggle button style for a radio or checkbox style interface, it is best to use the built-in
-`button` style support of [`<b-form-radio-group>`](/docs/components/form-radio) and
-[`<b-form-checkbox-group>`](/docs/components/form-checkbox).
+`button` style support of [`<b-form-radio-group>`](?path=/docs/base-form-form-radio--docs) and
+[`<b-form-checkbox-group>`](?path=/docs/base-form-form-checkbox--docs).
 
 ## Router link support
 
-Refer to the [`Router support`](/docs/reference/router-links) reference docs for the various
-supported `<router-link>` related props.
+Refer to the [`Router support`](?path=/docs/base-link--docs#router-link-support) reference docs for
+the various supported `<router-link>` related props.
 
 ## Accessibility
 
@@ -272,10 +272,8 @@ added, nor will the keyboard event listeners be enabled.
 
 ## See also
 
-- [`<b-button-group>`](/docs/components/button-group)
-- [`<b-button-toolbar>`](/docs/components/button-toolbar)
-- [`<b-link>`](/docs/components/link)
-- [Router Link Support](/docs/reference/router-links)
-- [Color Variants](/docs/reference/color-variants)
+- [button-group](?path=/docs/base-button-group--docs)
+- [link](?path=/docs/base-link--docs)
+- [Router Link Support](?path=/docs/base-link--docs#router-link-support)
 
 <!-- Component reference added automatically from component package.json -->

package/src/vendor/bootstrap-vue/src/components/button-group/README.md

@@ -104,9 +104,4 @@ that split dropdown menus are not supported when prop `vertical` is set.
 <!-- b-button-group-menu.vue -->
 ```
 
-## See also
-
-Also check out the [`<b-button-toolbar>`](/docs/components/button-toolbar) component for generating
-toolbars containing button groups and input groups.
-
 <!-- Component reference added automatically from component package.json -->

package/src/vendor/bootstrap-vue/src/components/collapse/README.md

@@ -311,8 +311,8 @@ apply those roles for you automatically, as it depends on your final document ma
 
 **Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
 query. See the
-[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
-additional details.
+[reduced motion section of our accessibility documentation](?path=/docs/base-tooltip--docs#accessibility)
+for additional details.
 
 ## See also
 

package/src/vendor/bootstrap-vue/src/components/dropdown/README.md

@@ -508,8 +508,8 @@ the `tag` prop to any valid HTML5 tag on the `<b-dropdown-text>` sub-component.
 
 Dropdowns support basic forms. Put a `<b-dropdown-form>` within a dropdown menu and place form
 controls within the `<b-dropdown-form>`. The `<b-dropdown-form>` is based on the
-[`<b-form>`](/docs/components/form) component, and supports the same props and attributes as a
-regular form.
+[`<gl-form>`](?path=/docs/base-form-form--docs) component, and supports the same props and
+attributes as a regular form.
 
 ```html
 <template>
@@ -722,9 +722,9 @@ the dropdown menu, ensure they are wrapped with a plain `<li>`.
 
 ## See also
 
-- [`<b-nav-item-dropdown>`](/docs/components/nav#dropdown-support) for dropdown support inside
+- [`<b-nav-item-dropdown>`](?path=/docs/base-nav--docs#dropdown-support) for dropdown support inside
   `<b-nav>` and `<n-navbar>`
-- [Router Link Support](/docs/reference/router-links) reference for information about router-link
-  specific props available on `<b-dropdown-item>`
+- [Router Link Support](?path=/docs/base-link--docs#router-link-support) reference for information
+  about router-link specific props available on `<b-dropdown-item>`
 
 <!-- Component reference added automatically from component package.json -->

package/src/vendor/bootstrap-vue/src/components/form/README.md

@@ -186,23 +186,19 @@ technologies may resort to using the `placeholder` attribute, if present, but no
 
 See also:
 
-- [`<b-form-input>`](/docs/components/form-input) Textual and text-like inputs
-- [`<b-form-textarea>`](/docs/components/form-textarea) Text area inputs
-- [`<b-form-select>`](/docs/components/form-select) Select input
-- [`<b-form-radio>`](/docs/components/form-radio) Radio Inputs
-- [`<b-form-checkbox>`](/docs/components/form-checkbox) Checkbox Inputs
-- [`<b-form-file>`](/docs/components/form-file) File Input
-- [`<b-form-datepicker>`](/docs/components/form-datepicker) Date picker input
-- [`<b-form-spinbutton>`](/docs/components/form-spinbutton) Numerical range spinbutton input
-- [`<b-form-tags>`](/docs/components/form-tags) Customizable tag input
-- [`<b-form-timepicker>`](/docs/components/form-timepicker) Time picker custom form input
-- [`<b-form-rating>`](/docs/components/form-rating) Star rating custom form input and display
-- [`<b-button>`](/docs/components/button) Buttons
-- [`<b-form-group>`](/docs/components/form-group) Form Input wrapper to generate form-groups that
-  support labels, help text and feedback
-- [`<b-input-group>`](/docs/components/input-group) Form Inputs with add-ons
-- [`<b-form-row>`](/docs/components/layout) Create grid rows and columns with tighter margins
-  (available via the [Layout and grid components](/docs/components/layout))
+- [form-input](?path=/docs/base-form-form-input--docs) Textual and text-like inputs
+- [form-textarea](?path=/docs/base-form-form-textarea--docs) Text area inputs
+- [form-select](?path=/docs/base-form-form-select--docs) Select input
+- [form-radio](?path=/docs/base-form-form-radio--docs) Radio Inputs
+- [form-checkbox](?path=/docs/base-form-form-checkbox--docs) Checkbox Inputs
+- [form-date](?path=/docs/base-form-form-date--docs) Date input
+- [button](?path=/docs/base-button--docs) Buttons
+- [form-group](/?path=/docs/base-form-form-group--docs) Form Input wrapper to generate form-groups
+  that support labels, help text and feedback
+- [form-input-group](/?path=/docs/base-form-form-input-group--docs) Form Inputs with add-ons
+- [form-row](?path=/docs/base-form-form-group--docs#rows-b-row-and-b-form-row) Create grid rows and
+  columns with tighter margins (available via the
+  [Layout and grid components](?path=/docs/base-form-form-group--docs#layout-and-grid-system))
 
 ## Form helper components
 
@@ -253,12 +249,11 @@ class). Note that tooltip style feedback may, since its positioning is static, o
 labels, etc.
 
 **Note:** Some form controls, such as
-[`<b-form-radio>`](/docs/components/form-radio#contextual-states),
-[`<b-form-checkbox>`](/docs/components/form-checkbox#contextual-states), and
-[`<b-form-file>`](/docs/components/form-file) have wrapper elements which will prevent the feedback
-text from automatically showing (as the feedback component is not a direct sibling of the form
-control's input). Use the feedback component's `state` prop (bound to the state of the form control)
-or the `force-show` prop to display the feedback.
+[`<gl-form-radio>`](?path=/docs/base-form-form-radio--docs#contextual-states) and
+[`<gl-form-checkbox>`](?path=/docs/base-form-form-checkbox--docs#contextual-states) have wrapper
+elements which will prevent the feedback text from automatically showing (as the feedback component
+is not a direct sibling of the form control's input). Use the feedback component's `state` prop
+(bound to the state of the form control) or the `force-show` prop to display the feedback.
 
 ```html
 <template>
@@ -330,9 +325,9 @@ export default {
 
 See also:
 
-- [`<b-form-input> datalist`](/docs/components/form-input#datalist-support) for datalist usage.
-- [`<b-form-select>` `options` prop](/docs/components/form-select#options-property) docs for details
-  on the formats and helper props associated with `options`.
+- [form-input datalist](?path=/docs/base-form-form-input--docs#datalist-support) for datalist usage.
+- [form-select `options` prop](?path=/docs/base-form-form-select--docs#options-property) docs for
+  details on the formats and helper props associated with `options`.
 
 ## Validation