@bi-digital/css 0.11.9 → 0.11.11

package/dist/components/field.css

@@ -18,209 +18,211 @@
   --bic-field-label-required-color: var(--bi-primary-50);
   --bic-field-focus-outline-color: var(--bi-primary-50);
   --bic-field-focus-shadow-color: var(--bi-basic-white);
-}
-
-.bi-field[data-dark="true"] {
-  --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);
-  --bic-field-description-color: var(--bi-neutral-15);
-  --bic-field-label-color: var(--bi-basic-white);
-  --bic-field-label-required-color: var(--bi-secondary-50);
-  --bic-field-focus-outline-color: var(--bi-primary-30);
-  --bic-field-focus-shadow-color: var(--bi-neutral-95);
-}
-
-.bi-field > * {
-  margin-block: 0;
-}
-
-.bi-field > * + * {
-  margin-top: var(--bic-field-content-spacing);
-}
-
-.bi-field .bi-field--description {
-  color: var(--bic-field-description-color);
-  font: var(--bi-font-body-small);
-  line-height: 1.15;
-}
-
-.bi-field .bi-input:where(:not([hidden])) {
-  display: block;
-}
-
-.bi-field:has(.bi-input[aria-invalid="true"]) {
-  --bic-field-border-color: var(--bic-field-border-color-invalid);
-}
-
-.bi-field:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
-  cursor: not-allowed;
-  --bic-field-label-color: var(--bic-field-disabled-color);
-  --bic-field-description-color: var(--bic-field-disabled-color);
-  --bic-field-affix-color: var(--bic-field-disabled-color);
-  --bic-input-toggle-background: var(--bic-field-disabled-color);
-}
-
-.bi-field[data-fullwidth="true"] {
-  width: 100%;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
-  border-radius: var(--bi-radius-medium);
-  gap: 0 var(--bi-scale-3x);
-  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:is([type="radio"], [type="checkbox"])):not([hidden]) {
-  display: grid;
-}
-
-.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"]) {
-  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"])):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"])):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-block: 0;
-}
-
-.bi-field:has(.bi-input:is([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:is([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: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"])):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));
-  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-columns: 1fr auto;
-  grid-template-areas: "content input";
-}
-
-.bi-field .bi-field--affixes {
-  background: var(--bic-field-background);
-  border-radius: var(--bi-radius-medium);
-  box-sizing: border-box;
-  white-space: nowrap;
-  max-width: 100%;
-  box-shadow: var(--bic-field-box-shadow);
-}
-
-.bi-field .bi-field--affixes .bi-input {
-  --bic-input-background: ;
-  --bic-input-box-shadow: ;
-  flex: auto;
-}
-
-.bi-field .bi-field--affixes:not([hidden]) {
-  display: flex;
-}
-
-.bi-field .bi-field--affixes:has(.bi-input[size]) {
-  width: fit-content;
-}
-
-.bi-field .bi-field--affixes:hover {
-  box-shadow: var(--_bi--hover, var(--bic-field-box-shadow-hover));
-}
-
-.bi-field .bi-field--affixes:hover * {
-  --_bi--hover: ;
-}
-
-.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,
+  &[data-dark="true"] {
+    --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);
+    --bic-field-description-color: var(--bi-neutral-15);
+    --bic-field-label-color: var(--bi-basic-white);
+    --bic-field-label-required-color: var(--bi-secondary-50);
+    --bic-field-focus-outline-color: var(--bi-primary-30);
+    --bic-field-focus-shadow-color: var(--bi-neutral-95);
+  }
+
+  & > * {
+    margin-block: 0;
+  }
+
+  & > * + * {
+    margin-top: var(--bic-field-content-spacing);
+  }
+
+  & .bi-field--description {
+    color: var(--bic-field-description-color);
+    font: var(--bi-font-body-small);
+    line-height: 1.15;
+  }
+
+  & .bi-input:where(:not([hidden])) {
+    display: block;
+  }
+
+  &:has(.bi-input[aria-invalid="true"]) {
+    --bic-field-border-color: var(--bic-field-border-color-invalid);
+  }
+
+  &:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
+    cursor: not-allowed;
+    --bic-field-label-color: var(--bic-field-disabled-color);
+    --bic-field-description-color: var(--bic-field-disabled-color);
+    --bic-field-affix-color: var(--bic-field-disabled-color);
+    --bic-input-toggle-background: var(--bic-field-disabled-color);
+  }
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+
+  &:has(.bi-input:is([type="radio"], [type="checkbox"])) {
+    border-radius: var(--bi-radius-medium);
+    gap: 0 var(--bi-scale-3x);
+    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;
+
+    &:not([hidden]) {
+      display: grid;
+    }
+
+    &[data-fullwidth="true"] {
+      width: 100%;
+    }
+
+    &:has(.bi-input[role="switch"]) {
+      border-radius: var(--bi-scale-24x);
+      padding: var(--bi-scale-1x) var(--bi-scale-2x);
+
+      &:has(.bi-label) {
+        &[data-position="start"] {
+          padding-inline-end: var(--bi-scale-4x);
+        }
+
+        &[data-position="end"] {
+          padding-inline-start: var(--bi-scale-4x);
+        }
+      }
+    }
+
+    & > * {
+      grid-column: content;
+      margin-block: 0;
+    }
+
+    & .bi-label {
+      margin: var(--bi-scale-0-50x) 0;
+      -webkit-user-select: none;
+      user-select: none;
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+
+    & .bi-input {
+      margin: var(--bi-scale-1x) auto;
+      grid-area: 1 / input;
+      align-self: flex-start;
+    }
+
+    &:is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
+      cursor: pointer;
+    }
+
+    &:has(input:only-child) {
+      gap: 0;
+    }
+
+    &:hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
+      background: var(--_bi--hover, var(--bic-field-background-hover));
+
+      & * {
+        --_bi--hover: ;
+      }
+    }
+
+    &:active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
+      background: var(--_bi--hover, var(--bic-field-background-press));
+
+      & * {
+        --_bi--hover: ;
+      }
+    }
+
+    &: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--focus: ;
+      }
+    }
+
+    &[data-position="end"] {
+      grid-template-columns: 1fr auto;
+      grid-template-areas: "content input";
+    }
+  }
+
+  & .bi-field--affixes {
+    background: var(--bic-field-background);
+    border-radius: var(--bi-radius-medium);
+    box-sizing: border-box;
+    white-space: nowrap;
+    max-width: 100%;
+    box-shadow: var(--bic-field-box-shadow);
+
+    & .bi-input {
+      --bic-input-background: ;
+      --bic-input-box-shadow: ;
+      flex: auto;
+    }
+
+    &:not([hidden]) {
+      display: flex;
+    }
+
+    &:has(.bi-input[size]) {
+      width: fit-content;
+    }
+
+    &:hover {
+      box-shadow: var(--_bi--hover, var(--bic-field-box-shadow-hover));
+
+      & * {
+        --_bi--hover: ;
+      }
+    }
+
+    &: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);
-}
-
-.bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
-  --_bi--focus: ;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix {
-  padding-inline: var(--bic-field-padding-inline);
-  color: var(--bic-field-affix-color);
-  flex-shrink: 0;
-  align-items: center;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix:not([hidden]) {
-  display: flex;
-}
-
-.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 {
-  border-inline-start: 0;
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-  padding-inline-start: 0;
+      & * {
+        --_bi--focus: ;
+      }
+    }
+
+    & .bi-field--affix {
+      padding-inline: var(--bic-field-padding-inline);
+      color: var(--bic-field-affix-color);
+      flex-shrink: 0;
+      align-items: center;
+
+      &:not([hidden]) {
+        display: flex;
+      }
+
+      &:first-child {
+        border-inline-end: 0;
+        border-start-start-radius: inherit;
+        border-end-start-radius: inherit;
+        padding-inline-end: 0;
+      }
+
+      &: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

@@ -1,36 +1,34 @@
 .bi-fieldset {
   --bic-fieldset-color: var(--bi-neutral-95);
   --bic-fieldset-description-color: var(--bi-neutral-60);
-}
 
-.bi-fieldset[data-dark="true"] {
-  --bic-fieldset-color: var(--bi-basic-white);
-  --bic-fieldset-description-color: var(--bi-neutral-15);
-}
+  &[data-dark="true"] {
+    --bic-fieldset-color: var(--bi-basic-white);
+    --bic-fieldset-description-color: var(--bi-neutral-15);
+  }
 
-.bi-fieldset {
   border: 0;
   min-width: 0;
   margin: 0;
   padding: 0;
-}
 
-.bi-fieldset > legend {
-  color: var(--bic-fieldset-color);
-  padding: 0;
-  font-size: 1rem;
-}
+  & > legend {
+    color: var(--bic-fieldset-color);
+    padding: 0;
+    font-size: 1rem;
+  }
 
-.bi-fieldset > * + * {
-  margin-block-start: var(--bi-scale-1x);
-}
+  & > * + * {
+    margin-block-start: var(--bi-scale-1x);
+  }
 
-.bi-fieldset > legend + p {
-  margin-block: var(--bi-scale-1x) 0;
-  color: var(--bic-fieldset-description-color);
-  font: var(--bi-font-body-large);
-}
+  & > legend + p {
+    margin-block: var(--bi-scale-1x) 0;
+    color: var(--bic-fieldset-description-color);
+    font: var(--bi-font-body-large);
+  }
 
-.bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
-  opacity: var(--ds-opacity-disabled);
+  &:disabled > legend, &:disabled > legend + p {
+    opacity: var(--ds-opacity-disabled);
+  }
 }

package/dist/components/filter-group.css

@@ -9,103 +9,103 @@
   --bic-filter-group-text-color: var(--bi-neutral-90);
   --bic-filter-focus-shadow-color: var(--bi-basic-white);
   --bic-filter-focus-outline-color: var(--bi-primary-50);
-}
 
-.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%),
+  &[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%),
+    --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);
-  --bic-filter-focus-shadow-color: var(--bi-neutral-95);
-  --bic-filter-focus-outline-color: var(--bi-primary-30);
-}
+    --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);
+    --bic-filter-focus-shadow-color: var(--bi-neutral-95);
+    --bic-filter-focus-outline-color: var(--bi-primary-30);
+  }
 
-.bi-filter-group {
   flex-direction: column;
   display: flex;
-}
 
-.bi-filter-group > button {
-  border: none;
-  border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
-  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));
-  width: 100%;
-  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;
-  -webkit-user-select: none;
-  user-select: none;
-  flex-direction: row;
-  display: flex;
-}
+  & > button {
+    border: none;
+    border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
+    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));
+    width: 100%;
+    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;
+    -webkit-user-select: none;
+    user-select: none;
+    flex-direction: row;
+    display: flex;
 
-@media (hover: hover) and (pointer: fine) {
-  .bi-filter-group > button:hover {
-    background: var(--bic-filter-group-background-hover);
-  }
-}
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: var(--bic-filter-group-background-hover);
+      }
+    }
 
-.bi-filter-group > button:active {
-  background: var(--bic-filter-group-background-press);
-}
+    &:active {
+      background: var(--bic-filter-group-background-press);
+    }
 
-.bi-filter-group > button:focus-visible {
-  box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
-  outline: 3px solid var(--bic-filter-focus-outline-color);
-  outline-offset: 3px;
-  border-radius: var(--bi-radius-small);
-}
+    &:focus-visible {
+      box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
+      outline: 3px solid var(--bic-filter-focus-outline-color);
+      outline-offset: 3px;
+      border-radius: var(--bi-radius-small);
+    }
 
-.bi-filter-group > button > svg {
-  width: var(--bi-scale-6x);
-  height: var(--bi-scale-6x);
-  font-size: var(--bi-icon-medium);
-}
+    & > svg {
+      width: var(--bi-scale-6x);
+      height: var(--bi-scale-6x);
+      font-size: var(--bi-icon-medium);
+    }
 
-.bi-filter-group > button > h3 {
-  text-align: left;
-  font: var(--bi-font-title-bold-xs);
-  flex: 1;
-  margin: 0;
-}
+    & > h3 {
+      text-align: left;
+      font: var(--bi-font-title-bold-xs);
+      flex: 1;
+      margin: 0;
+    }
+  }
 
-.bi-filter-group > div {
-  gap: var(--bi-scale-2x);
-  padding: var(--bi-scale-2x) 0 var(--bi-scale-8x);
-  flex-direction: column;
-  display: none;
-}
+  & > div {
+    gap: var(--bi-scale-2x);
+    padding: var(--bi-scale-2x) 0 var(--bi-scale-8x);
+    flex-direction: column;
+    display: none;
 
-.bi-filter-group > div > .bi-field:has(.bi-input[type="checkbox"]) {
-  width: 100%;
-}
+    & > .bi-field:has(.bi-input[type="checkbox"]) {
+      width: 100%;
+    }
+  }
 
-.bi-filter-group:last-of-type > button {
-  border-radius: var(--bi-radius-small);
-  border-bottom-color: #0000;
-}
+  &:last-of-type {
+    & > button {
+      border-radius: var(--bi-radius-small);
+      border-bottom-color: #0000;
+    }
 
-.bi-filter-group:last-of-type > div {
-  padding: var(--bi-scale-2x) 0;
-}
+    & > div {
+      padding: var(--bi-scale-2x) 0;
+    }
+  }
 
-.bi-filter-group[data-expanded="true"] {
-  --bic-filter-group-background: var(--bic-filter-group-background-expanded);
-}
+  &[data-expanded="true"] {
+    --bic-filter-group-background: var(--bic-filter-group-background-expanded);
 
-.bi-filter-group[data-expanded="true"] > button {
-  border-radius: var(--bi-radius-small);
-  border-bottom-color: #0000;
-}
+    & > button {
+      border-radius: var(--bi-radius-small);
+      border-bottom-color: #0000;
+    }
 
-.bi-filter-group[data-expanded="true"] > div {
-  display: flex;
+    & > div {
+      display: flex;
+    }
+  }
 }