@bi-digital/css 0.6.8 → 0.7.0

package/dist/baseline.css

@@ -3,10 +3,6 @@ body, :host {
   line-height: 1.5;
 }
 
-html:has(bi-navbar) {
-  scroll-padding-top: var(--bi-layout-navbar-height);
-}
-
-html:has(bi-in-page-links) {
+:is(html:has(bi-navbar), html:has(bi-in-page-links)) {
   scroll-padding-top: var(--bi-layout-navbar-height);
 }

package/dist/components/alert.css

@@ -22,7 +22,6 @@
   border-radius: var(--bi-radius-medium);
   gap: var(--bic-alert-gap);
   grid-template-columns: 1fr;
-  width: -webkit-fit-content;
   width: fit-content;
   display: grid;
   position: relative;

package/dist/components/badge.css

@@ -15,9 +15,7 @@
   font-family: museo-sans, Arial, sans-serif;
   font-size: var(--bic-badge-font-size);
   line-height: var(--bic-badge-line-height);
-  width: -webkit-max-content;
   width: max-content;
-  height: -webkit-fit-content;
   height: fit-content;
   min-height: var(--bic-badge-height);
   box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;

package/dist/components/button.css

@@ -1,7 +1,7 @@
 .bi-button {
   --bic-button-box-shadow: none;
   --bic-button-icon-size: var(--bi-icon-medium);
-  --bic-button-padding: .625rem calc(var(--bi-scale-6x)  + var(--bi-scale-0-50x));
+  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
   --bic-button-size: var(--bi-scale-11x);
   --bic-button-font-size: 1rem;
   --bic-button-line-height: 1.5;
@@ -23,11 +23,9 @@
   color: var(--bic-button-color);
   background: var(--bic-button-background);
   box-shadow: var(--bic-button-box-shadow);
-  height: -webkit-fit-content;
   height: fit-content;
   min-height: var(--bic-button-size);
   min-width: var(--bic-button-size);
-  width: -webkit-fit-content;
   width: fit-content;
   padding: var(--bic-button-padding);
   -webkit-text-decoration: unset;
@@ -67,13 +65,13 @@
 .bi-button[data-size="small"] {
   --bic-button-font-size: .875rem;
   --bic-button-line-height: 1.25rem;
-  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x)  + var(--bi-scale-0-50x));
+  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
   --bic-button-icon-size: var(--bi-icon-small);
   --bic-button-size: var(--bi-scale-8x);
 }
 
 .bi-button[data-size="large"] {
-  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x)  + var(--bi-scale-0-50x));
+  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
   --bic-button-icon-size: var(--bi-icon-large);
   --bic-button-size: var(--bi-scale-14x);
 }
@@ -85,20 +83,15 @@
   padding: 0;
 }
 
-.bi-button:not([data-variant]) {
+.bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
   --bic-button-color: var(--bi-basic-white);
   --bic-button-background: var(--bi-primary-50);
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
-  --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
-}
-
-.bi-button[data-variant="filled"] {
-  --bic-button-color: var(--bi-basic-white);
-  --bic-button-background: var(--bi-primary-50);
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
-  --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
+      var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
+      var(--bic-button-background);
+  --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset,
+      0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
 }
 
 .bi-button[data-variant="outlined"] {
@@ -130,15 +123,19 @@
 .bi-button[data-variant="flat"] {
   --bic-button-color: var(--bi-primary-90);
   --bic-button-background: var(--bi-primary-5);
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
+      var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
+      var(--bic-button-background);
 }
 
 .bi-button[data-variant="flat"][data-dark="true"] {
   --bic-button-color: var(--bi-basic-white);
   --bic-button-background: #ffffff1a;
-  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
-  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
+  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
+        var(--bic-button-background);
+  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
+        var(--bic-button-background);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -151,14 +148,6 @@
   cursor: progress;
 }
 
-.bi-button:-webkit-any(:disabled, [aria-disabled="true"]) {
-  cursor: not-allowed;
-}
-
-.bi-button:-webkit-any(:disabled, [aria-disabled="true"])[aria-busy="true"] {
-  cursor: progress;
-}
-
 .bi-button:is(:disabled, [aria-disabled="true"]) {
   cursor: not-allowed;
 }
@@ -171,12 +160,7 @@
   background: var(--bic-button-background-press);
 }
 
-.bi-button .bi-button--start-icon {
-  display: inherit;
-  font-size: var(--bic-button-icon-size);
-}
-
-.bi-button .bi-button--end-icon {
+.bi-button .bi-button--start-icon, .bi-button .bi-button--end-icon {
   display: inherit;
   font-size: var(--bic-button-icon-size);
 }

package/dist/components/card.css

@@ -73,13 +73,13 @@
   --bic-card-media-width: 15.75rem;
 }
 
-@media not (min-width: 1024px) {
+@media (width < 1024px) {
   .bi-card[data-orientation="horizontal"] {
     --bic-card-media-width: 14.5rem;
   }
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card[data-orientation="horizontal"] {
     --bic-card-media-width: 8.4375rem;
   }
@@ -174,134 +174,46 @@
   overflow: hidden;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--content {
     --bic-card-content-padding: var(--bi-scale-3x);
     gap: var(--bi-scale-3x);
   }
 }
 
-.bi-card:-webkit-any(a, button) {
+:is(.bi-card, .bi-card .bi-card--content):is(a, button) {
   cursor: pointer;
   text-decoration: none;
   transition: box-shadow .25s ease-in-out;
   position: relative;
 }
 
-.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
-  box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
+  box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
+            0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
   outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
   outline-offset: var(--_bi--focus, 2px);
 }
 
-.bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
   --_bi--focus: ;
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .bi-card:-webkit-any(a, button):not(.disabled):hover {
-    box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
+  :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
+    box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
+              0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
+              0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
   }
 }
 
-.bi-card:-webkit-any(a, button):not(.disabled):active {
-  box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
+            0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
+            0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
 }
 
-.bi-card:-webkit-any(a, button):disabled {
-  cursor: not-allowed;
-}
-
-.bi-card:is(a, button) {
-  cursor: pointer;
-  text-decoration: none;
-  transition: box-shadow .25s ease-in-out;
-  position: relative;
-}
-
-.bi-card:is(a, button):not(.disabled):focus-visible {
-  box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
-  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-card:is(a, button):not(.disabled):focus-visible * {
-  --_bi--focus: ;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-card:is(a, button):not(.disabled):hover {
-    box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
-  }
-}
-
-.bi-card:is(a, button):not(.disabled):active {
-  box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
-}
-
-.bi-card:is(a, button):disabled {
-  cursor: not-allowed;
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button) {
-  cursor: pointer;
-  text-decoration: none;
-  transition: box-shadow .25s ease-in-out;
-  position: relative;
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
-  box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
-  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible * {
-  --_bi--focus: ;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
-    box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
-  }
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
-  box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
-}
-
-.bi-card .bi-card--content:-webkit-any(a, button):disabled {
-  cursor: not-allowed;
-}
-
-.bi-card .bi-card--content:is(a, button) {
-  cursor: pointer;
-  text-decoration: none;
-  transition: box-shadow .25s ease-in-out;
-  position: relative;
-}
-
-.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
-  box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
-  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible * {
-  --_bi--focus: ;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
-    box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
-  }
-}
-
-.bi-card .bi-card--content:is(a, button):not(.disabled):active {
-  box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
-}
-
-.bi-card .bi-card--content:is(a, button):disabled {
+:is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
   cursor: not-allowed;
 }
 
@@ -314,7 +226,7 @@
   display: flex;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--actions {
     width: var(--bi-scale-11x);
   }
@@ -327,7 +239,7 @@
   flex: 1;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--actions .bi-card--action {
     --bic-button-size: var(--bi-scale-11x);
   }
@@ -350,7 +262,7 @@
   font-size: .875rem;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-label {
     font-size: .8125rem;
   }
@@ -385,7 +297,7 @@
   overflow: hidden;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--header .bi-card--header-title {
     font-size: 1rem;
   }
@@ -398,20 +310,6 @@
   position: relative;
 }
 
-.bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
-  border-radius: inherit;
-  object-fit: cover;
-  aspect-ratio: 4 / 3;
-  width: 100%;
-  display: block;
-}
-
-@media not (min-width: 600px) {
-  .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
-    aspect-ratio: 3 / 2;
-  }
-}
-
 .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
   border-radius: inherit;
   object-fit: cover;
@@ -420,7 +318,7 @@
   display: block;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
     aspect-ratio: 3 / 2;
   }
@@ -431,7 +329,6 @@
   left: var(--bi-scale-4x);
   right: var(--bi-scale-4x);
   flex-wrap: wrap;
-  width: -webkit-fit-content;
   width: fit-content;
   display: flex;
   position: absolute;
@@ -443,7 +340,8 @@
   padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
   border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
   background: var(--bic-card-background-color);
-  box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
+  box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
+      0px 4px 6px 0px #26333f0d;
   color: var(--bic-card-header-title-color);
   text-align: center;
   flex-direction: column;

package/dist/components/chip.css

@@ -11,7 +11,6 @@
   --bic-chip-line-height: 1.5rem;
   gap: var(--bi-scale-1x);
   border-radius: var(--bi-radius-full);
-  width: -webkit-fit-content;
   width: fit-content;
   color: var(--bic-chip-text-color);
   background-color: var(--bic-chip-background);
@@ -182,92 +181,28 @@
   --bic-chip-text-color: var(--bi-basic-white);
 }
 
-.bi-chip:-webkit-any(button) {
+.bi-chip:is(button), .bi-chip:is(a) {
   cursor: pointer;
   border: none;
   text-decoration: none;
 }
 
-.bi-chip:-webkit-any(button):focus-visible {
+:is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
   box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
   outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
   outline-offset: var(--_bi--focus, 2px);
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .bi-chip:-webkit-any(button):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
+  :is(.bi-chip:is(button), .bi-chip:is(a)):hover {
+    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
+          var(--bic-chip-background);
   }
 }
 
-.bi-chip:-webkit-any(button):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
-}
-
-.bi-chip:is(button) {
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-}
-
-.bi-chip:is(button):focus-visible {
-  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
-  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-chip:is(button):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
-  }
-}
-
-.bi-chip:is(button):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
-}
-
-.bi-chip:-webkit-any(a) {
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-}
-
-.bi-chip:-webkit-any(a):focus-visible {
-  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
-  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-chip:-webkit-any(a):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
-  }
-}
-
-.bi-chip:-webkit-any(a):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
-}
-
-.bi-chip:is(a) {
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-}
-
-.bi-chip:is(a):focus-visible {
-  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
-  outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .bi-chip:is(a):hover {
-    background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
-  }
-}
-
-.bi-chip:is(a):active {
-  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
+:is(.bi-chip:is(button), .bi-chip:is(a)):active {
+  background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
+        var(--bic-chip-background);
 }
 
 .bi-chip > svg {

package/dist/components/details.css

@@ -1,7 +1,9 @@
 details.bi-details {
   --bic-details-background: var(--bi-basic-white);
-  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
-  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
+  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
+    var(--bic-details-background);
+  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
+    var(--bic-details-background);
   --bic-details-color: var(--bi-neutral-90);
   --bic-details-border-color: var(--bi-neutral-15);
   --bic-details-padding: var(--bi-scale-4x);
@@ -11,8 +13,10 @@ details.bi-details {
 
 details.bi-details[data-dark="true"] {
   --bic-details-background: var(--bi-neutral-90);
-  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-details-background);
-  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
+  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
+      var(--bic-details-background);
+  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
+      var(--bic-details-background);
   --bic-details-border-color: var(--bi-neutral-70);
   --bic-details-color: var(--bi-basic-white);
   --bic-details-focus-shadow-color: var(--bi-neutral-95);
@@ -107,7 +111,8 @@ details.bi-details[open] summary > svg {
   }
 
   details.bi-details::details-content {
-    transition: height .2s ease-in-out, content-visibility .2s ease-in-out allow-discrete;
+    transition: height .2s ease-in-out,
+        content-visibility .2s ease-in-out allow-discrete;
     height: 0;
     overflow: clip;
   }

package/dist/components/dialog.css

@@ -30,10 +30,7 @@
   margin: auto;
   padding: 0;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   overflow: auto;
 }
 
@@ -43,16 +40,13 @@
 }
 
 .bi-dialog[open] {
-  animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out, bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
+  animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
+      bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
   display: flex;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .bi-dialog[open] {
-    animation: none;
-  }
-
-  .bi-dialog::backdrop {
+  .bi-dialog[open], .bi-dialog::backdrop {
     animation: none;
   }
 }
@@ -93,15 +87,7 @@
   display: flex;
 }
 
-.bi-dialog .bi-dialog--header:not([data-no-border="true"]):not(:first-child) {
-  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
-}
-
-.bi-dialog .bi-dialog--content:not([data-no-border="true"]):not(:first-child) {
-  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
-}
-
-.bi-dialog .bi-dialog--footer:not([data-no-border="true"]):not(:first-child) {
+:is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
   border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
 }
 

package/dist/components/drawer.css

@@ -6,7 +6,8 @@
   --bic-drawer-max-width: 40rem;
   --bic-drawer-min-height: 20rem;
   --bic-drawer-border-radius: var(--bi-radius-medium);
-  transition: display var(--bic-dialog-animation-duration) allow-discrete, overlay var(--bic-dialog-animation-duration) allow-discrete;
+  transition: display var(--bic-dialog-animation-duration) allow-discrete,
+    overlay var(--bic-dialog-animation-duration) allow-discrete;
   transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
   animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
 }
@@ -50,30 +51,14 @@
   border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
 }
 
-.bi-dialog.bi-drawer[data-anchor="left"] {
-  min-width: var(--bic-drawer-min-width);
-  max-width: var(--bic-drawer-max-width);
-  width: -webkit-fit-content;
-  width: fit-content;
-  height: 100dvh;
-}
-
-.bi-dialog.bi-drawer[data-anchor="right"] {
+.bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
   min-width: var(--bic-drawer-min-width);
   max-width: var(--bic-drawer-max-width);
-  width: -webkit-fit-content;
   width: fit-content;
   height: 100dvh;
 }
 
-.bi-dialog.bi-drawer[data-anchor="top"] {
-  min-height: var(--bic-drawer-min-height);
-  max-height: calc(100dvh - var(--bi-layout-navbar-height));
-  width: 100%;
-  max-width: 100dvw;
-}
-
-.bi-dialog.bi-drawer[data-anchor="bottom"] {
+.bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
   min-height: var(--bic-drawer-min-height);
   max-height: calc(100dvh - var(--bi-layout-navbar-height));
   width: 100%;

package/dist/components/dropdown.css

@@ -6,14 +6,16 @@
   --bic-dropdown-border-width: var(--bi-stroke-thin);
   --bic-dropdown-border-style: solid;
   --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-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+    0px 2px 2px -1px #26333f0a;
 }
 
 .bi-dropdown[data-dark="true"] {
   --bic-dropdown-background: var(--bi-neutral-100);
   --bic-dropdown-border-color: var(--bi-neutral-90);
   --bic-dropdown-color: var(--bi-neutral-5);
-  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
+      0px 2px 2px -1px #26333f0a;
 }
 
 .bi-dropdown {
@@ -38,17 +40,6 @@
   display: flex;
 }
 
-.bi-dropdown :-webkit-any(a, button, [role="button"]) {
-  padding: var(--bic-dropdown-item-padding);
-  min-height: var(--bic-dropdown-item-size);
-  justify-content: start;
-  width: 100%;
-}
-
-.bi-dropdown :-webkit-any(a, button, [role="button"]) .bi-button--end-icon {
-  margin-left: auto;
-}
-
 .bi-dropdown :is(a, button, [role="button"]) {
   padding: var(--bic-dropdown-item-padding);
   min-height: var(--bic-dropdown-item-size);