@hermes-ui/angular 0.1.4

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() {
+    --hermes-spinner-inside-button-stroke-width: #{tokens.$hermes-alias-object-border-width-200};
+    --hermes-spinner-inside-treeview-stroke-width: #{tokens.$hermes-alias-object-border-width-200};
+    --hermes-spinner-border-radius: #{tokens.$hermes-alias-object-border-radius-300};
+
+    &,
+    & [hermes-density] {
+      --hermes-spinner-default-size: #{density.$hermes-base-spinner-l};
+      --hermes-spinner-medium-size: #{density.$hermes-base-spinner-m};
+      --hermes-spinner-small-size: #{density.$hermes-base-spinner-s};
+      --hermes-spinner-default-stroke-width: #{density.$hermes-base-spinner-stroke-l};
+      --hermes-spinner-medium-stroke-width: #{density.$hermes-base-spinner-stroke-m};
+      --hermes-spinner-small-stroke-width: #{density.$hermes-base-spinner-stroke-s};
+      --hermes-spinner-margin-right: #{density.$hermes-base-horizontal-offset-l};
+    }
+
+    &,
+    & [hermes-theme] {
+      --hermes-spinner-fill-bg-color: #{tokens.$hermes-alias-object-container-background-shade};
+      --hermes-spinner-fill-inverse-bg-color: #{tokens.$hermes-alias-object-container-background-inverse-tint};
+      --hermes-spinner-fill-color: #{tokens.$hermes-alias-primary};
+      --hermes-spinner-fill-inverse-color: #{tokens.$hermes-alias-primary-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.$hermes-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.$hermes-spinner-default-size);
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      clip-path: ellipse(100% 53.5% at 0 0);
+      border: spinner-variables.$hermes-spinner-default-stroke-width solid spinner-variables.$hermes-spinner-fill-color;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-radius: spinner-variables.$hermes-spinner-border-radius;
+    }
+
+    &::before {
+      content: '';
+
+      @include mixins.min-equilateral(spinner-variables.$hermes-spinner-default-size);
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      border: spinner-variables.$hermes-spinner-default-stroke-width solid spinner-variables.$hermes-spinner-fill-bg-color;
+      border-radius: spinner-variables.$hermes-spinner-border-radius;
+    }
+
+    &.spinner-md {
+      @include spinner-mixins.spinner-size-before-after(
+        spinner-variables.$hermes-spinner-medium-size,
+        spinner-variables.$hermes-spinner-medium-stroke-width
+      );
+    }
+
+    &.spinner-inline,
+    &.spinner-sm {
+      @include spinner-mixins.spinner-size-before-after(
+        spinner-variables.$hermes-spinner-small-size,
+        spinner-variables.$hermes-spinner-small-stroke-width
+      );
+    }
+
+    &.spinner-inline {
+      vertical-align: text-bottom; //To align with text properly
+      margin-right: spinner-variables.$hermes-spinner-margin-right;
+    }
+
+    &.spinner-inverse {
+      @include spinner-mixins.spinner-color-before-after(
+        spinner-variables.$hermes-spinner-fill-inverse-color,
+        spinner-variables.$hermes-spinner-fill-inverse-bg-color
+      );
+    }
+
+    &.spinner-neutral-0 {
+      // needed for loading banner alerts in core
+
+      @include spinner-mixins.spinner-color-before-after(
+        spinner-variables.$hermes-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.$hermes-btn-success-checked-color;
+    }
+  }
+
+  //Spinners inside of buttons
+  .btn {
+    .spinner {
+      margin-right: 0;
+
+      @include spinner-mixins.spinner-size-before-after(
+        density.$hermes-base-icon-size-s,
+        spinner-variables.$hermes-spinner-inside-button-stroke-width
+      );
+    }
+  }
+
+  .btn-icon:not(.btn-sm) {
+    .spinner {
+      @include mixins.min-equilateral(density.$hermes-base-icon-size-s);
+    }
+  }
+
+  // Spinners inside treeview
+  .hermes-treenode-spinner-container {
+    .spinner {
+      @include spinner-mixins.spinner-size-before-after(
+        density.$hermes-base-icon-size-s,
+        spinner-variables.$hermes-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.
+ */
+$hermes-spinner-default-size: var(--hermes-spinner-default-size) !default;
+$hermes-spinner-medium-size: var(--hermes-spinner-medium-size) !default;
+$hermes-spinner-small-size: var(--hermes-spinner-small-size) !default;
+
+$hermes-spinner-inside-button-stroke-width: var(--hermes-spinner-inside-button-stroke-width) !default;
+$hermes-spinner-inside-treeview-stroke-width: var(--hermes-spinner-inside-treeview-stroke-width) !default;
+
+$hermes-spinner-default-stroke-width: var(--hermes-spinner-default-stroke-width) !default;
+$hermes-spinner-medium-stroke-width: var(--hermes-spinner-medium-stroke-width) !default;
+$hermes-spinner-small-stroke-width: var(--hermes-spinner-small-stroke-width) !default;
+
+$hermes-spinner-fill-color: var(--hermes-spinner-fill-color) !default;
+$hermes-spinner-fill-bg-color: var(--hermes-spinner-fill-bg-color) !default;
+$hermes-spinner-fill-inverse-color: var(--hermes-spinner-fill-inverse-color) !default;
+$hermes-spinner-fill-inverse-bg-color: var(--hermes-spinner-fill-inverse-bg-color) !default;
+
+$hermes-spinner-border-radius: var(--hermes-spinner-border-radius) !default;
+
+$hermes-spinner-margin-right: var(--hermes-spinner-margin-right) !default;

package/schematics/collection.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-update": {
+      "version": "18.0.0",
+      "description": "Migrates @hermes/angular from v17 to v18",
+      "factory": "./ng-update/index#migrate"
+    },
+    "migrate-v18": {
+      "description": "Applies automated @hermes/angular v17→v18 source migrations (templates, imports, CSS). Run with: ng generate @hermes/angular:migrate-v18",
+      "factory": "./ng-update/index#migrate"
+    }
+  }
+}

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() {
+    &,
+    [hermes-theme] {
+      --hermes-stepper-error-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-stepper-complete-color: #{tokens.$hermes-alias-status-success};
+      --hermes-stepper-header-left-indicator: inset #{tokens.$hermes-global-space-5} 0 0
+        #{tokens.$hermes-alias-status-neutral-tint};
+      --hermes-stepper-header-left-current-indicator: inset #{tokens.$hermes-global-space-5} 0 0
+        #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-stepper-header-left-complete-indicator: inset #{tokens.$hermes-global-space-5} 0 0
+        #{tokens.$hermes-alias-status-success};
+      --hermes-stepper-header-left-error-indicator: inset #{tokens.$hermes-global-space-5} 0 0
+        #{tokens.$hermes-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('hermes-stepper');
+
+  // Left-indicator box-shadows by state
+  .hermes-stepper-header {
+    box-shadow: stepper-variables.$hermes-stepper-header-left-indicator;
+  }
+
+  .hermes-stepper-panel-open > .hermes-stepper-header {
+    box-shadow: stepper-variables.$hermes-stepper-header-left-current-indicator;
+  }
+
+  .hermes-stepper-panel-complete > .hermes-stepper-header {
+    box-shadow: stepper-variables.$hermes-stepper-header-left-complete-indicator;
+  }
+
+  .hermes-stepper-panel-error > .hermes-stepper-header {
+    box-shadow: stepper-variables.$hermes-stepper-header-left-error-indicator;
+  }
+
+  // Higher specificity overrides so complete/error shadows win over the
+  // .hermes-stepper-panel-open shadow when both states coexist on a panel.
+  .hermes-stepper-panel-open {
+    .hermes-stepper-panel-complete > .hermes-stepper-header {
+      box-shadow: stepper-variables.$hermes-stepper-header-left-complete-indicator;
+    }
+
+    .hermes-stepper-panel-error > .hermes-stepper-header {
+      box-shadow: stepper-variables.$hermes-stepper-header-left-error-indicator;
+    }
+  }
+
+  // Status icons and visibility
+  .hermes-stepper-panel-complete {
+    & > .hermes-stepper-complete-icon {
+      display: inline-block;
+      color: stepper-variables.$hermes-stepper-complete-color;
+    }
+
+    & > .hermes-stepper-angle {
+      visibility: visible;
+    }
+
+    .ng-trigger.hermes-stepper-content {
+      display: block;
+    }
+  }
+
+  .hermes-stepper-panel-error > .hermes-stepper-error-icon {
+    display: inline-block;
+    color: stepper-variables.$hermes-stepper-error-color;
+  }
+
+  .hermes-stepper-panel-error .hermes-stepper-number,
+  .hermes-stepper-panel-complete .hermes-stepper-number {
+    @include mixins.screen-reader-only();
+  }
+
+  // Stepper form layout
+  .hermes-stepper-forms {
+    display: block;
+    margin-bottom: density.$hermes-base-vertical-offset-xl;
+
+    .hermes-stepper-header > .hermes-stepper-header-button {
+      align-items: center;
+      gap: density.$hermes-base-gap-l;
+      min-height: density.$hermes-base-dg-row-height;
+      padding: #{density.$hermes-base-vertical-offset-xl} #{density.$hermes-base-horizontal-offset-xl}
+        #{density.$hermes-base-vertical-offset-xl} #{density.$hermes-base-horizontal-offset-2xl};
+
+      > .hermes-step-status {
+        display: inline-flex;
+        gap: density.$hermes-base-gap-m;
+        align-items: center;
+
+        > .hermes-step-status-icon {
+          @include mixins.min-equilateral(density.$hermes-base-icon-size-l);
+
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+
+          > .hermes-step-error-icon,
+          > .hermes-step-complete-icon {
+            @include mixins.min-equilateral(density.$hermes-base-icon-size-m);
+
+            padding: 0;
+          }
+
+          > .hermes-step-error-icon {
+            color: stepper-variables.$hermes-stepper-error-color;
+          }
+
+          > .hermes-step-complete-icon {
+            color: stepper-variables.$hermes-stepper-complete-color;
+          }
+        }
+      }
+
+      > .hermes-step-title-wrapper {
+        display: inline-flex;
+        min-width: panel-variables.$hermes-collapsible-panel-title-min-width;
+        max-width: calc(264 * (1rem / var(--hermes-global-base)));
+        width: 100%;
+        gap: density.$hermes-base-gap-xs;
+        align-items: center;
+
+        @include mixins.generate-typography-token('BODY-14-SB-EXP');
+
+        > .hermes-step-number {
+          min-width: density.$hermes-base-layout-space-l;
+        }
+
+        > .hermes-stepper-title {
+          min-width: initial;
+          max-width: initial;
+          width: initial;
+          margin-left: 0;
+        }
+      }
+
+      > .hermes-stepper-description,
+      > .hermes-step-description {
+        margin-left: 0;
+
+        @include mixins.generate-typography-token('BODY-14-RG-EXP');
+      }
+
+      @media (max-width: panel-variables.$hermes-collapsible-panel-responsive-breakpoint) {
+        gap: density.$hermes-base-gap-xs;
+
+        > .hermes-step-status {
+          min-width: initial;
+          width: initial;
+        }
+
+        > .hermes-step-title-wrapper {
+          width: initial;
+
+          > .hermes-step-number {
+            min-width: initial;
+          }
+        }
+      }
+    }
+
+    .hermes-stepper-panel-inactive:not(.hermes-stepper-panel-open) > .hermes-stepper-header .hermes-step-angle {
+      visibility: hidden;
+
+      @media (max-width: panel-variables.$hermes-collapsible-panel-responsive-breakpoint) {
+        display: none;
+      }
+    }
+
+    .btn.hermes-step-button {
+      margin-top: density.$hermes-base-gap-l;
+      margin-right: density.$hermes-base-gap-m;
+      margin-bottom: 0;
+    }
+  }
+
+  hermes-stepper-panel .hermes-stepper-inner-content {
+    padding: #{density.$hermes-base-vertical-offset-2xl} #{density.$hermes-base-layout-space-xl};
+
+    hermes-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.
+ */
+
+$hermes-stepper-error-color: var(--hermes-stepper-error-color) !default;
+$hermes-stepper-complete-color: var(--hermes-stepper-complete-color) !default;
+$hermes-stepper-header-left-indicator: var(--hermes-stepper-header-left-indicator) !default;
+$hermes-stepper-header-left-current-indicator: var(--hermes-stepper-header-left-current-indicator) !default;
+$hermes-stepper-header-left-complete-indicator: var(--hermes-stepper-header-left-complete-indicator) !default;
+$hermes-stepper-header-left-error-indicator: var(--hermes-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') {
+  .hermes-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.$hermes-global-space-11;
+    transition: color linear 0.2s;
+    font-weight: 200;
+    text-shadow: none;
+    line-height: inherit;
+    color: variables.$hermes-close-color;
+
+    hermes-icon,
+    hermes-icon {
+      fill: variables.$hermes-close-color;
+    }
+
+    &:hover {
+      color: variables.$hermes-close-color-hover;
+
+      hermes-icon,
+      hermes-icon {
+        fill: variables.$hermes-close-color-hover;
+      }
+    }
+
+    &:active {
+      color: variables.$hermes-close-color-active;
+
+      hermes-icon,
+      hermes-icon {
+        fill: variables.$hermes-close-color-active;
+      }
+    }
+
+    &:focus {
+      @include mixins.include-outline-style-form-fields();
+    }
+  }
+}