@rossigee/clarity-ui 18.2.1-fixed

package/popover/dropdown/_dropdown.clarity.scss

@@ -0,0 +1,326 @@
+/*
+ * 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 'menu-mixins.clarity.scss' as menu-mixins;
+@use '../../button/variables.buttons' as button-variables;
+@use '../../image/icons.clarity';
+@use '../../image/images.clarity';
+@use '../../styles/mixins';
+@use 'variables.dropdown' as dropdown-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../layout/tabs/mixins.tabs' as tabs-mixins;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.dropdown');
+@include mixins.exports('dropdown.clarity') {
+  .dropdown {
+    position: relative;
+    display: inline-block;
+
+    .dropdown-toggle {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+      margin: 0;
+      white-space: nowrap;
+      cursor: pointer;
+
+      cds-icon,
+      clr-icon {
+        &[shape^='caret'],
+        &[shape^='angle'] {
+          color: inherit;
+
+          &:not([size]) {
+            @include mixins.equilateral(density.$clr-base-icon-size-s);
+          }
+        }
+      }
+
+      &.btn {
+        text-overflow: unset;
+
+        cds-icon,
+        clr-icon {
+          &[shape^='caret'],
+          &[shape^='angle'] {
+            right: button-variables.$clr-btn-horizontal-padding;
+          }
+        }
+      }
+
+      &:not(.btn) {
+        padding: 0;
+        color: dropdown-variables.$clr-dropdown-active-text-color;
+
+        cds-icon,
+        clr-icon {
+          &[shape^='caret'],
+          &[shape^='angle'] {
+            right: 0;
+          }
+        }
+      }
+    }
+
+    .dropdown-menu {
+      margin-top: density.$clr-base-vertical-offset-2xs;
+    }
+
+    button.dropdown-toggle:not(.btn) {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      color: dropdown-variables.$clr-dropdown-active-text-color;
+    }
+  }
+
+  //Dropdown Menu
+  .dropdown-menu > * {
+    display: block;
+    white-space: nowrap;
+  }
+
+  .dropdown-menu {
+    @include menu-mixins.generate-dropdown-menu();
+
+    .dropdown-header {
+      @include menu-mixins.generate-dropdown-header();
+
+      & ~ .dropdown-item,
+      & ~ .dropdown > .dropdown-item {
+        padding-left: density.$clr-base-horizontal-offset-2xl;
+      }
+    }
+
+    .btn,
+    .btn-secondary,
+    .btn-info,
+    .btn-outline,
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-warning,
+    .btn-outline-danger,
+    .btn-outline-success,
+    .btn-danger,
+    .btn-primary,
+    .btn-warning,
+    .btn-success,
+    .btn-link,
+    .dropdown-item {
+      @include menu-mixins.generate-dropdown-item();
+      @include mixins.overflow-ellipsis(true);
+      @include tabs-mixins.nav-link-border-appearance('left');
+
+      &.active {
+        &::before {
+          border-color: tokens.$cds-alias-object-interaction-background-highlight;
+        }
+      }
+
+      &.expandable {
+        padding-right: density.$clr-base-horizontal-offset-xs;
+
+        &::after {
+          content: '';
+          mask: icons.generateCaretIcon("'none'");
+          mask-repeat: no-repeat;
+          mask-size: cover;
+          background-color: dropdown-variables.$clr-dropdown-item-color;
+
+          @include mixins.equilateral(density.$clr-base-icon-size-xs);
+
+          transform: rotate(-90deg);
+          margin-left: auto;
+        }
+
+        &.active::after {
+          background-color: dropdown-variables.$clr-dropdown-item-selected-color;
+        }
+
+        &:hover::after {
+          background-color: dropdown-variables.$clr-dropdown-item-hover-color;
+        }
+
+        &:active::after {
+          background-color: dropdown-variables.$clr-dropdown-item-active-color;
+        }
+
+        &.disabled,
+        &:disabled {
+          &::after {
+            background-color: dropdown-variables.$clr-dropdown-item-disabled-color;
+          }
+        }
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      &:focus {
+        @include menu-mixins.dropdown-item-outline();
+      }
+    }
+
+    .btn,
+    .dropdown-item {
+      @include menu-mixins.generate-dropdown-item-height();
+    }
+
+    a.dropdown-item {
+      text-decoration: none;
+    }
+
+    .dropdown-divider {
+      border-bottom: dropdown-variables.$clr-dropdown-divider-border-width solid
+        dropdown-variables.$clr-dropdown-divider-color;
+      margin: density.$clr-base-vertical-offset-l density.$clr-base-horizontal-offset-l;
+    }
+  }
+
+  //Directions
+  .btn-group-overflow,
+  .tabs-overflow,
+  .dropdown {
+    $dropdown-menu-positional-nudge: density.$clr-base-vertical-offset-2xs;
+
+    &.open > .dropdown-menu,
+    &.open > .dropdown-menu-wrapper > .dropdown-menu {
+      visibility: visible;
+    }
+
+    &.bottom-left > .dropdown-menu,
+    &.bottom-right > .dropdown-menu {
+      top: 100%;
+      bottom: auto;
+      margin: $dropdown-menu-positional-nudge 0 0 0;
+    }
+
+    &.bottom-left > .dropdown-menu {
+      left: 0;
+      right: auto;
+    }
+
+    &.bottom-right > .dropdown-menu {
+      right: 0;
+      left: auto;
+    }
+
+    &.top-left > .dropdown-menu,
+    &.top-right > .dropdown-menu {
+      top: auto;
+      bottom: 100%;
+      margin: 0 0 $dropdown-menu-positional-nudge;
+    }
+
+    &.top-left > .dropdown-menu {
+      left: 0;
+      right: auto;
+    }
+
+    &.top-right > .dropdown-menu {
+      right: 0;
+      left: auto;
+    }
+
+    &.left-top > .dropdown-menu,
+    &.left-bottom > .dropdown-menu {
+      right: 100%;
+      left: auto;
+      margin: 0 $dropdown-menu-positional-nudge 0 0;
+    }
+
+    &.left-bottom > .dropdown-menu {
+      top: 0;
+      bottom: auto;
+    }
+
+    &.left-top > .dropdown-menu {
+      bottom: 0;
+      top: auto;
+    }
+
+    &.right-top > .dropdown-menu,
+    &.right-bottom > .dropdown-menu {
+      left: 100%;
+      right: auto;
+      margin: 0 0 0 $dropdown-menu-positional-nudge;
+    }
+
+    &.right-bottom > .dropdown-menu {
+      top: 0;
+      bottom: auto;
+    }
+
+    &.right-top > .dropdown-menu {
+      bottom: 0;
+      top: auto;
+    }
+
+    // nested dropdown (submenu)
+    .dropdown {
+      $clr-dropdown-submenu-overlap-margin: #{tokens.$cds-global-space-1};
+      $clr-dropdown-submenu-vertical-margin: calc(-1 * #{density.$clr-base-vertical-offset-2xl});
+      // -1 is to account for the border that shifts the menu down by 1 pixel
+
+      .dropdown-menu {
+        border-color: dropdown-variables.$clr-dropdown-child-border-color;
+        position: absolute;
+      }
+
+      &.left-top {
+        > .dropdown-menu,
+        > .dropdown-menu-wrapper > .dropdown-menu {
+          inset: 0 100% auto auto;
+          margin-top: $clr-dropdown-submenu-vertical-margin;
+          margin-right: $clr-dropdown-submenu-overlap-margin;
+        }
+      }
+
+      &.right-top {
+        > .dropdown-menu,
+        > .dropdown-menu-wrapper > .dropdown-menu {
+          inset: 0 auto auto 100%;
+          margin-top: $clr-dropdown-submenu-vertical-margin;
+          margin-left: $clr-dropdown-submenu-overlap-margin;
+        }
+      }
+
+      &.left-bottom {
+        > .dropdown-menu,
+        > .dropdown-menu-wrapper > .dropdown-menu {
+          inset: auto 100% 0 auto;
+          margin-bottom: $clr-dropdown-submenu-vertical-margin;
+          margin-right: $clr-dropdown-submenu-overlap-margin;
+        }
+      }
+
+      &.right-bottom {
+        > .dropdown-menu,
+        > .dropdown-menu-wrapper > .dropdown-menu {
+          inset: auto auto 0 100%;
+          margin-bottom: $clr-dropdown-submenu-vertical-margin;
+          margin-left: $clr-dropdown-submenu-overlap-margin;
+        }
+      }
+    }
+  }
+
+  .clr-popover-content > .dropdown-menu {
+    visibility: visible;
+    position: static;
+    overflow-y: auto;
+
+    .dropdown-header,
+    .dropdown-item,
+    .dropdown > .dropdown-item {
+      min-height: density.$clr-base-row-height-s;
+    }
+  }
+}

package/popover/dropdown/_menu-mixins.clarity.scss

@@ -0,0 +1,132 @@
+/*
+ * 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:map';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables';
+@use 'variables.dropdown' as dropdown-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@mixin generate-dropdown-menu() {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  //Dimensions
+  min-width: mixins.baselinePx(120);
+  max-width: mixins.baselinePx(360);
+
+  //Other
+  background-color: dropdown-variables.$clr-dropdown-bg-color;
+  border-width: tokens.$cds-alias-object-border-width-100;
+  border-style: solid;
+  border-color: dropdown-variables.$clr-dropdown-border-color;
+  border-radius: density.$clr-base-border-radius-s;
+  box-shadow: tokens.$cds-alias-object-shadow-200;
+  padding: density.$clr-base-vertical-offset-l density.$clr-base-layout-space-4xs;
+  visibility: hidden;
+  z-index: map.get(variables.$clr-layers, dropdown-menu);
+}
+@mixin generate-dropdown-item() {
+  @include mixins.generate-typography-token(
+    'SECONDARY-13-RG-EXP',
+    (
+      font-weight: dropdown-variables.$clr-dropdown-item-font-weight,
+    )
+  );
+
+  color: dropdown-variables.$clr-dropdown-item-color;
+  background-color: dropdown-variables.$clr-dropdown-item-bg-color;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  gap: density.$clr-base-gap-xs;
+  align-items: center;
+  height: auto;
+  margin: 0;
+  width: 100%;
+  text-transform: none;
+
+  &.active {
+    color: dropdown-variables.$clr-dropdown-item-selected-color;
+    background-color: dropdown-variables.$clr-dropdown-item-selected-bg-color;
+  }
+
+  &:hover {
+    color: dropdown-variables.$clr-dropdown-item-hover-color;
+    background-color: dropdown-variables.$clr-dropdown-item-hover-bg-color;
+    text-decoration: none;
+
+    &.active {
+      background-color: dropdown-variables.$clr-dropdown-item-selected-hover-bg-color;
+    }
+  }
+
+  &:active {
+    color: dropdown-variables.$clr-dropdown-item-active-color;
+    background-color: dropdown-variables.$clr-dropdown-item-active-bg-color;
+
+    &.active {
+      background-color: dropdown-variables.$clr-dropdown-item-selected-active-bg-color;
+    }
+  }
+
+  &:focus {
+    z-index: inherit;
+  }
+
+  &.disabled,
+  &:disabled {
+    pointer-events: none;
+    color: dropdown-variables.$clr-dropdown-item-disabled-color;
+    background-color: dropdown-variables.$clr-dropdown-item-disabled-bg-color;
+    user-select: none;
+
+    &:hover {
+      background: none;
+    }
+
+    &:active {
+      background: none;
+      box-shadow: none;
+    }
+  }
+}
+@mixin generate-dropdown-header() {
+  display: block;
+  color: dropdown-variables.$clr-dropdown-header-color;
+
+  @include mixins.overflow-ellipsis(true);
+
+  // Typography
+
+  @include mixins.generate-typography-token(
+    'SECONDARY-13-MD-EXP',
+    (
+      font-weight: dropdown-variables.$clr-dropdown-header-font-weight,
+    )
+  );
+
+  padding: 0 density.$clr-base-horizontal-offset-l;
+  margin: 0;
+}
+@mixin generate-dropdown-item-height() {
+  padding: 0 density.$clr-base-horizontal-offset-2xl 0 density.$clr-base-horizontal-offset-l;
+
+  @media screen and (max-width: map.get(variables.$clr-grid-breakpoints, sm)) {
+    padding: density.$clr-base-vertical-offset-s density.$clr-base-horizontal-offset-2xl;
+  }
+}
+@mixin dropdown-item-outline() {
+  outline-color: Highlight;
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+  outline-offset: calc(-1 * tokens.$cds-global-space-2);
+}

package/popover/dropdown/_properties.dropdown.scss

@@ -0,0 +1,50 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('dropdown.properties') {
+  @include mixins.root-or-host() {
+    --clr-dropdown-divider-border-width: #{tokens.$cds-global-space-1};
+    --clr-dropdown-header-font-weight: #{tokens.$cds-alias-typography-font-weight-medium};
+    --clr-dropdown-item-font-weight: #{tokens.$cds-alias-typography-secondary-font-weight};
+
+    &,
+    & [cds-theme] {
+      // Usage: ../popover/dropdown/_dropdown.clarity.scss
+      --clr-dropdown-active-text-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-dropdown-bg-color: #{tokens.$cds-alias-object-container-background};
+      --clr-dropdown-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-dropdown-divider-color: #{tokens.$cds-alias-object-border-color-tint};
+      --clr-dropdown-child-border-color: #{tokens.$cds-alias-object-border-color};
+
+      // Usage:  ../data/datagrid/_datagrid.clarity.scss
+      // Usage:  ../emphasis/alert/_alert.clarity.scss
+      --clr-dropdown-text-color: #{tokens.$cds-alias-object-interaction-color};
+
+      // Usage: ../popover/dropdown/_dropdown.clarity.scss
+      // Dropdown Header
+      --clr-dropdown-header-color: #{tokens.$cds-alias-typography-color-400};
+
+      // Usage: ../popover/dropdown/_menu-mixins.clarity.scss
+      // Dropdown Item
+      --clr-dropdown-item-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-dropdown-item-bg-color: transparent;
+      --clr-dropdown-item-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-dropdown-item-hover-bg-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-dropdown-item-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-dropdown-item-active-bg-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-dropdown-item-selected-color: #{tokens.$cds-alias-object-interaction-color-selected};
+      --clr-dropdown-item-selected-bg-color: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-dropdown-item-selected-hover-bg-color: var(--cds-alias-object-interaction-background-selected-hover);
+      --clr-dropdown-item-selected-active-bg-color: var(--cds-alias-object-interaction-background-selected-active);
+      --clr-dropdown-item-disabled-color: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-dropdown-item-disabled-bg-color: transparent; // #{tokens.$cds-alias-object-interaction-background-disabled};
+    }
+  }
+}

package/popover/dropdown/_variables.dropdown.scss

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+$clr-dropdown-active-text-color: var(--clr-dropdown-active-text-color) !default;
+$clr-dropdown-bg-color: var(--clr-dropdown-bg-color) !default;
+$clr-dropdown-border-color: var(--clr-dropdown-border-color) !default;
+$clr-dropdown-divider-color: var(--clr-dropdown-divider-color) !default;
+$clr-dropdown-divider-border-width: var(--clr-dropdown-divider-border-width) !default;
+$clr-dropdown-child-border-color: var(--clr-dropdown-child-border-color) !default;
+
+// Usage:  ../data/datagrid/_datagrid.clarity.scss
+// Usage:  ../emphasis/alert/_alert.clarity.scss
+$clr-dropdown-text-color: var(--clr-dropdown-text-color) !default;
+
+// Dropdown Header
+$clr-dropdown-header-color: var(--clr-dropdown-header-color) !default;
+$clr-dropdown-header-font-weight: var(--clr-dropdown-header-font-weight) !default;
+
+// Usage: ../popover/dropdown/_menu-mixins.clarity.scss
+// Dropdown Item
+$clr-dropdown-item-font-weight: var(--clr-dropdown-item-font-weight) !default;
+$clr-dropdown-item-color: var(--clr-dropdown-item-color) !default;
+$clr-dropdown-item-bg-color: var(--clr-dropdown-item-bg-color) !default;
+$clr-dropdown-item-hover-color: var(--clr-dropdown-item-hover-color) !default;
+$clr-dropdown-item-hover-bg-color: var(--clr-dropdown-item-hover-bg-color) !default;
+$clr-dropdown-item-active-color: var(--clr-dropdown-item-active-color) !default;
+$clr-dropdown-item-active-bg-color: var(--clr-dropdown-item-active-bg-color) !default;
+$clr-dropdown-item-selected-color: var(--clr-dropdown-item-selected-color) !default;
+$clr-dropdown-item-selected-bg-color: var(--clr-dropdown-item-selected-bg-color) !default;
+$clr-dropdown-item-selected-hover-bg-color: var(--clr-dropdown-item-selected-hover-bg-color) !default;
+$clr-dropdown-item-selected-active-bg-color: var(--clr-dropdown-item-selected-active-bg-color) !default;
+$clr-dropdown-item-disabled-color: var(--clr-dropdown-item-disabled-color) !default;
+$clr-dropdown-item-disabled-bg-color: var(--clr-dropdown-item-disabled-bg-color) !default;

package/popover/signpost/_properties.signpost.scss

@@ -0,0 +1,34 @@
+/*
+ * 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.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('signpost.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [clr-density] {
+      --clr-signpost-border-radius: #{density.$clr-base-border-radius-s};
+      --clr-signpost-pointer-size: #{density.$clr-base-layout-space-s};
+    }
+
+    &,
+    & [cds-theme] {
+      // Usage: ../signpost/_signpost.clarity.scss
+      --clr-signpost-content-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-signpost-content-bg-color: #{tokens.$cds-alias-object-container-background};
+      --clr-signpost-content-border-color: #{tokens.$cds-alias-object-interaction-border-color};
+      --clr-signpost-action-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-signpost-action-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-signpost-action-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-signpost-pointer-border: var(--clr-signpost-pointer-size) solid var(--clr-signpost-content-border-color);
+      --clr-signpost-pointer-invisible-border: var(--clr-signpost-pointer-size) solid transparent;
+      --clr-signpost-pointer-pseudo-border: var(--clr-signpost-pointer-size) solid var(--clr-signpost-content-bg-color);
+    }
+  }
+}