@bi-digital/css 0.6.8 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/baseline.css +1 -5
  2. package/dist/components/alert.css +0 -1
  3. package/dist/components/badge.css +0 -2
  4. package/dist/components/button.css +19 -35
  5. package/dist/components/card.css +24 -126
  6. package/dist/components/chip.css +8 -73
  7. package/dist/components/details.css +10 -5
  8. package/dist/components/dialog.css +5 -19
  9. package/dist/components/drawer.css +4 -19
  10. package/dist/components/dropdown.css +6 -14
  11. package/dist/components/field.css +37 -125
  12. package/dist/components/fieldset.css +2 -6
  13. package/dist/components/filter-group.css +10 -6
  14. package/dist/components/footer.css +7 -23
  15. package/dist/components/input.css +33 -148
  16. package/dist/components/label.css +1 -12
  17. package/dist/components/link.css +0 -6
  18. package/dist/components/logo.css +2 -2
  19. package/dist/components/navbar.css +1 -1
  20. package/dist/components/pagination.css +0 -29
  21. package/dist/components/popover.css +5 -6
  22. package/dist/components/search.css +0 -4
  23. package/dist/components/spinner.css +3 -1
  24. package/dist/components/sticky-header.css +0 -1
  25. package/dist/components/tabs.css +0 -1
  26. package/dist/components/validation-message.css +2 -10
  27. package/dist/components.css +553 -1053
  28. package/dist/index.css +30 -34
  29. package/dist/salesforce.css +582 -1082
  30. package/dist/tokens.css +29 -29
  31. package/package.json +7 -8
  32. package/readme.md +7 -9
package/dist/components/label.css CHANGED
@@ -27,16 +27,5 @@
27
27
  .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):before {
28
28
  content: "*";
29
29
  color: var(--bic-label-required-color);
30
- }
31
-
32
- .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 {
33
- padding-right: var(--bi-scale-0-25x);
34
- }
35
-
36
- .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 {
37
- padding-left: var(--bi-scale-0-25x);
38
- }
39
-
40
- .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 {
41
- padding-left: var(--bi-scale-0-25x);
30
+ padding-inline-end: var(--bi-scale-0-25x);
42
31
  }
package/dist/components/link.css CHANGED
@@ -8,19 +8,13 @@
8
8
  --bic-link-focus-shadow-color: var(--bi-basic-white);
9
9
  --bic-link-focus-outline-color: var(--bi-primary-50);
10
10
  color: var(--bic-link-color);
11
- -webkit-text-decoration-line: underline;
12
11
  text-decoration-line: underline;
13
- -webkit-text-decoration-style: solid;
14
12
  text-decoration-style: solid;
15
13
  text-decoration-thickness: var(--bic-link-text-decoration-thickness);
16
14
  text-underline-offset: .25em;
17
15
  outline: none;
18
16
  }
19
17
 
20
- .bi-link :-webkit-any(img, svg) {
21
- vertical-align: middle;
22
- }
23
-
24
18
  .bi-link :is(img, svg) {
25
19
  vertical-align: middle;
26
20
  }
package/dist/components/logo.css CHANGED
@@ -33,7 +33,7 @@
33
33
  --bic-logo-height: var(--bi-scale-48x);
34
34
  }
35
35
 
36
- @media (min-width: 795px) {
36
+ @media (width >= 795px) {
37
37
  .bi-logo[data-dark="true"][data-international="true"][data-vertical="true"] {
38
38
  aspect-ratio: .974318;
39
39
  background-image: url("./assets/logos/international-vertical-dark.svg");
@@ -49,7 +49,7 @@
49
49
  background-image: url("./assets/logos/dark.svg");
50
50
  }
51
51
 
52
- @media (min-width: 795px) {
52
+ @media (width >= 795px) {
53
53
  .bi-logo:not([data-dark="true"])[data-international="true"][data-vertical="true"] {
54
54
  aspect-ratio: .974318;
55
55
  background-image: url("./assets/logos/international-vertical.svg");
package/dist/components/navbar.css CHANGED
@@ -24,7 +24,7 @@
24
24
  display: flex;
25
25
  }
26
26
 
27
- @media not (min-width: 768px) {
27
+ @media (width < 768px) {
28
28
  .bi-navbar > header {
29
29
  padding: 0 var(--bi-scale-4x);
30
30
  }
package/dist/components/pagination.css CHANGED
@@ -9,40 +9,11 @@
9
9
  --bic-pagination-selected-background: var(--bi-primary-80);
10
10
  }
11
11
 
12
- .bi-pagination :-webkit-any(ol, ul) {
13
- color: var(--bic-pagination-color);
14
- gap: var(--bic-pagination-gap);
15
- flex-wrap: wrap;
16
- align-items: center;
17
- width: -webkit-fit-content;
18
- width: fit-content;
19
- margin: 0;
20
- padding: 0;
21
- list-style: none;
22
- display: flex;
23
- }
24
-
25
- .bi-pagination :-webkit-any(ol, ul) > li:empty:before {
26
- content: "...";
27
- min-width: var(--bi-scale-11x);
28
- text-align: center;
29
- display: block;
30
- }
31
-
32
- .bi-pagination :-webkit-any(ol, ul) > li > .bi-button {
33
- --bic-button-font-size: 1rem;
34
- }
35
-
36
- .bi-pagination :-webkit-any(ol, ul) > li > .bi-button[aria-current="page"] {
37
- background-color: var(--bic-pagination-selected-background);
38
- }
39
-
40
12
  .bi-pagination :is(ol, ul) {
41
13
  color: var(--bic-pagination-color);
42
14
  gap: var(--bic-pagination-gap);
43
15
  flex-wrap: wrap;
44
16
  align-items: center;
45
- width: -webkit-fit-content;
46
17
  width: fit-content;
47
18
  margin: 0;
48
19
  padding: 0;
package/dist/components/popover.css CHANGED
@@ -8,14 +8,16 @@
8
8
  --bic-popover-border-radius: var(--bi-radius-medium);
9
9
  --bic-popover-max-width: 300px;
10
10
  --bic-popover-padding: var(--bi-scale-1x);
11
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
11
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
12
+ 0px 2px 2px -1px #26333f0a;
12
13
  }
13
14
 
14
15
  .bi-popover[data-dark="true"] {
15
16
  --bic-popover-background: var(--bi-neutral-95);
16
17
  --bic-popover-border-color: var(--bi-neutral-70);
17
18
  --bic-popover-color: var(--bi-neutral-5);
18
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
19
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
20
+ 0px 2px 2px -1px #26333f0a;
19
21
  }
20
22
 
21
23
  .bi-popover {
@@ -32,10 +34,7 @@
32
34
  z-index: 100000;
33
35
  display: none;
34
36
  position: fixed;
35
- top: 0;
36
- bottom: auto;
37
- left: 0;
38
- right: auto;
37
+ inset: 0 auto auto 0;
39
38
  overflow: visible;
40
39
  }
41
40
 
package/dist/components/search.css CHANGED
@@ -6,10 +6,6 @@
6
6
  --bic-field-padding-inline: 0;
7
7
  }
8
8
 
9
- .bi-search:has(.bi-input:-webkit-any(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
10
- display: none;
11
- }
12
-
13
9
  .bi-search:has(.bi-input:is(:read-only, :disabled, [aria-disabled="true"]), .bi-input:placeholder-shown) button[type="reset"] {
14
10
  display: none;
15
11
  }
package/dist/components/spinner.css CHANGED
@@ -1,11 +1,13 @@
1
1
  .bi-spinner {
2
2
  --bic-spinner-color: currentColor;
3
3
  aspect-ratio: 1;
4
- background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
4
+ background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top/4px 4px no-repeat,
5
+ conic-gradient(#0000 30%, var(--bic-spinner-color));
5
6
  border-radius: 50%;
6
7
  width: 1em;
7
8
  height: 1em;
8
9
  animation: 1s linear infinite bi-spinner;
10
+ display: inline-block;
9
11
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
10
12
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
11
13
  }
package/dist/components/sticky-header.css CHANGED
@@ -1,6 +1,5 @@
1
1
  .bi-sticky-header {
2
2
  z-index: 100;
3
- position: -webkit-sticky;
4
3
  position: sticky;
5
4
  }
6
5
 
package/dist/components/tabs.css CHANGED
@@ -30,7 +30,6 @@
30
30
  overflow-y: auto;
31
31
  overflow-x: unset;
32
32
  flex-direction: column;
33
- width: -webkit-fit-content;
34
33
  width: fit-content;
35
34
  }
36
35
 
package/dist/components/validation-message.css CHANGED
@@ -15,16 +15,8 @@
15
15
  position: relative;
16
16
  }
17
17
 
18
- .bi-validation-message:has( > svg):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)) {
19
- padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
20
- }
21
-
22
- .bi-validation-message:has( > svg):-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)) {
23
- padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
24
- }
25
-
26
- .bi-validation-message:has( > svg):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)) {
27
- padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
18
+ .bi-validation-message:has( > svg) {
19
+ padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
28
20
  }
29
21
 
30
22
  .bi-validation-message > svg {