@gitlab/ui 134.2.0 → 134.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "134.2.0",
+  "version": "134.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -98,13 +98,13 @@
   },
   "devDependencies": {
     "@adobe/leonardo-contrast-colors": "^1.1.0",
-    "@babel/core": "^7.29.0",
+    "@babel/core": "^7.29.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.29.5",
-    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
     "@cypress/grep": "^4.1.1",
-    "@figma/code-connect": "^1.4.5",
+    "@figma/code-connect": "^1.4.7",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.34",
     "@gitlab/svgs": "*",
@@ -130,7 +130,7 @@
     "@vue/compiler-sfc": "3.5.32",
     "@vue/server-renderer": "3.5.32",
     "@vue/test-utils": "1.3.6",
-    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.10",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.11",
     "@vue/vue2-jest": "29.2.6",
     "@vue/vue3-jest": "^29.2.6",
     "@yarnpkg/lockfile": "^1.1.0",
@@ -139,7 +139,7 @@
     "autoprefixer": "10.5.0",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.15.0",
+    "cypress": "15.16.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -174,7 +174,7 @@
     "start-server-and-test": "^2.1.5",
     "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.4.1",
+    "style-dictionary": "^5.4.2",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/nav_item/nav_item.scss

@@ -0,0 +1,90 @@
+.gl-nav-item {
+  @apply gl-relative;
+  @apply gl-flex;
+  @apply gl-items-center;
+  @apply gl-gap-3;
+  @apply gl-py-1;
+  @apply gl-px-3;
+  @apply gl-w-full;
+  @apply gl-no-underline;
+  @apply gl-text-left;
+  @apply gl-border-none;
+  @apply gl-cursor-pointer;
+  @apply gl-appearance-none;
+  @apply focus:gl-focus-inset;
+  min-height: 1.75rem;
+  min-width: 1.75rem;
+  border-radius: var(--gl-nav-item-border-radius);
+  font-size: var(--gl-nav-item-font-size);
+  font-weight: var(--gl-nav-item-font-weight);
+  color: var(--gl-nav-item-foreground-color-default);
+  background-color: var(--gl-nav-item-background-color-default);
+
+  &.gl-nav-item-is-icon-only {
+    @apply gl-px-2;
+  }
+
+  &.gl-nav-item-has-start-slot {
+    @apply gl-pl-2;
+  }
+
+  &.gl-nav-item-has-end-slot {
+    @apply gl-pr-2;
+  }
+
+  &:hover {
+    @apply gl-no-underline;
+    color: var(--gl-nav-item-foreground-color-hover);
+    background-color: var(--gl-nav-item-background-color-hover);
+  }
+
+  &:focus {
+    color: var(--gl-nav-item-foreground-color-focus);
+    background-color: var(--gl-nav-item-background-color-focus);
+  }
+
+  &:active,
+  &:focus:active {
+    color: var(--gl-nav-item-foreground-color-active);
+    background-color: var(--gl-nav-item-background-color-active);
+  }
+
+  &.selected {
+    color: var(--gl-nav-item-selected-foreground-color-default);
+    background-color: var(--gl-nav-item-selected-background-color-default);
+
+    &:hover {
+      color: var(--gl-nav-item-selected-foreground-color-hover);
+      background-color: var(--gl-nav-item-selected-background-color-hover);
+    }
+
+    &:focus {
+      color: var(--gl-nav-item-selected-foreground-color-focus);
+      background-color: var(--gl-nav-item-selected-background-color-focus);
+    }
+
+    &:active,
+    &:focus:active {
+      color: var(--gl-nav-item-selected-foreground-color-active);
+      background-color: var(--gl-nav-item-selected-background-color-active);
+    }
+  }
+}
+
+.gl-nav-item-slot {
+  @apply gl-flex;
+  @apply gl-items-center;
+  @apply gl-justify-center;
+  @apply gl-h-6;
+  @apply gl-w-6;
+  @apply gl-shrink-0;
+}
+
+.gl-nav-item-label {
+  @apply gl-grow;
+}
+
+.gl-nav-item-chevron {
+  @apply gl-m-auto;
+  @apply gl-text-subtle;
+}

package/src/components/base/nav_item/nav_item.vue

@@ -0,0 +1,156 @@
+<script>
+import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon.vue';
+import GlIcon from '../icon/icon.vue';
+
+export default {
+  name: 'GlNavItem',
+  components: {
+    GlAnimatedChevronRightDownIcon,
+    GlIcon,
+  },
+  props: {
+    /**
+     * Link href attribute
+     */
+    href: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Icon name
+     */
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Is icon only
+     */
+    isIconOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Is parent
+     */
+    isParent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Expanded
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Is currently selected
+     */
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Router link to property
+     */
+    to: {
+      type: [String, Object],
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    ariaExpanded() {
+      return this.isParent ? String(this.expanded) : null;
+    },
+    classes() {
+      return [
+        'gl-nav-item',
+        {
+          'gl-nav-item-is-icon-only': this.isIconOnly,
+          'gl-nav-item-has-start-slot': this.icon || Boolean(this.$scopedSlots.icon),
+          'gl-nav-item-has-end-slot': Boolean(this.$scopedSlots.end) || this.isParent,
+          selected: this.selected,
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<template>
+  <router-link v-if="to" #default="{ navigate }" :to="to" active-class="selected" custom>
+    <a :class="classes" :aria-current="selected ? 'page' : null" @click="navigate">
+      <span v-if="icon || $scopedSlots.icon" class="gl-nav-item-slot" data-testid="nav-item-start">
+        <slot name="icon">
+          <gl-icon :name="icon" />
+        </slot>
+      </span>
+      <template v-if="!isIconOnly">
+        <span v-if="$scopedSlots.default" class="gl-nav-item-label" data-testid="nav-item-label">
+          <slot :is-active="selected"></slot>
+        </span>
+        <span v-if="$scopedSlots.end" class="gl-nav-item-slot" data-testid="nav-item-end">
+          <slot name="end"></slot>
+        </span>
+      </template>
+    </a>
+  </router-link>
+  <a
+    v-else-if="href"
+    :class="classes"
+    :href="href"
+    :aria-current="selected ? 'page' : null"
+    @click="$emit('click')"
+    @keydown.escape="$emit('escape')"
+    @pointerover="$emit('pointerover', $event)"
+    @pointerleave="$emit('pointerleave', $event)"
+  >
+    <span v-if="icon || $scopedSlots.icon" class="gl-nav-item-slot" data-testid="nav-item-start">
+      <slot name="icon">
+        <gl-icon :name="icon" />
+      </slot>
+    </span>
+    <template v-if="!isIconOnly">
+      <span v-if="$scopedSlots.default" class="gl-nav-item-label" data-testid="nav-item-label">
+        <slot></slot>
+      </span>
+      <span v-if="$scopedSlots.end" class="gl-nav-item-slot" data-testid="nav-item-end">
+        <slot name="end"></slot>
+      </span>
+    </template>
+  </a>
+  <button
+    v-else
+    :aria-expanded="ariaExpanded"
+    :class="classes"
+    @click="$emit('click')"
+    @keydown.escape="$emit('escape')"
+    @pointerover="$emit('pointerover', $event)"
+    @pointerleave="$emit('pointerleave', $event)"
+  >
+    <span v-if="icon || $scopedSlots.icon" class="gl-nav-item-slot" data-testid="nav-item-start">
+      <slot name="icon">
+        <gl-icon :name="icon" />
+      </slot>
+    </span>
+    <template v-if="!isIconOnly">
+      <span v-if="$scopedSlots.default" class="gl-nav-item-label" data-testid="nav-item-label">
+        <slot></slot>
+      </span>
+      <span v-if="$scopedSlots.end" class="gl-nav-item-slot" data-testid="nav-item-end">
+        <slot name="end"></slot>
+      </span>
+      <span v-else-if="isParent" class="gl-nav-item-slot" data-testid="nav-item-chevron">
+        <gl-animated-chevron-right-down-icon class="gl-nav-item-chevron" :is-on="expanded" />
+      </span>
+    </template>
+  </button>
+</template>

package/src/components/index.js

@@ -96,6 +96,7 @@ export { default as GlBroadcastMessage } from './base/broadcast_message/broadcas
 export { default as GlCollapse } from './base/collapse/collapse.vue';
 export { default as GlAccordion } from './base/accordion/accordion.vue';
 export { default as GlAccordionItem } from './base/accordion/accordion_item.vue';
+export { default as GlNavItem } from './base/nav_item/nav_item.vue';
 
 // Dashboards
 export { default as GlDashboardLayout } from './dashboards/dashboard_layout/dashboard_layout.vue';

package/src/scss/components.scss

@@ -51,6 +51,7 @@
 @import "../components/base/loading_icon/loading_icon";
 @import "../components/base/markdown/markdown";
 @import "../components/base/modal/modal";
+@import "../components/base/nav_item/nav_item";
 @import "../components/base/button/button";
 @import "../components/base/button_group/button_group";
 @import "../components/base/pagination/pagination";

package/src/tokens/build/css/tokens.css

@@ -298,6 +298,7 @@
   --gl-illustration-isometric-base-top-fill-color: #e7e4f2; /** Used for the top surface of an isometric base platform. */
   --gl-illustration-isometric-base-front-fill-color: #d5d0e8; /** Used for the front face of an isometric base platform. */
   --gl-illustration-isometric-base-side-fill-color: #aea5d6; /** Used for the side face of an isometric base platform. */
+  --gl-nav-item-font-weight: 425; /** Used for the font weight of a navigation item */
   --data-viz-green-50: #ddfab7;
   --data-viz-green-100: #c6ed94;
   --data-viz-green-200: #b0d97b;
@@ -646,6 +647,10 @@
   --gl-link-mention-text-color-current: var(--gl-color-orange-800); /** Used for the mention link text color when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-100); /** Used for the mention link default background. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-100); /** Used for the mention link background when referencing the current user. */
+  --gl-nav-item-font-size: var(--gl-font-size-300); /** Used for the font size of a navigation item */
+  --gl-nav-item-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default navigation item in the default state. */
+  --gl-nav-item-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default navigation item in the hover state. */
+  --gl-nav-item-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default navigation item in the active state. */
   --gl-progress-bar-track-color: var(--gl-color-neutral-200); /** Used for the track color for all progress-bar variants. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /** Used for the skeleton loader background color. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /** Used for the animated shimmer effect in a skeleton loader. */
@@ -1005,6 +1010,12 @@
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
   --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
+  --gl-nav-item-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default navigation item in the default state. */
+  --gl-nav-item-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default navigation item in the focus state. */
+  --gl-nav-item-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected navigation item in the default state. */
+  --gl-nav-item-selected-background-color-default: var(--gl-action-selected-background-color-default); /** Used for the background of a selected navigation item in the default state. */
+  --gl-nav-item-selected-background-color-hover: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected navigation item in the hover state. */
+  --gl-nav-item-selected-background-color-active: var(--gl-action-selected-background-color-active); /** Used for the background of a selected navigation item in the active state. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1199,6 +1210,12 @@
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
+  --gl-nav-item-border-radius: var(--gl-action-border-radius); /** Used for the border radius of a navigation item */
+  --gl-nav-item-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default navigation item in the hover state. */
+  --gl-nav-item-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default navigation item in the focus state. */
+  --gl-nav-item-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default navigation item in the active state. */
+  --gl-nav-item-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
+  --gl-nav-item-selected-background-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the background of a selected navigation item in the focus state. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
   --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
@@ -1209,10 +1226,12 @@
   --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /** Used for the foreground of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
   --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
+  --gl-nav-item-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected navigation item in the focus state. */
   --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
   --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */
   --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /** Used for the border of a strong confirm action in the active state. */
   --gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-focus); /** Used for the foreground of a strong neutral action in the active state. */
   --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */
   --gl-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /** Used for the foreground of a confirm (positive) primary button in the active state. */
+  --gl-nav-item-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */
 }

package/src/tokens/build/css/tokens.dark.css

@@ -308,6 +308,7 @@
   --gl-illustration-isometric-base-top-fill-color: #32303c; /** Used for the top surface of an isometric base platform. */
   --gl-illustration-isometric-base-front-fill-color: #2b2932; /** Used for the front face of an isometric base platform. */
   --gl-illustration-isometric-base-side-fill-color: #23222b; /** Used for the side face of an isometric base platform. */
+  --gl-nav-item-font-weight: 425; /** Used for the font weight of a navigation item */
   --data-viz-green-50: #133a03;
   --data-viz-green-100: #1a4500;
   --data-viz-green-200: #275600;
@@ -665,6 +666,10 @@
   --gl-link-mention-text-color-current: var(--gl-color-orange-100); /** Used for the mention link text color when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-800); /** Used for the mention link default background. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-800); /** Used for the mention link background when referencing the current user. */
+  --gl-nav-item-font-size: var(--gl-font-size-300); /** Used for the font size of a navigation item */
+  --gl-nav-item-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default navigation item in the default state. */
+  --gl-nav-item-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default navigation item in the hover state. */
+  --gl-nav-item-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default navigation item in the active state. */
   --gl-progress-bar-track-color: var(--gl-color-neutral-700); /** Used for the track color for all progress-bar variants. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /** Used for the skeleton loader background color. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /** Used for the animated shimmer effect in a skeleton loader. */
@@ -1012,6 +1017,12 @@
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
   --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
+  --gl-nav-item-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default navigation item in the default state. */
+  --gl-nav-item-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default navigation item in the focus state. */
+  --gl-nav-item-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected navigation item in the default state. */
+  --gl-nav-item-selected-background-color-default: var(--gl-action-selected-background-color-default); /** Used for the background of a selected navigation item in the default state. */
+  --gl-nav-item-selected-background-color-hover: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected navigation item in the hover state. */
+  --gl-nav-item-selected-background-color-active: var(--gl-action-selected-background-color-active); /** Used for the background of a selected navigation item in the active state. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1201,6 +1212,12 @@
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
+  --gl-nav-item-border-radius: var(--gl-action-border-radius); /** Used for the border radius of a navigation item */
+  --gl-nav-item-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default navigation item in the hover state. */
+  --gl-nav-item-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default navigation item in the focus state. */
+  --gl-nav-item-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default navigation item in the active state. */
+  --gl-nav-item-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
+  --gl-nav-item-selected-background-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the background of a selected navigation item in the focus state. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
   --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
@@ -1210,9 +1227,11 @@
   --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
   --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
+  --gl-nav-item-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected navigation item in the focus state. */
   --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
   --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */
   --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /** Used for the border of a strong confirm action in the active state. */
   --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */
   --gl-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /** Used for the foreground of a confirm (positive) primary button in the active state. */
+  --gl-nav-item-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */
 }

package/src/tokens/build/figma/mode.dark.json

@@ -4795,6 +4795,196 @@
       ]
     }
   },
+  "🔒/nav-item-border-radius": {
+    "$value": "{action-border-radius}",
+    "$type": "dimension",
+    "$description": "Used for the border radius of a navigation item",
+    "$extensions": {
+      "com.figma.scopes": [
+        "CORNER_RADIUS"
+      ]
+    }
+  },
+  "🔒/nav-item-font-size": {
+    "$value": "{font-size-300}",
+    "$type": "dimension",
+    "$description": "Used for the font size of a navigation item",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FONT_SIZE"
+      ]
+    }
+  },
+  "🔒/nav-item-font-weight": {
+    "$value": 425,
+    "$type": "fontWeight",
+    "$description": "Used for the font weight of a navigation item",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FONT_WEIGHT"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-default": {
+    "$value": "{action-neutral-foreground-color-default}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-hover": {
+    "$value": "{action-neutral-foreground-color-hover}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-focus": {
+    "$value": "{action-neutral-foreground-color-focus}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-foreground-color-active": {
+    "$value": "{action-neutral-foreground-color-active}",
+    "$type": "color",
+    "$description": "Used for the foreground of a default navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-default": {
+    "$value": "{action-neutral-background-color-default}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-hover": {
+    "$value": "{action-neutral-background-color-hover}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-focus": {
+    "$value": "{action-neutral-background-color-focus}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-background-color-active": {
+    "$value": "{action-neutral-background-color-active}",
+    "$type": "color",
+    "$description": "Used for the background of a default navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-default": {
+    "$value": "{action-selected-foreground-color-default}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-hover": {
+    "$value": "{action-selected-foreground-color-hover}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-focus": {
+    "$value": "{action-selected-foreground-color-focus}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-foreground-color-active": {
+    "$value": "{action-selected-foreground-color-active}",
+    "$type": "color",
+    "$description": "Used for the foreground of a selected navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-default": {
+    "$value": "{action-selected-background-color-default}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the default state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-hover": {
+    "$value": "{action-selected-background-color-hover}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the hover state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-focus": {
+    "$value": "{action-selected-background-color-focus}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the focus state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
+  "🔒/nav-item-selected-background-color-active": {
+    "$value": "{action-selected-background-color-active}",
+    "$type": "color",
+    "$description": "Used for the background of a selected navigation item in the active state.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "🔒/progress-bar-indicator-color-default": {
     "$value": "{status-info-icon-color}",
     "$type": "color",