@viasat/beam-styles 2.2.1 → 2.9.0

package/styles.css

@@ -602,6 +602,15 @@
   color: var(--bm-comp-actionlist-color-group-heading);
   font: var(--bm-comp-actionlist-typo-heading-group);
 }
+.bm-action-list__group__no-results {
+  display: flex;
+  min-height: var(--bm-comp-actionlist-size-height);
+  padding: var(--bm-comp-actionlist-space-y) 0;
+  justify-content: flex-start;
+  align-items: center;
+  color: var(--bm-sem-color-text-primary);
+  font: var(--bm-sem-typo-body-sm);
+}
 .bm-action-list__group__divider {
   margin: var(--bm-comp-actionlist-space-y) 0;
 }
@@ -3722,102 +3731,556 @@
   );
 }
 
-.bm-card {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  outline: none;
-}
-.bm-card--default-background {
-  background: var(--bm-comp-card-color-bg);
-}
-.bm-card--default-shadow {
-  box-shadow: var(--bm-comp-card-shadow);
-}
-.bm-card--default-border {
-  border-color: var(--bm-comp-card-color-border);
-}
-.bm-card--default-border-radius {
-  border-radius: var(--bm-comp-card-radius-outer);
-}
-.bm-card--interactive {
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  padding: 0;
-  margin: 0;
-}
-.bm-card--interactive > .bm-state-layer {
-  pointer-events: none;
-  z-index: 1;
-  --bm-state-layer-top: calc(0px - var(--bm-sem-border-width-md));
-  --bm-state-layer-right: calc(0px - var(--bm-sem-border-width-md));
-  --bm-state-layer-bottom: calc(0px - var(--bm-sem-border-width-md));
-  --bm-state-layer-left: calc(0px - var(--bm-sem-border-width-md));
-}
-.bm-card--interactive:focus-visible {
-  outline-offset: calc(var(--bm-sem-border-width-md) + var(--bm-sem-size-focus-offset));
-  outline: var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus);
-}
-.bm-card--interactive:has(button:hover,
-a:hover,
-input:hover,
-select:hover,
-textarea:hover,
-[role=button]:hover,
-[role=link]:hover,
-[tabindex]:not([tabindex="-1"]):hover) > .bm-state-layer {
-  --bm-state-layer-opacity: 0 !important;
-  --bm-state-layer-background: transparent !important;
-}
-.bm-card--interactive:has(button:active,
-a:active,
-input:active,
-select:active,
-textarea:active,
-[role=button]:active,
-[role=link]:active,
-[tabindex]:not([tabindex="-1"]):active) > .bm-state-layer {
-  --bm-state-layer-opacity: 0 !important;
-  --bm-state-layer-background: transparent !important;
-}
-.bm-card--disabled {
-  opacity: var(--bm-sem-opacity-disabled);
-  cursor: not-allowed;
-}
-.bm-card--selected {
-  border-color: var(--bm-comp-card-color-border-selected);
-}
-
-.bm-card__content {
-  display: flex;
-  flex-direction: column;
-}
-.bm-card__content--density-sm {
-  gap: var(--bm-comp-card-space-gap-sm);
-  padding: var(--bm-comp-card-space-pad-sm);
-}
-.bm-card__content--density-md {
-  gap: var(--bm-comp-card-space-gap-md);
-  padding: var(--bm-comp-card-space-pad-md);
-}
-.bm-card__content--density-lg {
-  gap: var(--bm-comp-card-space-gap-lg);
-  padding: var(--bm-comp-card-space-pad-lg);
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~=bm-light] {
+  --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-input-color-bg-disabled: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);
+  --bm-comp-input-color-border-error: var(
+    --bm-sem-color-border-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-border-disabled: rgba(134, 151, 165, 0.4);
+  --bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-input-color-text-placeholder: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-input-color-text-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-input-color-icon-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-input-color-icon-error: var(
+    --bm-sem-color-icon-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);
+  --bm-comp-input-color-choice-checkbox-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-checkbox-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-checkbox-selected-bg-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-choice-checkbox-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-switch-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-switch-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-switch-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-radio-selected-bg: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-radio-selected-border: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-radio-selected-bg-error: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-radio-selected-border-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-typo-default: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-label-choice: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-choice-nudge: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
+  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-text-area-height: var(
+    --bm-primitive-dimension-475,
+    4.75rem
+  );
+  --bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio-inside: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-input-size-choice-switch-height: var(
+    --bm-sem-size-icon-md,
+    1.25rem
+  );
+  --bm-comp-input-size-choice-switch-width: var(
+    --bm-primitive-dimension-250,
+    2.5rem
+  );
+  --bm-comp-input-size-choice-switch-knob: var(
+    --bm-primitive-dimension-87,
+    0.875rem
+  );
+  --bm-comp-input-radius-field: var(--bm-sem-radius-input-md, 0.25rem);
+  --bm-comp-input-radius-choice-checkbox: var(
+    --bm-sem-radius-input-sm,
+    0.125rem
+  );
+  --bm-comp-input-radius-choice-radio: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-radius-choice-switch: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-border-width-field-default: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-border-width-field-error: var(
+    --bm-sem-border-width-lg,
+    0.125rem
+  );
+  --bm-comp-input-border-width-choice: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-shadow-field: var(
+    --bm-sem-shadow-none,
+    0 0 0 0 rgb(0, 0, 0, 0)
+  );
 }
 
-.bm-card__header {
-  display: flex;
-  flex-direction: row;
-  gap: var(--bm-comp-card-space-header-gap);
-}
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~=bm-dark] {
+  --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-input-color-bg-disabled: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);
+  --bm-comp-input-color-border-error: var(
+    --bm-sem-color-border-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-border-disabled: rgba(159, 175, 188, 0.4);
+  --bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-input-color-text-placeholder: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-input-color-text-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(195, 205, 213, 0.4)
+  );
+  --bm-comp-input-color-icon-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(195, 205, 213, 0.4)
+  );
+  --bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-input-color-icon-error: var(
+    --bm-sem-color-icon-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);
+  --bm-comp-input-color-choice-checkbox-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-checkbox-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #141d24
+  );
+  --bm-comp-input-color-choice-checkbox-selected-bg-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-choice-checkbox-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-switch-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-switch-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #141d24
+  );
+  --bm-comp-input-color-choice-switch-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-radio-selected-bg: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-input-color-choice-radio-selected-border: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-radio-selected-bg-error: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-input-color-choice-radio-selected-border-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-typo-default: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-label-choice: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-choice-nudge: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
+  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-text-area-height: var(
+    --bm-primitive-dimension-475,
+    4.75rem
+  );
+  --bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio-inside: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-input-size-choice-switch-height: var(
+    --bm-sem-size-icon-md,
+    1.25rem
+  );
+  --bm-comp-input-size-choice-switch-width: var(
+    --bm-primitive-dimension-250,
+    2.5rem
+  );
+  --bm-comp-input-size-choice-switch-knob: var(
+    --bm-primitive-dimension-87,
+    0.875rem
+  );
+  --bm-comp-input-radius-field: var(--bm-sem-radius-input-md, 0.25rem);
+  --bm-comp-input-radius-choice-checkbox: var(
+    --bm-sem-radius-input-sm,
+    0.125rem
+  );
+  --bm-comp-input-radius-choice-radio: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-radius-choice-switch: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-border-width-field-default: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-border-width-field-error: var(
+    --bm-sem-border-width-lg,
+    0.125rem
+  );
+  --bm-comp-input-border-width-choice: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-shadow-field: var(
+    --bm-sem-shadow-none,
+    0 0 0 0 rgb(0, 0, 0, 0)
+  );
+}
+
+.bm-card {
+  --bm-card-radius-outer: var(--bm-comp-card-radius-outer);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  border-radius: var(--bm-card-radius-outer);
+}
+.bm-card--default-background {
+  background: var(--bm-comp-card-color-bg);
+}
+.bm-card--default-shadow {
+  box-shadow: var(--bm-comp-card-shadow);
+}
+.bm-card--default-border {
+  border-color: var(--bm-comp-card-color-border);
+}
+.bm-card--interactive {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 0;
+  margin: 0;
+}
+.bm-card--interactive > .bm-state-layer {
+  pointer-events: none;
+  z-index: 3;
+  --bm-state-layer-top: calc(0px - var(--bm-sem-border-width-md));
+  --bm-state-layer-right: calc(0px - var(--bm-sem-border-width-md));
+  --bm-state-layer-bottom: calc(0px - var(--bm-sem-border-width-md));
+  --bm-state-layer-left: calc(0px - var(--bm-sem-border-width-md));
+  --bm-state-layer-outline-offset: calc(var(--bm-sem-border-width-md) + var(--bm-sem-size-focus-offset));
+}
+.bm-card--interactive:has(button:hover,
+a:hover,
+input:not([data-card-input]):hover,
+select:hover,
+textarea:hover,
+[role=button]:hover,
+[role=link]:hover,
+[tabindex]:not([tabindex="-1"]):hover) > .bm-state-layer {
+  --bm-state-layer-opacity: 0 !important;
+  --bm-state-layer-background: transparent !important;
+}
+.bm-card--interactive:has(button:active,
+a:active,
+input:not([data-card-input]):active,
+select:active,
+textarea:active,
+[role=button]:active,
+[role=link]:active,
+[tabindex]:not([tabindex="-1"]):active) > .bm-state-layer {
+  --bm-state-layer-opacity: 0 !important;
+  --bm-state-layer-background: transparent !important;
+}
+.bm-card--interactive:has(button:focus-visible,
+a:focus-visible,
+input:not([data-card-input]):focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[role=button]:focus-visible,
+[role=link]:focus-visible,
+[tabindex]:not([tabindex="-1"]):focus-visible) > .bm-state-layer {
+  --bm-state-layer-outline-color: transparent !important;
+}
+.bm-card--disabled {
+  opacity: var(--bm-sem-opacity-disabled);
+  cursor: not-allowed;
+}
+.bm-card__hidden-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+  border: none;
+  appearance: none;
+}
+.bm-card__hidden-input:disabled {
+  cursor: not-allowed;
+}
+.bm-card--selectable:not(:has(.bm-card__media-above)) .bm-card__header::after {
+  content: "";
+  order: 999;
+  width: var(--bm-comp-input-size-choice-checkbox);
+  flex-shrink: 0;
+}
+.bm-card--selectable:has(.bm-card__hidden-input:focus-visible) > .bm-state-layer {
+  --bm-state-layer-outline-width: var(--bm-sem-border-width-focus);
+  --bm-state-layer-outline-color: var(--bm-sem-color-border-focus);
+}
+.bm-card__selection-indicator {
+  position: absolute;
+  top: var(--bm-card-selection-indicator-top, var(--bm-sem-space-100));
+  right: var(--bm-card-selection-indicator-right, var(--bm-sem-space-100));
+  z-index: 4;
+  pointer-events: none;
+  display: block;
+}
+.bm-card__selection-indicator--checkbox {
+  box-sizing: border-box;
+  width: var(--bm-comp-input-size-choice-checkbox);
+  height: var(--bm-comp-input-size-choice-checkbox);
+  border-style: solid;
+  border-width: var(--bm-comp-input-border-width-field-default);
+  border-color: var(--bm-comp-input-color-border);
+  border-radius: var(--bm-comp-input-radius-choice-checkbox);
+  background-color: var(--bm-comp-input-color-bg);
+}
+.bm-card__selection-indicator--radio {
+  box-sizing: border-box;
+  width: var(--bm-comp-input-size-choice-radio);
+  height: var(--bm-comp-input-size-choice-radio);
+  border-style: solid;
+  border-width: var(--bm-comp-input-border-width-field-default);
+  border-color: var(--bm-comp-input-color-border);
+  border-radius: var(--bm-comp-input-radius-choice-radio);
+  background-color: var(--bm-comp-input-color-bg);
+}
+.bm-card__selection-indicator--radio::after {
+  content: "";
+  position: absolute;
+  width: var(--bm-comp-input-size-choice-radio-inside);
+  height: var(--bm-comp-input-size-choice-radio-inside);
+  border-radius: var(--bm-comp-input-radius-choice-radio);
+  top: calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2);
+  left: calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2);
+}
+.bm-card__selection-indicator--checkbox.bm-card__selection-indicator--checked {
+  border-color: var(--bm-comp-input-color-choice-checkbox-selected-border);
+  background-color: var(--bm-comp-input-color-choice-checkbox-selected-bg);
+}
+.bm-card__selection-indicator--checkbox.bm-card__selection-indicator--checked::after {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.178 7.363.808 4.697 0 5.598l3.178 3.573L10 1.501 9.198.6l-6.02 6.763Z' fill='%23fff'/%3E%3C/svg%3E");
+  -webkit-mask-size: cover;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.178 7.363.808 4.697 0 5.598l3.178 3.573L10 1.501 9.198.6l-6.02 6.763Z' fill='%23fff'/%3E%3C/svg%3E");
+  mask-size: cover;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(var(--bm-comp-input-size-choice-checkbox) * 5 / 8);
+  height: calc(var(--bm-comp-input-size-choice-checkbox) * 5 / 8);
+  background-color: var(--bm-comp-input-color-choice-checkbox-selected-icon);
+}
+.bm-card__selection-indicator--radio.bm-card__selection-indicator--checked {
+  border-color: var(--bm-comp-input-color-choice-radio-selected-border);
+  background-color: var(--bm-comp-input-color-choice-radio-selected-bg);
+}
+.bm-card__selection-indicator--radio.bm-card__selection-indicator--checked::after {
+  background-color: var(--bm-comp-input-color-choice-radio-selected-inner-circle);
+}
+.bm-card__selection-indicator--disabled {
+  border-color: var(--bm-comp-input-color-border-disabled);
+  background-color: var(--bm-comp-input-color-bg-disabled);
+}
+.bm-card__selection-indicator--checkbox.bm-card__selection-indicator--checked.bm-card__selection-indicator--disabled {
+  background-color: var(--bm-comp-input-color-icon-disabled);
+}
+.bm-card__selection-indicator--radio.bm-card__selection-indicator--checked.bm-card__selection-indicator--disabled::after {
+  background-color: var(--bm-comp-input-color-icon-disabled);
+}
+.bm-card--selected {
+  border-color: var(--bm-comp-card-color-border-selected);
+  outline: var(--bm-sem-border-width-selected) solid var(--bm-comp-card-color-border-selected);
+  outline-offset: calc(0px - var(--bm-sem-border-width-md));
+}
+.bm-card--density-sm {
+  --bm-card-selection-indicator-top: var(--bm-comp-card-space-pad-sm);
+  --bm-card-selection-indicator-right: var(--bm-comp-card-space-pad-sm);
+}
+.bm-card--density-sm > .bm-card__content {
+  gap: var(--bm-comp-card-space-gap-sm);
+  padding: var(--bm-comp-card-space-pad-sm);
+}
+.bm-card--density-md {
+  --bm-card-selection-indicator-top: var(--bm-comp-card-space-pad-md);
+  --bm-card-selection-indicator-right: var(--bm-comp-card-space-pad-md);
+}
+.bm-card--density-md > .bm-card__content {
+  gap: var(--bm-comp-card-space-gap-md);
+  padding: var(--bm-comp-card-space-pad-md);
+}
+.bm-card--density-lg {
+  --bm-card-selection-indicator-top: var(--bm-comp-card-space-pad-lg);
+  --bm-card-selection-indicator-right: var(--bm-comp-card-space-pad-lg);
+}
+.bm-card--density-lg > .bm-card__content {
+  gap: var(--bm-comp-card-space-gap-lg);
+  padding: var(--bm-comp-card-space-pad-lg);
+}
+
+.bm-card__content {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 2;
+}
+
+.bm-card__header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--bm-comp-card-space-header-gap);
+  position: relative;
+  z-index: 2;
+}
 .bm-card__header__content-before {
   order: 1;
   display: flex;
@@ -3867,6 +4330,17 @@ textarea:active,
   color: var(--bm-comp-card-color-icon);
 }
 
+.bm-card__media-above {
+  border-top-left-radius: calc(var(--bm-card-radius-outer) - var(--bm-sem-border-width-md));
+  border-top-right-radius: calc(var(--bm-card-radius-outer) - var(--bm-sem-border-width-md));
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.bm-card__media-above:last-child {
+  border-bottom-left-radius: calc(var(--bm-card-radius-outer) - var(--bm-sem-border-width-md));
+  border-bottom-right-radius: calc(var(--bm-card-radius-outer) - var(--bm-sem-border-width-md));
+}
+
 .bm-card__media-below {
   border-radius: var(--bm-comp-card-radius-inner);
 }
@@ -3877,6 +4351,8 @@ textarea:active,
   overflow: hidden;
   width: 100%;
   isolation: isolate;
+  position: relative;
+  z-index: 2;
 }
 .bm-card__media-above--overlay-color-black-10,
 .bm-card__media-below--overlay-color-black-10 {
@@ -4051,12 +4527,16 @@ textarea:active,
   color: var(--bm-comp-card-color-body);
   font: var(--bm-comp-card-typo-body);
   gap: var(--bm-sem-space-100);
+  position: relative;
+  z-index: 2;
 }
 
 .bm-card__footer {
   display: flex;
   gap: var(--bm-sem-space-50);
   flex-direction: column;
+  position: relative;
+  z-index: 2;
 }
 .bm-card__footer__actions {
   display: flex;
@@ -4471,23 +4951,23 @@ textarea:active,
   position: relative;
   margin: var(--bm-sem-space-0);
   flex-shrink: var(--bm-sem-space-0);
-  width: var(--bm-comp-input-size-choice-checkbox);
-  height: var(--bm-comp-input-size-choice-checkbox);
-  background-color: var(--bm-comp-input-color-bg);
   cursor: var(--bm-input-choice-cursor, pointer);
   box-sizing: border-box;
+  width: var(--bm-comp-input-size-choice-checkbox);
+  height: var(--bm-comp-input-size-choice-checkbox);
   border-style: solid;
+  border-width: var(--bm-comp-input-border-width-field-default);
   border-color: var(--bm-comp-input-color-border);
   border-radius: var(--bm-comp-input-radius-choice-checkbox);
-  border-width: var(--bm-comp-input-border-width-field-default);
+  background-color: var(--bm-comp-input-color-bg);
 }
 .bm-checkbox__label .bm-checkbox__input:focus-visible {
   outline-offset: var(--bm-sem-size-focus-offset);
   outline: var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus);
 }
 .bm-checkbox__label .bm-checkbox__input:checked {
-  background-color: var(--bm-comp-input-color-choice-checkbox-selected-bg);
   border-color: var(--bm-comp-input-color-choice-checkbox-selected-border);
+  background-color: var(--bm-comp-input-color-choice-checkbox-selected-bg);
 }
 .bm-checkbox__label .bm-checkbox__input:checked::after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.178 7.363.808 4.697 0 5.598l3.178 3.573L10 1.501 9.198.6l-6.02 6.763Z' fill='%23fff'/%3E%3C/svg%3E");
@@ -4499,13 +4979,13 @@ textarea:active,
   mask-position: center;
   mask-repeat: no-repeat;
   content: "";
-  background-color: var(--bm-comp-input-color-choice-checkbox-selected-icon);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: calc(var(--bm-comp-input-size-choice-checkbox) * 5 / 8);
   height: calc(var(--bm-comp-input-size-choice-checkbox) * 5 / 8);
+  background-color: var(--bm-comp-input-color-choice-checkbox-selected-icon);
 }
 .bm-checkbox--indeterminate .bm-checkbox__input:checked::after {
   height: 2px;
@@ -8925,34 +9405,301 @@ textarea:active,
     --bm-utility-color-accent-default,
     #00768f
   );
-  --bm-comp-progress-bar-color-indicator-success: var(
-    --bm-sem-color-surface-positive-strong,
-    #187c36
+  --bm-comp-progress-bar-color-indicator-success: var(
+    --bm-sem-color-surface-positive-strong,
+    #187c36
+  );
+  --bm-comp-progress-bar-color-indicator-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #d1dae0);
+  --bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-progress-bar-size-sm-height: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-progress-bar-size-md-height: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-progress-bar-size-lg-height: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-progress-bar-typo-label: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~=bm-dark] {
+  --bm-comp-progress-bar-color-indicator-default: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-progress-bar-color-indicator-success: var(
+    --bm-sem-color-surface-positive-strong,
+    #b3eb9e
+  );
+  --bm-comp-progress-bar-color-indicator-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #465967);
+  --bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-progress-bar-size-sm-height: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-progress-bar-size-md-height: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-progress-bar-size-lg-height: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-progress-bar-typo-label: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+}
+
+.bm-progress-bar {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+.bm-progress-bar .bm-progress-bar__label {
+  margin-bottom: var(--bm-comp-progress-bar-space-label-bottom);
+  font: var(--bm-comp-progress-bar-typo-label);
+  color: var(--bm-comp-progress-bar-color-label);
+}
+.bm-progress-bar .bm-progress-bar__track {
+  height: var(--bm-comp-progress-bar-size-md-height);
+  border-radius: var(--bm-comp-progress-bar-radius);
+  background-color: var(--bm-comp-progress-bar-color-track);
+  display: flex;
+  overflow: hidden;
+}
+.bm-progress-bar .bm-progress-bar__status {
+  margin-top: var(--bm-comp-progress-bar-space-status-top);
+}
+.bm-progress-bar--sm .bm-progress-bar__track {
+  height: var(--bm-comp-progress-bar-size-sm-height);
+}
+.bm-progress-bar--lg .bm-progress-bar__track {
+  height: var(--bm-comp-progress-bar-size-lg-height);
+}
+.bm-progress-bar--full-width .bm-progress-bar__track {
+  border-radius: 0;
+}
+.bm-progress-bar--active .bm-progress-bar__indicator {
+  background-color: var(--bm-comp-progress-bar-color-indicator-default);
+}
+.bm-progress-bar--success .bm-progress-bar__indicator {
+  background-color: var(--bm-comp-progress-bar-color-indicator-success);
+}
+.bm-progress-bar--error .bm-progress-bar__indicator {
+  background-color: var(--bm-comp-progress-bar-color-indicator-error);
+}
+.bm-progress-bar--determinate .bm-progress-bar__indicator {
+  transition-property: width;
+  transition-duration: 300ms;
+  transition-timing-function: ease-out;
+}
+.bm-progress-bar--indeterminate.bm-progress-bar--active .bm-progress-bar__indicator {
+  width: 100%;
+  mask-image: linear-gradient(to right, transparent 43.0555555556%, black 50%, transparent 56.9444444444%);
+  mask-size: 240%;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  animation: 2s linear infinite bm-progress-bar-indeterminate-indicator-animation;
+}
+.bm-progress-bar--indeterminate.bm-progress-bar--active .bm-progress-bar__indicator:dir(rtl) {
+  animation-direction: reverse;
+}
+
+@keyframes bm-progress-bar-indeterminate-indicator-animation {
+  0% {
+    mask-position: right;
+  }
+  100% {
+    mask-position: left;
+  }
+}
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~=bm-light] {
+  --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-input-color-bg-disabled: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);
+  --bm-comp-input-color-border-error: var(
+    --bm-sem-color-border-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-border-disabled: rgba(134, 151, 165, 0.4);
+  --bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-input-color-text-placeholder: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-input-color-text-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-input-color-icon-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-input-color-icon-error: var(
+    --bm-sem-color-icon-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);
+  --bm-comp-input-color-choice-checkbox-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-checkbox-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-checkbox-selected-bg-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-choice-checkbox-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-switch-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-switch-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-switch-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-radio-selected-bg: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-radio-selected-border: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-radio-selected-bg-error: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-radio-selected-border-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
   );
-  --bm-comp-progress-bar-color-indicator-error: var(
+  --bm-comp-input-color-choice-radio-selected-inner-circle-error: var(
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #d1dae0);
-  --bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #141d24);
-  --bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);
-  --bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, 0.5rem);
-  --bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, 0.25rem);
-  --bm-comp-progress-bar-size-sm-height: var(
-    --bm-primitive-dimension-25,
-    0.25rem
+  --bm-comp-input-typo-default: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
   );
-  --bm-comp-progress-bar-size-md-height: var(
+  --bm-comp-input-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-label-choice: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-choice-nudge: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
+  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-text-area-height: var(
+    --bm-primitive-dimension-475,
+    4.75rem
+  );
+  --bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio-inside: var(
     --bm-primitive-dimension-50,
     0.5rem
   );
-  --bm-comp-progress-bar-size-lg-height: var(
-    --bm-primitive-dimension-75,
-    0.75rem
+  --bm-comp-input-size-choice-switch-height: var(
+    --bm-sem-size-icon-md,
+    1.25rem
   );
-  --bm-comp-progress-bar-typo-label: var(
-    --bm-sem-typo-body-md,
-    400 1rem/1.5rem "Source Sans Pro"
+  --bm-comp-input-size-choice-switch-width: var(
+    --bm-primitive-dimension-250,
+    2.5rem
+  );
+  --bm-comp-input-size-choice-switch-knob: var(
+    --bm-primitive-dimension-87,
+    0.875rem
+  );
+  --bm-comp-input-radius-field: var(--bm-sem-radius-input-md, 0.25rem);
+  --bm-comp-input-radius-choice-checkbox: var(
+    --bm-sem-radius-input-sm,
+    0.125rem
+  );
+  --bm-comp-input-radius-choice-radio: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-radius-choice-switch: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-border-width-field-default: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-border-width-field-error: var(
+    --bm-sem-border-width-lg,
+    0.125rem
+  );
+  --bm-comp-input-border-width-choice: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-shadow-field: var(
+    --bm-sem-shadow-none,
+    0 0 0 0 rgb(0, 0, 0, 0)
   );
 }
 
@@ -8960,104 +9707,258 @@ textarea:active,
 .bm-dark,
 .bm-light .bm-inverse,
 [data-bm-theme~=bm-dark] {
-  --bm-comp-progress-bar-color-indicator-default: var(
+  --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-input-color-bg-disabled: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);
+  --bm-comp-input-color-border-error: var(
+    --bm-sem-color-border-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-border-disabled: rgba(159, 175, 188, 0.4);
+  --bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-input-color-text-placeholder: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-input-color-text-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(195, 205, 213, 0.4)
+  );
+  --bm-comp-input-color-icon-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(195, 205, 213, 0.4)
+  );
+  --bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-input-color-icon-error: var(
+    --bm-sem-color-icon-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);
+  --bm-comp-input-color-choice-checkbox-selected-bg: var(
     --bm-utility-color-accent-default,
     #43bfd6
   );
-  --bm-comp-progress-bar-color-indicator-success: var(
-    --bm-sem-color-surface-positive-strong,
-    #b3eb9e
+  --bm-comp-input-color-choice-checkbox-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #141d24
   );
-  --bm-comp-progress-bar-color-indicator-error: var(
+  --bm-comp-input-color-choice-checkbox-selected-bg-error: var(
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #465967);
-  --bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #ffffff);
-  --bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);
-  --bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, 0.5rem);
-  --bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, 0.25rem);
-  --bm-comp-progress-bar-size-sm-height: var(
-    --bm-primitive-dimension-25,
-    0.25rem
+  --bm-comp-input-color-choice-checkbox-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
   );
-  --bm-comp-progress-bar-size-md-height: var(
-    --bm-primitive-dimension-50,
-    0.5rem
+  --bm-comp-input-color-choice-switch-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
   );
-  --bm-comp-progress-bar-size-lg-height: var(
-    --bm-primitive-dimension-75,
-    0.75rem
+  --bm-comp-input-color-choice-switch-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #141d24
   );
-  --bm-comp-progress-bar-typo-label: var(
+  --bm-comp-input-color-choice-switch-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-radio-selected-bg: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-input-color-choice-radio-selected-border: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-radio-selected-bg-error: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-input-color-choice-radio-selected-border-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-typo-default: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-label-choice: var(
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
+  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-choice-nudge: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
+  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-text-area-height: var(
+    --bm-primitive-dimension-475,
+    4.75rem
+  );
+  --bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio-inside: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-input-size-choice-switch-height: var(
+    --bm-sem-size-icon-md,
+    1.25rem
+  );
+  --bm-comp-input-size-choice-switch-width: var(
+    --bm-primitive-dimension-250,
+    2.5rem
+  );
+  --bm-comp-input-size-choice-switch-knob: var(
+    --bm-primitive-dimension-87,
+    0.875rem
+  );
+  --bm-comp-input-radius-field: var(--bm-sem-radius-input-md, 0.25rem);
+  --bm-comp-input-radius-choice-checkbox: var(
+    --bm-sem-radius-input-sm,
+    0.125rem
+  );
+  --bm-comp-input-radius-choice-radio: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-radius-choice-switch: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-border-width-field-default: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-border-width-field-error: var(
+    --bm-sem-border-width-lg,
+    0.125rem
+  );
+  --bm-comp-input-border-width-choice: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-shadow-field: var(
+    --bm-sem-shadow-none,
+    0 0 0 0 rgb(0, 0, 0, 0)
+  );
 }
 
-.bm-progress-bar {
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
+.bm-radio-button {
+  display: inline-flex;
 }
-.bm-progress-bar .bm-progress-bar__label {
-  margin-bottom: var(--bm-comp-progress-bar-space-label-bottom);
-  font: var(--bm-comp-progress-bar-typo-label);
-  color: var(--bm-comp-progress-bar-color-label);
+.bm-radio-button--read-only {
+  --bm-input-choice-cursor: default;
+  --bm-input-choice-label-cursor: default;
+  --bm-input-choice-label-pointer-events: none;
 }
-.bm-progress-bar .bm-progress-bar__track {
-  height: var(--bm-comp-progress-bar-size-md-height);
-  border-radius: var(--bm-comp-progress-bar-radius);
-  background-color: var(--bm-comp-progress-bar-color-track);
-  display: flex;
-  overflow: hidden;
+.bm-radio-button--disabled {
+  --bm-input-choice-cursor: not-allowed;
+  --bm-input-choice-label-cursor: not-allowed;
 }
-.bm-progress-bar .bm-progress-bar__status {
-  margin-top: var(--bm-comp-progress-bar-space-status-top);
+.bm-radio-button__label {
+  display: inherit;
+  word-break: break-word;
+  color: var(--bm-comp-input-color-text);
+  font: var(--bm-comp-input-typo-default);
+  gap: var(--bm-comp-input-space-choice-gap-inside);
+  cursor: var(--bm-input-choice-label-cursor, pointer);
+  pointer-events: var(--bm-input-choice-label-pointer-events, auto);
 }
-.bm-progress-bar--sm .bm-progress-bar__track {
-  height: var(--bm-comp-progress-bar-size-sm-height);
+.bm-radio-button--error .bm-radio-button__label {
+  color: var(--bm-comp-input-color-text);
 }
-.bm-progress-bar--lg .bm-progress-bar__track {
-  height: var(--bm-comp-progress-bar-size-lg-height);
+.bm-radio-button--error .bm-radio-button__label .bm-radio-button__input, .bm-radio-button--error .bm-radio-button__label .bm-radio-button__input:checked {
+  border-color: var(--bm-comp-input-color-border-error);
+  background-color: var(--bm-comp-input-color-bg);
 }
-.bm-progress-bar--full-width .bm-progress-bar__track {
-  border-radius: 0;
+.bm-radio-button--error .bm-radio-button__label .bm-radio-button__input:checked:after {
+  background-color: var(--bm-comp-input-color-choice-radio-selected-inner-circle-error);
 }
-.bm-progress-bar--active .bm-progress-bar__indicator {
-  background-color: var(--bm-comp-progress-bar-color-indicator-default);
+.bm-radio-button--read-only .bm-radio-button__label {
+  color: var(--bm-comp-input-color-text);
 }
-.bm-progress-bar--success .bm-progress-bar__indicator {
-  background-color: var(--bm-comp-progress-bar-color-indicator-success);
+.bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input, .bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input:checked {
+  border-color: var(--bm-comp-input-color-border-disabled);
+  background-color: var(--bm-comp-input-color-bg-disabled);
 }
-.bm-progress-bar--error .bm-progress-bar__indicator {
-  background-color: var(--bm-comp-progress-bar-color-indicator-error);
+.bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input:checked:after {
+  background-color: var(--bm-comp-input-color-icon);
 }
-.bm-progress-bar--determinate .bm-progress-bar__indicator {
-  transition-property: width;
-  transition-duration: 300ms;
-  transition-timing-function: ease-out;
+.bm-radio-button--disabled .bm-radio-button__label {
+  color: var(--bm-comp-input-color-text-disabled);
 }
-.bm-progress-bar--indeterminate.bm-progress-bar--active .bm-progress-bar__indicator {
-  width: 100%;
-  mask-image: linear-gradient(to right, transparent 43.0555555556%, black 50%, transparent 56.9444444444%);
-  mask-size: 240%;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  animation: 2s linear infinite bm-progress-bar-indeterminate-indicator-animation;
+.bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input, .bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input:checked {
+  border-color: var(--bm-comp-input-color-border-disabled);
+  background-color: var(--bm-comp-input-color-bg-disabled);
 }
-.bm-progress-bar--indeterminate.bm-progress-bar--active .bm-progress-bar__indicator:dir(rtl) {
-  animation-direction: reverse;
+.bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input:checked:after {
+  background-color: var(--bm-comp-input-color-icon-disabled);
 }
-
-@keyframes bm-progress-bar-indeterminate-indicator-animation {
-  0% {
-    mask-position: right;
-  }
-  100% {
-    mask-position: left;
-  }
+.bm-radio-button--with-label .bm-radio-button__label .bm-radio-button__input {
+  margin: var(--bm-comp-input-space-choice-nudge) var(--bm-sem-space-0);
+}
+.bm-radio-button__label .bm-radio-button__input {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  margin: var(--bm-sem-space-0);
+  flex-shrink: var(--bm-sem-space-0);
+  cursor: var(--bm-input-choice-cursor, pointer);
+  box-sizing: border-box;
+  width: var(--bm-comp-input-size-choice-radio);
+  height: var(--bm-comp-input-size-choice-radio);
+  border-style: solid;
+  border-width: var(--bm-comp-input-border-width-field-default);
+  border-color: var(--bm-comp-input-color-border);
+  border-radius: var(--bm-comp-input-radius-choice-radio);
+  background-color: var(--bm-comp-input-color-bg);
+}
+.bm-radio-button__label .bm-radio-button__input::after {
+  content: "";
+  position: absolute;
+  width: var(--bm-comp-input-size-choice-radio-inside);
+  height: var(--bm-comp-input-size-choice-radio-inside);
+  border-radius: var(--bm-comp-input-radius-choice-radio);
+  top: calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2);
+  left: calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2);
+}
+.bm-radio-button__label .bm-radio-button__input:focus-visible {
+  outline-offset: var(--bm-sem-size-focus-offset);
+  outline: var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus);
 }
+.bm-radio-button__label .bm-radio-button__input:checked {
+  border-color: var(--bm-comp-input-color-choice-radio-selected-border);
+  background-color: var(--bm-comp-input-color-choice-radio-selected-bg);
+}
+.bm-radio-button__label .bm-radio-button__input:checked::after {
+  background-color: var(--bm-comp-input-color-choice-radio-selected-inner-circle);
+}
+
 :root,
 :host,
 .bm-light,
@@ -9387,95 +10288,123 @@ textarea:active,
   );
 }
 
-.bm-radio-button {
-  display: inline-flex;
+.bm-search {
+  --bm-label-cursor: pointer;
+  max-width: var(--bm-comp-input-size-field-width);
+  position: relative;
+  --bm-label-space-bottom: var(--bm-comp-label-space-bottom);
 }
-.bm-radio-button--read-only {
-  --bm-input-choice-cursor: default;
-  --bm-input-choice-label-cursor: default;
-  --bm-input-choice-label-pointer-events: none;
+.bm-search--disabled {
+  --bm-label-cursor: not-allowed;
+  --bm-label-pointer-events: auto;
+  --bm-text-field-cursor: not-allowed;
+  --bm-text-field-input-cursor: not-allowed;
 }
-.bm-radio-button--disabled {
-  --bm-input-choice-cursor: not-allowed;
-  --bm-input-choice-label-cursor: not-allowed;
+.bm-search--fluid {
+  max-width: 100%;
 }
-.bm-radio-button__label {
-  display: inherit;
-  word-break: break-word;
-  color: var(--bm-comp-input-color-text);
+.bm-search__field {
+  --bm-text-field-input-cursor: text;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  cursor: var(--bm-text-field-cursor, pointer);
+  user-select: none;
   font: var(--bm-comp-input-typo-default);
-  gap: var(--bm-comp-input-space-choice-gap-inside);
-  cursor: var(--bm-input-choice-label-cursor, pointer);
-  pointer-events: var(--bm-input-choice-label-pointer-events, auto);
+  min-height: var(--bm-comp-input-size-field-md-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-radio-button--error .bm-radio-button__label {
-  color: var(--bm-comp-input-color-text);
+.bm-search__field__input {
+  display: flex;
+  align-items: center;
+  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));
+  flex: 1;
+  cursor: var(--bm-text-field-input-cursor, pointer);
+  text-overflow: ellipsis;
+  border: 0;
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  font: var(--bm-comp-input-typo-default);
+  width: 100%;
+  min-width: 3rem;
 }
-.bm-radio-button--error .bm-radio-button__label .bm-radio-button__input, .bm-radio-button--error .bm-radio-button__label .bm-radio-button__input:checked {
-  border-color: var(--bm-comp-input-color-border-error);
-  background-color: var(--bm-comp-input-color-bg);
+.bm-search__field__input::-webkit-search-decoration, .bm-search__field__input::-webkit-search-cancel-button, .bm-search__field__input::-webkit-search-results-button, .bm-search__field__input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
 }
-.bm-radio-button--error .bm-radio-button__label .bm-radio-button__input:checked:after {
-  background-color: var(--bm-comp-input-color-choice-radio-selected-inner-circle-error);
+.bm-search__field__input::placeholder {
+  color: var(--bm-comp-input-color-text-placeholder);
 }
-.bm-radio-button--read-only .bm-radio-button__label {
+.bm-search--disabled, .bm-search--disabled .bm-search__field {
+  --bm-text-field-cursor: not-allowed;
+  --bm-text-field-input-cursor: not-allowed;
+}
+.bm-search--error .bm-search__field {
   color: var(--bm-comp-input-color-text);
+  border-color: var(--bm-comp-input-color-border-error);
+  background-color: var(--bm-comp-input-color-bg);
+  --bm-comp-icon-color: var(--bm-comp-input-color-icon);
 }
-.bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input, .bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input:checked {
+.bm-search--read-only .bm-search__field {
+  color: var(--bm-comp-input-color-text);
   border-color: var(--bm-comp-input-color-border-disabled);
   background-color: var(--bm-comp-input-color-bg-disabled);
+  --bm-comp-icon-color: var(--bm-comp-input-color-icon);
 }
-.bm-radio-button--read-only .bm-radio-button__label .bm-radio-button__input:checked:after {
-  background-color: var(--bm-comp-input-color-icon);
+.bm-search--read-only .bm-search__field .bm-search__content svg,
+.bm-search--read-only .bm-search__field .bm-search__content ::slotted([slot*=content]) {
+  color: var(--bm-comp-input-color-icon);
 }
-.bm-radio-button--disabled .bm-radio-button__label {
+.bm-search--disabled .bm-search__field {
   color: var(--bm-comp-input-color-text-disabled);
-}
-.bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input, .bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input:checked {
   border-color: var(--bm-comp-input-color-border-disabled);
   background-color: var(--bm-comp-input-color-bg-disabled);
+  --bm-comp-icon-color: var(--bm-comp-input-color-icon-disabled);
 }
-.bm-radio-button--disabled .bm-radio-button__label .bm-radio-button__input:checked:after {
-  background-color: var(--bm-comp-input-color-icon-disabled);
+.bm-search--disabled .bm-search__field .bm-search__content {
+  opacity: var(--bm-sem-opacity-disabled);
 }
-.bm-radio-button--with-label .bm-radio-button__label .bm-radio-button__input {
-  margin: var(--bm-comp-input-space-choice-nudge) var(--bm-sem-space-0);
+.bm-search--disabled .bm-search__field .bm-search__content svg,
+.bm-search--disabled .bm-search__field .bm-search__content ::slotted([slot*=content]) {
+  color: var(--bm-comp-input-color-text-disabled);
 }
-.bm-radio-button__label .bm-radio-button__input {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  position: relative;
-  margin: var(--bm-sem-space-0);
-  flex-shrink: var(--bm-sem-space-0);
-  cursor: var(--bm-input-choice-cursor, pointer);
-  width: var(--bm-comp-input-size-choice-radio);
-  height: var(--bm-comp-input-size-choice-radio);
+.bm-search--disabled .bm-search__field .bm-search__field__input {
+  color: var(--bm-comp-input-color-text-disabled);
+}
+.bm-search--disabled .bm-search__field .bm-search__field__input::placeholder {
+  color: var(--bm-comp-input-color-text-disabled);
+}
+.bm-search__field {
+  border: var(--bm-comp-input-border-width-field-default) solid var(--bm-comp-input-color-border);
+  border-radius: var(--bm-comp-input-radius-field);
+  cursor: var(--bm-text-field-input-cursor, pointer);
+  box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
-  border-style: solid;
-  border-color: var(--bm-comp-input-color-border);
-  border-radius: var(--bm-comp-input-radius-choice-radio);
-  border-width: var(--bm-comp-input-border-width-field-default);
+  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);
 }
-.bm-radio-button__label .bm-radio-button__input:focus-visible {
-  outline-offset: var(--bm-sem-size-focus-offset);
+.bm-search__field:focus-within {
+  outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
   outline: var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus);
 }
-.bm-radio-button__label .bm-radio-button__input:checked {
-  border-color: var(--bm-comp-input-color-choice-radio-selected-border);
-  background-color: var(--bm-comp-input-color-choice-radio-selected-bg);
-}
-.bm-radio-button__label .bm-radio-button__input:checked:after {
-  background-color: var(--bm-comp-input-color-choice-radio-selected-inner-circle);
+.bm-search__field .bm-search__content {
+  display: flex;
+  align-items: center;
 }
-.bm-radio-button__label .bm-radio-button__input:after {
-  content: "";
-  position: absolute;
-  width: var(--bm-comp-input-size-choice-radio-inside);
-  height: var(--bm-comp-input-size-choice-radio-inside);
-  border-radius: var(--bm-comp-input-radius-choice-radio);
-  top: calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2);
-  left: calc(50% - var(--bm-comp-input-size-choice-radio-inside) / 2);
+.bm-search__field .bm-search__content svg,
+.bm-search__field .bm-search__content ::slotted([slot*=content]) {
+  color: var(--bm-comp-input-color-icon);
+  width: var(--bm-comp-input-size-field-icon);
+  height: var(--bm-comp-input-size-field-icon);
 }
 
 :root,