@hermes-ui/angular 0.1.4

package/button/_variables.toggles.scss

@@ -0,0 +1,41 @@
+/*
+ * 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/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+// Usage: ../button/_toggles.clarity.scss
+// Toggle
+$hermes-toggle-height: #{density.$hermes-base-row-height-s} !default;
+$hermes-toggle-switch-base-height: #{tokens.$hermes-global-space-7} !default;
+$hermes-toggle-switch-base-width: #{tokens.$hermes-global-space-10} !default;
+
+$hermes-toggle-dot-diameter: #{$hermes-toggle-switch-base-height} !default;
+
+$hermes-toggle-transition-time: 0.15s !default;
+$hermes-toggle-transition-animation: ease-in !default;
+
+// Usage: ../button/_toggles.clarity.scss
+// Colors (enabled)
+$hermes-toggle-bg-color-off: var(--hermes-toggle-bg-color-off) !default;
+$hermes-toggle-bg-color-on: var(--hermes-toggle-bg-color-on) !default;
+$hermes-toggle-handle-bg-color: var(--hermes-toggle-handle-bg-color) !default;
+$hermes-toggle-handle-border-color: var(--hermes-toggle-handle-border-color) !default;
+$hermes-toggle-handle-border-color-on: var(--hermes-toggle-handle-border-color-on) !default;
+
+// Usage: ../button/_toggles.clarity.scss
+// Colors (disabled)
+$hermes-toggle-disabled-default-border-color: var(--hermes-toggle-disabled-default-border-color) !default;
+$hermes-toggle-disabled-default-handle-color: var(--hermes-toggle-disabled-default-handle-color) !default;
+$hermes-toggle-disabled-off-border-color: var(--hermes-toggle-disabled-off-border-color) !default;
+$hermes-toggle-disabled-off-bg-color: var(--hermes-toggle-disabled-off-bg-color) !default;
+
+// Also sets disabled/on inner part of handle circle.
+$hermes-toggle-disabled-off-handle-border-color: var(--hermes-toggle-disabled-off-handle-border-color) !default;
+$hermes-toggle-disabled-on-border-color: var(--hermes-toggle-disabled-on-border-color) !default;
+$hermes-toggle-disabled-on-bg-color: var(--hermes-toggle-disabled-on-bg-color) !default;
+$hermes-toggle-disabled-on-handle-border-color: var(--hermes-toggle-disabled-on-handle-border-color) !default;

package/button/button-group/_button-group.clarity.scss

@@ -0,0 +1,202 @@
+/*
+ * 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 '../mixins.buttons' as button-mixins;
+@use '../variables.buttons' as buttons-variables;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('button-group.clarity') {
+  .btn-group {
+    display: inline-flex;
+    margin-right: buttons-variables.$hermes-btn-horizontal-margin;
+
+    hermes-dropdown {
+      display: inline-flex;
+
+      .dropdown-toggle {
+        @include button-mixins.square-off-btngroup-btns(left);
+        @include button-mixins.square-off-btngroup-btns(right);
+      }
+
+      &:last-child {
+        .dropdown-toggle {
+          border-top-right-radius: buttons-variables.$hermes-btn-border-radius;
+          border-bottom-right-radius: buttons-variables.$hermes-btn-border-radius;
+        }
+      }
+
+      &:first-child {
+        .dropdown-toggle {
+          border-top-left-radius: buttons-variables.$hermes-btn-border-radius;
+          border-bottom-left-radius: buttons-variables.$hermes-btn-border-radius;
+        }
+      }
+
+      &:not(:last-child) .dropdown-toggle {
+        border-right: 0;
+      }
+    }
+
+    .btn {
+      margin: 0;
+      overflow: hidden;
+
+      label {
+        height: 100%;
+      }
+
+      // ATM after token migration (alpha or beta v17)
+      // remove when detailed radio/checkbox groups are implemented
+      input[type='radio']:hover,
+      input[type='checkbox']:hover {
+        appearance: none;
+        opacity: 1;
+        top: 0;
+
+        @include mixins.equilateral(100%);
+        // using hermes-alias-object-interaction-outline token will be better when focus state get implemented
+        border: Highlight solid 2px;
+      }
+    }
+
+    .btn {
+      &:not(:first-child) {
+        @include button-mixins.square-off-btngroup-btns(left);
+      }
+
+      &:not(:last-child) {
+        @include button-mixins.square-off-btngroup-btns(right);
+      }
+
+      &:disabled:not(:last-child) {
+        border-right: none;
+      }
+    }
+
+    // Without this, focusing a button that isn't last would have its focus ring
+    // partially painted over by the next button in DOM order, since adjacent
+    // buttons share an edge with no gap between them.
+    .btn:focus-visible,
+    .dropdown-toggle:focus-visible {
+      position: relative;
+      z-index: 1;
+    }
+
+    .tooltip {
+      &:not(:first-child) .btn {
+        @include button-mixins.square-off-btngroup-btns(left);
+      }
+
+      &:not(:last-child) .btn {
+        @include button-mixins.square-off-btngroup-btns(right);
+      }
+    }
+
+    &.btn-primary,
+    &.btn-neutral,
+    &.btn-success,
+    &.btn-danger,
+    &.btn-warning {
+      .tooltip:not(:last-child) > .btn,
+      > .btn:not(:last-child) {
+        // apply only to direct .btn children
+        // special margin right based on button border width
+        margin: 0 buttons-variables.$hermes-btn-border-width 0 0;
+      }
+    }
+
+    > .btn-group-overflow {
+      position: relative;
+    }
+
+    > .btn-group-overflow:last-child:not(:first-child) > .btn:first-child {
+      border-radius: 0 buttons-variables.$hermes-btn-border-radius buttons-variables.$hermes-btn-border-radius 0;
+    }
+
+    > .btn-group-overflow:last-child:first-child > .btn:first-child {
+      border-radius: buttons-variables.$hermes-btn-border-radius;
+    }
+
+    //To avoid double borders
+    .btn:not([disabled]) + .btn,
+    .tooltip:not(:first-child) .btn,
+    .btn:not([disabled]) + .btn-group-overflow .btn,
+    .btn:not([disabled]) + .dropdown .dropdown-toggle {
+      border-left: none;
+    }
+
+    //Flat Buttons
+    &.btn-link .dropdown-toggle {
+      min-width: 0;
+    }
+
+    //Flat Icon Buttons
+    &.btn-icon-link {
+      &.btn-link .btn {
+        min-width: 0;
+      }
+    }
+
+    //Flat Icon Buttons All
+    &.btn-icon {
+      .btn {
+        min-width: 0;
+      }
+
+      .btn-group-overflow .dropdown-toggle {
+        padding: buttons-variables.$hermes-btn-appearance-form-padding;
+      }
+    }
+
+    //Icons and their corresponding title
+    .hermes-icon-title {
+      display: none;
+      text-transform: none;
+    }
+
+    .btn-group-overflow .dropdown-toggle {
+      display: block;
+      padding: 0 density.$hermes-base-horizontal-offset-2xl;
+      min-width: unset;
+    }
+
+    .dropdown-menu {
+      hermes-icon,
+      hermes-icon {
+        display: none;
+      }
+
+      .hermes-icon-title {
+        display: inline;
+      }
+    }
+  }
+
+  // @deprecated last of deprecated forms CSS to keep btn groups working
+  // should be removed when btn is revamped with hermes- naming conventions
+  .checkbox,
+  .radio {
+    position: relative;
+
+    input[type='checkbox'],
+    input[type='radio'] {
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      @include mixins.equilateral(0);
+
+      opacity: 0;
+    }
+  }
+
+  .dropdown-menu.hermes-button-group-menu {
+    visibility: visible;
+  }
+}

package/collapsible-panel/_mixins.collapsible-panel.scss

@@ -0,0 +1,189 @@
+/*
+ * 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 'variables.collapsible-panel' as panel-variables;
+@use '../styles/variables/variables.density' as density;
+
+@mixin collapsible-panel(
+  $prefix,
+  $text-color: panel-variables.$hermes-collapsible-panel-text-color,
+  $text-color-hover: panel-variables.$hermes-collapsible-panel-text-color-hover,
+  $text-color-active: panel-variables.$hermes-collapsible-panel-text-color-active,
+  $panel-disabled-color: panel-variables.$hermes-collapsible-panel-panel-disabled-color,
+  $content-background-color: panel-variables.$hermes-collapsible-panel-content-background-color,
+  $header-background-color: panel-variables.$hermes-collapsible-panel-header-background-color,
+  $header-disabled-background-color: panel-variables.$hermes-collapsible-panel-header-disabled-background-color,
+  $header-hover-background-color: panel-variables.$hermes-collapsible-panel-header-hover-background-color,
+  $header-active-background-color: panel-variables.$hermes-collapsible-panel-header-active-background-color,
+  $header-open-background-color: panel-variables.$hermes-collapsible-panel-header-open-background-color,
+  $header-open-active-background-color: panel-variables.$hermes-collapsible-panel-header-open-active-background-color,
+  $header-open-hover-background-color: panel-variables.$hermes-collapsible-panel-header-open-hover-background-color,
+  $border-color: panel-variables.$hermes-collapsible-panel-border-color,
+  $content-color: panel-variables.$hermes-collapsible-panel-content-color,
+  $responsive-breakpoint: panel-variables.$hermes-collapsible-panel-responsive-breakpoint
+) {
+  .#{$prefix}-panel {
+    display: block;
+  }
+
+  .#{$prefix}-header {
+    width: 100%;
+    border: tokens.$hermes-alias-object-border-width-100 solid $border-color;
+    border-bottom-width: 0;
+    background: $header-background-color;
+    color: $text-color;
+    text-align: left;
+    transition: background-color tokens.$hermes-global-animation-duration-quick tokens.$hermes-global-animation-easing-in-out;
+
+    @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
+
+    &:hover {
+      color: $text-color-hover;
+      background-color: $header-hover-background-color;
+    }
+
+    &:active {
+      color: $text-color-active;
+      background-color: $header-active-background-color;
+    }
+
+    .#{$prefix}-panel-disabled > div > & {
+      background-color: $header-background-color;
+
+      &:hover,
+      &:active {
+        background-color: $header-background-color;
+      }
+    }
+
+    .#{$prefix}-panel-disabled > .#{$prefix}-panel-open > & {
+      background-color: $header-disabled-background-color;
+
+      &:hover,
+      &:active {
+        background-color: $header-disabled-background-color;
+      }
+    }
+  }
+
+  .#{$prefix}-panel:last-child {
+    .#{$prefix}-header,
+    .#{$prefix}-content {
+      border-bottom: tokens.$hermes-global-space-1 solid $border-color;
+    }
+  }
+
+  .#{$prefix}-header-button {
+    display: flex;
+    flex-flow: row wrap;
+    flex: 1 1 0;
+    width: 100%;
+    border: 0;
+    padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-l;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    gap: density.$hermes-base-gap-s;
+
+    @media (min-width: $responsive-breakpoint) {
+      flex-flow: row;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      .#{$prefix}-status,
+      .#{$prefix}-title,
+      .#{$prefix}-description {
+        color: $panel-disabled-color;
+      }
+    }
+  }
+
+  .#{$prefix}-status {
+    display: inline-flex;
+    width: density.$hermes-base-layout-space-xl;
+    vertical-align: top;
+  }
+
+  .#{$prefix}-title {
+    display: inline-block;
+  }
+
+  .#{$prefix}-header-has-description {
+    .#{$prefix}-title {
+      min-width: panel-variables.$hermes-collapsible-panel-title-min-width;
+      max-width: mixins.baselinePx(264);
+      width: 100%;
+    }
+  }
+
+  .#{$prefix}-description {
+    display: inline-block;
+    max-width: mixins.baselinePx(650);
+
+    @media (min-width: $responsive-breakpoint) {
+      margin-left: density.$hermes-base-horizontal-offset-l;
+    }
+  }
+
+  .#{$prefix}-content {
+    display: none;
+    overflow: hidden;
+    border: tokens.$hermes-global-space-1 solid $border-color;
+    border-bottom: 0;
+    background: $content-background-color;
+
+    .hermes-form {
+      padding: 0;
+    }
+  }
+
+  .#{$prefix}-inner-content {
+    padding: density.$hermes-base-vertical-offset-xl density.$hermes-base-horizontal-offset-xl;
+  }
+
+  .#{$prefix}-angle {
+    transition: all tokens.$hermes-global-animation-duration-quick tokens.$hermes-global-animation-easing-in-out;
+    transform: rotate(90deg);
+  }
+
+  .#{$prefix}-panel-open {
+    & > .#{$prefix}-content-region .#{$prefix}-content {
+      display: block;
+    }
+
+    & > .#{$prefix}-header {
+      border-bottom: 0 !important;
+      background: $header-open-background-color;
+
+      &:hover {
+        background-color: $header-open-hover-background-color;
+      }
+
+      &:active {
+        color: $text-color-active;
+        background-color: $header-open-active-background-color;
+      }
+
+      .#{$prefix}-angle {
+        visibility: visible;
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .#{$prefix}-panel:not(:last-child) > div[class*='#{$prefix}-panel-'] > .#{$prefix}-header {
+    &,
+    & + .#{$prefix}-content-region > .#{$prefix}-content {
+      border-bottom: none;
+    }
+  }
+}

package/collapsible-panel/_properties.collapsible-panel.scss

@@ -0,0 +1,42 @@
+/*
+ * 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('collapsible-panel.properties') {
+  @include mixins.root-or-host() {
+    &,
+    [hermes-density] {
+      --hermes-collapsible-panel-border-radius: #{density.$hermes-base-border-radius-s};
+      --hermes-collapsible-panel-title-min-width: #{density.$hermes-base-layout-space-4xl};
+    }
+
+    &,
+    [hermes-theme] {
+      --hermes-collapsible-panel-text-color: #{tokens.$hermes-alias-object-interaction-color};
+      --hermes-collapsible-panel-text-color-hover: #{tokens.$hermes-alias-object-interaction-color-hover};
+      --hermes-collapsible-panel-text-color-active: #{tokens.$hermes-alias-object-interaction-color-active};
+      --hermes-collapsible-panel-panel-disabled-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
+      --hermes-collapsible-panel-content-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-collapsible-panel-content-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-collapsible-panel-header-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-collapsible-panel-header-disabled-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-collapsible-panel-header-hover-background-color: #{tokens.$hermes-alias-object-interaction-background-hover};
+      --hermes-collapsible-panel-header-active-background-color: #{tokens.$hermes-alias-object-interaction-background-active};
+      --hermes-collapsible-panel-header-open-background-color: #{tokens.$hermes-alias-object-interaction-background-selected};
+      --hermes-collapsible-panel-header-open-active-background-color: var(
+        --hermes-alias-object-interaction-background-selected-active
+      );
+      --hermes-collapsible-panel-header-open-hover-background-color: var(
+        --hermes-alias-object-interaction-background-selected-hover
+      );
+      --hermes-collapsible-panel-border-color: #{tokens.$hermes-alias-object-border-color};
+    }
+  }
+}

package/collapsible-panel/_variables.collapsible-panel.scss

@@ -0,0 +1,40 @@
+/*
+ * 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/variables/variables';
+
+$hermes-collapsible-panel-text-color: var(--hermes-collapsible-panel-text-color) !default;
+$hermes-collapsible-panel-text-color-hover: var(--hermes-collapsible-panel-text-color-hover) !default;
+$hermes-collapsible-panel-text-color-active: var(--hermes-collapsible-panel-text-color-active) !default;
+$hermes-collapsible-panel-panel-disabled-color: var(--hermes-collapsible-panel-panel-disabled-color) !default;
+$hermes-collapsible-panel-content-background-color: var(--hermes-collapsible-panel-content-background-color) !default;
+$hermes-collapsible-panel-header-background-color: var(--hermes-collapsible-panel-header-background-color) !default;
+$hermes-collapsible-panel-header-disabled-background-color: var(
+  --hermes-collapsible-panel-header-disabled-background-color
+) !default;
+$hermes-collapsible-panel-header-hover-background-color: var(
+  --hermes-collapsible-panel-header-hover-background-color
+) !default;
+$hermes-collapsible-panel-header-active-background-color: var(
+  --hermes-collapsible-panel-header-active-background-color
+) !default;
+$hermes-collapsible-panel-header-open-background-color: var(--hermes-collapsible-panel-header-open-background-color) !default;
+$hermes-collapsible-panel-header-open-active-background-color: var(
+  --hermes-collapsible-panel-header-open-active-background-color
+) !default;
+$hermes-collapsible-panel-header-open-hover-background-color: var(
+  --hermes-collapsible-panel-header-open-hover-background-color
+) !default;
+
+$hermes-collapsible-panel-content-color: var(--hermes-collapsible-panel-content-color) !default;
+
+$hermes-collapsible-panel-responsive-breakpoint: map.get(variables.$hermes-grid-breakpoints, sm) !default;
+
+$hermes-collapsible-panel-border-color: var(--hermes-collapsible-panel-border-color) !default;
+$hermes-collapsible-panel-border-radius: var(--hermes-collapsible-panel-border-radius) !default;
+$hermes-collapsible-panel-title-min-width: var(--hermes-collapsible-panel-title-min-width) !default;

package/data/_mixins.tables.scss

@@ -0,0 +1,114 @@
+/*
+ * 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.tables' as table-variables;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+// Mixin for basic table styles to be able to reuse them on non-table elements.
+
+@mixin basic-table($table, $thead, $tbody, $tr, $th, $td) {
+  #{$table} {
+    border-collapse: separate;
+    border: table-variables.$hermes-table-borderwidth solid table-variables.$hermes-table-border-color;
+    border-radius: table-variables.$hermes-table-border-radius;
+    background-color: table-variables.$hermes-table-bgcolor;
+    color: table-variables.$hermes-table-font-color;
+    margin: table-variables.$hermes-table-margin;
+    max-width: 100%;
+    width: 100%;
+
+    #{$th},
+    #{$td} {
+      border-top: table-variables.$hermes-table-borderwidth solid table-variables.$hermes-tablerow-bordercolor;
+      padding: table-variables.$hermes-table-cell-padding;
+      text-align: center;
+      vertical-align: top;
+
+      &.left {
+        text-align: left;
+      }
+
+      &.right {
+        text-align: right;
+      }
+    }
+
+    #{$td} {
+      min-height: table-variables.$hermes-table-cell-height;
+
+      @include mixins.generate-typography-token('BODY-14-RG-CPT');
+    }
+
+    #{$th} {
+      // shadcn Data Table: header text is the same size as body text (no separate small-caption
+      // style), just bumped to font-medium for emphasis instead of body's regular weight.
+      @include mixins.generate-typography-token('BODY-14-RG-CPT');
+
+      font-weight: tokens.$hermes-alias-typography-font-weight-medium;
+      color: table-variables.$hermes-thead-color;
+      background-color: table-variables.$hermes-thead-bgcolor;
+      vertical-align: middle;
+      border-bottom: table-variables.$hermes-table-borderwidth solid table-variables.$hermes-table-border-color;
+      border-top: 0 none;
+    }
+
+    #{$tbody} #{$tr}:first-child #{$td} {
+      border-top: 0 none;
+    }
+
+    // in the rare event we have more than one tbody element.
+    #{$tbody} + #{$tbody} {
+      border-top: table-variables.$hermes-table-borderwidth solid table-variables.$hermes-table-border-color;
+    }
+
+    // Rounded corners on tables are a pain...
+    #{$thead} #{$th} {
+      &:first-child {
+        border-radius: 0;
+        border-top-left-radius: table-variables.$hermes-table-cornercellradius;
+      }
+
+      &:last-child {
+        border-radius: 0;
+        border-top-right-radius: table-variables.$hermes-table-cornercellradius;
+      }
+    }
+
+    #{$tbody}:last-child {
+      #{$tr}:last-child {
+        #{$td} {
+          &:first-child {
+            border-radius: 0;
+            border-bottom-left-radius: table-variables.$hermes-table-cornercellradius;
+          }
+
+          &:last-child {
+            border-radius: 0;
+            border-bottom-right-radius: table-variables.$hermes-table-cornercellradius;
+          }
+        }
+      }
+    }
+  }
+
+  // @deprecated CSS rule #{$table}-compact in favor of compact mode in density theme
+  #{$table}-compact {
+    --hermes-table-margin: #{mixins.baselinePx(20)} 0 0 0;
+    --hermes-table-cell-vertical-padding: #{table-variables.$hermes-table-compact-vertical-padding};
+    #{$th},
+    #{$td} {
+      min-height: table-variables.$hermes-table-compact-cell-height;
+      padding: table-variables.$hermes-table-cell-compact-padding;
+    }
+    #{$td} {
+      font-size: mixins.baselinePx(13);
+      line-height: tokens.$hermes-global-space-7;
+    }
+  }
+}