@viasat/beam-styles 2.36.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));
@@ -6718,6 +6743,19 @@ textarea:focus-visible,
   display: flex;
   flex-direction: column;
   max-height: 100%;
+  opacity: 0;
+  transform: scale(0.85);
+  transition: opacity 0.25s cubic-bezier(0.8, 0, 0.78, 1), transform 0.25s cubic-bezier(0.8, 0, 0.78, 1);
+}
+.bm-dialog[data-status=open] {
+  opacity: 1;
+  transform: scale(1);
+  transition-timing-function: cubic-bezier(0, 0, 0, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .bm-dialog {
+    transition: none;
+  }
 }
 .bm-dialog--sm {
   width: var(--bm-comp-dialog-size-sm);
@@ -6735,6 +6773,15 @@ textarea:focus-visible,
   width: var(--bm-comp-dialog-size-xl);
   max-width: var(--bm-comp-dialog-size-xl);
 }
+.bm-dialog--full {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+}
+.bm-dialog--full .bm-dialog__body {
+  flex: 1;
+}
 
 .bm-dialog__header {
   font: var(--bm-comp-dialog-typo-heading);
@@ -7705,6 +7752,18 @@ textarea:focus-visible,
 .bm-floatingui__overlay--transparent {
   background: transparent;
 }
+.bm-floatingui__overlay:has(.bm-dialog) {
+  background-color: transparent;
+  transition: background-color 0.25s cubic-bezier(0.33, 0, 0.67, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .bm-floatingui__overlay:has(.bm-dialog) {
+    transition: none;
+  }
+}
+.bm-floatingui__overlay:has(.bm-dialog[data-status=open]) {
+  background-color: var(--bm-comp-dialog-color-overlay);
+}
 .bm-floatingui__overlay:has(.bm-panel--contained) {
   position: absolute !important;
   inset: 0;
@@ -9585,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%;
 }
@@ -9612,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 {
@@ -9654,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 {
@@ -11070,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%;
 }
@@ -11081,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;
@@ -11093,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;
@@ -11102,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;
 }
@@ -11158,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));
@@ -11180,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);
 }
@@ -15343,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);
@@ -15408,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));
@@ -15422,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);
@@ -15443,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,