@hermes-ui/angular 0.1.4

package/styles/variables/_variables.global.scss

@@ -0,0 +1,87 @@
+/*
+ * 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:math';
+@use '../core/tokens/variables.tokens' as tokens;
+@use 'variables.density' as density;
+
+// Usage: ../typography/_typography.clarity.scss
+$hermes-baseline-int: 24 !default; // used by design for relational sizing
+$hermes-baseline-denominator: 20 !default; // used in code to reduce impact of browser rounding
+$browser-default-size: 16; // if font-size set to 100% on html selector, it equates to 16px
+// this takes our sizing in code, divides it by the browser default at 100%
+// and then converts it to a percentage so that browser settings sizing is not broken
+$hermes-basefont-size: math.div($hermes-baseline-denominator, $browser-default-size) * 100% !default;
+
+@function convertBaselineToBase20($size: 24) {
+  $hermes-baseline-to-basefontsize-multiplier: math.div($hermes-baseline-int, $hermes-baseline-denominator);
+
+  @return math.div($size, $hermes-baseline-int) * $hermes-baseline-to-basefontsize-multiplier * 1rem;
+}
+
+// App bg color
+$hermes-global-app-background: var(--hermes-global-app-background) !default;
+
+// App selection color
+$hermes-global-selection-color: var(--hermes-global-selection-color) !default;
+$hermes-global-on-selection-color: var(--hermes-global-on-selection-color) !default;
+
+// App hover color
+$hermes-global-hover-color: var(--hermes-global-hover-color) !default;
+$hermes-global-content-header-font-color: var(--hermes-global-content-header-font-color) !default;
+$hermes-global-font-color: var(--hermes-global-font-color) !default;
+$hermes-global-success-color: var(--hermes-global-success-color) !default;
+$hermes-global-error-color: var(--hermes-global-error-color) !default;
+
+// Content Area Paddings
+$hermes-content-area-padding-top: #{density.$hermes-base-vertical-offset-2xl} !default;
+$hermes-content-area-padding-right: #{density.$hermes-base-horizontal-offset-2xl} !default;
+$hermes-content-area-padding-bottom: #{density.$hermes-base-vertical-offset-2xl} !default;
+$hermes-content-area-padding-left: #{density.$hermes-base-horizontal-offset-2xl} !default;
+
+// Close button colors
+// Usage: ../emphasis/alert/_alert.clarity.scss
+// Usage: ../modal/_modal.clarity.scss
+// Usage: ../popover/signpost/_signpost.clarity.scss
+$hermes-close-color: var(--hermes-close-color) !default;
+$hermes-close-color-hover: var(--hermes-close-color-hover) !default;
+$hermes-close-color-active: var(--hermes-close-color-active) !default;
+
+// Box Shadow
+$hermes-popover-box-shadow-color: rgb(140 140 140 / 25%) !default;
+
+// All z-indexes should come from here, to have a centralized file to reorganize them if needed
+$hermes-layers: (
+  content: 0,
+  native-select-box: 2,
+  datalist-box: 2,
+  datagrid-row: 500,
+  // The pinned columns are static next to the row controls, which stay on top of them if the two
+  // ever overlap, so they sit one layer below.
+  datagrid-row-pinned: 499,
+  datagrid-row-sticky: 500,
+  datagrid-row-skeleton: 501,
+  datagrid-header: 501,
+  datagrid-header-pinned: 501,
+  datagrid-header-sticky: 502,
+  datagrid-host: 590,
+  alert: 1033,
+  /* Used by responsive nav sidepanel*/ sidepanel-bg: 1038,
+  sidepanel: 1039,
+  /* Not used in Clarity but released by mistake in 17.2.0 and already consumed by teams through NGX*/
+  /* see https://jira.eng.vmware.com/browse/CDE-2109*/ side-panel-bg: 1038,
+  side-panel: 1039,
+  modal-bg: 1040,
+  modal: 1050,
+  dropdown-menu: 1050,
+  column-switch: 1050,
+  tooltips: 1050,
+  smart-popover: 1050,
+  // Toasts float above modals/dialogs so a confirmation toast fired from within a
+  // modal (e.g. "Saved") is never hidden behind it.
+  toast: 1060,
+) !default;

package/styles/variables/_variables.layout.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 'sass:map';
+@use 'variables.global';
+
+/* stylelint-disable */
+$hermes-grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+/* stylelint-enable */
+
+$hermes-grid-columns: 12 !default;
+$hermes-grid-gutter-width: var(--hermes-grid-gutter-width) !default;
+$hermes-grid-container-padding: var(--hermes-grid-container-padding) !default;
+$hermes-grid-column-padding: var(--hermes-grid-column-padding) !default;
+$hermes-grid-row-margin: var(--hermes-grid-row-margin) !default;
+
+$hermes-sizes: () !default;
+$hermes-sizes: map.merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto,
+  ),
+  $hermes-sizes
+);

package/styles/variables/_variables.scss

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+@forward 'variables.global';
+@forward 'variables.layout';
+@forward 'variables.typography';
+@forward 'variables.density';

package/styles/variables/_variables.typography.scss

@@ -0,0 +1,156 @@
+/*
+ * 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 'variables.density' as density;
+
+// Usage: ../typography/_typography.clarity.scss
+$hermes-fontSkipBase64: false !default;
+
+// Temporal internal use only. Should be removed once HERMES token based family is available.
+$hermes-metropolis-font-family: var(--hermes-metropolis-font-family);
+$hermes-font: var(--hermes-font) !default;
+$hermes-body-font: $hermes-font;
+
+$hermes-font-weight-light: var(--hermes-font-weight-light) !default;
+$hermes-font-weight-regular: var(--hermes-font-weight-regular) !default;
+$hermes-font-weight-semibold: var(--hermes-font-weight-semibold) !default;
+$hermes-font-weight-bold: var(--hermes-font-weight-bold) !default;
+$hermes-font-weight-extrabold: var(--hermes-font-weight-extrabold) !default;
+
+$hermes-global-typography-margin-top: #{density.$hermes-base-vertical-offset-2xl} !default;
+$hermes-global-typography-margin-bottom: 0 !default;
+
+// Header styles
+//H1 - login_productName
+//'DISPLAY-40'
+$hermes-h1-color: var(--hermes-h1-color) !default;
+$hermes-h1-font-weight: var(--hermes-h1-font-weight) !default;
+$hermes-h1-font-family: var(--hermes-h1-font-family) !default;
+$hermes-h1-font-size: var(--hermes-h1-font-size) !default;
+$hermes-h1-letter-spacing: var(--hermes-h1-letter-spacing) !default;
+$hermes-h1-line-height: var(--hermes-h1-line-height) !default;
+
+//H2 - login_trademark, page_mainHeading
+//'HEADLINE-32'
+$hermes-h2-color: var(--hermes-h2-color) !default;
+$hermes-h2-font-weight: var(--hermes-h2-font-weight) !default;
+$hermes-h2-font-family: var(--hermes-h2-font-family) !default;
+$hermes-h2-font-size: var(--hermes-h2-font-size) !default;
+$hermes-h2-letter-spacing: var(--hermes-h2-letter-spacing) !default;
+$hermes-h2-line-height: var(--hermes-h2-line-height) !default;
+
+//H3 - login_subtitle, modal_header, page_secondaryHeading
+//'TITLE-24-EXP'
+$hermes-h3-color: var(--hermes-h3-color) !default;
+$hermes-h3-font-weight: var(--hermes-h3-font-weight) !default;
+$hermes-h3-font-family: var(--hermes-h3-font-family) !default;
+$hermes-h3-font-size: var(--hermes-h3-font-size) !default;
+$hermes-h3-letter-spacing: var(--hermes-h3-letter-spacing) !default;
+$hermes-h3-line-height: var(--hermes-h3-line-height) !default;
+
+//H4 - card titles, page_tertiaryHeading
+//'SECTION-20-STD'
+$hermes-h4-color: var(--hermes-h4-color) !default;
+$hermes-h4-font-weight: var(--hermes-h4-font-weight) !default;
+$hermes-h4-font-family: var(--hermes-h4-font-family) !default;
+$hermes-h4-font-size: var(--hermes-h4-font-size) !default;
+$hermes-h4-letter-spacing: var(--hermes-h4-letter-spacing) !default;
+$hermes-h4-line-height: var(--hermes-h4-line-height) !default;
+
+//H5 - dgrid placeholder, datagrid_column_toggle_title, form_block_label, nav_title, page_introParagraph, page_sectionHeader
+//'SUBSECTION-16-EXP'
+$hermes-h5-color: var(--hermes-h5-color) !default;
+$hermes-h5-font-weight: var(--hermes-h5-font-weight) !default;
+$hermes-h5-font-family: var(--hermes-h5-font-family) !default;
+$hermes-h5-font-size: var(--hermes-h5-font-size) !default;
+$hermes-h5-letter-spacing: var(--hermes-h5-letter-spacing) !default;
+$hermes-h5-line-height: var(--hermes-h5-line-height) !default;
+
+//H6 - toc_header
+// 'MESSAGE-16-EXP'
+$hermes-h6-color: var(--hermes-h6-color) !default;
+$hermes-h6-font-weight: var(--hermes-h6-font-weight) !default;
+$hermes-h6-font-family: var(--hermes-h6-font-family) !default;
+$hermes-h6-font-size: var(--hermes-h6-font-size) !default;
+$hermes-h6-letter-spacing: var(--hermes-h6-letter-spacing) !default;
+$hermes-h6-line-height: var(--hermes-h6-line-height) !default;
+
+// Non-header text styles
+//P0 - Intro text
+//'BODY-14-RG-STD'
+$hermes-p0-color: var(--hermes-p0-color) !default;
+$hermes-p0-font-weight: var(--hermes-p0-font-weight) !default;
+$hermes-p0-font-size: var(--hermes-p0-font-size) !default;
+$hermes-p0-letter-spacing: var(--hermes-p0-letter-spacing) !default;
+$hermes-p0-line-height: var(--hermes-p0-line-height) !default;
+
+//P1 - card text, dropdown_text, page_bodyText, tab_text, toc_text
+//'BODY-14-RG-STD'
+$hermes-p1-color: var(--hermes-p1-color) !default;
+$hermes-p1-font-weight: var(--hermes-p1-font-weight) !default;
+$hermes-p1-font-size: var(--hermes-p1-font-size) !default;
+$hermes-p1-letter-spacing: var(--hermes-p1-letter-spacing) !default;
+$hermes-p1-line-height: var(--hermes-p1-line-height) !default;
+
+//P2 - form_label, stackview_header
+//'SECONDARY-13-MD-EXP'
+$hermes-p2-color: var(--hermes-p2-color) !default;
+$hermes-p2-font-weight: var(--hermes-p2-font-weight) !default;
+$hermes-p2-font-size: var(--hermes-p2-font-size) !default;
+$hermes-p2-letter-spacing: var(--hermes-p2-letter-spacing) !default;
+$hermes-p2-line-height: var(--hermes-p2-line-height) !default;
+
+//P3 - alerts, form_group_fields, stackview_text, table_text, tooltip_text
+//'SECONDARY-13-RG-EXP'
+$hermes-p3-color: var(--hermes-p3-color) !default;
+$hermes-p3-font-weight: var(--hermes-p3-font-weight) !default;
+$hermes-p3-font-size: var(--hermes-p3-font-size) !default;
+$hermes-p3-letter-spacing: var(--hermes-p3-letter-spacing) !default;
+$hermes-p3-line-height: var(--hermes-p3-line-height) !default;
+
+//P4 - small alerts, dropdown_header, vertical_nav_header
+//'SECONDARY-13-SB-STD'
+$hermes-p4-color: var(--hermes-p4-color) !default;
+$hermes-p4-font-weight: var(--hermes-p4-font-weight) !default;
+$hermes-p4-font-size: var(--hermes-p4-font-size) !default;
+$hermes-p4-letter-spacing: var(--hermes-p4-letter-spacing) !default;
+$hermes-p4-line-height: var(--hermes-p4-line-height) !default;
+
+//P5
+//'SECONDARY-13-RG-EXP'
+$hermes-p5-color: var(--hermes-p5-color) !default;
+$hermes-p5-font-weight: var(--hermes-p5-font-weight) !default;
+$hermes-p5-font-size: var(--hermes-p5-font-size) !default;
+$hermes-p5-letter-spacing: var(--hermes-p5-letter-spacing) !default;
+$hermes-p5-line-height: var(--hermes-p5-line-height) !default;
+
+//P6 - card link btns, form_subtext, table_header
+//'CAPTION-LG-11-STD'
+$hermes-p6-color: var(--hermes-p6-color) !default;
+$hermes-p6-font-weight: var(--hermes-p6-font-weight) !default;
+$hermes-p6-font-size: var(--hermes-p6-font-size) !default;
+$hermes-p6-letter-spacing: var(--hermes-p6-letter-spacing) !default;
+$hermes-p6-line-height: var(--hermes-p6-line-height) !default;
+
+//P7 - label_text
+//'CAPTION-SM-10'
+$hermes-p7-color: var(--hermes-p7-color) !default;
+$hermes-p7-font-weight: var(--hermes-p7-font-weight) !default;
+$hermes-p7-font-size: var(--hermes-p7-font-size) !default;
+$hermes-p7-letter-spacing: var(--hermes-p7-letter-spacing) !default;
+$hermes-p7-line-height: var(--hermes-p7-line-height) !default;
+
+//P8
+//'CAPTION-SM-10'
+$hermes-p8-color: var(--hermes-p8-color) !default;
+$hermes-p8-font-weight: var(--hermes-p8-font-weight) !default;
+$hermes-p8-font-size: var(--hermes-p8-font-size) !default;
+$hermes-p8-letter-spacing: var(--hermes-p8-letter-spacing) !default;
+$hermes-p8-line-height: var(--hermes-p8-line-height) !default;
+
+// Lists
+$hermes-list-item-color: var(--hermes-list-item-color) !default;

package/timeline/_properties.timeline.scss

@@ -0,0 +1,38 @@
+/*
+ * 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('timeline.properties') {
+  @include mixins.root-or-host() {
+    // body (title)
+    --hermes-timeline-step-title-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
+
+    &,
+    & [hermes-density] {
+      --hermes-timeline-icon-size: #{density.$hermes-base-icon-size-3xl};
+
+      // internal property cannot be exposed
+      --hermes-timeline-step-internal-spacing: #{density.$hermes-base-vertical-offset-l};
+    }
+
+    &,
+    & [hermes-theme] {
+      // colors
+      --hermes-timeline-line-color: #{tokens.$hermes-alias-object-interaction-border-color};
+      --hermes-timeline-step-header-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-timeline-step-title-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-timeline-step-description-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-timeline-incomplete-step-color: #{tokens.$hermes-alias-object-interaction-border-color};
+      --hermes-timeline-current-step-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-timeline-success-step-color: #{tokens.$hermes-alias-status-success};
+      --hermes-timeline-error-step-color: #{tokens.$hermes-alias-status-danger};
+    }
+  }
+}

package/timeline/_timeline.clarity.scss

@@ -0,0 +1,172 @@
+/*
+ * 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.timeline' as timeline-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('properties.timeline');
+@include mixins.exports('timeline.clarity') {
+  .hermes-timeline {
+    display: flex;
+    padding: timeline-variables.$hermes-timeline-step-internal-spacing;
+  }
+
+  .hermes-timeline-step {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: mixins.baselinePx(175);
+    gap: timeline-variables.$hermes-timeline-step-internal-spacing;
+
+    > hermes-icon:not([size]),
+    > hermes-icon:not([size]) {
+      @include mixins.min-equilateral(timeline-variables.$hermes-timeline-icon-size);
+    }
+
+    > hermes-icon[shape='circle'],
+    > hermes-icon[shape='circle'] {
+      color: timeline-variables.$hermes-timeline-incomplete-step-color;
+    }
+
+    > hermes-icon[shape='dot-circle'],
+    > hermes-icon[shape='dot-circle'] {
+      color: timeline-variables.$hermes-timeline-current-step-color;
+    }
+
+    > hermes-icon[shape='success-standard'],
+    > hermes-icon[shape='success-standard'] {
+      color: timeline-variables.$hermes-timeline-success-step-color;
+    }
+
+    > hermes-icon[shape='error-standard'],
+    > hermes-icon[shape='error-standard'] {
+      color: timeline-variables.$hermes-timeline-error-step-color;
+    }
+
+    > hermes-spinner.spinner {
+      margin: tokens.$hermes-global-space-2; // Simulates the padding in HERMES-ICONs
+      &,
+      &::after,
+      &::before {
+        @include mixins.min-equilateral(timeline-variables.$hermes-timeline-spinner-size);
+      }
+    }
+
+    // style for the connecting line between icons
+    &:not(:last-of-type) .hermes-timeline-step-body::before {
+      content: '';
+      background: timeline-variables.$hermes-timeline-line-color;
+      height: timeline-variables.$hermes-timeline-line-thickness;
+      width: calc(100% - timeline-variables.$hermes-timeline-icon-size);
+      transform: translate(
+        timeline-variables.$hermes-timeline-icon-size,
+        calc(
+          -0.5 *
+            (
+              (timeline-variables.$hermes-timeline-step-internal-spacing * 2) +
+                timeline-variables.$hermes-timeline-line-thickness + timeline-variables.$hermes-timeline-icon-size
+            )
+        )
+      );
+    }
+  }
+
+  // Note: headers (timestamps) are unable to auto-adjust height based on their siblings' using pure CSS.
+  // Hence forcing them in one-line by using "nowrap".
+  .hermes-timeline-step-header {
+    white-space: nowrap;
+    color: timeline-variables.$hermes-timeline-step-header-color;
+
+    @include mixins.generate-typography-token('SECONDARY-13-MD-CPT');
+  }
+
+  .hermes-timeline-step-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hermes-timeline-step-title {
+    color: timeline-variables.$hermes-timeline-step-title-color;
+    margin-bottom: density.$hermes-base-gap-xs;
+
+    @include mixins.generate-typography-token(
+      'SECONDARY-13-SB-CPT',
+      (
+        font-weight: timeline-variables.$hermes-timeline-step-title-font-weight,
+      )
+    );
+  }
+
+  .hermes-timeline-step-description {
+    color: timeline-variables.$hermes-timeline-step-description-color;
+
+    @include mixins.generate-typography-token('CAPTION-LG-11-STD');
+
+    button {
+      display: block;
+      margin-top: density.$hermes-base-gap-s;
+    }
+
+    img {
+      width: 100%;
+      margin-top: density.$hermes-base-vertical-offset-m;
+    }
+  }
+
+  .hermes-timeline.hermes-timeline-vertical {
+    flex-direction: column;
+    min-width: mixins.baselinePx(320);
+
+    .hermes-timeline-step {
+      flex-direction: row;
+      margin-left: 0;
+      position: relative; // required for vertical line to get 100% height of step body it belongs to
+
+      &:not(:last-of-type) {
+        margin-bottom: timeline-variables.$hermes-timeline-step-internal-spacing;
+      }
+
+      // style for the connecting line between icons
+      &:not(:last-of-type) .hermes-timeline-step-body::before {
+        position: absolute;
+        width: timeline-variables.$hermes-timeline-line-thickness;
+        height: calc(
+          100% - (timeline-variables.$hermes-timeline-icon-size - timeline-variables.$hermes-timeline-step-internal-spacing)
+        );
+        transform: translate(
+          calc(
+            -0.5 * (timeline-variables.$hermes-timeline-icon-size + timeline-variables.$hermes-timeline-line-thickness) -
+              timeline-variables.$hermes-timeline-step-internal-spacing
+          ),
+          calc(
+            (-1 * timeline-variables.$hermes-timeline-step-internal-spacing) + timeline-variables.$hermes-timeline-icon-size
+          )
+        );
+      }
+    }
+
+    .hermes-timeline-step-header {
+      text-align: right;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      word-break: normal;
+      width: mixins.baselinePx(60);
+      min-width: mixins.baselinePx(60);
+      margin: timeline-variables.$hermes-timeline-step-internal-spacing 0 0 0;
+    }
+
+    .hermes-timeline-step-body {
+      display: flex;
+      flex-direction: column;
+      min-width: mixins.baselinePx(178);
+      padding-top: timeline-variables.$hermes-timeline-step-internal-spacing;
+    }
+  }
+}

package/timeline/_variables.timeline.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 '../styles/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+
+$hermes-timeline-line-color: var(--hermes-timeline-line-color) !default;
+$hermes-timeline-step-header-color: var(--hermes-timeline-step-header-color) !default;
+$hermes-timeline-step-title-color: var(--hermes-timeline-step-title-color) !default;
+$hermes-timeline-step-description-color: var(--hermes-timeline-step-description-color) !default;
+
+$hermes-timeline-incomplete-step-color: var(--hermes-timeline-incomplete-step-color) !default;
+$hermes-timeline-current-step-color: var(--hermes-timeline-current-step-color) !default;
+$hermes-timeline-success-step-color: var(--hermes-timeline-success-step-color) !default;
+$hermes-timeline-error-step-color: var(--hermes-timeline-error-step-color) !default;
+
+// overall
+$hermes-timeline-icon-size: var(--hermes-timeline-icon-size);
+$hermes-timeline-spinner-size: calc(#{$hermes-timeline-icon-size} - #{tokens.$hermes-global-space-3});
+$hermes-timeline-default-icon-size: #{density.$hermes-base-icon-size-s};
+$hermes-timeline-line-thickness: #{tokens.$hermes-alias-object-border-width-200};
+$hermes-timeline-step-internal-spacing: var(--hermes-timeline-step-internal-spacing);
+
+// body (title)
+$hermes-timeline-step-title-font-weight: var(--hermes-timeline-step-title-font-weight);

package/toast/README.md

@@ -0,0 +1,65 @@
+# Toast
+
+Replicates shadcn's Toast (Base UI primitive) stacking effect natively in hermes/angular:
+newest toast on top, older ones peeking out and scaled down behind it, expanding to a
+full list on hover/focus, sliding in/out with the same 500ms ease-out curve.
+
+## Setup - two separate pieces
+
+`HermesToastService` and `<hermes-toaster>` are not wired to each other automatically;
+each consuming app has to connect them itself:
+
+- **`HermesToastService`** is `@Injectable({ providedIn: 'root' })` - it's available for
+  injection anywhere in the app with zero setup. Calling `show()`/`success()`/etc. just
+  pushes the toast onto an internal `BehaviorSubject`; it does **not** render anything.
+- **`<hermes-toaster>`** is a regular Angular component (selector `hermes-toaster`,
+  from `HermesToastModule`) that has to be placed **once**, manually, somewhere in the
+  app's template - it's the only thing that subscribes to the service and actually
+  draws the stack.
+
+If `<hermes-toaster>` is never mounted, `HermesToastService` calls silently no-op from
+the user's perspective: the toasts pile up in the service's internal state but nothing
+ever appears on screen. Mount it once near the app root (same pattern as shadcn/sonner's
+`<Toaster />`):
+
+```ts
+// app.component.ts
+import { HermesToastModule } from '@hermes/angular/toast';
+
+@Component({
+  imports: [HermesToastModule /* ... */],
+  template: `
+    <router-outlet></router-outlet>
+    <hermes-toaster></hermes-toaster>
+  `,
+})
+export class AppComponent {}
+```
+
+## Triggering toasts
+
+From anywhere in the app, inject `HermesToastService`:
+
+```ts
+constructor(private toasts: HermesToastService) {}
+
+save() {
+  this.toasts.promise(this.api.save(), {
+    loading: 'Saving...',
+    success: 'Saved',
+    error: 'Could not save',
+  });
+}
+```
+
+`HermesToastService` also exposes `show()`, `default()`, `info()`, `success()`, `warning()`,
+`danger()`, `loading()`, `update()`, `dismiss()` and `dismissAll()`.
+
+## Known scope cuts
+
+- **Fixed-ish stack height**: each toast's height is measured live via `ResizeObserver`
+  (see `toast-item.ts`), but the very first render frame uses `--hermes-toast-fallback-height`
+  until that measurement lands.
+- **No swipe-to-dismiss**: shadcn's Base UI toast supports drag-to-dismiss in all four
+  directions; this port dismisses only via the close button, the action button, timeout,
+  or Escape (dismisses the frontmost toast).

package/toast/_properties.toast.scss

@@ -0,0 +1,56 @@
+/*
+ * 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('toast.properties') {
+  @include mixins.root-or-host() {
+    // Layout - shadcn's Toast viewport is `w-auto max-w-sm` (384px) with a 0.75rem
+    // gap/peek between stacked cards and 1rem inset from the viewport edge.
+    --hermes-toast-viewport-inset: #{mixins.baselinePx(16)};
+    --hermes-toast-max-width: #{mixins.baselinePx(384)};
+    --hermes-toast-gap: #{mixins.baselinePx(12)};
+    --hermes-toast-peek: #{mixins.baselinePx(12)};
+    // Fallback height used before the item's own ResizeObserver reports its real,
+    // content-driven height (see toast-item.ts) - only visible for one frame on insert.
+    --hermes-toast-fallback-height: #{mixins.baselinePx(56)};
+    --hermes-toast-content-padding: #{mixins.baselinePx(16)};
+    --hermes-toast-content-gap: #{mixins.baselinePx(12)};
+    --hermes-toast-icon-size: #{mixins.baselinePx(16)};
+
+    &,
+    & [hermes-density] {
+      // shadcn's default --radius token (0.625rem @ Tailwind's 16px root = 10px)
+      --hermes-toast-border-radius: #{mixins.baselinePx(10)};
+    }
+
+    &,
+    & [hermes-theme] {
+      // shadcn's Toast is a neutral `bg-popover` surface - unlike hermes-alert, the
+      // status color lives only on the icon, not on the card background.
+      --hermes-toast-bg-color: #{tokens.$hermes-alias-object-overlay-background};
+      --hermes-toast-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-toast-description-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-toast-border-color: #{tokens.$hermes-alias-object-container-border-color};
+      --hermes-toast-border-width: #{tokens.$hermes-alias-object-border-width-100};
+      // one step below the modal's shadow-300: toasts sit above page content but
+      // below the modal/dialog surface when both happen to be visible together
+      --hermes-toast-box-shadow: #{tokens.$hermes-alias-object-shadow-200};
+
+      --hermes-toast-info-icon-color: #{tokens.$hermes-alias-status-info};
+      --hermes-toast-success-icon-color: #{tokens.$hermes-alias-status-success};
+      --hermes-toast-warning-icon-color: #{tokens.$hermes-alias-status-warning-dark};
+      --hermes-toast-danger-icon-color: #{tokens.$hermes-alias-status-danger};
+
+      --hermes-toast-action-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-toast-close-color: var(--hermes-close-color);
+      --hermes-toast-close-color-hover: var(--hermes-close-color-hover);
+    }
+  }
+}