@bi-digital/css 0.2.13 → 0.2.14

package/dist/components/input.css

@@ -0,0 +1,327 @@
+:where(.bi-input) {
+  margin: 0;
+}
+
+.bi-input {
+  --bic-input-padding: var(--bi-scale-3x);
+  --bic-input-size: var(--bi-scale-11x);
+  --bic-input-font-size: 1rem;
+  --bic-input-toggle-size: 1.125rem;
+  --bic-input-background: var(--bic-field-background, var(--bi-basic-white));
+  --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-10));
+  --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-50));
+  --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
+  --bic-input-border-style: var(--bic-field-border-style, solid);
+  --bic-input-border-width: var(--bic-field-border-width, var(--bi-stroke-thin));
+  --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
+  --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-neutral-95));
+  --bic-input-color: var(--bic-field-input-color, var(--bi-neutral-95));
+  --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-50));
+  --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
+  --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
+  --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
+}
+
+.bi-input[data-dark="true"] {
+  --bic-input-background: var(--bic-field-background, var(--bi-neutral-95));
+  --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-50));
+  --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-10));
+  --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
+  --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
+  --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-basic-white));
+  --bic-input-color: var(--bic-field-input-color, var(--bi-basic-white));
+  --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-40));
+  --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
+  --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
+  --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
+}
+
+.bi-input {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--bic-input-background);
+  border-radius: var(--bi-radius-medium);
+  border-width: var(--bic-input-border-width);
+  border-style: var(--bic-input-border-style);
+  border-color: var(--bic-input-border-color);
+  box-sizing: border-box;
+  color: var(--bic-input-color);
+  font-family: inherit;
+  font-size: var(--bic-input-font-size);
+  height: var(--bic-input-size);
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--bic-input-padding);
+  vertical-align: middle;
+  line-height: 1;
+  position: relative;
+}
+
+.bi-input[data-size="large"] {
+  --bic-input-size: var(--bi-scale-14x);
+  --bic-input-font-size: 1.25rem;
+}
+
+.bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
+  box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
+}
+
+.bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
+  --bic-input-border-color: var(--bi-primary-50);
+}
+
+.bi-input:focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-input:focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-input:not([size], [cols]) {
+  width: 100%;
+}
+
+.bi-input:disabled {
+  cursor: not-allowed;
+}
+
+.bi-input[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.bi-input[aria-invalid="true"] {
+  --bic-input-border-color: var(--bic-input-border-color-invalid);
+}
+
+.bi-input[readonly] {
+  background: var(--bic-input-background-readonly);
+  border-color: var(--bic-input-border-color-readonly);
+  color: var(--bic-input-color-readonly);
+}
+
+.bi-input:disabled {
+  background: var(--bic-input-background-readonly);
+  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);
+  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);
+  resize: vertical;
+}
+
+.bi-input:is(textarea):not([rows]) {
+  field-sizing: content;
+}
+
+.bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
+  cursor: pointer;
+}
+
+.bi-input:-webkit-any(select) {
+  --_bic-select-diagonal-1: transparent calc(40%);
+  --_bic-select-diagonal-2: currentcolor calc(40%);
+  --_bic-select-diagonal-3: currentcolor calc(60%);
+  --_bic-select-diagonal-4: transparent calc(60%);
+  background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
+  background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
+  background-repeat: no-repeat;
+  background-size: .4em .4em;
+}
+
+.bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
+  cursor: pointer;
+}
+
+.bi-input:is(select) {
+  --_bic-select-diagonal-1: transparent calc(40%);
+  --_bic-select-diagonal-2: currentcolor calc(40%);
+  --_bic-select-diagonal-3: currentcolor calc(60%);
+  --_bic-select-diagonal-4: transparent calc(60%);
+  background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
+  background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
+  background-repeat: no-repeat;
+  background-size: .4em .4em;
+}
+
+.bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
+  border-width: var(--bi-stroke-default);
+  padding: var(--bi-scale-0-50x);
+  line-height: inherit;
+  height: var(--bic-input-toggle-size);
+  width: var(--bic-input-toggle-size);
+  border-color: var(--bic-input-border-color);
+  background: none;
+  flex-shrink: 0;
+}
+
+.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) {
+  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%);
+}
+
+.bi-input:is([type="checkbox"], [type="radio"]) {
+  border-width: var(--bi-stroke-default);
+  padding: var(--bi-scale-0-50x);
+  line-height: inherit;
+  height: var(--bic-input-toggle-size);
+  width: var(--bic-input-toggle-size);
+  border-color: var(--bic-input-border-color);
+  background: none;
+  flex-shrink: 0;
+}
+
+.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) {
+  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%);
+}

package/dist/components/label.css

@@ -0,0 +1,42 @@
+.bi-label {
+  --bic-label-color: var(--bic-field-label-color, var(--bi-neutral-95));
+  --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-primary-50));
+}
+
+.bi-label[data-dark="true"] {
+  --bic-label-color: var(--bic-field-label-color, var(--bi-basic-white));
+  --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-secondary-50));
+}
+
+.bi-label {
+  color: var(--bic-label-color);
+  font-family: museo-sans, Arial, sans-serif;
+  font-size: .875rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.bi-label[data-weight="medium"] {
+  font-weight: 500;
+}
+
+.bi-label[data-weight="regular"] {
+  font-weight: 300;
+}
+
+.bi-label:has( ~ .bi-input:required,  ~ .bi-field--affixes > .bi-input:required):before {
+  content: "*";
+  color: var(--bic-label-required-color);
+}
+
+.bi-label:has( ~ .bi-input:required,  ~ .bi-field--affixes > .bi-input:required):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)):before {
+  padding-right: var(--bi-scale-0-25x);
+}
+
+.bi-label:has( ~ .bi-input:required,  ~ .bi-field--affixes > .bi-input:required):-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)):before {
+  padding-left: var(--bi-scale-0-25x);
+}
+
+.bi-label:has( ~ .bi-input:required,  ~ .bi-field--affixes > .bi-input:required):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)):before {
+  padding-left: var(--bi-scale-0-25x);
+}

package/dist/components/link.css

@@ -0,0 +1,72 @@
+.bi-link {
+  --bic-link-background-active: var(--bi-primary-20);
+  --bic-link-color-active: var(--bi-primary-60);
+  --bic-link-color-hover: var(--bi-primary-60);
+  --bic-link-color: var(--bi-primary-50);
+  --bic-link-text-decoration-thickness--hover: .125em;
+  --bic-link-text-decoration-thickness: .0625em;
+  color: var(--bic-link-color);
+  -webkit-text-decoration-line: underline;
+  text-decoration-line: underline;
+  -webkit-text-decoration-style: solid;
+  text-decoration-style: solid;
+  text-decoration-thickness: var(--bic-link-text-decoration-thickness);
+  text-underline-offset: .25em;
+  outline: none;
+}
+
+.bi-link :-webkit-any(img, svg) {
+  vertical-align: middle;
+}
+
+.bi-link :is(img, svg) {
+  vertical-align: middle;
+}
+
+.bi-link[data-dark="true"] {
+  --bic-link-background-active: var(--bi-primary-80);
+  --bic-link-color-active: var(--bi-primary-30);
+  --bic-link-color-hover: var(--bi-primary-30);
+  --bic-link-color: var(--bi-primary-40);
+}
+
+.bi-link[data-color="neutral"] {
+  --bic-link-background-active: var(--bi-neutral-10);
+  --bic-link-color-active: var(--bi-neutral-100);
+  --bic-link-color-hover: var(--bi-neutral-100);
+  --bic-link-color: var(--bi-neutral-90);
+}
+
+.bi-link[data-color="neutral"][data-dark="true"] {
+  --bic-link-background-active: var(--bi-neutral-90);
+  --bic-link-color-active: var(--bi-neutral-15);
+  --bic-link-color-hover: var(--bi-neutral-15);
+  --bic-link-color: var(--bi-neutral-5);
+}
+
+.bi-link:visited {
+  color: var(--bic-link-color);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bi-link:hover {
+    color: var(--bic-link-color-hover);
+    --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
+  }
+}
+
+.bi-link:focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+  border-radius: var(--bi-radius-small);
+}
+
+.bi-link:focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-link:active {
+  background: var(--bic-link-background-active);
+  color: var(--bic-link-color-active);
+}

package/dist/components/logo.css

@@ -0,0 +1,66 @@
+.bi-logo {
+  --bic-logo-height: var(--bi-scale-12x);
+  height: var(--bic-logo-height);
+  aspect-ratio: 1;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  justify-content: center;
+  display: flex;
+}
+
+.bi-logo[data-size="xs"] {
+  --bic-logo-height: var(--bi-scale-6x);
+}
+
+.bi-logo[data-size="small"] {
+  --bic-logo-height: var(--bi-scale-8x);
+}
+
+.bi-logo[data-size="medium"] {
+  --bic-logo-height: var(--bi-scale-11x);
+}
+
+.bi-logo[data-size="large"] {
+  --bic-logo-height: var(--bi-scale-24x);
+}
+
+.bi-logo[data-size="xl"] {
+  --bic-logo-height: var(--bi-scale-36x);
+}
+
+.bi-logo[data-size="xxl"] {
+  --bic-logo-height: var(--bi-scale-48x);
+}
+
+@media (min-width: 795px) {
+  .bi-logo[data-dark="true"][data-international="true"][data-vertical="true"] {
+    aspect-ratio: .974318;
+    background-image: url("./assets/logos/international-vertical-dark.svg");
+  }
+
+  .bi-logo[data-dark="true"][data-international="true"] {
+    aspect-ratio: 2.8125;
+    background-image: url("./assets/logos/international-dark.svg");
+  }
+}
+
+.bi-logo[data-dark="true"] {
+  background-image: url("./assets/logos/dark.svg");
+}
+
+@media (min-width: 795px) {
+  .bi-logo:not([data-dark="true"])[data-international="true"][data-vertical="true"] {
+    aspect-ratio: .974318;
+    background-image: url("./assets/logos/international-vertical.svg");
+  }
+
+  .bi-logo:not([data-dark="true"])[data-international="true"] {
+    aspect-ratio: 2.8125;
+    background-image: url("./assets/logos/international.svg");
+  }
+}
+
+.bi-logo:not([data-dark="true"]) {
+  background-image: url("./assets/logos/default.svg");
+}

package/dist/components/navbar.css

@@ -0,0 +1,61 @@
+.bi-navbar {
+  --bic-navbar-background-color: var(--bi-basic-white);
+  --bic-navbar-color: var(--bi-basic-black);
+  height: var(--bi-layout-navbar-height);
+  background-color: var(--bic-navbar-background-color);
+  width: 100%;
+  color: var(--bic-navbar-color);
+  display: flex;
+}
+
+.bi-navbar[data-dark="true"] {
+  --bic-navbar-background-color: var(--bi-primary-95);
+  --bic-navbar-color: var(--bi-basic-white);
+}
+
+.bi-navbar .bi-navbar__header {
+  height: var(--bi-layout-navbar-height);
+  align-items: center;
+  gap: var(--bi-scale-6x);
+  width: 100%;
+  padding: 0 var(--bi-scale-3x);
+  background-color: inherit;
+  color: inherit;
+  display: flex;
+}
+
+.bi-navbar .bi-navbar__header > :first-child {
+  margin-right: auto;
+}
+
+.bi-navbar[data-fixed="true"] .bi-navbar__header {
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.bi-navbar .bi-navbar__skip-link {
+  background: var(--bi-primary-50);
+  color: var(--bi-basic-white);
+  outline-offset: 0px;
+  border-radius: 4px;
+  align-content: center;
+  height: 44px;
+  padding: 0 7px;
+  font-size: .75rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -62px);
+}
+
+.bi-navbar .bi-navbar__skip-link:focus {
+  border-radius: var(--bi-radius-medium);
+  outline-offset: 2px;
+  outline: 1.5px solid var(--bi-primary-50);
+  box-shadow: 0 0 0 2px var(--bi-basic-white);
+  transition: transform .3s;
+  transform: translate(-50%);
+}

package/dist/components/pagination.css

@@ -0,0 +1,66 @@
+.bi-pagination {
+  --bic-pagination-gap: var(--bi-scale-2x);
+  --bic-pagination-color: var(--bi-basic-key);
+  --bic-pagination-selected-background: var(--bi-primary-5);
+}
+
+.bi-pagination[data-dark="true"] {
+  --bic-pagination-color: var(--bi-basic-white);
+  --bic-pagination-selected-background: var(--bi-primary-80);
+}
+
+.bi-pagination :-webkit-any(ol, ul) {
+  color: var(--bic-pagination-color);
+  gap: var(--bic-pagination-gap);
+  flex-wrap: wrap;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.bi-pagination :-webkit-any(ol, ul) > li:empty:before {
+  content: "...";
+  min-width: var(--bi-scale-11x);
+  text-align: center;
+  display: block;
+}
+
+.bi-pagination :-webkit-any(ol, ul) > li > .bi-button {
+  --bic-button-font-size: 1rem;
+}
+
+.bi-pagination :-webkit-any(ol, ul) > li > .bi-button[aria-current="page"] {
+  background-color: var(--bic-pagination-selected-background);
+}
+
+.bi-pagination :is(ol, ul) {
+  color: var(--bic-pagination-color);
+  gap: var(--bic-pagination-gap);
+  flex-wrap: wrap;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.bi-pagination :is(ol, ul) > li:empty:before {
+  content: "...";
+  min-width: var(--bi-scale-11x);
+  text-align: center;
+  display: block;
+}
+
+.bi-pagination :is(ol, ul) > li > .bi-button {
+  --bic-button-font-size: 1rem;
+}
+
+.bi-pagination :is(ol, ul) > li > .bi-button[aria-current="page"] {
+  background-color: var(--bic-pagination-selected-background);
+}

package/dist/components/popover.css

@@ -0,0 +1,50 @@
+.bi-popover {
+  --bic-popover-background: var(--bi-basic-white);
+  --bic-popover-border-width: var(--bi-stroke-thin);
+  --bic-popover-border-style: solid;
+  --bic-popover-border-color: var(--bi-stroke-color-1);
+  --bic-popover-color: var(--bi-neutral-90);
+  --bic-popover-border-radius: var(--bi-radius-medium);
+  --bic-popover-max-width: 300px;
+  --bic-popover-padding: var(--bi-scale-1x);
+  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+}
+
+.bi-popover[data-dark="true"] {
+  --bic-popover-background: var(--bi-neutral-95);
+  --bic-popover-border-color: var(--bi-neutral-70);
+  --bic-popover-color: var(--bi-neutral-5);
+  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+}
+
+.bi-popover {
+  background: var(--bic-popover-background);
+  border-radius: var(--bic-popover-border-radius);
+  border-width: var(--bic-popover-border-width);
+  border-style: var(--bic-popover-border-style);
+  border-color: var(--bic-popover-border-color);
+  box-shadow: var(--bic-popover-box-shadow);
+  box-sizing: border-box;
+  color: var(--bic-popover-color);
+  max-width: var(--bic-popover-max-width);
+  padding: var(--bic-popover-padding);
+  position: fixed;
+  top: 0;
+  bottom: auto;
+  left: 0;
+  right: auto;
+  overflow: visible;
+}
+
+[data-popover="inline"] {
+  all: unset;
+  cursor: pointer;
+  text-underline-offset: .27em;
+  font-size: inherit;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+[data-popover="inline"]:not([hidden]) {
+  display: inline;
+}

package/dist/components/search.css

@@ -0,0 +1,11 @@
+.bi-search .bi-field--affix:last-child {
+  --bic-field-padding-inline: 0;
+}
+
+.bi-search:has(.bi-input:-webkit-any(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
+  display: none;
+}
+
+.bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
+  display: none;
+}