@rossigee/clarity-ui 18.2.1-fixed

package/layout/tabs/_tabs.clarity.scss

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:meta';
+@use '../../styles/mixins';
+@use 'variables.tabs' as tabs-variables;
+@use 'mixins.tabs' as tabs-mixins;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.tabs');
+@include mixins.exports('tabs.clarity') {
+  @media screen {
+    section[aria-hidden='true'] {
+      display: none;
+    }
+  }
+
+  [data-hidden='true'] {
+    display: none;
+  }
+
+  button.nav-link {
+    border-radius: 0;
+    text-transform: capitalize;
+    min-width: 0;
+  }
+
+  .tabs-overflow {
+    position: relative;
+
+    .dropdown-menu {
+      padding: density.$clr-base-offset-0;
+      box-shadow: tokens.$cds-alias-object-shadow-100;
+      overflow: hidden;
+    }
+
+    .btn {
+      border-radius: tokens.$cds-global-space-0;
+    }
+  }
+
+  .tab-content {
+    display: inline;
+  }
+
+  .tabs-vertical {
+    display: flex;
+
+    // Must be direct child, so horizontal tabs can be nested in vertical tabs
+    & > .nav {
+      height: auto;
+      box-shadow: none;
+      flex-direction: column;
+      align-items: stretch;
+      margin-right: density.$clr-base-horizontal-offset-2xl;
+      overflow: auto;
+      flex-shrink: 0;
+      padding: density.$clr-base-vertical-offset-xs density.$clr-base-horizontal-offset-xs;
+      width: mixins.baselinePx(240);
+      min-width: tokens.$cds-global-space-12;
+      gap: density.$clr-base-gap-s;
+
+      .nav-link {
+        text-align: left;
+        padding-left: density.$clr-base-horizontal-offset-l;
+        justify-content: start;
+        border: none;
+        flex-shrink: 0;
+        margin-top: 0;
+        margin-left: 0;
+        width: 100%;
+
+        @include tabs-mixins.nav-link-border-appearance('left');
+
+        &.btn {
+          margin-bottom: density.$clr-base-offset-0;
+        }
+
+        &.active {
+          &::before {
+            border-color: tokens.$cds-alias-object-interaction-background-highlight;
+          }
+        }
+      }
+    }
+  }
+
+  .tabs-actions {
+    display: inline-flex;
+    width: 100%;
+    height: 100%;
+
+    button {
+      margin: 0;
+    }
+
+    &[position~='left'] {
+      justify-content: start;
+    }
+
+    &[position~='right'] {
+      justify-content: end;
+    }
+  }
+}

package/layout/tabs/_variables.tabs.scss

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// Usage: ../layout/nav/_nav.clarity.scss
+$clr-nav-box-shadow-color: var(--clr-nav-box-shadow-color) !default;
+$clr-nav-active-bg-color: var(--clr-nav-active-bg-color) !default;
+$clr-nav-selected-hover-background-color: var(--clr-nav-selected-hover-background-color) !default;
+$clr-nav-selected-active-background-color: var(--clr-nav-selected-active-background-color) !default;
+
+$clr-nav-link-color: var(--clr-nav-link-color) !default;
+$clr-nav-link-active-color: var(--clr-nav-link-active-color) !default;
+
+$clr-nav-selected-bg-color: var(--clr-nav-selected-bg-color) !default;
+$clr-nav-hover-bg-color: var(--clr-nav-hover-bg-color) !default;

package/layout/vertical-nav/_mixins.vertical-nav.scss

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use 'variables.vertical-nav' as vertical-nav-variables;
+@use '../tabs/mixins.tabs' as tabs-mixins;
+
+@mixin vertical-nav-divider($position: 'border-top') {
+  #{$position}: vertical-nav-variables.$clr-vertical-nav-trigger-divider-border-width solid
+    vertical-nav-variables.$clr-vertical-nav-trigger-divider-border-color;
+}
+@mixin vertical-nav-link-colors() {
+  color: vertical-nav-variables.$clr-vertical-nav-item-color;
+
+  @include tabs-mixins.nav-link-border-appearance('left', true);
+
+  &.active {
+    color: vertical-nav-variables.$clr-vertical-nav-item-active-color;
+    background-color: vertical-nav-variables.$clr-vertical-nav-selected-bg-color;
+
+    &::before {
+      border-color: tokens.$cds-alias-object-interaction-background-highlight;
+    }
+
+    .nav-icon {
+      fill: vertical-nav-variables.$clr-vertical-nav-icon-active-color;
+    }
+
+    &:hover {
+      background-color: vertical-nav-variables.$clr-vertical-nav-selected-hover-bg-color;
+    }
+
+    &:active {
+      background-color: vertical-nav-variables.$clr-vertical-nav-selected-active-bg-color;
+    }
+  }
+
+  &:hover {
+    color: vertical-nav-variables.$clr-vertical-nav-item-active-color;
+    background-color: vertical-nav-variables.$clr-vertical-nav-hover-bg-color;
+    text-decoration: none;
+  }
+
+  &:active {
+    color: vertical-nav-variables.$clr-vertical-nav-active-color;
+    background-color: vertical-nav-variables.$clr-vertical-nav-active-bg-color;
+  }
+}

package/layout/vertical-nav/_properties.vertical-nav.scss

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use './variables.vertical-nav' as vertical-nav-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('vertical-nav.properties') {
+  @include mixins.root-or-host() {
+    --clr-vertical-nav-item-active-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
+    --clr-vertical-nav-item-top-level-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
+    --clr-vertical-nav-header-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
+    --clr-vertical-nav-trigger-divider-border-width: #{tokens.$cds-global-space-1};
+
+    &,
+    & [clr-density] {
+      // Vertical Nav - Icons
+      --clr-vertical-nav-icon-size: #{density.$clr-base-icon-size-s};
+      --clr-vertical-nav-icon-right-margin: #{density.$clr-base-horizontal-offset-s};
+      --clr-vertical-nav-collapsed-caret-size: #{density.$clr-base-icon-size-2xl};
+
+      // Vertical Nav - Align
+      --clr-vertical-nav-item-padding: #{density.$clr-base-vertical-offset-m} #{density.$clr-base-horizontal-offset-m}
+        #{density.$clr-base-vertical-offset-m} #{density.$clr-base-horizontal-offset-xl};
+      --clr-vertical-nav-item-child-padding: #{density.$clr-base-vertical-offset-m}
+        #{density.$clr-base-horizontal-offset-m} #{density.$clr-base-vertical-offset-m}
+        calc(
+          #{vertical-nav-variables.$clr-vertical-nav-icon-size} + #{density.$clr-base-horizontal-offset-xl} +
+            #{density.$clr-base-gap-xs}
+        );
+      --clr-vertical-nav-item-height: #{density.$clr-base-row-height-m};
+      --clr-vertical-nav-min-width: #{density.$clr-base-layout-space-3xl};
+      --clr-vertical-nav-toggle-button-size: #{density.$clr-base-row-height-m};
+
+      // Vertical Nav - Header
+      --clr-vertical-nav-header-padding: #{density.$clr-base-vertical-offset-multi-row-m}
+        #{density.$clr-base-horizontal-offset-xl};
+    }
+
+    &,
+    & [cds-theme] {
+      /* Vertical Nav */
+      --clr-vertical-nav-divider-color: #{tokens.$cds-alias-object-border-color};
+      --clr-vertical-nav-icon-active-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-vertical-nav-item-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-vertical-nav-item-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+
+      // Selected background colors
+      --clr-vertical-nav-selected-bg-color: var(--cds-alias-object-interaction-background-shade-selected);
+      --clr-vertical-nav-selected-hover-bg-color: var(--cds-alias-object-interaction-background-shade-selected-hover);
+      --clr-vertical-nav-selected-active-bg-color: var(--cds-alias-object-interaction-background-shade-selected-active);
+
+      // NOT selected background colors
+      --clr-vertical-nav-bg-color: var(--cds-alias-object-interaction-background-shade);
+      --clr-vertical-nav-hover-bg-color: var(--cds-alias-object-interaction-background-shade-hover);
+      --clr-vertical-nav-active-bg-color: var(--cds-alias-object-interaction-background-shade-active);
+      --clr-vertical-nav-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+
+      // Vertical Nav - Trigger
+      --clr-vertical-nav-toggle-icon-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-vertical-nav-toggle-icon-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-vertical-nav-toggle-icon-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-vertical-nav-toggle-icon-disabled-color: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-vertical-nav-trigger-divider-border-color: #{tokens.$cds-alias-object-border-color};
+    }
+  }
+}

package/layout/vertical-nav/_variables.vertical-nav.scss

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+// Usage: ./_vertical-nav.clarity.scss
+
+/* Vertical Nav */
+$clr-vertical-nav-divider-color: var(--clr-vertical-nav-divider-color) !default;
+
+// Vertical Nav - Icons
+$clr-vertical-nav-icon-size: var(--clr-vertical-nav-icon-size) !default;
+$clr-vertical-nav-icon-right-margin: var(--clr-vertical-nav-icon-right-margin) !default;
+$clr-vertical-nav-icon-active-color: var(--clr-vertical-nav-icon-active-color) !default;
+$clr-vertical-nav-collapsed-caret-size: var(--clr-vertical-nav-collapsed-caret-size) !default;
+
+// Vertical Nav - Align
+$clr-vertical-nav-item-color: var(--clr-vertical-nav-item-color) !default;
+$clr-vertical-nav-item-active-color: var(--clr-vertical-nav-item-active-color) !default;
+$clr-vertical-nav-bg-color: var(--clr-vertical-nav-bg-color) !default;
+$clr-vertical-nav-item-padding: var(--clr-vertical-nav-item-padding) !default;
+$clr-vertical-nav-item-child-padding: var(--clr-vertical-nav-item-child-padding) !default;
+$clr-vertical-nav-item-height: var(--clr-vertical-nav-item-height) !default;
+$clr-vertical-nav-min-width: var(--clr-vertical-nav-min-width) !default;
+$clr-vertical-nav-item-active-font-weight: var(--clr-vertical-nav-item-active-font-weight) !default;
+
+$clr-vertical-nav-selected-bg-color: var(--clr-vertical-nav-selected-bg-color) !default;
+$clr-vertical-nav-selected-hover-bg-color: var(
+  --clr-vertical-nav-selected-hover-bg-color
+); // var(--clr-color-neutral-0);
+$clr-vertical-nav-selected-active-bg-color: var(
+  --clr-vertical-nav-selected-active-bg-color
+); // var(--clr-color-neutral-0);
+$clr-vertical-nav-active-bg-color: var(--clr-vertical-nav-active-bg-color) !default;
+$clr-vertical-nav-active-color: var(--clr-vertical-nav-active-color) !default;
+$clr-vertical-nav-item-top-level-font-weight: var(--clr-vertical-nav-item-top-level-font-weight) !default;
+$clr-vertical-nav-hover-bg-color: var(--clr-vertical-nav-hover-bg-color) !default;
+
+// Vertical Nav - Trigger
+$clr-vertical-nav-toggle-icon-color: var(--clr-vertical-nav-toggle-icon-color) !default;
+$clr-vertical-nav-toggle-icon-hover-color: var(--clr-vertical-nav-toggle-icon-hover-color) !default;
+$clr-vertical-nav-toggle-icon-active-color: var(--clr-vertical-nav-toggle-icon-active-color) !default;
+$clr-vertical-nav-toggle-icon-disabled-color: var(--clr-vertical-nav-toggle-icon-disabled-color) !default;
+$clr-vertical-nav-toggle-button-size: var(--clr-vertical-nav-toggle-button-size) !default;
+$clr-vertical-nav-trigger-divider-border-color: var(--clr-vertical-nav-trigger-divider-border-color) !default;
+$clr-vertical-nav-trigger-divider-border-width: var(--clr-vertical-nav-trigger-divider-border-width) !default;
+
+// Vertical Nav - Header
+$clr-vertical-nav-header-font-weight: var(--clr-vertical-nav-header-font-weight) !default;
+$clr-vertical-nav-header-padding: var(--clr-vertical-nav-header-padding) !default;