@hermes-ui/angular 0.1.4

package/forms/styles/_file-input.clarity.scss

@@ -0,0 +1,134 @@
+/*
+ * 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 '../../styles/variables/variables.density' as density;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.file-input') {
+  .hermes-file-input-wrapper {
+    display: flex;
+    position: relative;
+    gap: density.$hermes-base-gap-xs;
+
+    .hermes-control-label {
+      padding: 0;
+    }
+
+    .hermes-file-input {
+      @include mixins.equilateral(0);
+
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+
+    .hermes-file-input-browse-button,
+    .hermes-file-input-clear-button {
+      margin: 0;
+    }
+
+    .hermes-file-input-clear-button {
+      padding: 0;
+      min-width: unset;
+      border: 0;
+
+      hermes-icon:not([size]),
+      hermes-icon:not([size]) {
+        @include mixins.equilateral(density.$hermes-base-icon-size-l);
+      }
+    }
+
+    .hermes-file-input-browse-button-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .hermes-form-compact .hermes-file-input-wrapper {
+    margin-top: 0;
+  }
+
+  .hermes-form-horizontal .hermes-file-input-wrapper {
+    @media screen and (min-width: map.get(variables.$hermes-grid-breakpoints, md)) {
+      margin-top: 0;
+    }
+  }
+
+  .hermes-file-list {
+    display: flex;
+    flex-direction: column;
+    gap: density.$hermes-base-gap-s;
+
+    .hermes-file-list-item {
+      max-width: mixins.baselinePx(500);
+
+      &:first-of-type {
+        margin-top: density.$hermes-base-gap-s;
+      }
+
+      &.hermes-success .hermes-validate-icon {
+        color: forms-variables.$hermes-forms-valid-color;
+        fill: forms-variables.$hermes-forms-valid-color;
+      }
+
+      &.hermes-error .hermes-validate-icon {
+        color: forms-variables.$hermes-forms-invalid-color;
+        fill: forms-variables.$hermes-forms-invalid-color;
+      }
+    }
+
+    .hermes-file-label-and-status-icon {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .hermes-file-label {
+      white-space: wrap;
+      padding-right: density.$hermes-base-horizontal-offset-xs;
+      margin-bottom: 0;
+      margin-right: density.$hermes-base-gap-xs;
+      border-radius: density.$hermes-base-border-radius-l;
+    }
+
+    .hermes-file-clear-button {
+      margin: 0;
+      padding: 0;
+
+      @include mixins.min-equilateral(density.$hermes-base-icon-size-s);
+
+      hermes-icon,
+      hermes-icon {
+        margin: 0;
+      }
+    }
+  }
+
+  .hermes-form-compact {
+    .hermes-file-list-item {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: density.$hermes-base-gap-xs;
+      max-width: unset;
+
+      .hermes-subtext {
+        margin: 0;
+        align-self: unset;
+        padding: 0;
+      }
+    }
+
+    .hermes-file-list-break {
+      flex-basis: 100%;
+      height: 0;
+    }
+  }
+}

package/forms/styles/_file.clarity.scss

@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+/*
+ * These styles are not documented and are deprecated in favor in of _file-input.clarity.scss.
+ * The file input component uses .hermes-file-input-wrapper instead due to differences from these styles.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.file') {
+  .hermes-file-wrapper {
+    @include forms-mixins.form-flatten-validate-text();
+
+    position: relative;
+
+    .hermes-control-label {
+      padding: 0;
+    }
+
+    .btn {
+      margin: 0;
+    }
+  }
+
+  .hermes-file {
+    @include mixins.equilateral(0);
+
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .hermes-form-compact .hermes-file-wrapper {
+    @include forms-mixins.form-flatten-compact-adjustments();
+
+    margin-top: 0;
+
+    & ~ .hermes-subtext,
+    .hermes-control-label {
+      margin-top: 0;
+    }
+  }
+}

package/forms/styles/_form.clarity.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 '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.wrappers') {
+  .hermes-form {
+    $widthSize: calc(100% - #{forms-variables.$hermes-forms-icon-size});
+
+    padding: density.$hermes-base-vertical-offset-s density.$hermes-base-horizontal-offset-s;
+
+    &-full-width {
+      .hermes-form-control {
+        .hermes-control-container,
+        .hermes-native-select-wrapper,
+        .hermes-input-wrapper,
+        .hermes-number-input-wrapper,
+        .hermes-combobox {
+          width: $widthSize;
+        }
+
+        .hermes-combobox-wrapper,
+        .hermes-textarea-wrapper,
+        .hermes-input-group,
+        input,
+        textarea,
+        select {
+          width: 100%;
+        }
+
+        .hermes-combobox {
+          display: inline-flex;
+        }
+      }
+
+      &.hermes-form-compact {
+        .hermes-form-control {
+          .hermes-input-wrapper,
+          .hermes-number-input-wrapper,
+          .hermes-native-select-wrapper,
+          .hermes-native-multiselect-wrapper {
+            display: inline-flex;
+          }
+        }
+
+        .hermes-control-container {
+          flex-wrap: nowrap;
+        }
+
+        .hermes-subtext {
+          flex: 0 0 auto;
+        }
+      }
+
+      &:not(.hermes-form-compact) .hermes-form-control {
+        .hermes-error .hermes-native-select-wrapper::after,
+        .hermes-success .hermes-native-select-wrapper::after {
+          right: forms-variables.$hermes-forms-baseline;
+        }
+
+        .hermes-control-container:not(.hermes-error, .hermes-success) textarea {
+          width: $widthSize;
+        }
+      }
+    }
+  }
+
+  .hermes-form-group {
+    padding: density.$hermes-base-vertical-offset-s density.$hermes-base-horizontal-offset-s;
+  }
+
+  .hermes-required-mark::after {
+    content: '*';
+    color: forms-variables.$hermes-forms-invalid-color;
+    fill: forms-variables.$hermes-forms-invalid-color;
+
+    // using margin as gap
+    margin-left: density.$hermes-base-gap-xs;
+  }
+}

package/forms/styles/_input-group.clarity.scss

@@ -0,0 +1,126 @@
+/*
+ * 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.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('forms.input-group') {
+  .hermes-input-group {
+    @include forms-mixins.form-fields-appearance();
+    @include forms-mixins.field-focus-ring();
+
+    position: relative;
+    max-width: 100%;
+    max-height: forms-variables.$hermes-forms-input-wrapper-height;
+    padding-right: density.$hermes-base-horizontal-offset-xs;
+
+    &.hermes-focus {
+      width: auto;
+    }
+
+    // the border/radius/shadow/ring live on the group wrapper; an input nested inside it
+    // (password, number-input, datalist, datepicker, date-range-picker...) must stay
+    // borderless in every state, including focus, so it never renders as a second box
+    .hermes-input {
+      background: none;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      margin-right: 0;
+      max-width: 100%;
+
+      &:not([readonly]):focus,
+      &.hermes-focus {
+        background: none;
+        background-size: 0;
+        border: 0;
+        box-shadow: none;
+      }
+    }
+
+    /* handle case when select is used without hermes-native-select-wrapper */
+    select {
+      border: none;
+    }
+
+    .hermes-native-select-wrapper select,
+    .hermes-native-multiselect-wrapper select {
+      border: none;
+    }
+
+    .hermes-input-group-addon {
+      color: forms-variables.$hermes-forms-subtext-color;
+    }
+
+    .hermes-input-group-actions {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .hermes-input-group-icon-action {
+      @include mixins.hermes-no-styles-button();
+
+      padding: 0 density.$hermes-base-horizontal-offset-s;
+      cursor: pointer;
+
+      hermes-icon,
+      hermes-icon {
+        fill: forms-variables.$hermes-forms-icon-color;
+
+        &:not([size]) {
+          @include mixins.equilateral(var(--hermes-forms-input-group-icon-action-size));
+        }
+      }
+    }
+  }
+
+  .hermes-error .hermes-input-group {
+    border-color: forms-variables.$hermes-forms-invalid-color;
+
+    @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-invalid-color);
+  }
+
+  .hermes-success .hermes-input-group {
+    border-color: forms-variables.$hermes-forms-valid-color;
+
+    @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-valid-color);
+  }
+
+  .hermes-form-control-disabled {
+    .hermes-input-group {
+      border-color: forms-variables.$hermes-forms-border-disabled-color;
+    }
+
+    .hermes-input-group-icon-action {
+      color: forms-variables.$hermes-forms-text-disabled-color;
+      cursor: not-allowed;
+
+      hermes-icon,
+      hermes-icon {
+        fill: forms-variables.$hermes-forms-input-group-icon-disabled-color;
+      }
+    }
+  }
+
+  .hermes-input-group:has(input[readonly]),
+  .hermes-form-control-readonly .hermes-input-group {
+    border: none;
+    background: transparent;
+
+    .hermes-input-group-actions {
+      display: none;
+    }
+  }
+
+  .hermes-form-horizontal .hermes-input-group {
+    max-width: 100%;
+    padding-right: 0;
+  }
+}

package/forms/styles/_input.clarity.scss

@@ -0,0 +1,83 @@
+/*
+ * 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.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.input') {
+  .hermes-input-wrapper {
+    white-space: nowrap;
+    max-height: forms-variables.$hermes-forms-input-wrapper-height;
+  }
+
+  .hermes-input {
+    @include forms-mixins.custom-inputs-reset(forms-variables.$hermes-forms-input-wrapper-height);
+    @include forms-mixins.form-fields-appearance();
+
+    padding: forms-variables.$hermes-forms-input-padding;
+    max-height: forms-variables.$hermes-forms-input-wrapper-height;
+
+    // Not the shared SECONDARY-13-RG-EXP typography token (used by labels, table headers,
+    // etc. too): the field's own text needs to match shadcn's 14px input text without
+    // rippling that change into every other consumer of that token.
+    font-size: forms-variables.$hermes-forms-input-font-size;
+    font-weight: var(--hermes-alias-typography-secondary-font-weight);
+    line-height: forms-variables.$hermes-forms-input-line-height;
+
+    &[readonly] {
+      border: none;
+    }
+
+    &:not([readonly]) {
+      @include forms-mixins.field-focus-ring();
+    }
+
+    &:disabled {
+      @include forms-mixins.disabled-form-fields();
+      @include mixins.input-placeholder-wrapper() {
+        color: forms-variables.$hermes-forms-placeholder-disabled-color;
+      }
+    }
+  }
+
+  .hermes-error .hermes-input:not([readonly]) {
+    border-color: forms-variables.$hermes-forms-invalid-color;
+
+    @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-invalid-color);
+  }
+
+  .hermes-success .hermes-input:not([readonly]) {
+    border-color: forms-variables.$hermes-forms-valid-color;
+
+    @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-valid-color);
+  }
+
+  .hermes-form-control.row .hermes-input-wrapper {
+    max-width: calc(100% - #{forms-variables.$hermes-forms-icon-size});
+  }
+
+  .hermes-form-compact .hermes-input {
+    @include forms-mixins.form-flatten-compact-adjustments();
+  }
+
+  .hermes-form-control-readonly .hermes-input {
+    border: none;
+  }
+
+  .hermes-form-control-multi .hermes-input {
+    max-width: calc(100% + #{forms-variables.$hermes-forms-icon-size});
+  }
+
+  /**
+   Placeholder
+   **/
+
+  @include mixins.input-placeholder-wrapper() {
+    color: forms-variables.$hermes-forms-placeholder-color;
+  }
+}

package/forms/styles/_mixins.forms.scss

@@ -0,0 +1,193 @@
+/*
+ * 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.global';
+@use '../../styles/variables/variables.density' as density;
+@use 'variables.forms' as forms-variables;
+@use '../../button/variables.toggles' as toggle-variables;
+
+// Flatten the error icon and message to be inline for certain input types
+
+@mixin form-flatten-validate-text() {
+  .hermes-control-label {
+    font-weight: normal;
+    display: block;
+  }
+}
+
+// Used to provide an inline set of labels for checkbox/radios
+
+@mixin form-inline-input($wrap: false) {
+  display: flex;
+
+  @if $wrap {
+    flex-wrap: wrap;
+    align-content: flex-start;
+  }
+
+  .hermes-control-label {
+    display: inline-block;
+    margin-right: density.$hermes-base-gap-m;
+    width: auto;
+  }
+}
+
+// Used to adjust the flattened error icon message for compact
+
+@mixin form-flatten-compact-adjustments() {
+  max-width: 100%;
+
+  & ~ .hermes-subtext {
+    margin-left: density.$hermes-base-horizontal-offset-xs;
+  }
+}
+
+// Standard Clarity Input Bottom Border Animation
+// @deprecated kept for backward compatibility; boxed fields use field-focus-ring() instead
+
+@mixin input-border-bottom-animation($border-color: forms-variables.$hermes-forms-focused-color) {
+  // Border-bottom animation on focus
+  background: linear-gradient(to bottom, transparent 95%, #{$border-color} 95%) no-repeat;
+  background-size: 0 100%;
+  transition: background-size 0.2s ease;
+
+  &:focus,
+  &.hermes-focus,
+  &:focus-within {
+    border-bottom-color: $border-color;
+    background-size: 100% 100%;
+  }
+}
+
+// shadcn-style focus ring: border changes color and a soft glow appears around the field,
+// instead of the Clarity underline growing from 0 to 100% width
+@mixin field-focus-ring($border-color: forms-variables.$hermes-forms-focused-color) {
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:focus,
+  &.hermes-focus,
+  &:focus-within {
+    border-color: $border-color;
+    box-shadow: 0 0 0 3px color-mix(in srgb, #{$border-color} 35%, transparent);
+    outline: none;
+  }
+}
+
+// Style default input
+
+@mixin custom-inputs-reset($height) {
+  @include mixins.hermes-appearance-normal();
+
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: none;
+  height: $height;
+
+  &:focus {
+    outline: 0;
+  }
+}
+@mixin form-fields-appearance(
+  $border-color: forms-variables.$hermes-forms-border-color,
+  $text-color: forms-variables.$hermes-forms-text-color
+) {
+  color: $text-color;
+  background-color: forms-variables.$hermes-forms-background-color;
+  border: #{tokens.$hermes-alias-object-border-width-100} solid #{$border-color};
+  border-radius: forms-variables.$hermes-forms-border-radius;
+  box-shadow: forms-variables.$hermes-forms-shadow;
+  display: inline-flex;
+  align-items: center;
+}
+@mixin disabled-form-fields() {
+  color: forms-variables.$hermes-forms-text-disabled-color;
+  cursor: not-allowed;
+}
+@mixin checkbox-radio-toggle-control-group-gap() {
+  & + .hermes-checkbox-wrapper,
+  & + .hermes-radio-wrapper {
+    padding-top: density.$hermes-base-control-group-gap;
+  }
+
+  & + .hermes-toggle-wrapper {
+    margin-top: density.$hermes-base-control-group-gap;
+  }
+}
+@mixin checkbox-radio-input-styles($size) {
+  position: relative;
+  //NOTE: Even though the input is invisible, we assign it a height
+  //and width so that it aligns right behind the fake checkbox
+  //and so that the user's default input size doesn't affect it
+
+  @include mixins.min-equilateral($size);
+}
+@mixin checkbox-radio-label-styles($min-height, $color, $typography) {
+  //Positioning
+  position: relative;
+
+  //Display
+  display: block;
+  margin-top: 0;
+  cursor: pointer;
+  min-height: $min-height;
+  padding: density.$hermes-base-vertical-offset-multi-row-inline-s 0;
+  color: $color;
+
+  @include mixins.generate-typography-token($typography);
+}
+@mixin checkbox-radio-shared-inactive($size, $border-color) {
+  //Display
+  content: '';
+  position: absolute;
+  display: inline-block;
+
+  @include mixins.equilateral($size);
+
+  border: tokens.$hermes-global-space-1 solid $border-color;
+}
+@mixin custom-inputs($height) {
+  @include mixins.hermes-appearance-normal();
+
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: none;
+  height: $height;
+
+  &:focus {
+    outline: 0;
+  }
+}
+@mixin range-style($height, $background-color) {
+  appearance: none;
+  left: 0;
+  height: $height;
+  background-color: $background-color;
+}
+@mixin range-border-style($border-color, $border-radius, $border-width) {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+}
+@mixin range-thumb-style($size, $background-color) {
+  border-radius: 50%;
+  background-color: $background-color;
+
+  @include mixins.equilateral($size);
+}
+@mixin hermes-toggle-transition-styles() {
+  transition-duration: toggle-variables.$hermes-toggle-transition-time;
+  transition-timing-function: toggle-variables.$hermes-toggle-transition-animation;
+}