@hermes-ui/angular 0.1.4

package/forms/datepicker/_mixins.datepicker.scss

@@ -0,0 +1,89 @@
+/*
+ * 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 'variables.datepicker' as datepicker-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@mixin generate-calendar-button(
+  $height: datepicker-variables.$hermes-calendar-btn-size,
+  $padding: datepicker-variables.$hermes-calendar-btn-horizontal-padding
+) {
+  //Dimensions
+
+  @include mixins.min-equilateral($height);
+
+  padding: 0 $padding;
+  margin: 0 !important; //Because stupid forms target buttons directly. We really need to refactor forms.
+
+  //Other Props
+  color: inherit;
+  border: none;
+  border-radius: density.$hermes-base-border-radius-s;
+  background: none;
+  cursor: pointer;
+}
+@mixin generate-calendar-focus-style() {
+  &.in-range {
+    background: datepicker-variables.$hermes-calendar-in-range-cell-background-color;
+    border-radius: 0;
+  }
+
+  &:hover {
+    background: datepicker-variables.$hermes-calendar-btn-hover-focus-color;
+  }
+
+  &:focus {
+    // Only because we have defined a background color for is-selected:focus
+    // using hermes-alias-object-interaction-outline token will be better when focus state get implemented
+    outline-offset: #{mixins.baselinePx(-3)};
+    background: tokens.$hermes-alias-object-interaction-background-hover;
+  }
+
+  &:active {
+    background: datepicker-variables.$hermes-calendar-btn-active-color-bg;
+  }
+}
+@mixin generate-current-date-style() {
+  &.is-today {
+    color: datepicker-variables.$hermes-calendar-today-date-cell-color;
+    border: tokens.$hermes-global-space-1 solid datepicker-variables.$hermes-calendar-today-date-cell-border-color;
+    font-weight: datepicker-variables.$hermes-calendar-today-date-cell-font-weight;
+  }
+}
+@mixin generate-selected-date-style() {
+  &.is-selected,
+  &.is-start-range,
+  &.is-end-range {
+    background: datepicker-variables.$hermes-calendar-active-cell-background-color;
+    color: datepicker-variables.$hermes-calendar-active-cell-color;
+  }
+
+  &.is-start-range:not(.is-end-range) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &.is-end-range:not(.is-start-range) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.is-selected:focus {
+    background: datepicker-variables.$hermes-calendar-active-focus-cell-background-color;
+  }
+}
+@mixin generate-calendar-hover-active-color-style() {
+  &:hover {
+    color: datepicker-variables.$hermes-calendar-btn-hover-focus-color-text;
+  }
+
+  &:active {
+    color: datepicker-variables.$hermes-calendar-btn-active-color;
+  }
+}

package/forms/datepicker/_properties.datepicker.scss

@@ -0,0 +1,46 @@
+/*
+ * 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('datepicker.properties') {
+  @include mixins.root-or-host() {
+    // Typography
+    --hermes-calendar-today-date-cell-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
+    --hermes-calendar-picker-btn-font-weight: #{tokens.$hermes-alias-typography-font-weight-medium};
+
+    &,
+    & [hermes-density] {
+      --hermes-calendar-weekday-font-size: #{density.$hermes-base-typography-font-size-inline};
+      --hermes-calendar-picker-btn-font-size: #{density.$hermes-base-typography-font-size-section};
+    }
+
+    &,
+    & [hermes-theme] {
+      --hermes-calendar-background-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-calendar-border-color: #{tokens.$hermes-alias-object-border-color};
+      --hermes-calendar-option-text-color: #{tokens.$hermes-alias-object-interaction-color};
+      --hermes-calendar-active-option-border-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-calendar-range-cell-background-color: #{tokens.$hermes-alias-object-interaction-background-selected};
+      --hermes-calendar-btn-color: #{tokens.$hermes-alias-object-interaction-color};
+      --hermes-calendar-today-date-cell-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-calendar-today-date-cell-border-color: #{tokens.$hermes-alias-object-interaction-border-color};
+      --hermes-calendar-active-cell-background-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-calendar-active-focus-cell-background-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
+      --hermes-calendar-active-cell-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-calendar-btn-picker-trigger-color: #{tokens.$hermes-alias-typography-link-color};
+      --hermes-calendar-btn-picker-trigger-hover-color: #{tokens.$hermes-alias-typography-link-color-hover};
+      --hermes-calendar-btn-picker-trigger-active-color: #{tokens.$hermes-alias-typography-link-color};
+      --hermes-calendar-btn-hover-focus-color: #{tokens.$hermes-alias-object-interaction-background-hover};
+      --hermes-calendar-btn-hover-focus-color-text: #{tokens.$hermes-alias-object-interaction-color-hover};
+      --hermes-calendar-btn-active-color: #{tokens.$hermes-alias-object-interaction-color-active};
+      --hermes-calendar-btn-active-color-bg: #{tokens.$hermes-alias-object-interaction-background-active};
+    }
+  }
+}

package/forms/datepicker/_variables.datepicker.scss

@@ -0,0 +1,74 @@
+/*
+ * 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/mixins';
+@use '../../button/variables.buttons' as button-variables;
+@use '../../styles/variables/variables.density' as density;
+
+$hermes-calendar-background-color: var(--hermes-calendar-background-color) !default;
+$hermes-calendar-border-color: var(--hermes-calendar-border-color) !default;
+$hermes-calendar-vertical-padding: #{density.$hermes-base-vertical-offset-xl};
+$hermes-calendar-horizontal-padding: #{density.$hermes-base-horizontal-offset-xl};
+$hermes-calendar-button-gap: #{density.$hermes-base-gap-xs};
+
+$hermes-calendar-options-width: mixins.baselinePx(150);
+$hermes-calendar-action-buttons-height: calc(
+  #{button-variables.$hermes-btn-height} + #{density.$hermes-base-vertical-offset-xl}
+); // Button Height + Padding set on .datepicker-actions class
+
+$hermes-calendar-btn-size: #{density.$hermes-base-row-height-m};
+$hermes-calendar-btn-color: var(--hermes-calendar-btn-color) !default;
+$hermes-calendar-btn-hover-focus-color: var(--hermes-calendar-btn-hover-focus-color) !default;
+$hermes-calendar-btn-active-color-bg: var(--hermes-calendar-btn-active-color-bg) !default;
+$hermes-calendar-btn-hover-focus-color-text: var(--hermes-calendar-btn-hover-focus-color-text) !default;
+$hermes-calendar-btn-active-color: var(--hermes-calendar-btn-active-color) !default;
+$hermes-calendar-btn-picker-trigger-color: var(--hermes-calendar-btn-picker-trigger-color) !default;
+$hermes-calendar-btn-picker-trigger-width: calc(2 * #{density.$hermes-base-layout-space-2xl}) !default;
+
+$hermes-calendar-btn-horizontal-padding: #{density.$hermes-base-horizontal-offset-s};
+
+$hermes-calendar-header-btn-height: #{density.$hermes-base-row-height-l};
+$hermes-calendar-month-cell-horizontal-padding: #{density.$hermes-base-horizontal-offset-l};
+
+$hermes-calendar-picker-btn-font-size: var(--hermes-calendar-picker-btn-font-size);
+$hermes-calendar-picker-btn-font-weight: var(--hermes-calendar-picker-btn-font-weight);
+
+$hermes-calendar-today-date-cell-color: var(--hermes-calendar-today-date-cell-color) !default;
+$hermes-calendar-today-date-cell-font-weight: var(--hermes-calendar-today-date-cell-font-weight);
+
+$hermes-calendar-active-cell-background-color: var(--hermes-calendar-active-cell-background-color) !default;
+$hermes-calendar-active-focus-cell-background-color: var(--hermes-calendar-active-focus-cell-background-color) !default;
+$hermes-calendar-active-cell-color: var(--hermes-calendar-active-cell-color) !default;
+
+$hermes-calendar-weekday-font-size: var(--hermes-calendar-weekday-font-size);
+$hermes-calendar-weekday-height: density.$hermes-base-typography-line-height-16;
+
+$hermes-switcher-width: calc($hermes-calendar-btn-size * 3);
+
+// (3 navigation buttons + 2 month / year trigger buttons)
+$hermes-calendar-width: calc(3 * #{$hermes-calendar-btn-size} + (2 * #{$hermes-calendar-btn-picker-trigger-width}));
+
+//(7 = 6 date rows + 1 row for calendar switches and month/year pickers) + 1 row for day heading + 2 * 16px padding + 2px for border + 6 * 4px vertical gap for buttons
+$hermes-calendar-height: calc(
+  (7 * #{$hermes-calendar-header-btn-height}) + #{$hermes-calendar-weekday-height} + (2 * #{$hermes-calendar-vertical-padding}) +
+    (2 * #{tokens.$hermes-alias-object-border-width-100}) + #{density.$hermes-base-gap-s}
+);
+
+$hermes-monthpicker-min-height: calc(6 * #{$hermes-calendar-header-btn-height});
+$hermes-month-year-btn-width: calc(
+  0.5 * #{$hermes-calendar-width} - #{$hermes-calendar-horizontal-padding} - #{tokens.$hermes-alias-object-border-width-100}
+); // Calendar width - calendar padding - border
+$hermes-calendar-today-date-cell-border-color: var(--hermes-calendar-today-date-cell-border-color);
+
+$hermes-calendar-option-text-color: var(--hermes-calendar-option-text-color) !default;
+$hermes-calendar-option-hover-background-color: var(--hermes-calendar-btn-hover-color);
+$hermes-calendar-options-background-color: var(--hermes-vertical-nav-bg-color);
+$hermes-calendar-active-option-border-color: var(--hermes-calendar-active-option-border-color);
+$hermes-calendar-in-range-cell-background-color: var(--hermes-calendar-range-cell-background-color);
+$hermes-calendar-options-active-text-color: var(--hermes-vertical-nav-item-active-color);
+$hermes-calendar-options-active-background-color: var(--hermes-vertical-nav-selected-bg-color);

package/forms/styles/_checkbox.clarity.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 '../../emphasis/alert/variables.alert' as alert-variables;
+@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.checkbox') {
+  $mark-half-size: calc(#{forms-variables.$hermes-forms-checkbox-mark-size} * 0.5);
+
+  //Remove the default checkbox appearance
+  %custom-checkbox {
+    @include mixins.hermes-appearance-normal();
+  }
+
+  // @TODO un-nest the checkbox from the wrapper, after old forms are removed
+  .hermes-checkbox-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();
+
+    .hermes-control-label {
+      @include forms-mixins.checkbox-radio-label-styles(
+        forms-variables.$hermes-forms-checkbox-label-height,
+        forms-variables.$hermes-forms-checkbox-label-color,
+        'SECONDARY-13-RG-CPT'
+      );
+    }
+
+    //Hide the default checkbox behind the pseudo elements
+    //Opacity is set to 0 so that the input remains accessible
+    input[type='checkbox'] {
+      @include forms-mixins.checkbox-radio-input-styles(forms-variables.$hermes-forms-checkbox-size);
+
+      @extend %custom-checkbox;
+
+      padding: density.$hermes-base-vertical-offset-xs 0;
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+
+      //Checkbox base
+      &::before {
+        @include forms-mixins.checkbox-radio-shared-inactive(
+          forms-variables.$hermes-forms-checkbox-height,
+          forms-variables.$hermes-forms-border-color
+        );
+
+        border-radius: forms-variables.$hermes-forms-checkbox-border-radius;
+      }
+
+      //Checkmark
+      &::after {
+        position: absolute;
+        content: '';
+        display: none;
+        height: calc(#{$mark-half-size} + #{tokens.$hermes-global-space-1});
+        width: forms-variables.$hermes-forms-checkbox-mark-size;
+        border-left: forms-variables.$hermes-forms-checkbox-mark-border-size solid
+          forms-variables.$hermes-forms-checkbox-mark-color;
+        border-bottom: forms-variables.$hermes-forms-checkbox-mark-border-size solid
+          forms-variables.$hermes-forms-checkbox-mark-color;
+        left: $mark-half-size;
+        transform: translate(0, $mark-half-size) rotate(-45deg);
+      }
+
+      &:focus {
+        outline: none;
+
+        &::before {
+          @include mixins.include-outline-style-form-fields(mixins.baselinePx(3));
+        }
+      }
+
+      &:checked {
+        &::before {
+          background: forms-variables.$hermes-forms-checkbox-background-color;
+          border: none;
+        }
+
+        &::after {
+          display: inline-block;
+        }
+      }
+
+      &.hermes-indeterminate,
+      &:indeterminate {
+        &::before {
+          border: #{tokens.$hermes-alias-object-border-width-100} solid
+            forms-variables.$hermes-forms-checkbox-indeterminate-border-color;
+        }
+
+        &::after {
+          border-left: none;
+          border-bottom-color: forms-variables.$hermes-forms-checkbox-indeterminate-border-color;
+          display: inline-block;
+          transform: translate(0, $mark-half-size);
+        }
+      }
+
+      &:disabled {
+        + label {
+          cursor: not-allowed;
+          color: forms-variables.$hermes-forms-label-disabled-color;
+        }
+
+        &::before {
+          background-color: forms-variables.$hermes-forms-checkbox-disabled-background-color;
+          border-color: forms-variables.$hermes-forms-checkbox-disabled-border-color;
+        }
+
+        &:checked {
+          &::before {
+            background-color: forms-variables.$hermes-forms-checkbox-disabled-checked-background-color;
+            border: none;
+          }
+
+          &::after {
+            border-color: forms-variables.$hermes-forms-checkbox-disabled-mark-color;
+          }
+        }
+
+        &.hermes-indeterminate::after,
+        &:indeterminate::after {
+          border-color: forms-variables.$hermes-forms-checkbox-disabled-indeterminate-color;
+          border-left: none;
+        }
+      }
+    }
+
+    &.hermes-checkbox-inline {
+      @include forms-mixins.form-inline-input();
+    }
+  }
+
+  .hermes-error .hermes-checkbox-wrapper:not(.datagrid-select .hermes-checkbox-wrapper) input[type='checkbox']::before {
+    border-color: forms-variables.$hermes-forms-invalid-color;
+  }
+
+  .hermes-form-control-disabled .hermes-checkbox-wrapper,
+  .hermes-checkbox-wrapper.hermes-checkbox-wrapper-disabled {
+    .hermes-control-label {
+      cursor: not-allowed;
+      color: forms-variables.$hermes-forms-label-disabled-color;
+    }
+
+    input[type='checkbox']::before {
+      background-color: forms-variables.$hermes-forms-checkbox-disabled-background-color;
+      border-color: forms-variables.$hermes-forms-checkbox-disabled-border-color;
+    }
+
+    input[type='checkbox']:checked {
+      &::before {
+        background-color: forms-variables.$hermes-forms-checkbox-disabled-checked-background-color;
+        border: none;
+      }
+
+      &::after {
+        border-color: forms-variables.$hermes-forms-checkbox-disabled-mark-color;
+      }
+    }
+
+    input[type='checkbox'].hermes-indeterminate::after,
+    input[type='checkbox']:indeterminate::after {
+      border-color: forms-variables.$hermes-forms-checkbox-disabled-indeterminate-color;
+      border-left: none;
+    }
+  }
+
+  .hermes-form-compact .hermes-checkbox-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/_containers.clarity.scss

@@ -0,0 +1,230 @@
+/*
+ * 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 '../../styles/core/tokens/variables.tokens' as tokens;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('forms.containers') {
+  .hermes-form-control {
+    margin-top: density.$hermes-base-vertical-offset-2xl;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hermes-form-control-disabled {
+    color: forms-variables.$hermes-forms-text-disabled-color;
+
+    label,
+    .hermes-control-label {
+      color: forms-variables.$hermes-forms-label-disabled-color;
+    }
+
+    .hermes-input,
+    .hermes-textarea,
+    .hermes-native-select,
+    .hermes-number-input {
+      color: forms-variables.$hermes-forms-text-disabled-color;
+      border-color: forms-variables.$hermes-forms-border-disabled-color;
+    }
+
+    input[type='range']::-webkit-slider-thumb,
+    input[type='range']::-moz-range-thumb {
+      background-color: var(
+        --hermes-forms-range-progress-fill-color-disabled,
+        forms-variables.$hermes-forms-range-progress-fill-color-disabled
+      );
+    }
+
+    .hermes-subtext {
+      color: forms-variables.$hermes-forms-subtext-disabled-color;
+    }
+  }
+
+  .hermes-form-control-multi {
+    flex-flow: row wrap;
+
+    .hermes-control-label {
+      width: 100%;
+    }
+  }
+
+  .hermes-control-label {
+    display: block;
+    color: forms-variables.$hermes-forms-label-color;
+    padding-top: density.$hermes-base-vertical-offset-xs;
+    padding-bottom: density.$hermes-base-vertical-offset-xs;
+
+    // Same size as body text (BODY-14-RG-CPT), differentiated by weight only - matches the
+    // datagrid column header and .btn approach instead of a separate smaller label size.
+    @include mixins.generate-typography-token(
+      'BODY-14-RG-CPT',
+      (
+        font-weight: forms-variables.$hermes-forms-label-font-weight,
+      )
+    );
+  }
+
+  .hermes-control-container {
+    @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
+  }
+
+  .hermes-control-inline {
+    @include forms-mixins.form-inline-input(true);
+
+    .hermes-checkbox-wrapper,
+    .hermes-radio-wrapper {
+      padding-top: 0;
+    }
+
+    .hermes-toggle-wrapper {
+      margin-top: 0;
+    }
+  }
+
+  .hermes-subtext {
+    display: block;
+
+    @include mixins.generate-typography-token('CAPTION-LG-11-STD');
+
+    color: forms-variables.$hermes-forms-subtext-color;
+    margin-top: density.$hermes-base-gap-xs;
+
+    &.error {
+      color: forms-variables.$hermes-forms-invalid-text-color;
+
+      .hermes-validate-icon {
+        display: inline-block;
+        color: forms-variables.$hermes-forms-invalid-color;
+        fill: forms-variables.$hermes-forms-invalid-color;
+      }
+    }
+
+    &.success {
+      color: forms-variables.$hermes-forms-valid-text-color;
+
+      .hermes-validate-icon {
+        display: inline-block;
+        color: forms-variables.$hermes-forms-valid-color;
+        fill: forms-variables.$hermes-forms-valid-color;
+      }
+    }
+  }
+
+  .hermes-subtext-wrapper {
+    flex-basis: 100%;
+    display: none;
+    align-items: flex-start;
+    gap: density.$hermes-base-gap-xs;
+    margin-top: density.$hermes-base-gap-xs;
+
+    &:not(.success, .error) {
+      display: flex;
+    }
+
+    .hermes-subtext {
+      margin: 0;
+    }
+  }
+
+  .hermes-validate-icon {
+    @include mixins.min-equilateral(forms-variables.$hermes-forms-icon-size);
+
+    display: none;
+  }
+
+  .hermes-success .hermes-subtext-wrapper.success {
+    display: flex;
+
+    &,
+    .hermes-subtext {
+      color: forms-variables.$hermes-forms-valid-text-color;
+    }
+
+    .hermes-validate-icon {
+      display: inline-block;
+      color: forms-variables.$hermes-forms-valid-color;
+      fill: forms-variables.$hermes-forms-valid-color;
+    }
+  }
+
+  .hermes-error .hermes-subtext-wrapper.error {
+    display: flex;
+
+    &,
+    .hermes-subtext {
+      color: forms-variables.$hermes-forms-invalid-text-color;
+    }
+
+    .hermes-validate-icon {
+      display: inline-block;
+      color: forms-variables.$hermes-forms-invalid-color;
+      fill: forms-variables.$hermes-forms-invalid-color;
+    }
+  }
+
+  .hermes-form-horizontal {
+    .hermes-form-control > .hermes-control-label,
+    .hermes-form-control > .hermes-form-control.hermes-form-control-multi .hermes-control-label {
+      width: calc(32 * #{forms-variables.$hermes-forms-baseline});
+      flex-shrink: 0;
+    }
+
+    &.hermes-row .hermes-control-label {
+      width: auto;
+    }
+
+    .hermes-form-control {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  .hermes-form-compact {
+    .hermes-form-control > .hermes-control-label {
+      width: calc(32 * #{forms-variables.$hermes-forms-baseline});
+      min-width: calc(32 * #{forms-variables.$hermes-forms-baseline});
+    }
+
+    .hermes-form-control.hermes-row > .hermes-control-label {
+      width: auto;
+      min-width: auto;
+    }
+
+    .hermes-form-control {
+      display: flex;
+      flex-direction: row;
+      margin-top: density.$hermes-base-vertical-offset-l;
+    }
+
+    .hermes-control-container {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+    }
+
+    .hermes-subtext {
+      display: inline-block;
+      align-self: flex-start;
+      margin-left: density.$hermes-base-gap-s;
+    }
+
+    .hermes-subtext-wrapper {
+      flex-basis: auto;
+      flex-direction: row;
+      align-self: flex-start;
+      margin-left: density.$hermes-base-gap-s;
+
+      .hermes-subtext {
+        margin: 0;
+      }
+    }
+  }
+}

package/forms/styles/_datalist.clarity.scss

@@ -0,0 +1,47 @@
+/*
+ * 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 'variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+input[hermesDatalistInput] {
+  position: relative;
+
+  &::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    cursor: text;
+  }
+}
+
+.hermes-input-group {
+  input[hermesDatalistInput] {
+    //Moves the .hermes-datalist-caret (arrow) to the back so that clicking over it activates
+    //the dropdown.
+    z-index: map.get(variables.$hermes-layers, datalist-box);
+  }
+
+  .hermes-datalist-caret {
+    color: forms-variables.$hermes-forms-datalist-caret-color;
+    cursor: pointer;
+    margin: density.$hermes-base-vertical-offset-xs density.$hermes-base-horizontal-offset-xs;
+
+    @include mixins.equilateral(forms-variables.$hermes-forms-datalist-caret-icon-size);
+  }
+}
+
+.hermes-form-control-disabled .hermes-datalist-caret {
+  color: forms-variables.$hermes-forms-datalist-caret-disabled-color;
+}
+
+// Keeps the browser added datalist toggle on the right side of the input underline
+hermes-datalist-container .hermes-input-group {
+  padding-right: 0;
+}