@hermes-ui/angular 0.1.4

package/forms/styles/_native-select.clarity.scss

@@ -0,0 +1,178 @@
+/*
+ * 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 '../../image/icons.clarity';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use '../../styles/variables/variables.density' as density;
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('forms.native-select') {
+  .hermes-native-select-wrapper,
+  .hermes-native-multiselect-wrapper {
+    position: relative;
+    white-space: nowrap;
+
+    select {
+      @include forms-mixins.custom-inputs(forms-variables.$hermes-forms-input-wrapper-height);
+      @include forms-mixins.form-fields-appearance();
+      @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
+
+      &:not([multiple]) {
+        @include forms-mixins.field-focus-ring();
+      }
+
+      &[multiple]:focus {
+        @include forms-mixins.field-focus-ring();
+      }
+
+      position: relative;
+      padding: 0 density.$hermes-base-icon-size-l 0 #{density.$hermes-base-horizontal-offset-s};
+      cursor: pointer;
+
+      //Moves the :after pseudo element (arrow) to the back so that clicking over it activates
+      //the dropdown.
+      z-index: map.get(variables.$hermes-layers, native-select-box);
+
+      &:hover,
+      &:active {
+        border-color: forms-variables.$hermes-forms-native-select-hover-border-color;
+        background: forms-variables.$hermes-forms-native-select-hover-background;
+
+        &:disabled {
+          cursor: not-allowed;
+          border-color: forms-variables.$hermes-forms-native-select-disabled-border-color;
+        }
+      }
+
+      &:disabled option,
+      option:disabled {
+        color: forms-variables.$hermes-forms-native-select-disabled-color;
+        cursor: not-allowed;
+      }
+
+      option {
+        color: forms-variables.$hermes-forms-native-select-option-color;
+        background-color: forms-variables.$hermes-forms-native-select-option-background-color;
+      }
+    }
+  }
+
+  .hermes-native-select-wrapper {
+    max-height: forms-variables.$hermes-forms-input-wrapper-height;
+    display: inline-block;
+
+    &::after {
+      position: absolute;
+      content: '';
+
+      @include mixins.equilateral(forms-variables.$hermes-forms-native-select-caret-size);
+
+      top: calc((100% - forms-variables.$hermes-forms-native-select-caret-size) / 2);
+      right: density.$hermes-base-horizontal-offset-s;
+      // Using mask instead of background-image so we can use the CSS properties
+      // and support both light / dark themes.
+      mask: icons.generateCaretIcon();
+      mask-repeat: no-repeat;
+      background-color: forms-variables.$hermes-forms-native-select-caret-color;
+    }
+
+    &:hover::after {
+      background-color: forms-variables.$hermes-forms-native-select-caret-hover-color;
+    }
+  }
+
+  .hermes-native-multiselect-wrapper {
+    display: flex;
+
+    .hermes-validate-icon {
+      margin-left: 0;
+    }
+  }
+
+  //Multiple Select
+  select[multiple],
+  select[size] {
+    padding: 0;
+    border: tokens.$hermes-alias-object-border-width-100 solid forms-variables.$hermes-forms-native-select-multiple-border-color;
+    background: forms-variables.$hermes-forms-native-select-multiple-background-color;
+    border-radius: forms-variables.$hermes-forms-border-radius;
+    height: auto;
+    min-width: mixins.baselinePx(120);
+
+    &:hover,
+    &:active {
+      background: forms-variables.$hermes-forms-native-select-multiple-background-color;
+      border-color: forms-variables.$hermes-forms-native-select-multiple-border-color;
+    }
+
+    option {
+      @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+
+      padding: density.$hermes-base-vertical-offset-xs density.$hermes-base-horizontal-offset-2xl
+        density.$hermes-base-vertical-offset-xs density.$hermes-base-horizontal-offset-l;
+      color: forms-variables.$hermes-forms-native-select-multiple-option-color;
+
+      &:checked {
+        background-color: forms-variables.$hermes-forms-native-select-multiple-selected-option-background-color;
+      }
+    }
+  }
+
+  .hermes-error select {
+    &:not([multiple]) {
+      border-color: forms-variables.$hermes-forms-invalid-color;
+
+      @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-invalid-color);
+    }
+
+    &[multiple] {
+      border-color: forms-variables.$hermes-forms-invalid-color;
+    }
+  }
+
+  .hermes-success select {
+    &:not([multiple]) {
+      border-color: forms-variables.$hermes-forms-valid-color;
+
+      @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-valid-color);
+    }
+
+    &[multiple] {
+      border-color: forms-variables.$hermes-forms-valid-color;
+    }
+  }
+
+  .hermes-form-control-disabled .hermes-native-select {
+    &.disabled {
+      color: forms-variables.$hermes-forms-native-select-disabled-color;
+      cursor: not-allowed;
+
+      &:hover::after {
+        color: forms-variables.$hermes-forms-native-select-caret-color;
+      }
+    }
+
+    &.disabled > select,
+    select:disabled {
+      color: forms-variables.$hermes-forms-native-select-disabled-color;
+      cursor: not-allowed;
+
+      &:hover {
+        background: none;
+        border-color: forms-variables.$hermes-forms-border-color;
+      }
+    }
+  }
+
+  .hermes-form-compact .hermes-native-multiselect-wrapper {
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,58 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+@use 'sass:selector';
+
+@include mixins.exports('forms.number-input') {
+  .hermes-number-input-wrapper {
+    display: inline-block;
+    white-space: nowrap;
+    max-height: forms-variables.$hermes-forms-input-wrapper-height;
+
+    .hermes-number-input {
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      appearance: textfield;
+
+      &-separator {
+        background: tokens.$hermes-alias-object-border-color;
+        width: tokens.$hermes-alias-object-border-width-100;
+        height: density.$hermes-base-row-height-xs;
+      }
+    }
+
+    .hermes-input-group-icon-action {
+      height: calc(forms-variables.$hermes-forms-input-wrapper-height - tokens.$hermes-alias-object-border-width-300);
+      padding: 0 density.$hermes-base-horizontal-offset-xs;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background-color: tokens.$hermes-alias-object-interaction-background-hover;
+      }
+
+      &:active {
+        background-color: tokens.$hermes-alias-object-interaction-background-active;
+      }
+
+      &:disabled {
+        background-color: unset;
+      }
+    }
+  }
+}

package/forms/styles/_password.clarity.scss

@@ -0,0 +1,26 @@
+/*
+ * 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.forms' as forms-variables;
+
+.hermes-input-wrapper input[hermesPassword] {
+  & + button.hermes-input-group-icon-action {
+    .hermes-password-eye-icon {
+      color: forms-variables.$hermes-forms-password-eye-icon-color;
+    }
+  }
+
+  & + button.hermes-input-group-icon-action[disabled] {
+    .hermes-password-eye-icon {
+      fill: forms-variables.$hermes-forms-password-disabled-eye-icon-color;
+    }
+  }
+
+  &[disabled] {
+    color: forms-variables.$hermes-forms-password-disabled-eye-icon-color;
+  }
+}

package/forms/styles/_properties.forms.scss

@@ -0,0 +1,180 @@
+/*
+ * 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('forms.properties') {
+  @include mixins.root-or-host() {
+    // Legacy HERMES form base line (6px). Baked deeply in all form calculations.
+    // Don't change it unless you know exactly what you are doing.
+    --hermes-forms-baseline: #{tokens.$hermes-global-space-4};
+    --hermes-forms-label-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
+    --hermes-forms-checkbox-height: #{tokens.$hermes-global-space-7};
+
+    &,
+    & [hermes-density] {
+      --hermes-forms-icon-size: #{density.$hermes-base-icon-size-s};
+      --hermes-forms-input-group-icon-action-size: #{density.$hermes-base-icon-size-s};
+      --hermes-forms-checkbox-border-radius: #{density.$hermes-base-border-radius-s};
+      --hermes-forms-native-select-caret-size: #{density.$hermes-base-icon-size-xs};
+      // shadcn-style rounding, shared by every boxed text/select field (input, password,
+      // number-input, textarea, select, datalist, combobox).
+      // Kept well under half of --hermes-forms-input-wrapper-height (24px): anything close
+      // to 12px turns these short, grouped fields into a pill/stadium shape instead of a
+      // rounded rectangle.
+      --hermes-forms-border-radius: 0.375rem;
+      --hermes-forms-textarea-border-radius: var(--hermes-forms-border-radius);
+      --hermes-forms-datalist-caret-icon-size: #{density.$hermes-base-icon-size-s};
+
+      // Range
+      --hermes-forms-range-thumb-height: #{density.$hermes-base-icon-size-s};
+      --hermes-forms-range-track-height: #{density.$hermes-base-layout-space-2xs};
+      --hermes-forms-range-track-border-radius: #{density.$hermes-base-border-radius-s};
+    }
+
+    // Select (rich, popup-based) - the trigger reuses --hermes-forms-input-* for its box
+    // model (height/padding/font/radius), so it's sized identically to a text input; these
+    // are only the sizing knobs specific to the popup itself.
+    --hermes-select-content-min-width: #{mixins.baselinePx(128)}; // 8rem
+    --hermes-select-content-max-height: #{mixins.baselinePx(300)};
+    --hermes-select-content-padding: #{mixins.baselinePx(4)};
+    --hermes-select-item-border-radius: #{mixins.baselinePx(2)};
+    --hermes-select-item-padding-block: #{mixins.baselinePx(6)};
+    --hermes-select-item-padding-inline-start: #{mixins.baselinePx(8)};
+    --hermes-select-item-padding-inline-end: #{mixins.baselinePx(32)};
+    --hermes-select-item-gap: #{mixins.baselinePx(8)};
+    --hermes-select-item-indicator-offset: #{mixins.baselinePx(8)};
+    --hermes-select-item-indicator-size: #{mixins.baselinePx(14)};
+
+    // Input
+    // shadcn-style default sizing (32px tall field, 12px horizontal padding, 14px/20px text),
+    // matching real shadcn Input pixel measurements. The former density-driven default
+    // (row-height-s / horizontal-offset-m / SECONDARY-13-RG-EXP type) becomes the compact
+    // variant below instead of being replaced.
+    //
+    // Pixel values here MUST go through mixins.baselinePx($px), not bare rem literals: this
+    // codebase's rem scale is calibrated to a 20px root font-size (--hermes-global-base: 20),
+    // not the browser's usual 16px. Writing e.g. `2.25rem` to mean shadcn's 36px renders as
+    // 2.25 * 20 = 45px instead - that's exactly how this got 25% too big the first time.
+    //
+    // The compact values are hardcoded from tokens.$hermes-global-space-9 / -5 rather than
+    // density.$hermes-base-row-height-s / horizontal-offset-m: those density.* aliases are
+    // `var(--hermes-base-*)` passthroughs that re-resolve against whatever density context
+    // they're read in, so referencing them here would just echo compact's own (smaller) value
+    // instead of the old un-densitied default.
+    --hermes-forms-input-padding: 0 #{mixins.baselinePx(12)};
+    --hermes-forms-input-wrapper-height: #{mixins.baselinePx(32)};
+    --hermes-forms-input-font-size: #{mixins.baselinePx(14)};
+    --hermes-forms-input-line-height: #{mixins.baselinePx(20)};
+
+    [hermes-density='compact'] {
+      --hermes-forms-input-padding: 0 #{tokens.$hermes-global-space-5};
+      --hermes-forms-input-wrapper-height: #{tokens.$hermes-global-space-9};
+      --hermes-forms-input-font-size: #{density.$hermes-base-typography-font-size-inline};
+      --hermes-forms-input-line-height: #{density.$hermes-base-typography-line-height-24};
+    }
+
+    &,
+    & [hermes-theme] {
+      --hermes-form-disabled-background-color: #{tokens.$hermes-alias-object-interaction-background};
+
+      // Generic
+      --hermes-forms-label-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-forms-text-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-forms-invalid-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-forms-invalid-text-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-forms-valid-color: #{tokens.$hermes-alias-status-success};
+      --hermes-forms-valid-text-color: #{tokens.$hermes-alias-status-success};
+      --hermes-forms-subtext-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-forms-placeholder-color: #{tokens.$hermes-alias-typography-color-200};
+      --hermes-forms-border-color: #{tokens.$hermes-alias-object-interaction-border-color};
+      --hermes-forms-focused-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-forms-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-forms-shadow: #{tokens.$hermes-alias-object-shadow-100};
+      --hermes-forms-subtext-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-forms-border-disabled-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
+      --hermes-forms-text-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-forms-label-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-forms-placeholder-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+
+      // Input group
+      --hermes-forms-input-group-icon-disabled-color: #{tokens.$hermes-alias-status-disabled};
+
+      // Checkbox
+      --hermes-forms-checkbox-label-color: var(--hermes-forms-label-color);
+      --hermes-forms-checkbox-background-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-forms-checkbox-indeterminate-border-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-forms-checkbox-mark-color: #{tokens.$hermes-alias-object-interaction-background};
+      --hermes-forms-checkbox-disabled-label-color: var(--hermes-forms-label-disabled-color);
+      --hermes-forms-checkbox-disabled-background-color: var(--hermes-form-disabled-background-color);
+      --hermes-forms-checkbox-disabled-checked-background-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-forms-checkbox-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-forms-checkbox-disabled-indeterminate-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-forms-checkbox-disabled-mark-color: #{tokens.$hermes-alias-object-interaction-background};
+
+      // Radio
+      --hermes-forms-radio-label-color: var(--hermes-forms-label-color);
+      --hermes-forms-radio-label-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-forms-radio-disabled-background-color: var(--hermes-form-disabled-background-color);
+      --hermes-forms-radio-disabled-mark-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-forms-radio-selected-shadow: inset 0 0 0 #{tokens.$hermes-global-space-4}
+        #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-forms-radio-checked-disabled-shadow: inset 0 0 0 #{tokens.$hermes-global-space-4}
+        #{tokens.$hermes-alias-object-interaction-color-disabled};
+
+      // Password
+      --hermes-forms-password-eye-icon-color: #{tokens.$hermes-alias-object-interaction-color};
+      --hermes-forms-password-disabled-eye-icon-color: #{tokens.$hermes-alias-status-disabled};
+
+      // Range
+      --hermes-forms-range-progress-fill-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-forms-range-track-color: #{tokens.$hermes-alias-object-container-background-shade};
+      --hermes-forms-range-track-border-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-forms-range-track-border-width: #{tokens.$hermes-global-space-1};
+      --hermes-forms-range-progress-fill-color-disabled: #{tokens.$hermes-alias-object-interaction-color-disabled};
+      --hermes-forms-range-track-color-disabled: #{tokens.$hermes-alias-status-disabled-tint};
+      --hermes-forms-range-track-border-color-disabled: #{tokens.$hermes-alias-object-interaction-color-disabled};
+
+      // Select
+      --hermes-forms-native-select-hover-background: transparent;
+      --hermes-forms-native-select-disabled-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
+      --hermes-forms-native-select-hover-border-color: #{tokens.$hermes-alias-object-interaction-color-hover};
+      --hermes-forms-native-select-disabled-border-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
+      --hermes-forms-native-select-caret-hover-color: #{tokens.$hermes-alias-object-interaction-color-hover};
+      --hermes-forms-native-select-caret-color: #{tokens.$hermes-alias-object-interaction-color};
+      --hermes-forms-native-select-option-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-forms-native-select-option-background-color: #{tokens.$hermes-alias-object-interaction-background};
+      --hermes-forms-native-select-multiple-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-forms-native-select-multiple-border-color: #{tokens.$hermes-alias-object-border-color};
+      --hermes-forms-native-select-multiple-option-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-forms-native-select-multiple-selected-option-background-color: #{tokens.$hermes-alias-object-interaction-background-selected};
+
+      // Select (rich, popup-based)
+      --hermes-select-content-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-select-content-border-color: #{tokens.$hermes-alias-object-border-color};
+      --hermes-select-content-shadow: #{tokens.$hermes-alias-object-shadow-100};
+      --hermes-select-item-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-select-item-hover-color: #{tokens.$hermes-alias-object-interaction-color-hover};
+      --hermes-select-item-hover-background-color: #{tokens.$hermes-alias-object-interaction-background-hover};
+      --hermes-select-item-selected-background-color: #{tokens.$hermes-alias-object-interaction-background-selected};
+      --hermes-select-item-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-select-label-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-select-separator-color: #{tokens.$hermes-alias-object-border-color-tint};
+      --hermes-select-scroll-button-color: #{tokens.$hermes-alias-typography-color-300};
+
+      // Textarea
+      --hermes-forms-textarea-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-forms-textarea-disabled-background: #{tokens.$hermes-alias-object-container-background};
+
+      // Datalist
+      --hermes-forms-datalist-caret-color: #{tokens.$hermes-alias-status-neutral};
+      --hermes-forms-datalist-caret-disabled-color: #{tokens.$hermes-alias-status-disabled};
+    }
+  }
+}

package/forms/styles/_radio.clarity.scss

@@ -0,0 +1,120 @@
+/*
+ * 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.radio') {
+  //Remove the default radio appearance
+  %custom-radio {
+    @include mixins.hermes-appearance-normal();
+  }
+
+  // @TODO un-nest the radio inputs when old forms are removed
+  .hermes-radio-wrapper {
+    @include forms-mixins.form-flatten-validate-text();
+
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+
+    @include forms-mixins.checkbox-radio-toggle-control-group-gap();
+
+    //Hide the default radio
+    input[type='radio'] {
+      @include forms-mixins.checkbox-radio-input-styles(forms-variables.$hermes-forms-radio-size);
+
+      @extend %custom-radio;
+
+      padding: density.$hermes-base-vertical-offset-xs 0;
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+
+      //Radio button base
+      &::before {
+        @include forms-mixins.checkbox-radio-shared-inactive(
+          forms-variables.$hermes-forms-radio-height,
+          forms-variables.$hermes-forms-border-color
+        );
+
+        border-radius: 50%;
+      }
+
+      //Checked Radio Styles
+      &:checked {
+        &::before {
+          border: none;
+          box-shadow: forms-variables.$hermes-forms-radio-selected-shadow;
+        }
+
+        &:disabled::before {
+          //background-color around the dot
+          box-shadow: forms-variables.$hermes-forms-radio-checked-disabled-shadow;
+        }
+      }
+
+      &:focus {
+        outline: none;
+
+        &::before {
+          @include mixins.include-outline-style-form-fields(mixins.baselinePx(3));
+        }
+      }
+
+      &:disabled {
+        + label {
+          cursor: not-allowed;
+          color: forms-variables.$hermes-forms-radio-label-disabled-color;
+        }
+
+        &::before {
+          background-color: forms-variables.$hermes-forms-radio-disabled-background-color;
+          border-color: tokens.$hermes-alias-object-interaction-color-disabled;
+        }
+      }
+    }
+
+    .hermes-control-label {
+      @include forms-mixins.checkbox-radio-label-styles(
+        forms-variables.$hermes-forms-radio-label-height,
+        forms-variables.$hermes-forms-radio-label-color,
+        'SECONDARY-13-RG-CPT'
+      );
+
+      &:empty {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .hermes-form-control-disabled .hermes-radio-wrapper {
+    .hermes-control-label {
+      cursor: not-allowed;
+      color: forms-variables.$hermes-forms-radio-label-disabled-color;
+    }
+  }
+
+  .hermes-error .hermes-radio-wrapper input[type='radio']::before {
+    border-color: forms-variables.$hermes-forms-invalid-color;
+  }
+
+  .hermes-form-compact .hermes-radio-wrapper {
+    padding-top: 0;
+
+    @include forms-mixins.form-flatten-compact-adjustments();
+    @include forms-mixins.form-inline-input();
+
+    .hermes-control-label {
+      margin-top: 0;
+    }
+  }
+}

package/forms/styles/_range.clarity.scss

@@ -0,0 +1,124 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('forms.range') {
+  // Thumb should move down to match its center with track center
+  $thumb-y-translation: calc(
+    #{forms-variables.$hermes-forms-range-thumb-height} / 2 - #{forms-variables.$hermes-forms-range-track-height} / 2 +
+      #{forms-variables.$hermes-forms-range-border-width}
+  );
+
+  .hermes-range-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: forms-variables.$hermes-forms-input-wrapper-height;
+    white-space: nowrap;
+
+    .fill-input {
+      position: absolute;
+      left: 0;
+      display: inline-block;
+      height: forms-variables.$hermes-forms-range-track-height;
+      pointer-events: none; // needed for correct chrome behavior with progress
+      cursor: pointer;
+      z-index: 10;
+      background-color: forms-variables.$hermes-forms-range-progress-fill-color;
+      border-radius: forms-variables.$hermes-forms-range-border-radius;
+      border-style: none;
+    }
+  }
+
+  .hermes-range {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    height: forms-variables.$hermes-forms-range-thumb-height;
+
+    &:disabled {
+      pointer-events: auto; // needed for correct chrome behavior for disabled w/ progress
+      cursor: not-allowed;
+
+      @include forms-mixins.range-style(
+        forms-variables.$hermes-forms-range-track-height,
+        forms-variables.$hermes-forms-range-track-color-disabled
+      );
+    }
+
+    &:disabled::-webkit-slider-thumb {
+      appearance: none;
+      transform: translate(0, #{$thumb-y-translation});
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$hermes-forms-range-thumb-height,
+        forms-variables.$hermes-forms-range-progress-fill-color-disabled
+      );
+    }
+
+    &:disabled::-moz-range-thumb {
+      border: 0;
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$hermes-forms-range-thumb-height,
+        forms-variables.$hermes-forms-range-progress-fill-color-disabled
+      );
+    }
+
+    &:disabled + .fill-input {
+      pointer-events: auto; // needed for correct chrome behavior for disabled w/ progress
+      cursor: not-allowed;
+      background-color: forms-variables.$hermes-forms-range-progress-fill-color-disabled;
+    }
+  }
+
+  input[type='range'] {
+    padding: 0;
+
+    @include forms-mixins.range-style(
+      forms-variables.$hermes-forms-range-track-height,
+      forms-variables.$hermes-forms-range-track-color
+    );
+    @include forms-mixins.range-border-style(
+      forms-variables.$hermes-forms-range-border-color,
+      forms-variables.$hermes-forms-range-border-radius,
+      forms-variables.$hermes-forms-range-border-width
+    );
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      transform: translate(0, #{$thumb-y-translation});
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$hermes-forms-range-thumb-height,
+        forms-variables.$hermes-forms-range-progress-fill-color
+      );
+    }
+
+    &:disabled {
+      @include forms-mixins.range-border-style(
+        forms-variables.$hermes-forms-range-border-color-disabled,
+        forms-variables.$hermes-forms-range-border-radius,
+        forms-variables.$hermes-forms-range-border-width
+      );
+    }
+
+    &::-moz-range-thumb {
+      border: 0;
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$hermes-forms-range-thumb-height,
+        forms-variables.$hermes-forms-range-progress-fill-color
+      );
+    }
+  }
+}