@rossigee/clarity-ui 18.2.1-fixed

package/progress/spinner/_properties.spinner.scss

@@ -0,0 +1,37 @@
+/*
+ * 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;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('spinner.properties') {
+  @include mixins.root-or-host() {
+    --clr-spinner-inside-button-stroke-width: #{tokens.$cds-alias-object-border-width-200};
+    --clr-spinner-inside-treeview-stroke-width: #{tokens.$cds-alias-object-border-width-200};
+    --clr-spinner-border-radius: #{tokens.$cds-alias-object-border-radius-300};
+
+    &,
+    & [clr-density] {
+      --clr-spinner-default-size: #{density.$clr-base-spinner-l};
+      --clr-spinner-medium-size: #{density.$clr-base-spinner-m};
+      --clr-spinner-small-size: #{density.$clr-base-spinner-s};
+      --clr-spinner-default-stroke-width: #{density.$clr-base-spinner-stroke-l};
+      --clr-spinner-medium-stroke-width: #{density.$clr-base-spinner-stroke-m};
+      --clr-spinner-small-stroke-width: #{density.$clr-base-spinner-stroke-s};
+      --clr-spinner-margin-right: #{density.$clr-base-horizontal-offset-l};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-spinner-fill-bg-color: #{tokens.$cds-alias-object-container-background-shade};
+      --clr-spinner-fill-inverse-bg-color: #{tokens.$cds-alias-object-container-background-inverse-tint};
+      --clr-spinner-fill-color: #{tokens.$cds-alias-status-info};
+      --clr-spinner-fill-inverse-color: #{tokens.$cds-alias-status-info-tint};
+    }
+  }
+}

package/progress/spinner/_spinner.clarity.scss

@@ -0,0 +1,148 @@
+/*
+ * 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 '../../image/icons.clarity';
+@use '../../styles/mixins';
+@use 'variables.spinner' as spinner-variables;
+@use 'mixins.spinner' as spinner-mixins;
+@use '../../button/variables.buttons' as button-variables;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.spinner');
+@include mixins.exports('spinner.clarity') {
+  .spinner {
+    // spinner-lg is the default
+    position: relative;
+    display: inline-block;
+
+    @include mixins.min-equilateral(spinner-variables.$clr-spinner-default-size);
+    @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+
+    animation: spin 1s linear infinite;
+    margin-right: 0;
+    padding: 0;
+    text-indent: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &::after {
+      content: '';
+
+      @include mixins.min-equilateral(spinner-variables.$clr-spinner-default-size);
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      clip-path: ellipse(100% 53.5% at 0 0);
+      border: spinner-variables.$clr-spinner-default-stroke-width solid spinner-variables.$clr-spinner-fill-color;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-radius: spinner-variables.$clr-spinner-border-radius;
+    }
+
+    &::before {
+      content: '';
+
+      @include mixins.min-equilateral(spinner-variables.$clr-spinner-default-size);
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      border: spinner-variables.$clr-spinner-default-stroke-width solid spinner-variables.$clr-spinner-fill-bg-color;
+      border-radius: spinner-variables.$clr-spinner-border-radius;
+    }
+
+    &.spinner-md {
+      @include spinner-mixins.spinner-size-before-after(
+        spinner-variables.$clr-spinner-medium-size,
+        spinner-variables.$clr-spinner-medium-stroke-width
+      );
+    }
+
+    &.spinner-inline,
+    &.spinner-sm {
+      @include spinner-mixins.spinner-size-before-after(
+        spinner-variables.$clr-spinner-small-size,
+        spinner-variables.$clr-spinner-small-stroke-width
+      );
+    }
+
+    &.spinner-inline {
+      vertical-align: text-bottom; //To align with text properly
+      margin-right: spinner-variables.$clr-spinner-margin-right;
+    }
+
+    &.spinner-inverse {
+      @include spinner-mixins.spinner-color-before-after(
+        spinner-variables.$clr-spinner-fill-inverse-color,
+        spinner-variables.$clr-spinner-fill-inverse-bg-color
+      );
+    }
+
+    &.spinner-neutral-0 {
+      // needed for loading banner alerts in core
+
+      @include spinner-mixins.spinner-color-before-after(
+        spinner-variables.$clr-spinner-fill-color,
+        rgba(transparent, 1)
+      );
+    }
+
+    &.spinner-check {
+      animation: none;
+
+      &::after,
+      &::before {
+        border: none;
+      }
+      // Using mask instead of background-image so we can use the CSS properties
+      // and support both light / dark themes.
+      mask: icons.generateCheckIcon();
+      mask-repeat: no-repeat;
+      background-color: button-variables.$clr-btn-success-checked-color;
+    }
+  }
+
+  //Spinners inside of buttons
+  .btn {
+    .spinner {
+      margin-right: 0;
+
+      @include spinner-mixins.spinner-size-before-after(
+        density.$clr-base-icon-size-s,
+        spinner-variables.$clr-spinner-inside-button-stroke-width
+      );
+    }
+  }
+
+  .btn-icon:not(.btn-sm) {
+    .spinner {
+      @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+    }
+  }
+
+  // Spinners inside treeview
+  .clr-treenode-spinner-container {
+    .spinner {
+      @include spinner-mixins.spinner-size-before-after(
+        density.$clr-base-icon-size-s,
+        spinner-variables.$clr-spinner-inside-treeview-stroke-width
+      );
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

package/progress/spinner/_variables.spinner.scss

@@ -0,0 +1,25 @@
+/*
+ * 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-spinner-default-size: var(--clr-spinner-default-size) !default;
+$clr-spinner-medium-size: var(--clr-spinner-medium-size) !default;
+$clr-spinner-small-size: var(--clr-spinner-small-size) !default;
+
+$clr-spinner-inside-button-stroke-width: var(--clr-spinner-inside-button-stroke-width) !default;
+$clr-spinner-inside-treeview-stroke-width: var(--clr-spinner-inside-treeview-stroke-width) !default;
+
+$clr-spinner-default-stroke-width: var(--clr-spinner-default-stroke-width) !default;
+$clr-spinner-medium-stroke-width: var(--clr-spinner-medium-stroke-width) !default;
+$clr-spinner-small-stroke-width: var(--clr-spinner-small-stroke-width) !default;
+
+$clr-spinner-fill-color: var(--clr-spinner-fill-color) !default;
+$clr-spinner-fill-bg-color: var(--clr-spinner-fill-bg-color) !default;
+$clr-spinner-fill-inverse-color: var(--clr-spinner-fill-inverse-color) !default;
+$clr-spinner-fill-inverse-bg-color: var(--clr-spinner-fill-inverse-bg-color) !default;
+
+$clr-spinner-border-radius: var(--clr-spinner-border-radius) !default;
+
+$clr-spinner-margin-right: var(--clr-spinner-margin-right) !default;

package/stepper/_properties.stepper.scss

@@ -0,0 +1,29 @@
+/*
+ * 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 '../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('../collapsible-panel/properties.collapsible-panel');
+@include mixins.exports('stepper.properties') {
+  @include mixins.root-or-host() {
+    &,
+    [cds-theme] {
+      --clr-stepper-error-color: #{tokens.$cds-alias-status-danger};
+      --clr-stepper-complete-color: #{tokens.$cds-alias-status-success};
+      --clr-stepper-header-left-indicator: inset #{tokens.$cds-global-space-5} 0 0
+        #{tokens.$cds-alias-status-neutral-tint};
+      --clr-stepper-header-left-current-indicator: inset #{tokens.$cds-global-space-5} 0 0
+        #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-stepper-header-left-complete-indicator: inset #{tokens.$cds-global-space-5} 0 0
+        #{tokens.$cds-alias-status-success};
+      --clr-stepper-header-left-error-indicator: inset #{tokens.$cds-global-space-5} 0 0
+        #{tokens.$cds-alias-status-danger};
+    }
+  }
+}

package/stepper/_stepper.clarity.scss

@@ -0,0 +1,184 @@
+/*
+ * 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 '../collapsible-panel/variables.collapsible-panel' as panel-variables;
+@use '../collapsible-panel/mixins.collapsible-panel' as collapsible-panel;
+@use '../styles/variables/variables.density' as density;
+@use 'variables.stepper' as stepper-variables;
+
+@include meta.load-css('properties.stepper');
+@include mixins.exports('stepper.clarity') {
+  @include collapsible-panel.collapsible-panel('clr-stepper');
+
+  // Left-indicator box-shadows by state
+  .clr-stepper-header {
+    box-shadow: stepper-variables.$clr-stepper-header-left-indicator;
+  }
+
+  .clr-stepper-panel-open > .clr-stepper-header {
+    box-shadow: stepper-variables.$clr-stepper-header-left-current-indicator;
+  }
+
+  .clr-stepper-panel-complete > .clr-stepper-header {
+    box-shadow: stepper-variables.$clr-stepper-header-left-complete-indicator;
+  }
+
+  .clr-stepper-panel-error > .clr-stepper-header {
+    box-shadow: stepper-variables.$clr-stepper-header-left-error-indicator;
+  }
+
+  // Higher specificity overrides so complete/error shadows win over the
+  // .clr-stepper-panel-open shadow when both states coexist on a panel.
+  .clr-stepper-panel-open {
+    .clr-stepper-panel-complete > .clr-stepper-header {
+      box-shadow: stepper-variables.$clr-stepper-header-left-complete-indicator;
+    }
+
+    .clr-stepper-panel-error > .clr-stepper-header {
+      box-shadow: stepper-variables.$clr-stepper-header-left-error-indicator;
+    }
+  }
+
+  // Status icons and visibility
+  .clr-stepper-panel-complete {
+    & > .clr-stepper-complete-icon {
+      display: inline-block;
+      color: stepper-variables.$clr-stepper-complete-color;
+    }
+
+    & > .clr-stepper-angle {
+      visibility: visible;
+    }
+
+    .ng-trigger.clr-stepper-content {
+      display: block;
+    }
+  }
+
+  .clr-stepper-panel-error > .clr-stepper-error-icon {
+    display: inline-block;
+    color: stepper-variables.$clr-stepper-error-color;
+  }
+
+  .clr-stepper-panel-error .clr-stepper-number,
+  .clr-stepper-panel-complete .clr-stepper-number {
+    @include mixins.screen-reader-only();
+  }
+
+  // Stepper form layout
+  .clr-stepper-forms {
+    display: block;
+    margin-bottom: density.$clr-base-vertical-offset-xl;
+
+    .clr-stepper-header > .clr-stepper-header-button {
+      align-items: center;
+      gap: density.$clr-base-gap-l;
+      min-height: density.$clr-base-dg-row-height;
+      padding: #{density.$clr-base-vertical-offset-xl} #{density.$clr-base-horizontal-offset-xl}
+        #{density.$clr-base-vertical-offset-xl} #{density.$clr-base-horizontal-offset-2xl};
+
+      > .clr-step-status {
+        display: inline-flex;
+        gap: density.$clr-base-gap-m;
+        align-items: center;
+
+        > .clr-step-status-icon {
+          @include mixins.min-equilateral(density.$clr-base-icon-size-l);
+
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+
+          > .clr-step-error-icon,
+          > .clr-step-complete-icon {
+            @include mixins.min-equilateral(density.$clr-base-icon-size-m);
+
+            padding: 0;
+          }
+
+          > .clr-step-error-icon {
+            color: stepper-variables.$clr-stepper-error-color;
+          }
+
+          > .clr-step-complete-icon {
+            color: stepper-variables.$clr-stepper-complete-color;
+          }
+        }
+      }
+
+      > .clr-step-title-wrapper {
+        display: inline-flex;
+        min-width: panel-variables.$clr-collapsible-panel-title-min-width;
+        max-width: calc(264 * (1rem / var(--cds-global-base)));
+        width: 100%;
+        gap: density.$clr-base-gap-xs;
+        align-items: center;
+
+        @include mixins.generate-typography-token('BODY-14-SB-EXP');
+
+        > .clr-step-number {
+          min-width: density.$clr-base-layout-space-l;
+        }
+
+        > .clr-stepper-title {
+          min-width: initial;
+          max-width: initial;
+          width: initial;
+          margin-left: 0;
+        }
+      }
+
+      > .clr-stepper-description,
+      > .clr-step-description {
+        margin-left: 0;
+
+        @include mixins.generate-typography-token('BODY-14-RG-EXP');
+      }
+
+      @media (max-width: panel-variables.$clr-collapsible-panel-responsive-breakpoint) {
+        gap: density.$clr-base-gap-xs;
+
+        > .clr-step-status {
+          min-width: initial;
+          width: initial;
+        }
+
+        > .clr-step-title-wrapper {
+          width: initial;
+
+          > .clr-step-number {
+            min-width: initial;
+          }
+        }
+      }
+    }
+
+    .clr-stepper-panel-inactive:not(.clr-stepper-panel-open) > .clr-stepper-header .clr-step-angle {
+      visibility: hidden;
+
+      @media (max-width: panel-variables.$clr-collapsible-panel-responsive-breakpoint) {
+        display: none;
+      }
+    }
+
+    .clr-step-button {
+      margin-top: density.$clr-base-gap-l;
+      margin-right: density.$clr-base-gap-m;
+      margin-bottom: 0;
+    }
+  }
+
+  clr-stepper-panel .clr-stepper-inner-content {
+    padding: #{density.$clr-base-vertical-offset-2xl} #{density.$clr-base-layout-space-xl};
+
+    clr-step-content > :first-child {
+      margin-top: 0;
+    }
+  }
+}

package/stepper/_variables.stepper.scss

@@ -0,0 +1,13 @@
+/*
+ * 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-stepper-error-color: var(--clr-stepper-error-color) !default;
+$clr-stepper-complete-color: var(--clr-stepper-complete-color) !default;
+$clr-stepper-header-left-indicator: var(--clr-stepper-header-left-indicator) !default;
+$clr-stepper-header-left-current-indicator: var(--clr-stepper-header-left-current-indicator) !default;
+$clr-stepper-header-left-complete-indicator: var(--clr-stepper-header-left-complete-indicator) !default;
+$clr-stepper-header-left-error-indicator: var(--clr-stepper-header-left-error-indicator) !default;

package/styles/_a11y.scss

@@ -0,0 +1,14 @@
+/*
+ * 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 'mixins';
+
+@include mixins.exports('a11y.clarity') {
+  .clr-sr-only {
+    @include mixins.screen-reader-only();
+  }
+}

package/styles/_close.clarity.scss

@@ -0,0 +1,60 @@
+/*
+ * 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:string';
+@use 'mixins';
+@use './core/tokens/variables.tokens' as tokens;
+@use 'variables/variables.global';
+
+@include mixins.exports('close.clarity') {
+  // scss-lint:disable QualifyingElement
+  button.close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    appearance: none;
+  }
+  // scss-lint:enable QualifyingElement
+
+  .close {
+    float: right;
+    font-size: tokens.$cds-global-space-11;
+    transition: color linear 0.2s;
+    font-weight: 200;
+    text-shadow: none;
+    line-height: inherit;
+    color: variables.$clr-close-color;
+
+    cds-icon,
+    clr-icon {
+      fill: variables.$clr-close-color;
+    }
+
+    &:hover {
+      color: variables.$clr-close-color-hover;
+
+      cds-icon,
+      clr-icon {
+        fill: variables.$clr-close-color-hover;
+      }
+    }
+
+    &:active {
+      color: variables.$clr-close-color-active;
+
+      cds-icon,
+      clr-icon {
+        fill: variables.$clr-close-color-active;
+      }
+    }
+
+    &:focus {
+      @include mixins.include-outline-style-form-fields();
+    }
+  }
+}