@gitlab/ui 112.2.3 → 112.3.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -22,11 +22,11 @@ $gl-color-blue-200: #9dc7f1;
 $gl-color-blue-300: #63a6e9;
 $gl-color-blue-400: #428fdc;
 $gl-color-blue-500: #1f75cb;
-$gl-color-blue-600: #1068bf;
-$gl-color-blue-700: #0b5cad;
-$gl-color-blue-800: #064787;
-$gl-color-blue-900: #033464;
-$gl-color-blue-950: #002850;
+$gl-color-blue-600: #2f68b4;
+$gl-color-blue-700: #2f5ca0;
+$gl-color-blue-800: #284779;
+$gl-color-blue-900: #213454;
+$gl-color-blue-950: #1d283e;
 $gl-color-neutral-0: #fff;
 $gl-color-neutral-10: #fbfafd;
 $gl-color-neutral-50: #ececef;
@@ -47,44 +47,44 @@ $gl-color-green-200: #91d4a8;
 $gl-color-green-300: #52b87a;
 $gl-color-green-400: #2da160;
 $gl-color-green-500: #108548;
-$gl-color-green-600: #217645;
-$gl-color-green-700: #24663b;
-$gl-color-green-800: #0d532a;
-$gl-color-green-900: #0a4020;
-$gl-color-green-950: #072b15;
+$gl-color-green-600: #2f7549;
+$gl-color-green-700: #306440;
+$gl-color-green-800: #225131;
+$gl-color-green-900: #1e3e28;
+$gl-color-green-950: #17291c;
 $gl-color-orange-50: #fdf1dd;
 $gl-color-orange-100: #f5d9a8;
 $gl-color-orange-200: #e9be74;
 $gl-color-orange-300: #d99530;
 $gl-color-orange-400: #c17d10;
 $gl-color-orange-500: #ab6100;
-$gl-color-orange-600: #9e5400;
-$gl-color-orange-700: #8f4700;
-$gl-color-orange-800: #703800;
-$gl-color-orange-900: #5c2900;
-$gl-color-orange-950: #421f00;
+$gl-color-orange-600: #995715;
+$gl-color-orange-700: #894b16;
+$gl-color-orange-800: #693c14;
+$gl-color-orange-900: #532e16;
+$gl-color-orange-950: #382315;
 $gl-color-purple-50: #f4f0ff;
 $gl-color-purple-100: #e1d8f9;
 $gl-color-purple-200: #cbbbf2;
 $gl-color-purple-300: #ac93e6;
 $gl-color-purple-400: #9475db;
 $gl-color-purple-500: #7b58cf;
-$gl-color-purple-600: #694cc0;
-$gl-color-purple-700: #5943b6;
-$gl-color-purple-800: #453894;
-$gl-color-purple-900: #2f2a6b;
-$gl-color-purple-950: #232150;
+$gl-color-purple-600: #6a4fb4;
+$gl-color-purple-700: #5c47a6;
+$gl-color-purple-800: #493c83;
+$gl-color-purple-900: #342d59;
+$gl-color-purple-950: #27243e;
 $gl-color-red-50: #fcf1ef;
 $gl-color-red-100: #fdd4cd;
 $gl-color-red-200: #fcb5aa;
 $gl-color-red-300: #f6806d;
 $gl-color-red-400: #ec5941;
 $gl-color-red-500: #dd2b0e;
-$gl-color-red-600: #c91c00;
-$gl-color-red-700: #ae1800;
-$gl-color-red-800: #8d1300;
-$gl-color-red-900: #660e00;
-$gl-color-red-950: #4d0a00;
+$gl-color-red-600: #c02f12;
+$gl-color-red-700: #a32c12;
+$gl-color-red-800: #812713;
+$gl-color-red-900: #582014;
+$gl-color-red-950: #3e1a14;
 $gl-color-data-green-50: #ddfab7;
 $gl-color-data-green-100: #c6ed94;
 $gl-color-data-green-200: #b0d97b;

package/dist/tokens/scss/_tokens.scss

@@ -22,11 +22,11 @@ $gl-color-blue-200: #9dc7f1;
 $gl-color-blue-300: #63a6e9;
 $gl-color-blue-400: #428fdc;
 $gl-color-blue-500: #1f75cb;
-$gl-color-blue-600: #1068bf;
-$gl-color-blue-700: #0b5cad;
-$gl-color-blue-800: #064787;
-$gl-color-blue-900: #033464;
-$gl-color-blue-950: #002850;
+$gl-color-blue-600: #2f68b4;
+$gl-color-blue-700: #2f5ca0;
+$gl-color-blue-800: #284779;
+$gl-color-blue-900: #213454;
+$gl-color-blue-950: #1d283e;
 $gl-color-neutral-0: #fff;
 $gl-color-neutral-10: #fbfafd;
 $gl-color-neutral-50: #ececef;
@@ -47,44 +47,44 @@ $gl-color-green-200: #91d4a8;
 $gl-color-green-300: #52b87a;
 $gl-color-green-400: #2da160;
 $gl-color-green-500: #108548;
-$gl-color-green-600: #217645;
-$gl-color-green-700: #24663b;
-$gl-color-green-800: #0d532a;
-$gl-color-green-900: #0a4020;
-$gl-color-green-950: #072b15;
+$gl-color-green-600: #2f7549;
+$gl-color-green-700: #306440;
+$gl-color-green-800: #225131;
+$gl-color-green-900: #1e3e28;
+$gl-color-green-950: #17291c;
 $gl-color-orange-50: #fdf1dd;
 $gl-color-orange-100: #f5d9a8;
 $gl-color-orange-200: #e9be74;
 $gl-color-orange-300: #d99530;
 $gl-color-orange-400: #c17d10;
 $gl-color-orange-500: #ab6100;
-$gl-color-orange-600: #9e5400;
-$gl-color-orange-700: #8f4700;
-$gl-color-orange-800: #703800;
-$gl-color-orange-900: #5c2900;
-$gl-color-orange-950: #421f00;
+$gl-color-orange-600: #995715;
+$gl-color-orange-700: #894b16;
+$gl-color-orange-800: #693c14;
+$gl-color-orange-900: #532e16;
+$gl-color-orange-950: #382315;
 $gl-color-purple-50: #f4f0ff;
 $gl-color-purple-100: #e1d8f9;
 $gl-color-purple-200: #cbbbf2;
 $gl-color-purple-300: #ac93e6;
 $gl-color-purple-400: #9475db;
 $gl-color-purple-500: #7b58cf;
-$gl-color-purple-600: #694cc0;
-$gl-color-purple-700: #5943b6;
-$gl-color-purple-800: #453894;
-$gl-color-purple-900: #2f2a6b;
-$gl-color-purple-950: #232150;
+$gl-color-purple-600: #6a4fb4;
+$gl-color-purple-700: #5c47a6;
+$gl-color-purple-800: #493c83;
+$gl-color-purple-900: #342d59;
+$gl-color-purple-950: #27243e;
 $gl-color-red-50: #fcf1ef;
 $gl-color-red-100: #fdd4cd;
 $gl-color-red-200: #fcb5aa;
 $gl-color-red-300: #f6806d;
 $gl-color-red-400: #ec5941;
 $gl-color-red-500: #dd2b0e;
-$gl-color-red-600: #c91c00;
-$gl-color-red-700: #ae1800;
-$gl-color-red-800: #8d1300;
-$gl-color-red-900: #660e00;
-$gl-color-red-950: #4d0a00;
+$gl-color-red-600: #c02f12;
+$gl-color-red-700: #a32c12;
+$gl-color-red-800: #812713;
+$gl-color-red-900: #582014;
+$gl-color-red-950: #3e1a14;
 $gl-color-data-green-50: #ddfab7;
 $gl-color-data-green-100: #c6ed94;
 $gl-color-data-green-200: #b0d97b;
@@ -411,11 +411,11 @@ $blue-200: #9dc7f1 !default;
 $blue-300: #63a6e9 !default;
 $blue-400: #428fdc !default;
 $blue-500: #1f75cb !default;
-$blue-600: #1068bf !default;
-$blue-700: #0b5cad !default;
-$blue-800: #064787 !default;
-$blue-900: #033464 !default;
-$blue-950: #002850 !default;
+$blue-600: #2f68b4 !default;
+$blue-700: #2f5ca0 !default;
+$blue-800: #284779 !default;
+$blue-900: #213454 !default;
+$blue-950: #1d283e !default;
 $gray-10: #fbfafd !default;
 $gray-50: #ececef !default;
 $gray-100: #dcdcde !default;
@@ -434,44 +434,44 @@ $green-200: #91d4a8 !default;
 $green-300: #52b87a !default;
 $green-400: #2da160 !default;
 $green-500: #108548 !default;
-$green-600: #217645 !default;
-$green-700: #24663b !default;
-$green-800: #0d532a !default;
-$green-900: #0a4020 !default;
-$green-950: #072b15 !default;
+$green-600: #2f7549 !default;
+$green-700: #306440 !default;
+$green-800: #225131 !default;
+$green-900: #1e3e28 !default;
+$green-950: #17291c !default;
 $orange-50: #fdf1dd !default;
 $orange-100: #f5d9a8 !default;
 $orange-200: #e9be74 !default;
 $orange-300: #d99530 !default;
 $orange-400: #c17d10 !default;
 $orange-500: #ab6100 !default;
-$orange-600: #9e5400 !default;
-$orange-700: #8f4700 !default;
-$orange-800: #703800 !default;
-$orange-900: #5c2900 !default;
-$orange-950: #421f00 !default;
+$orange-600: #995715 !default;
+$orange-700: #894b16 !default;
+$orange-800: #693c14 !default;
+$orange-900: #532e16 !default;
+$orange-950: #382315 !default;
 $purple-50: #f4f0ff !default;
 $purple-100: #e1d8f9 !default;
 $purple-200: #cbbbf2 !default;
 $purple-300: #ac93e6 !default;
 $purple-400: #9475db !default;
 $purple-500: #7b58cf !default;
-$purple-600: #694cc0 !default;
-$purple-700: #5943b6 !default;
-$purple-800: #453894 !default;
-$purple-900: #2f2a6b !default;
-$purple-950: #232150 !default;
+$purple-600: #6a4fb4 !default;
+$purple-700: #5c47a6 !default;
+$purple-800: #493c83 !default;
+$purple-900: #342d59 !default;
+$purple-950: #27243e !default;
 $red-50: #fcf1ef !default;
 $red-100: #fdd4cd !default;
 $red-200: #fcb5aa !default;
 $red-300: #f57f6c !default;
 $red-400: #ec5941 !default;
 $red-500: #dd2b0e !default;
-$red-600: #c91c00 !default;
-$red-700: #ae1800 !default;
-$red-800: #8d1300 !default;
-$red-900: #660e00 !default;
-$red-950: #4d0a00 !default;
+$red-600: #c02f12 !default;
+$red-700: #a32c12 !default;
+$red-800: #812713 !default;
+$red-900: #582014 !default;
+$red-950: #3e1a14 !default;
 $brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
 $brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
 $brand-orange-02: #fc6d26 !default; // Use color.brand-orange.02p instead.

package/dist/tokens/tailwind/tokens.cjs

@@ -9,11 +9,11 @@ const baseColors = {
   'blue-300': 'var(--blue-300, #63a6e9)',
   'blue-400': 'var(--blue-400, #428fdc)',
   'blue-500': 'var(--blue-500, #1f75cb)',
-  'blue-600': 'var(--blue-600, #1068bf)',
-  'blue-700': 'var(--blue-700, #0b5cad)',
-  'blue-800': 'var(--blue-800, #064787)',
-  'blue-900': 'var(--blue-900, #033464)',
-  'blue-950': 'var(--blue-950, #002850)',
+  'blue-600': 'var(--blue-600, #2f68b4)',
+  'blue-700': 'var(--blue-700, #2f5ca0)',
+  'blue-800': 'var(--blue-800, #284779)',
+  'blue-900': 'var(--blue-900, #213454)',
+  'blue-950': 'var(--blue-950, #1d283e)',
   'gray-10': 'var(--gray-10, #fbfafd)',
   'gray-50': 'var(--gray-50, #ececef)',
   'gray-100': 'var(--gray-100, #dcdcde)',
@@ -32,44 +32,44 @@ const baseColors = {
   'green-300': 'var(--green-300, #52b87a)',
   'green-400': 'var(--green-400, #2da160)',
   'green-500': 'var(--green-500, #108548)',
-  'green-600': 'var(--green-600, #217645)',
-  'green-700': 'var(--green-700, #24663b)',
-  'green-800': 'var(--green-800, #0d532a)',
-  'green-900': 'var(--green-900, #0a4020)',
-  'green-950': 'var(--green-950, #072b15)',
+  'green-600': 'var(--green-600, #2f7549)',
+  'green-700': 'var(--green-700, #306440)',
+  'green-800': 'var(--green-800, #225131)',
+  'green-900': 'var(--green-900, #1e3e28)',
+  'green-950': 'var(--green-950, #17291c)',
   'orange-50': 'var(--orange-50, #fdf1dd)',
   'orange-100': 'var(--orange-100, #f5d9a8)',
   'orange-200': 'var(--orange-200, #e9be74)',
   'orange-300': 'var(--orange-300, #d99530)',
   'orange-400': 'var(--orange-400, #c17d10)',
   'orange-500': 'var(--orange-500, #ab6100)',
-  'orange-600': 'var(--orange-600, #9e5400)',
-  'orange-700': 'var(--orange-700, #8f4700)',
-  'orange-800': 'var(--orange-800, #703800)',
-  'orange-900': 'var(--orange-900, #5c2900)',
-  'orange-950': 'var(--orange-950, #421f00)',
+  'orange-600': 'var(--orange-600, #995715)',
+  'orange-700': 'var(--orange-700, #894b16)',
+  'orange-800': 'var(--orange-800, #693c14)',
+  'orange-900': 'var(--orange-900, #532e16)',
+  'orange-950': 'var(--orange-950, #382315)',
   'purple-50': 'var(--purple-50, #f4f0ff)',
   'purple-100': 'var(--purple-100, #e1d8f9)',
   'purple-200': 'var(--purple-200, #cbbbf2)',
   'purple-300': 'var(--purple-300, #ac93e6)',
   'purple-400': 'var(--purple-400, #9475db)',
   'purple-500': 'var(--purple-500, #7b58cf)',
-  'purple-600': 'var(--purple-600, #694cc0)',
-  'purple-700': 'var(--purple-700, #5943b6)',
-  'purple-800': 'var(--purple-800, #453894)',
-  'purple-900': 'var(--purple-900, #2f2a6b)',
-  'purple-950': 'var(--purple-950, #232150)',
+  'purple-600': 'var(--purple-600, #6a4fb4)',
+  'purple-700': 'var(--purple-700, #5c47a6)',
+  'purple-800': 'var(--purple-800, #493c83)',
+  'purple-900': 'var(--purple-900, #342d59)',
+  'purple-950': 'var(--purple-950, #27243e)',
   'red-50': 'var(--red-50, #fcf1ef)',
   'red-100': 'var(--red-100, #fdd4cd)',
   'red-200': 'var(--red-200, #fcb5aa)',
   'red-300': 'var(--red-300, #f57f6c)',
   'red-400': 'var(--red-400, #ec5941)',
   'red-500': 'var(--red-500, #dd2b0e)',
-  'red-600': 'var(--red-600, #c91c00)',
-  'red-700': 'var(--red-700, #ae1800)',
-  'red-800': 'var(--red-800, #8d1300)',
-  'red-900': 'var(--red-900, #660e00)',
-  'red-950': 'var(--red-950, #4d0a00)',
+  'red-600': 'var(--red-600, #c02f12)',
+  'red-700': 'var(--red-700, #a32c12)',
+  'red-800': 'var(--red-800, #812713)',
+  'red-900': 'var(--red-900, #582014)',
+  'red-950': 'var(--red-950, #3e1a14)',
 };
 const themeColors = {
   'theme-indigo-10': 'var(--theme-indigo-10, #f8f8ff)',
@@ -223,10 +223,10 @@ const textColors = {
   subtle: 'var(--gl-text-color-subtle, var(--gl-color-neutral-600, #626168))',
   strong: 'var(--gl-text-color-strong, var(--gl-color-neutral-950, #18171d))',
   heading: 'var(--gl-text-color-heading, var(--gl-color-neutral-950, #18171d))',
-  link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
-  warning: 'var(--gl-text-color-warning, var(--gl-color-orange-600, #9e5400))',
-  danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
-  success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
+  link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #2f5ca0))',
+  warning: 'var(--gl-text-color-warning, var(--gl-color-orange-600, #995715))',
+  danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c02f12))',
+  success: 'var(--gl-text-color-success, var(--gl-color-green-600, #2f7549))',
   disabled: 'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
 const backgroundColors = {
@@ -251,11 +251,11 @@ const iconColors = {
   subtle: 'var(--gl-icon-color-subtle, var(--gl-text-color-subtle, #626168))',
   strong: 'var(--gl-icon-color-strong, var(--gl-text-color-strong, #18171d))',
   disabled: 'var(--gl-icon-color-disabled, var(--gl-text-color-disabled, #89888d))',
-  link: 'var(--gl-icon-color-link, var(--gl-text-color-link, #0b5cad))',
-  info: 'var(--gl-icon-color-info, var(--gl-color-blue-700, #0b5cad))',
-  warning: 'var(--gl-icon-color-warning, var(--gl-text-color-warning, #9e5400))',
-  danger: 'var(--gl-icon-color-danger, var(--gl-text-color-danger, #c91c00))',
-  success: 'var(--gl-icon-color-success, var(--gl-text-color-success, #217645))',
+  link: 'var(--gl-icon-color-link, var(--gl-text-color-link, #2f5ca0))',
+  info: 'var(--gl-icon-color-info, var(--gl-color-blue-700, #2f5ca0))',
+  warning: 'var(--gl-icon-color-warning, var(--gl-text-color-warning, #995715))',
+  danger: 'var(--gl-icon-color-danger, var(--gl-text-color-danger, #c02f12))',
+  success: 'var(--gl-icon-color-success, var(--gl-text-color-success, #2f7549))',
 };
 const alphaDarkColors = {
   2: 'var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02))',
@@ -310,11 +310,11 @@ const statusBackgroundColors = {
 };
 const statusTextColors = {
   'status-neutral': 'var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
-  'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #0b5cad))',
-  'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #24663b))',
-  'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #8f4700))',
-  'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #ae1800))',
-  'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5943b6))',
+  'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #2f5ca0))',
+  'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #306440))',
+  'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #894b16))',
+  'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #a32c12))',
+  'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5c47a6))',
 };
 const statusIconColors = {
   'status-neutral': 'var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))',
@@ -339,18 +339,18 @@ const feedbackBackgroundColors = {
 const feedbackTextColors = {
   'feedback-strong': 'var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))',
   'feedback-neutral': 'var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
-  'feedback-info': 'var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #0b5cad))',
-  'feedback-success': 'var(--gl-feedback-success-text-color, var(--gl-color-green-700, #24663b))',
-  'feedback-warning': 'var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #8f4700))',
-  'feedback-danger': 'var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #ae1800))',
+  'feedback-info': 'var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #2f5ca0))',
+  'feedback-success': 'var(--gl-feedback-success-text-color, var(--gl-color-green-700, #306440))',
+  'feedback-warning': 'var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #894b16))',
+  'feedback-danger': 'var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #a32c12))',
 };
 const feedbackIconColors = {
   'feedback-strong': 'var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))',
   'feedback-neutral': 'var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))',
-  'feedback-info': 'var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #1068bf))',
-  'feedback-success': 'var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #217645))',
-  'feedback-warning': 'var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #9e5400))',
-  'feedback-danger': 'var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c91c00))',
+  'feedback-info': 'var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #2f68b4))',
+  'feedback-success': 'var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #2f7549))',
+  'feedback-warning': 'var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #995715))',
+  'feedback-danger': 'var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c02f12))',
 };
 
 const colors = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "112.2.3",
+  "version": "112.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -152,7 +152,7 @@
     "eslint-formatter-gitlab": "^5.1.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.11.5",
+    "eslint-plugin-storybook": "0.12.0",
     "fuse.js": "^7.0.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/components/base/nav/nav.md

@@ -1,6 +1,184 @@
-The navigation component is built with flexbox and provides a strong foundation for building all
-types of navigation components.
+## Overview
 
-## `GlNavItem`
+The base `<gl-nav>` component is built with flexbox and provides a strong foundation for building all
+types of navigation components. It includes some style overrides (for working with lists), some link
+padding for larger hit areas, and basic disabled styling. No active states are included in the base
+nav.
 
-Use `GlNavItem` to add actionable links (or router links) to your nav. `GlNavItem` wraps [`BNavItem`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item).
+`<gl-nav>` supports the `<gl-nav-item>` child component for actionable links (or router-links).
+
+## Link appearance
+
+Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These
+variants are mutually exclusive - use only one style or the other.
+
+### Tab style
+
+Make the nav look like tabs by setting the `tabs` prop.
+
+```html
+<div>
+  <gl-nav tabs>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Another Link</gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+### Pill style
+
+Use the pill style by setting the `pills` prop.
+
+```html
+<div>
+  <gl-nav pills>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Another Link</gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+### Small
+
+Make the nav smaller by setting the `small` prop.
+
+```html
+<div>
+  <gl-nav small>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Another Link</gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+## Fill and justify
+
+Force your `<gl-nav>` content to extend the full available width.
+
+### Fill
+
+To proportionately fill all available space with your `<gl-nav-item>` components, set the `fill`
+prop. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+```html
+<div>
+  <gl-nav tabs fill>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Link with a long name </gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+### Justified
+
+For equal-width elements, set the `justified` prop instead. All horizontal space will be occupied by
+nav links, but unlike `fill` above, every `<gl-nav-item>` will be the same width.
+
+```html
+<div>
+  <gl-nav tabs justified>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Link with a long name </gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+## Alignment
+
+To align your `<gl-nav-item>` components, use the `align` prop. Available values are `left`, `center`
+and `right`.
+
+```html
+<div>
+  <gl-nav tabs align="center">
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Link with a long name </gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+## Tabbed local content support
+
+See the [`<gl-tabs>`](?path=/docs/base-tabs--docs) component for creating tabbable panes of local
+content (not suited for navigation).
+
+## Card integration
+
+Use a `<gl-nav>` in a [`<gl-card>`](?path=/docs/base-card--docs) header, by enabling the
+`card-header` prop on `<gl-nav>` and setting either the `pills` or `tabs` props:
+
+```html
+<div>
+  <gl-card title="Card Title">
+    <template #header>
+      <gl-nav card-header tabs>
+        <gl-nav-item active>Active</gl-nav-item>
+        <gl-nav-item>Inactive</gl-nav-item>
+      </gl-nav>
+    </template>
+
+    <template #default>
+      <p>With supporting text below as a natural lead-in to additional content.</p>
+      <gl-button variant="primary">Go somewhere</gl-button>
+    </template>
+  </gl-card>
+</div>
+```
+
+**Plain style:**
+
+The `card-header` prop is only needed when you are applying `tabs` or `pills` style. Note that
+we do not have special styling for `active` state plain style nav items.
+
+```html
+<div>
+  <gl-card title="Card Title">
+    <template #header>
+      <gl-nav>
+        <gl-nav-item active>Active</gl-nav-item>
+        <gl-nav-item>Inactive</gl-nav-item>
+      </gl-nav>
+    </template>
+
+    <template #default>
+      <p>pWith supporting text below as a natural lead-in to additional content.</p>
+      <gl-button variant="primary">Go somewhere</gl-button>
+    </template>
+  </gl-card>
+</div>
+```
+
+## Accessibility
+
+If you're using `<gl-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the
+most logical parent container of `<gl-nav>`, or wrap a `<nav>` element around `<gl-nav>`. Do **not**
+add the role to the `<gl-nav>` itself, as this would prevent it from being announced as an actual
+list by assistive technologies.
+
+### Tabbed interface accessibility
+
+Note that navigation bars, even if visually styled as tabs, should **not** be given
+`role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for
+[tabbed interfaces](?path=/docs/base-tabs--docs) that do not change the URL or `$route`, as
+described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
+See [`<gl-tabs>`](?path=/docs/base-tabs--docs) for dynamic tabbed interfaces that are compliant with
+WAI ARIA.
+
+## See also
+
+- [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content, even via dropdown
+  menus.
+- [Router Link Support reference](?path=/docs/base-link--docs#router-link-support) for information
+  about router-link specific props available on `<gl-nav-item>`