@bi-digital/css 0.8.0 → 0.10.0

package/dist/components/validation-message.css

@@ -7,11 +7,8 @@
   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;
 }
 

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);
 }
 
@@ -343,13 +337,14 @@
   --bic-button-size: var(--bi-scale-11x);
   --bic-button-font-size: 1rem;
   --bic-button-line-height: 1.5;
-  --bic-button-color: 1.5rem;
+  --bic-button-color: var(--bi-basic-white);
   --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"] {
+  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;
@@ -1248,9 +1228,15 @@ details.bi-details > *:not(summary) + * {
 }
 
 .bi-dialog {
+  --bic-dialog-anchor-inline-min-width: 23.5rem;
+  --bic-dialog-anchor-inline-max-width: 40rem;
+  --bic-dialog-anchor-block-min-height: 20rem;
+  --bic-dialog-anchor-border-radius: var(--bi-radius-medium);
+  --bic-dialog-anchor-closed-translate: 0, var(--bi-scale-12x);
   --bic-dialog-animation-duration: .2s;
   --bic-dialog-backdrop-background: #00000080;
   --bic-dialog-background: var(--bi-basic-white);
+  --bic-dialog-border-radius: var(--bi-radius-large);
   --bic-dialog-border-color: var(--bi-neutral-15);
   --bic-dialog-icon-spacing: .625rem;
   --bic-dialog-color: var(--bi-neutral-90);
@@ -1268,7 +1254,7 @@ details.bi-details > *:not(summary) + * {
 .bi-dialog {
   animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
   background: var(--bic-dialog-background);
-  border-radius: var(--bi-radius-large);
+  border-radius: var(--bic-dialog-border-radius);
   box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
   color: var(--bic-dialog-color);
   max-height: var(--bic-dialog-max-height);
@@ -1294,13 +1280,68 @@ details.bi-details > *:not(summary) + * {
   display: flex;
 }
 
+.bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
+  --bic-dialog-max-height: unset;
+  border-radius: var(--bic-dialog-anchor-border-radius);
+  transition: display var(--bic-dialog-animation-duration) allow-discrete,
+      overlay var(--bic-dialog-animation-duration) allow-discrete;
+  transform: translate(var(--bic-dialog-anchor-closed-translate));
+  animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
+}
+
+.bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"])[open] {
+  animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
+  transform: translate(0);
+}
+
+.bi-dialog:where([data-anchor="bottom"], [data-anchor="top"]) {
+  min-height: var(--bic-dialog-anchor-block-min-height);
+  max-height: calc(100dvh - var(--bi-layout-navbar-height));
+  max-width: 100dvw;
+}
+
+.bi-dialog:where([data-anchor="left"], [data-anchor="right"]) {
+  min-width: var(--bic-dialog-anchor-inline-min-width);
+  max-width: var(--bic-dialog-anchor-inline-max-width);
+  width: fit-content;
+  height: 100dvh;
+}
+
+.bi-dialog[data-anchor="bottom"] {
+  --bic-dialog-anchor-closed-translate: 0, 100%;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  top: auto;
+}
+
+.bi-dialog[data-anchor="top"] {
+  --bic-dialog-anchor-closed-translate: 0, -100%;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  bottom: auto;
+}
+
+.bi-dialog[data-anchor="left"] {
+  --bic-dialog-anchor-closed-translate: -100%, 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  right: auto;
+}
+
+.bi-dialog[data-anchor="right"] {
+  --bic-dialog-anchor-closed-translate: 100%, 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  left: auto;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .bi-dialog[open], .bi-dialog::backdrop {
     animation: none;
   }
 }
 
-.bi-dialog > form[method="dialog"]:first-child > button:only-child {
+.bi-dialog > button[command="close"]:first-child, .bi-dialog > form[method="dialog"]:first-child > button:only-child {
   top: var(--bic-dialog-icon-spacing);
   right: var(--bic-dialog-icon-spacing);
   position: absolute;
@@ -1309,15 +1350,13 @@ 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;
 }
 
-.bi-dialog:has( > form[method="dialog"]) .bi-dialog--header {
+.bi-dialog:has( > form[method="dialog"],  > button[command="close"]:first-child) .bi-dialog--header {
   padding-right: var(--bi-scale-14x);
 }
 
@@ -1346,7 +1385,23 @@ body:has(.bi-dialog:modal) {
 
 @keyframes bi-dialog-slide-in-animation {
   from {
-    translate: 0 var(--bi-scale-12x);
+    transform: translate(var(--bic-dialog-anchor-closed-translate));
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+@keyframes bi-dialog-slide-out-animation {
+  from {
+    opacity: 1;
+    transform: translate(0);
+  }
+
+  to {
+    transform: translate(var(--bic-dialog-anchor-closed-translate));
+    opacity: 0;
   }
 }
 
@@ -1587,10 +1642,6 @@ 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;
 }
@@ -1875,9 +1926,7 @@ body:has(.bi-dialog:modal) {
 
 .bi-field .bi-field--description {
   color: var(--bic-field-description-color);
-  font-family: museo-sans, Arial, sans-serif;
-  font-size: .8125rem;
-  font-weight: 500;
+  font: var(--bi-font-body-small);
   line-height: 1.15;
 }
 
@@ -2087,10 +2136,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 {
@@ -2171,12 +2217,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 {
@@ -2226,6 +2269,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;
@@ -2234,7 +2278,6 @@ body:has(.bi-dialog:modal) {
   align-items: center;
   width: 100%;
   margin-top: -1px;
-  font-family: museo-sans, Arial, sans-serif;
   display: flex;
 }
 
@@ -2252,15 +2295,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;
 }
 
@@ -2363,11 +2403,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 {
@@ -2428,14 +2466,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"] {
@@ -2728,6 +2763,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;
@@ -2736,8 +2772,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%;
@@ -2824,7 +2858,11 @@ svg[data-color="white"] {
 }
 
 .bi-tabs {
+  --bic-tabs-tab-color: var(--bi-neutral-90);
   --bic-tabs-tab-color-selected: var(--bi-primary-50);
+  --bic-tabs-tab-background-hover: var(--bi-states-hover-dark);
+  --bic-tabs-tab-background-press: var(--bi-states-press-dark);
+  --bic-tabs-tab-font: var(--bi-font-title-bold-xs);
   --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
   --bic-tabs-focus-shadow-color: var(--bi-basic-white);
   --bic-tabs-focus-outline-color: var(--bi-primary-50);
@@ -2832,6 +2870,8 @@ svg[data-color="white"] {
 
 .bi-tabs[data-dark="true"] {
   --bic-tabs-tab-color-selected: var(--bi-primary-30);
+  --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
+  --bic-tabs-tab-background-press: var(--bi-states-press-light);
   --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
   --bic-tabs-focus-outline-color: var(--bi-primary-30);
 }
@@ -2842,43 +2882,74 @@ svg[data-color="white"] {
   overflow: hidden;
 }
 
-.bi-tabs .bi-tabs--list {
+.bi-tabs :is([role="tablist"], ds-tablist) {
   scrollbar-width: none;
   flex-direction: row;
   flex-shrink: 0;
-  display: flex;
   position: relative;
   overflow-x: auto;
 }
 
-.bi-tabs .bi-tabs--list[data-orientation="vertical"] {
-  overflow-y: auto;
-  overflow-x: unset;
-  flex-direction: column;
-  width: fit-content;
+.bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
+  display: flex;
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab {
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
+  font: var(--bic-tabs-tab-font);
+  border-radius: var(--bi-radius-medium);
+  box-sizing: border-box;
+  color: var(--bic-tabs-tab-color);
+  cursor: pointer;
+  align-items: center;
+  gap: var(--bi-scale-1x);
+  padding: .625rem var(--bi-scale-6x);
+  text-align: center;
   white-space: nowrap;
+  background: none;
+  border: 0;
+  flex-direction: row;
+  justify-content: center;
+  margin: 0;
+  line-height: 1.5;
   transition: color .2s ease-in-out;
+  position: relative;
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab:not(:focus-visible) {
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
+  display: flex;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
+    background: var(--bic-tabs-tab-background-hover);
+  }
+}
+
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
+  background: var(--bic-tabs-tab-background-press);
+}
+
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
   box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
   outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
   outline-offset: var(--_bi--focus, -3px);
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible:after {
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
   bottom: 3px;
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab:after {
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
+  font-size: var(--bi-icon-medium);
+  flex-shrink: 0;
+}
+
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
   background: var(--bic-tabs-tab-color-selected);
   content: "";
   border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2893,24 +2964,24 @@ svg[data-color="white"] {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .bi-tabs .bi-tabs--list .bi-tabs--tab {
+  .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
     transition: none;
   }
 
-  .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
+  .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
     transition: none;
   }
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"] {
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
   color: var(--bic-tabs-tab-color-selected);
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"]:after {
+.bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
   width: calc(100% - var(--bi-scale-6x));
 }
 
-.bi-tabs .bi-tabs--panel {
+.bi-tabs :is([role="tabpanel"], ds-tabpanel) {
   padding: var(--bic-tabs-panel-padding);
   outline: none;
   flex-grow: 1;
@@ -2925,11 +2996,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;
 }