@bi-digital/css 0.6.8 → 0.7.0

package/dist/components/field.css

@@ -7,6 +7,7 @@
   --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);
@@ -23,6 +24,7 @@
   --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);
@@ -34,8 +36,7 @@
 }
 
 .bi-field > * {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
 }
 
 .bi-field > * + * {
@@ -70,104 +71,40 @@
   width: 100%;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
   border-radius: var(--bi-radius-medium);
-  grid-template-areas: "input content";
-  grid-template-columns: var(--bi-scale-5x) 1fr;
   gap: 0 var(--bi-scale-3x);
-  width: -webkit-fit-content;
   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:-webkit-any([type="radio"], [type="checkbox"])):not([hidden]) {
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
   display: grid;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
   width: 100%;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) > * {
-  grid-column: content;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-label {
-  margin: var(--bi-scale-0-50x) 0;
-  -webkit-user-select: none;
-  user-select: none;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) .bi-input {
-  margin: var(--bi-scale-1x) auto;
-  grid-area: 1 / input;
-  align-self: flex-start;
-}
-
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
-  cursor: pointer;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
-  cursor: pointer;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:only-child) {
-  gap: 0;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
-  background: var(--_bi--hover, var(--bic-field-background-hover));
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
-  --_bi--hover: ;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
-  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
-  --_bi--focus: ;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
-  grid-template-areas: "content input";
-  grid-template-columns: 1fr var(--bi-scale-5x);
-  width: auto;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
-  border-radius: var(--bi-radius-medium);
-  grid-template-areas: "input content";
-  grid-template-columns: var(--bi-scale-5x) 1fr;
-  gap: 0 var(--bi-scale-3x);
-  width: -webkit-fit-content;
-  width: fit-content;
-  padding: var(--bi-scale-2x) var(--bi-scale-3x);
-  align-items: center;
+.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"])):not([hidden]) {
-  display: grid;
+.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"]))[data-fullwidth="true"] {
-  width: 100%;
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
+  padding-inline-start: var(--bi-scale-4x);
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
   grid-column: content;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
@@ -184,10 +121,6 @@
   align-self: flex-start;
 }
 
-.bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):-webkit-any(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
-  cursor: pointer;
-}
-
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
   cursor: pointer;
 }
@@ -204,6 +137,14 @@
   --_bi--hover: ;
 }
 
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
+  background: var(--_bi--hover, var(--bic-field-background-press));
+}
+
+.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
+  --_bi--hover: ;
+}
+
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
   box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
   outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
@@ -215,9 +156,8 @@
 }
 
 .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
+  grid-template-columns: 1fr auto;
   grid-template-areas: "content input";
-  grid-template-columns: 1fr var(--bi-scale-5x);
-  width: auto;
 }
 
 .bi-field .bi-field--affixes {
@@ -240,7 +180,6 @@
 }
 
 .bi-field .bi-field--affixes:has(.bi-input[size]) {
-  width: -webkit-fit-content;
   width: fit-content;
 }
 
@@ -255,7 +194,8 @@
 .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
   outline: var(--_bi--focus, 3px solid var(--bic-field-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);
+  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
+        0px 0px 10px 0px #0000000d);
 }
 
 .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
@@ -273,44 +213,16 @@
   display: flex;
 }
 
-.bi-field .bi-field--affixes .bi-field--affix:first-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-right: 0;
-  padding-right: 0;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix:first-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-  border-left: 0;
-  padding-left: 0;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix:first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-  border-left: 0;
-  padding-left: 0;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-  border-left: 0;
-  padding-left: 0;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix:last-child:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-right: 0;
-  padding-right: 0;
+.bi-field .bi-field--affixes .bi-field--affix:first-child {
+  border-inline-end: 0;
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+  padding-inline-end: 0;
 }
 
-.bi-field .bi-field--affixes .bi-field--affix:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-right: 0;
-  padding-right: 0;
+.bi-field .bi-field--affixes .bi-field--affix:last-child {
+  border-inline-start: 0;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+  padding-inline-start: 0;
 }

package/dist/components/fieldset.css

@@ -22,7 +22,7 @@
 }
 
 .bi-fieldset > * + * {
-  margin-top: var(--bi-scale-1x);
+  margin-block-start: var(--bi-scale-1x);
 }
 
 .bi-fieldset > legend + p {
@@ -34,10 +34,6 @@
   line-height: 1.15;
 }
 
-.bi-fieldset:disabled > legend {
-  opacity: var(--ds-opacity-disabled);
-}
-
-.bi-fieldset:disabled > legend + p {
+.bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
   opacity: var(--ds-opacity-disabled);
 }

package/dist/components/filter-group.css

@@ -1,7 +1,9 @@
 .bi-filter-group {
   --bic-filter-group-background: var(--bi-basic-white);
-  --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
-  --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
+  --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
+    var(--bic-filter-group-background);
+  --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
+    var(--bic-filter-group-background);
   --bic-filter-group-background-expanded: var(--bi-neutral-15);
   --bic-filter-group-border-color: var(--bi-neutral-15);
   --bic-filter-group-text-color: var(--bi-neutral-90);
@@ -11,8 +13,10 @@
 
 .bi-filter-group[data-dark="true"] {
   --bic-filter-group-background: var(--bi-neutral-90);
-  --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
-  --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
+  --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
+      var(--bic-filter-group-background);
+  --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
+      var(--bic-filter-group-background);
   --bic-filter-group-background-expanded: var(--bi-neutral-80);
   --bic-filter-group-border-color: var(--bi-neutral-70);
   --bic-filter-group-text-color: var(--bi-basic-white);
@@ -31,9 +35,9 @@
   height: var(--bi-scale-12x);
   color: var(--bic-filter-group-text-color);
   align-items: center;
-  gap: calc(var(--bi-scale-2x)  + var(--bi-scale-0-50x));
+  gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
   width: 100%;
-  padding: var(--bi-scale-2x) calc(var(--bi-scale-2x)  + var(--bi-scale-0-50x));
+  padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
   background: var(--bic-filter-group-background);
   cursor: pointer;
   border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;

package/dist/components/footer.css

@@ -31,7 +31,7 @@
   display: flex;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container {
     flex-direction: column;
   }
@@ -50,7 +50,7 @@
   display: flex;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container .bi-footer--links {
     flex-direction: column;
   }
@@ -61,7 +61,7 @@
   font-weight: 300;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container .bi-footer--links > p {
     margin: var(--bi-scale-3x) 0;
   }
@@ -77,7 +77,7 @@
   display: flex;
 }
 
-@media not (min-width: 768px) {
+@media (width < 768px) {
   .bi-footer .bi-footer--links-container .bi-footer--links > div {
     flex-direction: column;
   }
@@ -92,29 +92,13 @@
   display: flex;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-footer .bi-footer--accreditations {
     gap: var(--bi-scale-2x) var(--bi-scale-1x);
   }
 }
 
-.bi-footer .bi-footer--accreditations .bi-footer--aacsb {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 58px;
-  display: block;
-}
-
-.bi-footer .bi-footer--accreditations .bi-footer--amba {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 58px;
-  display: block;
-}
-
-.bi-footer .bi-footer--accreditations .bi-footer--equis {
+.bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -157,7 +141,7 @@
   display: flex;
 }
 
-@media not (min-width: 600px) {
+@media (width < 600px) {
   .bi-footer .bi-footer--socials {
     gap: var(--bi-scale-2x);
   }

package/dist/components/input.css

@@ -41,7 +41,6 @@
 }
 
 .bi-input {
-  -webkit-appearance: none;
   appearance: none;
   background: var(--bic-input-background);
   border-radius: var(--bi-radius-medium);
@@ -77,7 +76,8 @@
 .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);
+  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
+      0px 0px 10px 0px #0000000d);
 }
 
 .bi-input:focus-visible * {
@@ -92,11 +92,7 @@
   width: 100%;
 }
 
-.bi-input:disabled {
-  cursor: not-allowed;
-}
-
-.bi-input[aria-disabled="true"] {
+.bi-input:disabled, .bi-input[aria-disabled="true"] {
   cursor: not-allowed;
 }
 
@@ -104,34 +100,12 @@
   --bic-input-border-color: var(--bic-input-border-color-invalid);
 }
 
-.bi-input[readonly] {
-  background: var(--bic-input-background-readonly);
-  --bic-input-border-color: var(--bic-input-border-color-readonly);
-  color: var(--bic-input-color-readonly);
-}
-
-.bi-input:disabled {
+.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[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:-webkit-any(textarea) {
-  height: auto;
-  min-height: calc(var(--bic-input-size) * 2);
-  resize: vertical;
-}
-
-.bi-input:-webkit-any(textarea):not([rows]) {
-  field-sizing: content;
-}
-
 .bi-input:is(textarea) {
   height: auto;
   min-height: calc(var(--bic-input-size) * 2);
@@ -142,17 +116,6 @@
   field-sizing: content;
 }
 
-.bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-.bi-input:-webkit-any(select) {
-  background-image: var(--bic-input-select-chevron);
-  background-position: calc(100% - .5em);
-  background-repeat: no-repeat;
-  background-size: 1.5em;
-}
-
 .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
   cursor: pointer;
 }
@@ -164,7 +127,7 @@
   background-size: 1.5em;
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
+.bi-input[type="checkbox"], .bi-input[type="radio"] {
   padding: var(--bi-scale-0-50x);
   line-height: inherit;
   height: var(--bic-input-toggle-size);
@@ -177,25 +140,25 @@
   flex-shrink: 0;
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
+: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);
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
   --_bi--focus: ;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
   cursor: pointer;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
   border-radius: var(--bi-radius-full);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
   content: "";
   background-color: var(--bic-input-toggle-background);
   border-radius: 100%;
@@ -209,22 +172,22 @@
   transform: translate(-50%, -50%);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
   --bic-input-border-color: var(--bic-input-toggle-background);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
   width: 12px;
   height: 12px;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
+: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;
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
   content: "";
   width: .7em;
   height: .7em;
@@ -235,117 +198,39 @@
   transform: scale(0);
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
-  transform: scale(1);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
+: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);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
+:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
   transform: scale(1);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:indeterminate:before {
+: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%);
 }
 
-.bi-input:is([type="checkbox"], [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;
-}
-
-.bi-input:is([type="checkbox"], [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);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
-  --_bi--focus: ;
+: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);
 }
 
-.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"] {
-  border-radius: var(--bi-radius-full);
-}
-
-.bi-input:is([type="checkbox"], [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%);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked {
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="radio"]:checked:before {
-  width: 12px;
-  height: 12px;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"] {
-  border-radius: var(--bi-radius-small);
-  place-content: center;
-  display: grid;
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]: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);
-}
-
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate) {
+: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);
 }
 
-.bi-input:-webkit-any([type="checkbox"], [type="radio"])[type="checkbox"]:-webkit-any(:checked, :indeterminate):before {
-  transform: scale(1);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate) {
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]:is(:checked, :indeterminate):before {
-  transform: scale(1);
-}
-
-.bi-input:is([type="checkbox"], [type="radio"])[type="checkbox"]: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"] {
+  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;
 }