@viasat/beam-styles 2.37.0 → 2.38.0

package/styles.css

@@ -5949,6 +5949,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-combobox--sm .bm-combobox__field {
+  --bm-input-field-height: var(--bm-sem-size-height-sm);
+  --bm-input-field-padding-y: var(--bm-sem-space-25);
+  --bm-input-field-padding-x: var(--bm-sem-space-75);
+  --bm-input-field-font: var(--bm-sem-typo-compact-body-sm);
+  --bm-input-field-icon-size: var(--bm-sem-size-icon-sm);
+}
+.bm-combobox--md .bm-combobox__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-md-height);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
+.bm-combobox--lg .bm-combobox__field {
+  --bm-input-field-height: var(--bm-sem-size-height-lg);
+  --bm-input-field-padding-y: var(--bm-sem-space-75);
+  --bm-input-field-padding-x: var(--bm-sem-space-125);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
 .bm-combobox--fluid {
   max-width: 100%;
 }
@@ -5972,11 +5993,11 @@ textarea:focus-visible,
   position: relative;
   cursor: var(--bm-text-field-cursor, pointer);
   user-select: none;
-  font: var(--bm-comp-input-typo-default);
-  min-height: var(--bm-comp-input-size-field-md-height);
+  font: var(--bm-input-field-font);
+  min-height: var(--bm-input-field-height);
   gap: var(--bm-comp-input-space-field-gap);
   --bm-comp-icon-color: var(--bm-comp-input-color-icon);
-  --bm-comp-icon-size: var(--bm-comp-input-size-field-icon);
+  --bm-comp-icon-size: var(--bm-input-field-icon-size);
 }
 .bm-combobox__field__chevron {
   position: absolute;
@@ -5992,8 +6013,8 @@ textarea:focus-visible,
   mask-position: center;
   mask-repeat: no-repeat;
   background-color: var(--bm-comp-input-color-icon);
-  inset-inline-end: calc(var(--bm-comp-input-space-field-x) - (var(--bm-comp-icon-size) - 0.625rem) / 2);
-  inset-block-start: calc(var(--bm-comp-input-size-field-md-height) / 2 - var(--bm-comp-icon-size) / 2);
+  inset-inline-end: calc(var(--bm-input-field-padding-x) - (var(--bm-comp-icon-size) - 0.625rem) / 2);
+  inset-block-start: calc(var(--bm-input-field-height) / 2 - var(--bm-comp-icon-size) / 2);
   transition: transform 0.2s ease;
 }
 .bm-combobox--dropdown-open .bm-combobox__field__chevron {
@@ -6004,13 +6025,13 @@ textarea:focus-visible,
   align-items: center;
   flex: 0 0 auto;
   gap: var(--bm-comp-input-space-field-gap);
-  min-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-comp-input-space-field-y));
-  line-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-comp-input-space-field-y));
+  min-height: calc(var(--bm-input-field-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-input-field-padding-y));
+  line-height: calc(var(--bm-input-field-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-input-field-padding-y));
 }
 .bm-combobox__field__input {
   background: transparent;
-  min-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
-  line-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
+  min-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
+  line-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
 }
 .bm-combobox__field__input::placeholder {
   color: var(--bm-comp-input-color-text-placeholder);
@@ -6035,6 +6056,10 @@ textarea:focus-visible,
   flex-wrap: wrap;
   margin-block: calc(-1 * var(--bm-comp-input-border-width-field-default));
 }
+.bm-combobox__field__content-before .bm-icon, .bm-combobox__field__content-after .bm-icon {
+  width: var(--bm-input-field-icon-size);
+  height: var(--bm-input-field-icon-size);
+}
 .bm-combobox__field__input {
   flex: 1;
   cursor: var(--bm-text-field-input-cursor, pointer);
@@ -6043,7 +6068,7 @@ textarea:focus-visible,
   outline: 0;
   margin: 0;
   padding: 0;
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   width: 100%;
   min-width: 3rem;
 }
@@ -6086,11 +6111,11 @@ textarea:focus-visible,
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
   transform: translate3d(var(--bm-sem-space-0), var(--bm-sem-space-0), var(--bm-sem-space-0));
-  padding-block: var(--bm-comp-input-space-field-y);
-  padding-inline: var(--bm-comp-input-space-field-x) calc(
-        0.625rem + var(--bm-comp-input-space-field-gap) + var(--bm-comp-input-space-field-x)
+  padding-block: var(--bm-input-field-padding-y);
+  padding-inline: var(--bm-input-field-padding-x) calc(
+        0.625rem + var(--bm-comp-input-space-field-gap) + var(--bm-input-field-padding-x)
       );
-  min-height: var(--bm-comp-input-size-field-md-height);
+  min-height: var(--bm-input-field-height);
 }
 .bm-combobox__field:focus-within {
   outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
@@ -9619,6 +9644,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-native-select--sm .bm-native-select__field {
+  --bm-input-field-height: var(--bm-sem-size-height-sm);
+  --bm-input-field-padding-y: var(--bm-sem-space-25);
+  --bm-input-field-padding-x: var(--bm-sem-space-75);
+  --bm-input-field-font: var(--bm-sem-typo-compact-body-sm);
+  --bm-input-field-icon-size: var(--bm-sem-size-icon-sm);
+}
+.bm-native-select--md .bm-native-select__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-md-height);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
+.bm-native-select--lg .bm-native-select__field {
+  --bm-input-field-height: var(--bm-sem-size-height-lg);
+  --bm-input-field-padding-y: var(--bm-sem-space-75);
+  --bm-input-field-padding-x: var(--bm-sem-space-125);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
 .bm-native-select--fluid {
   max-width: 100%;
 }
@@ -9646,9 +9692,9 @@ textarea:focus-visible,
   mask-position: center;
   mask-repeat: no-repeat;
   background-color: var(--bm-comp-input-color-icon);
-  inset-inline-end: var(--bm-comp-input-space-field-x);
+  inset-inline-end: var(--bm-input-field-padding-x);
   inset-block-start: calc(
-        var(--bm-comp-input-space-field-x) + 0.3125rem / 2
+        var(--bm-input-field-padding-x) + 0.3125rem / 2
       );
 }
 .bm-native-select--error .bm-native-select__field:after {
@@ -9688,15 +9734,15 @@ textarea:focus-visible,
   border-radius: var(--bm-comp-input-radius-field);
   border-width: var(--bm-comp-input-border-width-field-default);
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   cursor: var(--bm-text-field-input-cursor, pointer);
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
-  height: var(--bm-comp-input-size-field-md-height);
+  height: var(--bm-input-field-height);
   transform: translate3d(var(--bm-sem-space-0), var(--bm-sem-space-0), var(--bm-sem-space-0));
-  padding-block: var(--bm-comp-input-space-field-y);
-  padding-inline: var(--bm-comp-input-space-field-x) calc(
-        0.625rem + var(--bm-comp-input-space-field-gap) + var(--bm-comp-input-space-field-x)
+  padding-block: var(--bm-input-field-padding-y);
+  padding-inline: var(--bm-input-field-padding-x) calc(
+        0.625rem + var(--bm-comp-input-space-field-gap) + var(--bm-input-field-padding-x)
       );
 }
 .bm-native-select__field .bm-native-select__input:focus {
@@ -11104,6 +11150,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-search--sm .bm-search__field {
+  --bm-input-field-height: var(--bm-sem-size-height-sm);
+  --bm-input-field-padding-y: var(--bm-sem-space-25);
+  --bm-input-field-padding-x: var(--bm-sem-space-75);
+  --bm-input-field-font: var(--bm-sem-typo-compact-body-sm);
+  --bm-input-field-icon-size: var(--bm-sem-size-icon-sm);
+}
+.bm-search--md .bm-search__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-md-height);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
+.bm-search--lg .bm-search__field {
+  --bm-input-field-height: var(--bm-sem-size-height-lg);
+  --bm-input-field-padding-y: var(--bm-sem-space-75);
+  --bm-input-field-padding-x: var(--bm-sem-space-125);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
 .bm-search--fluid {
   max-width: 100%;
 }
@@ -11115,11 +11182,11 @@ textarea:focus-visible,
   position: relative;
   cursor: var(--bm-text-field-cursor, pointer);
   user-select: none;
-  font: var(--bm-comp-input-typo-default);
-  min-height: var(--bm-comp-input-size-field-md-height);
+  font: var(--bm-input-field-font);
+  min-height: var(--bm-input-field-height);
   gap: var(--bm-comp-input-space-field-gap);
   --bm-comp-icon-color: var(--bm-comp-input-color-icon);
-  --bm-comp-icon-size: var(--bm-comp-input-size-field-icon);
+  --bm-comp-icon-size: var(--bm-input-field-icon-size);
 }
 .bm-search__field__input {
   display: flex;
@@ -11127,8 +11194,8 @@ textarea:focus-visible,
   flex: 0 0 auto;
   gap: var(--bm-comp-input-space-field-gap);
   background: transparent;
-  min-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
-  line-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
+  min-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
+  line-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
   flex: 1;
   cursor: var(--bm-text-field-input-cursor, pointer);
   text-overflow: ellipsis;
@@ -11136,7 +11203,7 @@ textarea:focus-visible,
   outline: 0;
   margin: 0;
   padding: 0;
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   width: 100%;
   min-width: 3rem;
 }
@@ -11192,9 +11259,9 @@ textarea:focus-visible,
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
   transform: translate3d(var(--bm-sem-space-0), var(--bm-sem-space-0), var(--bm-sem-space-0));
-  padding-block: var(--bm-comp-input-space-field-y);
-  padding-inline: var(--bm-comp-input-space-field-x);
-  min-height: var(--bm-comp-input-size-field-md-height);
+  padding-block: var(--bm-input-field-padding-y);
+  padding-inline: var(--bm-input-field-padding-x);
+  min-height: var(--bm-input-field-height);
 }
 .bm-search__field:focus-within {
   outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
@@ -11214,6 +11281,10 @@ textarea:focus-visible,
   width: var(--bm-comp-input-size-field-icon);
   height: var(--bm-comp-input-size-field-icon);
 }
+.bm-search__field .bm-search__content .bm-icon {
+  width: var(--bm-input-field-icon-size);
+  height: var(--bm-input-field-icon-size);
+}
 .bm-search__dropdown {
   padding-block: var(--bm-sem-space-50);
 }
@@ -15377,6 +15448,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-text-field--sm .bm-text-field__field {
+  --bm-input-field-height: var(--bm-sem-size-height-sm);
+  --bm-input-field-padding-y: var(--bm-sem-space-25);
+  --bm-input-field-padding-x: var(--bm-sem-space-75);
+  --bm-input-field-font: var(--bm-sem-typo-compact-body-sm);
+  --bm-input-field-icon-size: var(--bm-sem-size-icon-sm);
+}
+.bm-text-field--md .bm-text-field__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-md-height);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
+.bm-text-field--lg .bm-text-field__field {
+  --bm-input-field-height: var(--bm-sem-size-height-lg);
+  --bm-input-field-padding-y: var(--bm-sem-space-75);
+  --bm-input-field-padding-x: var(--bm-sem-space-125);
+  --bm-input-field-font: var(--bm-comp-input-typo-default);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon);
+}
 .bm-text-field--error .bm-text-field__field {
   border-color: var(--bm-comp-input-color-border-error);
   background-color: var(--bm-comp-input-color-bg);
@@ -15442,8 +15534,8 @@ textarea:focus-visible,
   gap: var(--bm-comp-input-space-field-gap);
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
-  height: var(--bm-comp-input-size-field-md-height);
-  padding: var(--bm-comp-input-space-field-y) var(--bm-comp-input-space-field-x);
+  height: var(--bm-input-field-height);
+  padding: var(--bm-input-field-padding-y) var(--bm-input-field-padding-x);
 }
 .bm-text-field__field:focus-within {
   outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
@@ -15456,13 +15548,13 @@ textarea:focus-visible,
   width: 100%;
   padding: var(--bm-sem-space-0);
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   cursor: var(--bm-text-field-input-cursor, text);
 }
 .bm-text-field__field .bm-text-field__input:-webkit-autofill {
   caret-color: var(--bm-comp-input-color-text);
   -webkit-text-fill-color: var(--bm-comp-input-color-text);
-  box-shadow: 0 0 0 var(--bm-comp-input-size-field-md-height) var(--bm-comp-input-color-bg) inset;
+  box-shadow: 0 0 0 var(--bm-input-field-height) var(--bm-comp-input-color-bg) inset;
 }
 .bm-text-field__field .bm-text-field__input::placeholder {
   color: var(--bm-comp-input-color-text-placeholder);
@@ -15477,6 +15569,10 @@ textarea:focus-visible,
   width: var(--bm-comp-input-size-field-icon);
   height: var(--bm-comp-input-size-field-icon);
 }
+.bm-text-field__field .bm-text-field__content .bm-icon {
+  width: var(--bm-input-field-icon-size);
+  height: var(--bm-input-field-icon-size);
+}
 
 :root,
 :host,