@bi-digital/css 0.8.0 → 0.10.0

package/dist/baseline.css

@@ -1,5 +1,5 @@
 body, :host {
-  font-family: museo-sans, Arial, sans-serif, system-ui;
+  font-family: var(--bi-font-family-plain), system-ui;
   line-height: 1.5;
 }
 

package/dist/components/avatar.css

@@ -17,6 +17,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;
@@ -24,9 +27,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;

package/dist/components/badge.css

@@ -5,16 +5,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);
@@ -22,7 +19,6 @@
   word-break: break-word;
   justify-content: center;
   align-items: center;
-  font-weight: 500;
   display: inline-flex;
 }
 
@@ -38,16 +34,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);
 }
 

package/dist/components/button.css

@@ -5,13 +5,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;
@@ -22,6 +23,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);
@@ -33,23 +35,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 {

package/dist/components/card.css

@@ -161,15 +161,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;
 }
@@ -246,31 +244,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 {
@@ -284,22 +280,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);
   }
 }
 
@@ -344,14 +338,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;
 }
 

package/dist/components/chip.css

@@ -7,17 +7,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;
@@ -26,14 +23,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"] {

package/dist/components/details.css

@@ -24,6 +24,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;
@@ -31,10 +32,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) {
@@ -49,8 +46,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;

package/dist/components/dialog.css

@@ -1,7 +1,13 @@
 .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);
@@ -19,7 +25,7 @@
 .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);
@@ -45,13 +51,68 @@
   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;
@@ -60,15 +121,13 @@
 .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);
 }
 
@@ -97,7 +156,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;
   }
 }
 

package/dist/components/dropdown.css

@@ -51,7 +51,3 @@
 .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
   margin-left: auto;
 }
-
-.bi-button[aria-expanded="true"] {
-  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
-}

package/dist/components/field.css

@@ -45,9 +45,7 @@
 
 .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;
 }
 

package/dist/components/fieldset.css

@@ -28,10 +28,7 @@
 .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 {

package/dist/components/filter-group.css

@@ -72,12 +72,9 @@
 
 .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 {

package/dist/components/footer.css

@@ -12,6 +12,7 @@
   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;
@@ -20,7 +21,6 @@
   align-items: center;
   width: 100%;
   margin-top: -1px;
-  font-family: museo-sans, Arial, sans-serif;
   display: flex;
 }
 
@@ -38,15 +38,12 @@
 }
 
 .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;
 }
 
@@ -149,9 +146,7 @@
 
 .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;
 }

package/dist/components/label.css

@@ -10,14 +10,11 @@
 
 .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"] {

package/dist/components/skip-link.css

@@ -1,6 +1,7 @@
 .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;
@@ -9,8 +10,6 @@
   align-content: center;
   height: 44px;
   padding: 0 7px;
-  font-size: 1rem;
-  font-weight: 500;
   transition: transform .3s ease-in-out;
   position: absolute;
   left: 50%;

package/dist/components/tabs.css

@@ -1,5 +1,9 @@
 .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);
@@ -7,6 +11,8 @@
 
 .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);
 }
@@ -17,43 +23,74 @@
   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 :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
+  display: flex;
 }
 
-.bi-tabs .bi-tabs--list .bi-tabs--tab:not(:focus-visible) {
+@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;
@@ -68,24 +105,24 @@
 }
 
 @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;