@bi-digital/css 0.11.10 → 0.11.11

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 (35) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +109 -111
  3. package/dist/components/avatar.css +45 -47
  4. package/dist/components/badge.css +88 -88
  5. package/dist/components/button.css +117 -117
  6. package/dist/components/card.css +268 -282
  7. package/dist/components/checkbox-subsection.css +15 -15
  8. package/dist/components/chip.css +146 -146
  9. package/dist/components/details.css +88 -92
  10. package/dist/components/dialog.css +99 -97
  11. package/dist/components/dropdown.css +23 -25
  12. package/dist/components/field.css +204 -202
  13. package/dist/components/fieldset.css +20 -22
  14. package/dist/components/filter-group.css +80 -80
  15. package/dist/components/footer.css +110 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +184 -186
  18. package/dist/components/label.css +17 -17
  19. package/dist/components/link.css +47 -47
  20. package/dist/components/logo.css +32 -34
  21. package/dist/components/navbar.css +46 -50
  22. package/dist/components/pagination.css +29 -27
  23. package/dist/components/popover.css +40 -40
  24. package/dist/components/search.css +12 -8
  25. package/dist/components/skip-link.css +8 -10
  26. package/dist/components/spinner.css +22 -25
  27. package/dist/components/sticky-header.css +1 -3
  28. package/dist/components/sub-navbar.css +23 -25
  29. package/dist/components/tabs.css +109 -113
  30. package/dist/components/tooltip.css +30 -30
  31. package/dist/components/validation-message.css +9 -9
  32. package/dist/components.css +1996 -2037
  33. package/dist/index.css +4 -2
  34. package/dist/salesforce.css +1996 -2037
  35. package/package.json +2 -2
package/dist/components/tabs.css CHANGED
@@ -7,126 +7,122 @@
7
7
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
8
8
  --bic-tabs-focus-shadow-color: var(--bi-basic-white);
9
9
  --bic-tabs-focus-outline-color: var(--bi-primary-50);
10
- }
11
10
 
12
- .bi-tabs[data-dark="true"] {
13
- --bic-tabs-tab-color: var(--bi-neutral-5);
14
- --bic-tabs-tab-color-selected: var(--bi-primary-30);
15
- --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
16
- --bic-tabs-tab-background-press: var(--bi-states-press-light);
17
- --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
18
- --bic-tabs-focus-outline-color: var(--bi-primary-30);
19
- }
11
+ &[data-dark="true"] {
12
+ --bic-tabs-tab-color: var(--bi-neutral-5);
13
+ --bic-tabs-tab-color-selected: var(--bi-primary-30);
14
+ --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
15
+ --bic-tabs-tab-background-press: var(--bi-states-press-light);
16
+ --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
17
+ --bic-tabs-focus-outline-color: var(--bi-primary-30);
18
+ }
20
19
 
21
- .bi-tabs {
22
20
  flex-direction: column;
23
21
  display: flex;
24
22
  overflow: hidden;
25
- }
26
-
27
- .bi-tabs :is([role="tablist"], ds-tablist, nav) {
28
- scrollbar-width: none;
29
- flex-direction: row;
30
- flex-shrink: 0;
31
- position: relative;
32
- overflow-x: auto;
33
- }
34
-
35
- .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
36
- display: flex;
37
- }
38
-
39
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
40
- font: var(--bic-tabs-tab-font);
41
- border-radius: var(--bi-radius-medium);
42
- box-sizing: border-box;
43
- color: var(--bic-tabs-tab-color);
44
- cursor: pointer;
45
- align-items: center;
46
- gap: var(--bi-scale-1x);
47
- padding: .625rem var(--bi-scale-6x);
48
- text-align: center;
49
- white-space: nowrap;
50
- background: none;
51
- border: 0;
52
- flex-direction: row;
53
- justify-content: center;
54
- margin: 0;
55
- line-height: 1.5;
56
- text-decoration: none;
57
- transition: color .2s ease-in-out;
58
- position: relative;
59
- }
60
-
61
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
62
- display: flex;
63
- }
64
-
65
- @media (hover: hover) and (pointer: fine) {
66
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
67
- background: var(--bic-tabs-tab-background-hover);
68
- }
69
- }
70
23
 
71
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
72
- background: var(--bic-tabs-tab-background-press);
73
- }
74
-
75
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
76
- border-bottom-right-radius: 0;
77
- border-bottom-left-radius: 0;
78
- }
79
-
80
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
81
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
82
- outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
83
- outline-offset: var(--_bi--focus, -3px);
84
- }
85
-
86
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
87
- bottom: 3px;
88
- }
89
-
90
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
91
- font-size: var(--bi-icon-medium);
92
- flex-shrink: 0;
93
- }
94
-
95
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
96
- background: var(--bic-tabs-tab-color-selected);
97
- content: "";
98
- border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
99
- width: 0;
100
- height: 3px;
101
- transition: width .2s ease-in-out;
102
- display: block;
103
- position: absolute;
104
- bottom: 0;
105
- left: 50%;
106
- transform: translateX(-50%);
107
- }
108
-
109
- @media (prefers-reduced-motion: reduce) {
110
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
111
- transition: none;
24
+ & :is([role="tablist"], ds-tablist, nav) {
25
+ scrollbar-width: none;
26
+ flex-direction: row;
27
+ flex-shrink: 0;
28
+ position: relative;
29
+ overflow-x: auto;
30
+
31
+ &:not([hidden]) {
32
+ display: flex;
33
+ }
34
+
35
+ & > :is([role="tab"], ds-tab, a) {
36
+ font: var(--bic-tabs-tab-font);
37
+ border-radius: var(--bi-radius-medium);
38
+ box-sizing: border-box;
39
+ color: var(--bic-tabs-tab-color);
40
+ cursor: pointer;
41
+ align-items: center;
42
+ gap: var(--bi-scale-1x);
43
+ padding: .625rem var(--bi-scale-6x);
44
+ text-align: center;
45
+ white-space: nowrap;
46
+ background: none;
47
+ border: 0;
48
+ flex-direction: row;
49
+ justify-content: center;
50
+ margin: 0;
51
+ line-height: 1.5;
52
+ text-decoration: none;
53
+ transition: color .2s ease-in-out;
54
+ position: relative;
55
+
56
+ &:not([hidden]) {
57
+ display: flex;
58
+ }
59
+
60
+ @media (hover: hover) and (pointer: fine) {
61
+ &:hover {
62
+ background: var(--bic-tabs-tab-background-hover);
63
+ }
64
+ }
65
+
66
+ &:active {
67
+ background: var(--bic-tabs-tab-background-press);
68
+ }
69
+
70
+ &:not(:focus-visible) {
71
+ border-bottom-right-radius: 0;
72
+ border-bottom-left-radius: 0;
73
+ }
74
+
75
+ &:focus-visible {
76
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
77
+ outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
78
+ outline-offset: var(--_bi--focus, -3px);
79
+
80
+ &:after {
81
+ bottom: 3px;
82
+ }
83
+ }
84
+
85
+ & :where(img, svg) {
86
+ font-size: var(--bi-icon-medium);
87
+ flex-shrink: 0;
88
+ }
89
+
90
+ &:after {
91
+ background: var(--bic-tabs-tab-color-selected);
92
+ content: "";
93
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
94
+ width: 0;
95
+ height: 3px;
96
+ transition: width .2s ease-in-out;
97
+ display: block;
98
+ position: absolute;
99
+ bottom: 0;
100
+ left: 50%;
101
+ transform: translateX(-50%);
102
+ }
103
+
104
+ @media (prefers-reduced-motion: reduce) {
105
+ transition: none;
106
+
107
+ &:after {
108
+ transition: none;
109
+ }
110
+ }
111
+
112
+ &[aria-selected="true"], &[aria-current="page"] {
113
+ color: var(--bic-tabs-tab-color-selected);
114
+
115
+ &:after {
116
+ width: calc(100% - var(--bi-scale-6x));
117
+ }
118
+ }
119
+ }
112
120
  }
113
121
 
114
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
115
- transition: none;
122
+ & :is([role="tabpanel"], ds-tabpanel) {
123
+ padding: var(--bic-tabs-panel-padding);
124
+ color: var(--bic-tabs-tab-color);
125
+ outline: none;
126
+ flex-grow: 1;
116
127
  }
117
128
  }
118
-
119
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
120
- color: var(--bic-tabs-tab-color-selected);
121
- }
122
-
123
- :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
124
- width: calc(100% - var(--bi-scale-6x));
125
- }
126
-
127
- .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
128
- padding: var(--bic-tabs-panel-padding);
129
- color: var(--bic-tabs-tab-color);
130
- outline: none;
131
- flex-grow: 1;
132
- }
package/dist/components/tooltip.css CHANGED
@@ -18,42 +18,42 @@
18
18
  position: absolute;
19
19
  inset: 0 auto auto 0;
20
20
  overflow: visible;
21
- }
22
21
 
23
- .bi-tooltip:after {
24
- content: "";
25
- box-sizing: border-box;
26
- width: 0;
27
- height: 0;
28
- position: absolute;
29
- top: 100%;
30
- left: 50%;
31
- }
22
+ &:after {
23
+ content: "";
24
+ box-sizing: border-box;
25
+ width: 0;
26
+ height: 0;
27
+ position: absolute;
28
+ top: 100%;
29
+ left: 50%;
30
+ }
32
31
 
33
- .bi-tooltip[data-floating="top"]:after, .bi-tooltip[data-floating="bottom"]:after {
34
- width: 100%;
35
- height: var(--bic-tooltip-shift-size);
36
- top: 100%;
37
- left: 0;
38
- }
32
+ &[data-floating="top"]:after, &[data-floating="bottom"]:after {
33
+ width: 100%;
34
+ height: var(--bic-tooltip-shift-size);
35
+ top: 100%;
36
+ left: 0;
37
+ }
39
38
 
40
- .bi-tooltip[data-floating="left"]:after, .bi-tooltip[data-floating="right"]:after {
41
- width: var(--bic-tooltip-shift-size);
42
- height: 100%;
43
- top: 0;
44
- left: 100%;
45
- }
39
+ &[data-floating="left"]:after, &[data-floating="right"]:after {
40
+ width: var(--bic-tooltip-shift-size);
41
+ height: 100%;
42
+ top: 0;
43
+ left: 100%;
44
+ }
46
45
 
47
- .bi-tooltip[data-floating="bottom"]:after {
48
- top: calc(var(--bic-tooltip-shift-size) * -1);
49
- }
46
+ &[data-floating="bottom"]:after {
47
+ top: calc(var(--bic-tooltip-shift-size) * -1);
48
+ }
50
49
 
51
- .bi-tooltip[data-floating="right"]:after {
52
- left: calc(var(--bic-tooltip-shift-size) * -1);
53
- }
50
+ &[data-floating="right"]:after {
51
+ left: calc(var(--bic-tooltip-shift-size) * -1);
52
+ }
54
53
 
55
- .bi-tooltip:not([popover]) {
56
- display: none;
54
+ &:not([popover]) {
55
+ display: none;
56
+ }
57
57
  }
58
58
 
59
59
  @keyframes bi-tooltip-fade-in {
package/dist/components/validation-message.css CHANGED
@@ -10,15 +10,15 @@
10
10
  font: var(--bi-font-label-medium);
11
11
  margin: 0;
12
12
  position: relative;
13
- }
14
13
 
15
- .bi-validation-message:has( > svg) {
16
- padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
17
- }
14
+ &:has( > svg) {
15
+ padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
16
+ }
18
17
 
19
- .bi-validation-message > svg {
20
- font-size: var(--bic-validation-message-icon-size);
21
- top: var(--bic-validation-message-padding);
22
- left: var(--bic-validation-message-padding);
23
- position: absolute;
18
+ & > svg {
19
+ font-size: var(--bic-validation-message-icon-size);
20
+ top: var(--bic-validation-message-padding);
21
+ left: var(--bic-validation-message-padding);
22
+ position: absolute;
23
+ }
24
24
  }