@bi-digital/css 0.7.0 → 0.9.0

package/dist/components.css

@@ -151,6 +151,9 @@
   width: var(--bic-avatar-size);
   height: var(--bic-avatar-size);
   font-size: var(--bic-avatar-font-size);
+  font-weight: var(--bi-font-weight-regular);
+  line-height: 1;
+  font-family: var(--bi-font-family-plain);
   text-transform: uppercase;
   -webkit-user-select: none;
   user-select: none;
@@ -158,9 +161,6 @@
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  font-family: museo-sans, Arial, sans-serif;
-  font-weight: 500;
-  line-height: 1;
   text-decoration: none;
   display: flex;
   overflow: hidden;
@@ -224,16 +224,13 @@
   --bic-badge-border-radius: var(--bi-radius-medium);
   --bic-badge-border-width: var(--bi-stroke-thin);
   --bic-badge-height: var(--bi-scale-6x);
-  --bic-badge-font-size: .875rem;
-  --bic-badge-line-height: 1.4;
+  --bic-badge-font: var(--bi-font-body-medium);
   --bic-badge-padding: 0 var(--bi-scale-1-5x);
   padding: var(--bic-badge-padding);
   border-radius: var(--bic-badge-border-radius);
   background-color: var(--bic-badge-background);
   color: var(--bic-badge-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: var(--bic-badge-font-size);
-  line-height: var(--bic-badge-line-height);
+  font: var(--bic-badge-font);
   width: max-content;
   height: fit-content;
   min-height: var(--bic-badge-height);
@@ -241,7 +238,6 @@
   word-break: break-word;
   justify-content: center;
   align-items: center;
-  font-weight: 500;
   display: inline-flex;
 }
 
@@ -257,16 +253,14 @@
 
 .bi-badge[data-size="xs"] {
   --bic-badge-padding: 0 var(--bi-scale-0-50x);
-  --bic-badge-font-size: .8125rem;
-  --bic-badge-line-height: 1.15;
+  --bic-badge-font: var(--bi-font-body-xs);
   --bic-badge-border-radius: var(--bi-radius-small);
   --bic-badge-height: var(--bi-scale-4x);
 }
 
 .bi-badge[data-size="small"] {
   --bic-badge-padding: 0 var(--bi-scale-1x);
-  --bic-badge-font-size: .8125rem;
-  --bic-badge-line-height: 1.15;
+  --bic-badge-font: var(--bi-font-body-xs);
   --bic-badge-height: var(--bi-scale-5x);
 }
 
@@ -347,9 +341,10 @@
   --bic-button-background: transparent;
   --bic-button-background-hover: transparent;
   --bic-button-background-press: transparent;
+  --bic-button-active-color: var(--bi-primary-50);
   --bic-button-focus-shadow-color: var(--bi-basic-white);
   --bic-button-focus-outline-color: var(--bi-primary-50);
-  font-family: museo-sans, Arial, sans-serif;
+  font-family: var(--bi-font-family-plain);
   font-size: var(--bic-button-font-size);
   line-height: var(--bic-button-line-height);
   -webkit-font-smoothing: antialiased;
@@ -360,6 +355,7 @@
   cursor: pointer;
   color: var(--bic-button-color);
   background: var(--bic-button-background);
+  font-weight: var(--bi-font-weight-bold);
   box-shadow: var(--bic-button-box-shadow);
   height: fit-content;
   min-height: var(--bic-button-size);
@@ -371,23 +367,23 @@
   text-align: inherit;
   border: none;
   flex-shrink: 0;
-  font-weight: 600;
   display: flex;
   position: relative;
   overflow: hidden;
 }
 
-.bi-button[data-stretch="true"] {
-  width: 100%;
+.bi-button[data-dark="true"] {
+  --bic-button-active-color: var(--bi-primary-30);
+  --bic-button-focus-shadow-color: var(--bi-neutral-95);
+  --bic-button-focus-outline-color: var(--bi-primary-30);
 }
 
-.bi-button[data-active="true"] {
-  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
+.bi-button[data-fullwidth="true"], .bi-button[data-stretch="true"] {
+  width: 100%;
 }
 
-.bi-button[data-dark="true"] {
-  --bic-button-focus-shadow-color: var(--bi-neutral-95);
-  --bic-button-focus-outline-color: var(--bi-primary-30);
+.bi-button[data-active="true"], .bi-button[aria-expanded="true"] {
+  box-shadow: 0px 0px 0px 1.5px var(--bic-button-active-color) inset;
 }
 
 .bi-button:focus-visible {
@@ -666,15 +662,13 @@
 
 .bi-card .bi-card--content > p {
   color: var(--bic-card-content-color);
+  font: var(--bi-font-body-medium);
   white-space: break-spaces;
   text-overflow: ellipsis;
   -webkit-line-clamp: var(--bic-card-content-lines);
   line-clamp: var(--bic-card-content-lines);
   -webkit-box-orient: vertical;
   margin: 0;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.5;
   display: -webkit-box;
   overflow: hidden;
 }
@@ -751,31 +745,29 @@
 }
 
 .bi-card .bi-card--header {
+  font: var(--bi-font-body-medium);
   gap: var(--bi-scale-0-50x);
   word-wrap: break-word;
   word-break: break-word;
   flex-direction: column;
   width: 100%;
-  font-family: museo-sans, Arial, sans-serif;
-  line-height: 1.5;
   display: flex;
 }
 
 .bi-card .bi-card--header .bi-card--header-label {
   color: var(--bic-card-header-label-color);
   margin: 0;
-  font-size: .875rem;
 }
 
 @media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-label {
-    font-size: .8125rem;
+    font: var(--bi-font-body-small);
   }
 }
 
 .bi-card .bi-card--header .bi-card--header-label .bi-card--header-bold {
   color: var(--bic-card-header-bold-color);
-  font-weight: 600;
+  font-weight: var(--bi-font-weight-bold);
 }
 
 .bi-card .bi-card--header .bi-card--header-label .bi-card--header-dot {
@@ -789,22 +781,20 @@
 }
 
 .bi-card .bi-card--header .bi-card--header-title {
+  font: var(--bi-font-title-bold-small);
   color: var(--bic-card-header-title-color);
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.3;
   display: -webkit-box;
   overflow: hidden;
 }
 
 @media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-title {
-    font-size: 1rem;
+    font: var(--bi-font-title-bold-xs);
   }
 }
 
@@ -849,14 +839,11 @@
       0px 4px 6px 0px #26333f0d;
   color: var(--bic-card-header-title-color);
   text-align: center;
+  font: var(--bi-font-title-bold-medium);
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.3;
   display: flex;
 }
 
@@ -898,17 +885,14 @@
   --bic-chip-text-color: var(--bi-neutral-90);
   --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
   --bic-chip-icon-size: var(--bi-scale-6x);
-  --bic-chip-font-size: .875rem;
-  --bic-chip-line-height: 1.5rem;
+  --bic-chip-font: var(--bi-font-body-medium);
+  font: var(--bic-chip-font);
   gap: var(--bi-scale-1x);
   border-radius: var(--bi-radius-full);
   width: fit-content;
   color: var(--bic-chip-text-color);
   background-color: var(--bic-chip-background);
   padding: var(--bic-chip-padding);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: var(--bic-chip-font-size);
-  line-height: var(--bic-chip-line-height);
   justify-content: flex-start;
   align-items: center;
   display: inline-flex;
@@ -917,14 +901,13 @@
 
 .bi-chip[data-size="small"] {
   --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
-  --bic-chip-font-size: .8125rem;
-  --bic-chip-line-height: 1.25rem;
+  --bic-chip-font: var(--bi-font-body-small);
   --bic-chip-icon-size: var(--bi-scale-5x);
 }
 
 .bi-chip[data-size="large"] {
   --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
-  --bic-chip-font-size: 1rem;
+  --bic-chip-font: var(--bi-font-body-large);
 }
 
 .bi-chip[data-dark="true"] {
@@ -1127,6 +1110,7 @@ details.bi-details[data-dark="true"] {
 }
 
 details.bi-details {
+  font: var(--bi-font-body-large);
   background-color: var(--bic-details-background);
   color: var(--bic-details-color);
   border: 0;
@@ -1134,10 +1118,6 @@ details.bi-details {
   border-style: solid;
   border-top-width: var(--bi-stroke-thin);
   border-bottom-width: var(--bi-stroke-thin);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5;
 }
 
 details.bi-details + :is(details.bi-details) {
@@ -1152,8 +1132,8 @@ details.bi-details summary {
   gap: var(--bi-scale-2x);
   -webkit-user-select: none;
   user-select: none;
+  font-weight: var(--bi-font-weight-bold);
   flex-direction: row;
-  font-weight: 700;
   list-style: none;
   display: flex;
   position: relative;
@@ -1309,11 +1289,9 @@ details.bi-details > *:not(summary) + * {
 .bi-dialog .bi-dialog--header {
   padding: var(--bic-dialog-padding);
   min-height: var(--bi-scale-16x);
+  font: var(--bi-font-title-bold-medium);
   align-items: center;
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.3;
   display: flex;
 }
 
@@ -1445,6 +1423,94 @@ body:has(.bi-dialog:modal) {
   }
 }
 
+.bi-popover {
+  --bic-popover-arrow-size: var(--bi-scale-3x);
+  --bic-popover-background: var(--bi-basic-white);
+  --bic-popover-border-width: var(--bi-stroke-thin);
+  --bic-popover-border-style: solid;
+  --bic-popover-border-color: var(--bi-neutral-15);
+  --bic-popover-color: var(--bi-neutral-90);
+  --bic-popover-border-radius: var(--bi-radius-medium);
+  --bic-popover-max-width: 300px;
+  --bic-popover-padding: var(--bi-scale-1x);
+  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+    0px 2px 2px -1px #26333f0a;
+}
+
+.bi-popover[data-dark="true"] {
+  --bic-popover-background: var(--bi-neutral-95);
+  --bic-popover-border-color: var(--bi-neutral-70);
+  --bic-popover-color: var(--bi-neutral-5);
+  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+      0px 2px 2px -1px #26333f0a;
+}
+
+.bi-popover {
+  background: var(--bic-popover-background);
+  border-radius: var(--bic-popover-border-radius);
+  border-width: var(--bic-popover-border-width);
+  border-style: var(--bic-popover-border-style);
+  border-color: var(--bic-popover-border-color);
+  box-shadow: var(--bic-popover-box-shadow);
+  box-sizing: border-box;
+  color: var(--bic-popover-color);
+  max-width: var(--bic-popover-max-width);
+  padding: var(--bic-popover-padding);
+  z-index: 100000;
+  display: none;
+  position: fixed;
+  inset: 0 auto auto 0;
+  overflow: visible;
+}
+
+.bi-popover[aria-hidden="false"] {
+  display: block;
+}
+
+.bi-popover[data-arrow="true"]:before {
+  background: var(--bic-popover-background);
+  border: inherit;
+  box-sizing: border-box;
+  content: "";
+  height: var(--bic-popover-arrow-size);
+  left: var(--bic-popover-arrow-x);
+  top: var(--bic-popover-arrow-y);
+  width: var(--bic-popover-arrow-size);
+  border-top-color: #0000;
+  border-left-color: #0000;
+  position: absolute;
+  translate: -50% -50%;
+}
+
+.bi-popover[data-arrow="true"][data-placement="top"]:before {
+  rotate: 45deg;
+}
+
+.bi-popover[data-arrow="true"][data-placement="left"]:before {
+  rotate: -45deg;
+}
+
+.bi-popover[data-arrow="true"][data-placement="right"]:before {
+  rotate: 135deg;
+}
+
+.bi-popover[data-arrow="true"][data-placement="bottom"]:before {
+  rotate: -135deg;
+}
+
+[data-popover="inline"] {
+  all: unset;
+  cursor: pointer;
+  text-underline-offset: .27em;
+  font-size: inherit;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+[data-popover="inline"]:not([hidden]) {
+  display: inline;
+}
+
 .bi-dropdown {
   --bic-dropdown-padding: var(--bi-scale-1x);
   --bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
@@ -1455,6 +1521,7 @@ body:has(.bi-dialog:modal) {
   --bic-dropdown-border-color: var(--bi-neutral-15);
   --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
     0px 2px 2px -1px #26333f0a;
+  --bic-dropdown-min-width: var(--bi-scale-64x);
 }
 
 .bi-dropdown[data-dark="true"] {
@@ -1473,7 +1540,7 @@ body:has(.bi-dialog:modal) {
   border-color: var(--bic-dropdown-border-color);
   box-shadow: var(--bic-dropdown-box-shadow);
   box-sizing: border-box;
-  min-width: var(--bi-scale-64x);
+  min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
   padding: var(--bic-dropdown-padding);
   list-style: none;
 }
@@ -1498,108 +1565,339 @@ body:has(.bi-dialog:modal) {
   margin-left: auto;
 }
 
-.bi-button[aria-expanded="true"] {
-  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
+:where(.bi-input) {
+  margin: 0;
 }
 
-.bi-field {
-  --bic-field-border-color-invalid: var(--bi-alert-50);
-  --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
-  --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
-  --bic-field-content-spacing: var(--bi-scale-0-50x);
-  --bic-field-padding-inline: var(--bi-scale-3x);
-  --bic-field-affix-color: var(--bi-neutral-60);
-  --bic-field-background: var(--bi-basic-white);
-  --bic-field-background-hover: var(--bi-states-hover-dark);
-  --bic-field-background-press: var(--bi-states-press-dark);
-  --bic-field-background-readonly: var(--bi-neutral-10);
-  --bic-field-border-color: var(--bi-neutral-50);
-  --bic-field-border-color-hover: var(--bi-neutral-50);
-  --bic-field-border-color-readonly: var(--bi-neutral-50);
-  --bic-field-disabled-color: var(--bi-neutral-50);
-  --bic-field-description-color: var(--bi-neutral-60);
-  --bic-field-label-color: var(--bi-neutral-95);
-  --bic-field-label-required-color: var(--bi-primary-50);
-  --bic-field-focus-outline-color: var(--bi-primary-50);
-  --bic-field-focus-shadow-color: var(--bi-basic-white);
+.bi-input {
+  --bic-input-border-color-invalid: var(--bi-alert-50);
+  --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
+  --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
+  --bic-input-caret-color: var(--bi-primary-50);
+  --bic-input-font-size: 1rem;
+  --bic-input-padding: var(--bi-scale-3x);
+  --bic-input-size: var(--bi-scale-11x);
+  --bic-input-toggle-background: var(--bi-primary-50);
+  --bic-input-toggle-color: var(--bi-basic-white);
+  --bic-input-toggle-size: 1.125rem;
+  --bic-input-background: var(--bi-basic-white);
+  --bic-input-background-readonly: var(--bi-neutral-10);
+  --bic-input-border-color: var(--bi-neutral-50);
+  --bic-input-border-color-hover: var(--bi-neutral-50);
+  --bic-input-border-color-readonly: var(--bi-neutral-50);
+  --bic-input-color-readonly: var(--bi-neutral-95);
+  --bic-input-color: var(--bi-neutral-95);
+  --bic-input-disabled-color: var(--bi-neutral-50);
+  --bic-input-placeholder-color: var(--bi-neutral-60);
+  --bic-input-focus-outline-color: var(--bi-primary-50);
+  --bic-input-focus-shadow-color: var(--bi-basic-white);
+  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
 }
 
-.bi-field[data-dark="true"] {
-  --bic-field-affix-color: var(--bi-neutral-30);
-  --bic-field-background: var(--bi-neutral-95);
-  --bic-field-background-hover: var(--bi-states-hover-light);
-  --bic-field-background-press: var(--bi-states-press-light);
-  --bic-field-background-readonly: var(--bi-neutral-50);
-  --bic-field-border-color-hover: var(--bi-neutral-25);
-  --bic-field-disabled-color: var(--bi-neutral-40);
-  --bic-field-description-color: var(--bi-neutral-15);
-  --bic-field-label-color: var(--bi-basic-white);
-  --bic-field-label-required-color: var(--bi-secondary-50);
-  --bic-field-focus-outline-color: var(--bi-primary-30);
-  --bic-field-focus-shadow-color: var(--bi-neutral-95);
+.bi-input[data-dark="true"] {
+  --bic-input-background: var(--bi-neutral-95);
+  --bic-input-background-readonly: var(--bi-neutral-50);
+  --bic-input-border-color-hover: var(--bi-neutral-25);
+  --bic-input-color-readonly: var(--bi-basic-white);
+  --bic-input-color: var(--bi-basic-white);
+  --bic-input-disabled-color: var(--bi-neutral-40);
+  --bic-input-placeholder-color: var(--bi-neutral-30);
+  --bic-input-focus-outline-color: var(--bi-primary-30);
+  --bic-input-focus-shadow-color: var(--bi-neutral-95);
+  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
 }
 
-.bi-field > * {
-  margin-block: 0;
+.bi-input {
+  appearance: none;
+  background: var(--bic-input-background);
+  border-radius: var(--bi-radius-medium);
+  box-shadow: var(--bic-input-box-shadow);
+  box-sizing: border-box;
+  color: var(--bic-input-color);
+  font-family: inherit;
+  font-size: var(--bic-input-font-size);
+  height: var(--bic-input-size);
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--bic-input-padding);
+  vertical-align: middle;
+  caret-color: var(--bic-input-caret-color);
+  border: none;
+  line-height: 1;
+  position: relative;
 }
 
-.bi-field > * + * {
-  margin-top: var(--bic-field-content-spacing);
+.bi-input[data-size="large"] {
+  --bic-input-size: var(--bi-scale-14x);
+  --bic-input-font-size: 1.25rem;
 }
 
-.bi-field .bi-field--description {
-  color: var(--bic-field-description-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: .8125rem;
-  font-weight: 500;
-  line-height: 1.15;
+.bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
+  box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
 }
 
-.bi-field .bi-input:where(:not([hidden])) {
-  display: block;
+.bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
+  --bic-input-border-color: var(--bic-input-focus-outline-color);
 }
 
-.bi-field:has(.bi-input[aria-invalid="true"]) {
-  --bic-field-border-color: var(--bic-field-border-color-invalid);
+.bi-input:focus-visible {
+  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
+  outline-offset: 0;
+  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
+      0px 0px 10px 0px #0000000d);
 }
 
-.bi-field:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
-  cursor: not-allowed;
-  --bic-field-label-color: var(--bic-field-disabled-color);
-  --bic-field-description-color: var(--bic-field-disabled-color);
-  --bic-field-affix-color: var(--bic-field-disabled-color);
-  --bic-input-toggle-background: var(--bic-field-disabled-color);
+.bi-input:focus-visible * {
+  --_bi--focus: ;
 }
 
-.bi-field[data-fullwidth="true"] {
-  width: 100%;
+.bi-input::placeholder {
+  color: var(--bic-input-placeholder-color);
 }
 
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
-  border-radius: var(--bi-radius-medium);
-  gap: 0 var(--bi-scale-3x);
-  width: fit-content;
-  padding: var(--bi-scale-2x) var(--bi-scale-3x);
-  grid-template-columns: auto 1fr;
-  grid-template-areas: "input content";
-  align-items: center;
+.bi-input:not([size], [cols]) {
+  width: 100%;
 }
 
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
-  display: grid;
+.bi-input:disabled, .bi-input[aria-disabled="true"] {
+  cursor: not-allowed;
 }
 
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
-  width: 100%;
+.bi-input[aria-invalid="true"] {
+  --bic-input-border-color: var(--bic-input-border-color-invalid);
 }
 
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
-  border-radius: var(--bi-scale-24x);
-  padding: var(--bi-scale-1x) var(--bi-scale-2x);
+.bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
+  background: var(--bic-input-background-readonly);
+  --bic-input-border-color: var(--bic-input-border-color-readonly);
+  color: var(--bic-input-color-readonly);
 }
 
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
-  padding-inline-end: var(--bi-scale-4x);
+.bi-input:is(textarea) {
+  height: auto;
+  min-height: calc(var(--bic-input-size) * 2);
+  resize: vertical;
+}
+
+.bi-input:is(textarea):not([rows]) {
+  field-sizing: content;
+}
+
+.bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
+  cursor: pointer;
+}
+
+.bi-input:is(select) {
+  background-image: var(--bic-input-select-chevron);
+  background-position: calc(100% - .5em);
+  background-repeat: no-repeat;
+  background-size: 1.5em;
+}
+
+.bi-input[type="checkbox"], .bi-input[type="radio"] {
+  padding: var(--bi-scale-0-50x);
+  line-height: inherit;
+  height: var(--bic-input-toggle-size);
+  width: var(--bic-input-toggle-size);
+  box-shadow: none;
+  border-width: var(--bi-stroke-medium);
+  border-style: solid;
+  border-color: var(--bic-input-border-color);
+  background: none;
+  flex-shrink: 0;
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
+  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
+  outline-offset: var(--_bi--focus, 3px);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
+  --_bi--focus: ;
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
+  cursor: pointer;
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
+  border-radius: var(--bi-radius-full);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
+  content: "";
+  background-color: var(--bic-input-toggle-background);
+  border-radius: 100%;
+  width: 0;
+  height: 0;
+  transition: width .1s ease-in-out, height .1s ease-in-out;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
+  --bic-input-border-color: var(--bic-input-toggle-background);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
+  width: 12px;
+  height: 12px;
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
+  border-radius: var(--bi-radius-small);
+  place-content: center;
+  display: grid;
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
+  content: "";
+  width: .7em;
+  height: .7em;
+  box-shadow: inset 1em 1em var(--bic-input-toggle-color);
+  transform-origin: center;
+  clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
+  transition: transform .2s ease-in-out;
+  transform: scale(0);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
+  background: var(--bic-input-toggle-background);
+  --bic-input-border-color: var(--bic-input-toggle-background);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
+  transform: scale(1);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
+  clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
+  --_bic-input-circle-position-x: var(--bi-scale-0-50x);
+  background: var(--bi-neutral-50);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
+  --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
+  background: var(--bic-input-toggle-background);
+  --bic-input-border-color: var(--bic-input-toggle-background);
+}
+
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
+  background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
+  background-origin: content-box;
+  background-position: var(--_bic-input-circle-position-x);
+  background-repeat: no-repeat;
+  background-size: calc(var(--bic-input-toggle-size)) 100%;
+  border-radius: var(--bi-radius-full);
+  width: var(--bi-scale-11x);
+  height: var(--bi-scale-6x);
+  padding-inline: 0;
+  transition: background-position .2s;
+}
+
+.bi-field {
+  --bic-field-border-color-invalid: var(--bi-alert-50);
+  --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
+  --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
+  --bic-field-content-spacing: var(--bi-scale-0-50x);
+  --bic-field-padding-inline: var(--bi-scale-3x);
+  --bic-field-affix-color: var(--bi-neutral-60);
+  --bic-field-background: var(--bi-basic-white);
+  --bic-field-background-hover: var(--bi-states-hover-dark);
+  --bic-field-background-press: var(--bi-states-press-dark);
+  --bic-field-background-readonly: var(--bi-neutral-10);
+  --bic-field-border-color: var(--bi-neutral-50);
+  --bic-field-border-color-hover: var(--bi-neutral-50);
+  --bic-field-border-color-readonly: var(--bi-neutral-50);
+  --bic-field-disabled-color: var(--bi-neutral-50);
+  --bic-field-description-color: var(--bi-neutral-60);
+  --bic-field-label-color: var(--bi-neutral-95);
+  --bic-field-label-required-color: var(--bi-primary-50);
+  --bic-field-focus-outline-color: var(--bi-primary-50);
+  --bic-field-focus-shadow-color: var(--bi-basic-white);
+}
+
+.bi-field[data-dark="true"] {
+  --bic-field-affix-color: var(--bi-neutral-30);
+  --bic-field-background: var(--bi-neutral-95);
+  --bic-field-background-hover: var(--bi-states-hover-light);
+  --bic-field-background-press: var(--bi-states-press-light);
+  --bic-field-background-readonly: var(--bi-neutral-50);
+  --bic-field-border-color-hover: var(--bi-neutral-25);
+  --bic-field-disabled-color: var(--bi-neutral-40);
+  --bic-field-description-color: var(--bi-neutral-15);
+  --bic-field-label-color: var(--bi-basic-white);
+  --bic-field-label-required-color: var(--bi-secondary-50);
+  --bic-field-focus-outline-color: var(--bi-primary-30);
+  --bic-field-focus-shadow-color: var(--bi-neutral-95);
+}
+
+.bi-field > * {
+  margin-block: 0;
+}
+
+.bi-field > * + * {
+  margin-top: var(--bic-field-content-spacing);
+}
+
+.bi-field .bi-field--description {
+  color: var(--bic-field-description-color);
+  font: var(--bi-font-body-small);
+  line-height: 1.15;
+}
+
+.bi-field .bi-input:where(:not([hidden])) {
+  display: block;
+}
+
+.bi-field:has(.bi-input[aria-invalid="true"]) {
+  --bic-field-border-color: var(--bic-field-border-color-invalid);
+}
+
+.bi-field:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
+  cursor: not-allowed;
+  --bic-field-label-color: var(--bic-field-disabled-color);
+  --bic-field-description-color: var(--bic-field-disabled-color);
+  --bic-field-affix-color: var(--bic-field-disabled-color);
+  --bic-input-toggle-background: var(--bic-field-disabled-color);
+}
+
+.bi-field[data-fullwidth="true"] {
+  width: 100%;
+}
+
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
+  border-radius: var(--bi-radius-medium);
+  gap: 0 var(--bi-scale-3x);
+  width: fit-content;
+  padding: var(--bi-scale-2x) var(--bi-scale-3x);
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "input content";
+  align-items: center;
+}
+
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
+  display: grid;
+}
+
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
+  width: 100%;
+}
+
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
+  border-radius: var(--bi-scale-24x);
+  padding: var(--bi-scale-1x) var(--bi-scale-2x);
+}
+
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
+  padding-inline-end: var(--bi-scale-4x);
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
@@ -1761,10 +2059,7 @@ body:has(.bi-dialog:modal) {
 .bi-fieldset > legend + p {
   margin-block: var(--bi-scale-1x) 0;
   color: var(--bic-fieldset-description-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.15;
+  font: var(--bi-font-body-large);
 }
 
 .bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
@@ -1845,12 +2140,9 @@ body:has(.bi-dialog:modal) {
 
 .bi-filter-group > button > h3 {
   text-align: left;
+  font: var(--bi-font-title-bold-xs);
   flex: 1;
   margin: 0;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.5;
 }
 
 .bi-filter-group > div {
@@ -1900,6 +2192,7 @@ body:has(.bi-dialog:modal) {
   width: 100%;
   color: var(--bic-footer-color);
   background-color: var(--bic-footer-background);
+  font-family: var(--bi-font-family-plain);
   padding: var(--bi-scale-16x) 0;
   justify-content: center;
   align-items: center;
@@ -1908,7 +2201,6 @@ body:has(.bi-dialog:modal) {
   align-items: center;
   width: 100%;
   margin-top: -1px;
-  font-family: museo-sans, Arial, sans-serif;
   display: flex;
 }
 
@@ -1926,15 +2218,12 @@ body:has(.bi-dialog:modal) {
 }
 
 .bi-footer .bi-footer--links-container .bi-footer--links {
+  min-height: 44px;
+  font: var(--bi-font-label-large);
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  min-height: 44px;
   margin: auto;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.5;
   display: flex;
 }
 
@@ -2037,11 +2326,9 @@ body:has(.bi-dialog:modal) {
 
 .bi-footer .bi-footer--copyright {
   text-align: center;
+  font: var(--bi-font-body-large);
+  font-weight: var(--bi-font-weight-regular);
   margin: 0;
-  font-family: museo-slab, serif;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5;
 }
 
 svg {
@@ -2090,246 +2377,9 @@ svg[data-color="white"] {
   color: var(--bi-basic-white);
 }
 
-:where(.bi-input) {
-  margin: 0;
-}
-
-.bi-input {
-  --bic-input-border-color-invalid: var(--bi-alert-50);
-  --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
-  --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
-  --bic-input-caret-color: var(--bi-primary-50);
-  --bic-input-font-size: 1rem;
-  --bic-input-padding: var(--bi-scale-3x);
-  --bic-input-size: var(--bi-scale-11x);
-  --bic-input-toggle-background: var(--bi-primary-50);
-  --bic-input-toggle-color: var(--bi-basic-white);
-  --bic-input-toggle-size: 1.125rem;
-  --bic-input-background: var(--bi-basic-white);
-  --bic-input-background-readonly: var(--bi-neutral-10);
-  --bic-input-border-color: var(--bi-neutral-50);
-  --bic-input-border-color-hover: var(--bi-neutral-50);
-  --bic-input-border-color-readonly: var(--bi-neutral-50);
-  --bic-input-color-readonly: var(--bi-neutral-95);
-  --bic-input-color: var(--bi-neutral-95);
-  --bic-input-disabled-color: var(--bi-neutral-50);
-  --bic-input-placeholder-color: var(--bi-neutral-60);
-  --bic-input-focus-outline-color: var(--bi-primary-50);
-  --bic-input-focus-shadow-color: var(--bi-basic-white);
-  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
-}
-
-.bi-input[data-dark="true"] {
-  --bic-input-background: var(--bi-neutral-95);
-  --bic-input-background-readonly: var(--bi-neutral-50);
-  --bic-input-border-color-hover: var(--bi-neutral-25);
-  --bic-input-color-readonly: var(--bi-basic-white);
-  --bic-input-color: var(--bi-basic-white);
-  --bic-input-disabled-color: var(--bi-neutral-40);
-  --bic-input-placeholder-color: var(--bi-neutral-30);
-  --bic-input-focus-outline-color: var(--bi-primary-30);
-  --bic-input-focus-shadow-color: var(--bi-neutral-95);
-  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
-}
-
-.bi-input {
-  appearance: none;
-  background: var(--bic-input-background);
-  border-radius: var(--bi-radius-medium);
-  box-shadow: var(--bic-input-box-shadow);
-  box-sizing: border-box;
-  color: var(--bic-input-color);
-  font-family: inherit;
-  font-size: var(--bic-input-font-size);
-  height: var(--bic-input-size);
-  min-width: 0;
-  max-width: 100%;
-  padding: var(--bic-input-padding);
-  vertical-align: middle;
-  caret-color: var(--bic-input-caret-color);
-  border: none;
-  line-height: 1;
-  position: relative;
-}
-
-.bi-input[data-size="large"] {
-  --bic-input-size: var(--bi-scale-14x);
-  --bic-input-font-size: 1.25rem;
-}
-
-.bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
-  box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
-}
-
-.bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
-  --bic-input-border-color: var(--bic-input-focus-outline-color);
-}
-
-.bi-input:focus-visible {
-  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
-  outline-offset: 0;
-  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
-      0px 0px 10px 0px #0000000d);
-}
-
-.bi-input:focus-visible * {
-  --_bi--focus: ;
-}
-
-.bi-input::placeholder {
-  color: var(--bic-input-placeholder-color);
-}
-
-.bi-input:not([size], [cols]) {
-  width: 100%;
-}
-
-.bi-input:disabled, .bi-input[aria-disabled="true"] {
-  cursor: not-allowed;
-}
-
-.bi-input[aria-invalid="true"] {
-  --bic-input-border-color: var(--bic-input-border-color-invalid);
-}
-
-.bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
-  background: var(--bic-input-background-readonly);
-  --bic-input-border-color: var(--bic-input-border-color-readonly);
-  color: var(--bic-input-color-readonly);
-}
-
-.bi-input:is(textarea) {
-  height: auto;
-  min-height: calc(var(--bic-input-size) * 2);
-  resize: vertical;
-}
-
-.bi-input:is(textarea):not([rows]) {
-  field-sizing: content;
-}
-
-.bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-.bi-input:is(select) {
-  background-image: var(--bic-input-select-chevron);
-  background-position: calc(100% - .5em);
-  background-repeat: no-repeat;
-  background-size: 1.5em;
-}
-
-.bi-input[type="checkbox"], .bi-input[type="radio"] {
-  padding: var(--bi-scale-0-50x);
-  line-height: inherit;
-  height: var(--bic-input-toggle-size);
-  width: var(--bic-input-toggle-size);
-  box-shadow: none;
-  border-width: var(--bi-stroke-medium);
-  border-style: solid;
-  border-color: var(--bic-input-border-color);
-  background: none;
-  flex-shrink: 0;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
-  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
-  outline-offset: var(--_bi--focus, 3px);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
-  --_bi--focus: ;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
-  border-radius: var(--bi-radius-full);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
-  content: "";
-  background-color: var(--bic-input-toggle-background);
-  border-radius: 100%;
-  width: 0;
-  height: 0;
-  transition: width .1s ease-in-out, height .1s ease-in-out;
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
-  width: 12px;
-  height: 12px;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
-  border-radius: var(--bi-radius-small);
-  place-content: center;
-  display: grid;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
-  content: "";
-  width: .7em;
-  height: .7em;
-  box-shadow: inset 1em 1em var(--bic-input-toggle-color);
-  transform-origin: center;
-  clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
-  transition: transform .2s ease-in-out;
-  transform: scale(0);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
-  transform: scale(1);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
-  clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
-  --_bic-input-circle-position-x: var(--bi-scale-0-50x);
-  background: var(--bi-neutral-50);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
-  --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
-  background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
-  background-origin: content-box;
-  background-position: var(--_bic-input-circle-position-x);
-  background-repeat: no-repeat;
-  background-size: calc(var(--bic-input-toggle-size)) 100%;
-  border-radius: var(--bi-radius-full);
-  width: var(--bi-scale-11x);
-  height: var(--bi-scale-6x);
-  padding-inline: 0;
-  transition: background-position .2s;
-}
-
-.bi-label {
-  --bic-label-color: var(--bic-field-label-color, var(--bi-neutral-95));
-  --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-primary-50));
+.bi-label {
+  --bic-label-color: var(--bic-field-label-color, var(--bi-neutral-95));
+  --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-primary-50));
 }
 
 .bi-label[data-dark="true"] {
@@ -2339,14 +2389,11 @@ svg[data-color="white"] {
 
 .bi-label {
   color: var(--bic-label-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: .875rem;
-  font-weight: 700;
-  line-height: 1.4;
+  font: var(--bi-font-label-medium);
 }
 
 .bi-label[data-weight="medium"] {
-  font-weight: 500;
+  font-weight: var(--bi-font-weight-regular);
 }
 
 .bi-label[data-weight="regular"] {
@@ -2624,94 +2671,6 @@ svg[data-color="white"] {
   background-color: var(--bic-pagination-selected-background);
 }
 
-.bi-popover {
-  --bic-popover-arrow-size: var(--bi-scale-3x);
-  --bic-popover-background: var(--bi-basic-white);
-  --bic-popover-border-width: var(--bi-stroke-thin);
-  --bic-popover-border-style: solid;
-  --bic-popover-border-color: var(--bi-neutral-15);
-  --bic-popover-color: var(--bi-neutral-90);
-  --bic-popover-border-radius: var(--bi-radius-medium);
-  --bic-popover-max-width: 300px;
-  --bic-popover-padding: var(--bi-scale-1x);
-  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
-    0px 2px 2px -1px #26333f0a;
-}
-
-.bi-popover[data-dark="true"] {
-  --bic-popover-background: var(--bi-neutral-95);
-  --bic-popover-border-color: var(--bi-neutral-70);
-  --bic-popover-color: var(--bi-neutral-5);
-  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
-      0px 2px 2px -1px #26333f0a;
-}
-
-.bi-popover {
-  background: var(--bic-popover-background);
-  border-radius: var(--bic-popover-border-radius);
-  border-width: var(--bic-popover-border-width);
-  border-style: var(--bic-popover-border-style);
-  border-color: var(--bic-popover-border-color);
-  box-shadow: var(--bic-popover-box-shadow);
-  box-sizing: border-box;
-  color: var(--bic-popover-color);
-  max-width: var(--bic-popover-max-width);
-  padding: var(--bic-popover-padding);
-  z-index: 100000;
-  display: none;
-  position: fixed;
-  inset: 0 auto auto 0;
-  overflow: visible;
-}
-
-.bi-popover[aria-hidden="false"] {
-  display: block;
-}
-
-.bi-popover[data-arrow="true"]:before {
-  background: var(--bic-popover-background);
-  border: inherit;
-  box-sizing: border-box;
-  content: "";
-  height: var(--bic-popover-arrow-size);
-  left: var(--bic-popover-arrow-x);
-  top: var(--bic-popover-arrow-y);
-  width: var(--bic-popover-arrow-size);
-  border-top-color: #0000;
-  border-left-color: #0000;
-  position: absolute;
-  translate: -50% -50%;
-}
-
-.bi-popover[data-arrow="true"][data-placement="top"]:before {
-  rotate: 45deg;
-}
-
-.bi-popover[data-arrow="true"][data-placement="left"]:before {
-  rotate: -45deg;
-}
-
-.bi-popover[data-arrow="true"][data-placement="right"]:before {
-  rotate: 135deg;
-}
-
-.bi-popover[data-arrow="true"][data-placement="bottom"]:before {
-  rotate: -135deg;
-}
-
-[data-popover="inline"] {
-  all: unset;
-  cursor: pointer;
-  text-underline-offset: .27em;
-  font-size: inherit;
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-
-[data-popover="inline"]:not([hidden]) {
-  display: inline;
-}
-
 .bi-search:has(:focus-visible) .bi-field--affix:first-child {
   color: var(--bi-primary-50);
 }
@@ -2727,6 +2686,7 @@ svg[data-color="white"] {
 .bi-skip-link {
   --bic-skip-link-color: var(--bi-basic-white);
   --bic-skip-link-background: var(--bi-primary-50);
+  font: var(--bi-font-body-large);
   background: var(--bic-skip-link-background);
   color: var(--bic-skip-link-color);
   outline-offset: 0px;
@@ -2735,8 +2695,6 @@ svg[data-color="white"] {
   align-content: center;
   height: 44px;
   padding: 0 7px;
-  font-size: 1rem;
-  font-weight: 500;
   transition: transform .3s ease-in-out;
   position: absolute;
   left: 50%;
@@ -2766,6 +2724,7 @@ svg[data-color="white"] {
   width: 1em;
   height: 1em;
   animation: 1s linear infinite bi-spinner;
+  display: inline-block;
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
   mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
 }
@@ -2923,11 +2882,8 @@ svg[data-color="white"] {
   padding: var(--bic-validation-message-padding);
   background: var(--bic-validation-message-background);
   border-radius: 0px 0px var(--bi-radius-medium) var(--bi-radius-medium);
+  font: var(--bi-font-label-medium);
   margin: 0;
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: .875rem;
-  font-weight: 700;
-  line-height: 1.4;
   position: relative;
 }