@oslokommune/punkt-css 11.12.1 → 11.12.8

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 (18) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/dist/css/components/calendar.css +72 -27
  3. package/dist/css/components/calendar.min.css +1 -1
  4. package/dist/css/components/icon.css +5 -5
  5. package/dist/css/components/icon.min.css +1 -1
  6. package/dist/css/components/tabs.css +2 -2
  7. package/dist/css/components/tabs.min.css +1 -1
  8. package/dist/css/pkt-components.css +79 -34
  9. package/dist/css/pkt-components.min.css +1 -1
  10. package/dist/css/pkt-elements.css +102 -39
  11. package/dist/css/pkt-elements.min.css +1 -1
  12. package/dist/css/pkt.css +181 -74
  13. package/dist/css/pkt.min.css +1 -1
  14. package/dist/scss/components/_calendar.scss +2 -1
  15. package/dist/scss/components/_icon.scss +1 -1
  16. package/dist/scss/components/_tabs.scss +1 -1
  17. package/dist/scss/elements/_table.scss +133 -51
  18. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,61 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [11.13.0](https://github.com/oslokommune/punkt/compare/11.12.7...11.13.0) (2024-05-14)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * add table in html and css. - When there are spans in the td, and we use "display:contents" to show label on the left side of the data value, it looks weird in safari.
18
+
19
+
20
+ * fix(css): tuller litt med rebasing. legg ved css
21
+
22
+ * fix(css,react): add roles disappearsing in mobile
23
+
24
+ * fix(react): update tests
25
+
26
+ - remove snapshot tests as they no longer serve us well
27
+ - Updating tests
28
+
29
+ * fix(html): fix border-bottom issue
30
+
31
+ * fix(all): changes from feedback
32
+
33
+ - flexibility to only set "pkt-table" class and still get all the styling
34
+ - increase readibility in css
35
+ - optionale responsive view
36
+
37
+ * Feature table vue 🎑 (#1671)
38
+
39
+
40
+ ### Chores
41
+ Ingen
42
+
43
+ ---
44
+
45
+
46
+ ## [11.12.3](https://github.com/oslokommune/punkt/compare/11.12.2...11.12.3) (2024-05-07)
47
+
48
+ ### ⚠ BREAKING CHANGES
49
+ Ingen
50
+
51
+ ### Features
52
+ Ingen
53
+
54
+ ### Bug Fixes
55
+ Ingen
56
+
57
+ ### Chores
58
+ Ingen
59
+
60
+ ---
61
+
62
+
8
63
  ## [11.12.1](https://github.com/oslokommune/punkt/compare/11.12.0...11.12.1) (2024-05-06)
9
64
 
10
65
  ### ⚠ BREAKING CHANGES
package/dist/css/components/calendar.css CHANGED
@@ -1,32 +1,42 @@
1
- .pkt-calendar {
1
+ .pkt-calendar,
2
+ pkt-el-calendar {
2
3
  max-width: 25rem;
3
4
  }
4
- .pkt-calendar .pkt-cal-month-nav {
5
+ .pkt-calendar .pkt-cal-month-nav,
6
+ pkt-el-calendar .pkt-cal-month-nav {
5
7
  display: flex;
6
8
  justify-content: space-between;
7
9
  align-items: center;
8
10
  margin-bottom: 1rem;
9
11
  }
10
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
12
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,
13
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
11
14
  display: flex;
12
15
  gap: 0.5rem;
13
16
  }
14
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
17
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,
18
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
15
19
  font-size: 1rem;
16
20
  font-weight: 500;
17
21
  letter-spacing: -0.2px;
18
22
  line-height: 1.5rem;
19
23
  }
20
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
24
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),
25
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
21
26
  text-align: right;
22
27
  }
23
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
28
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year,
29
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
24
30
  max-width: 4.5rem;
25
31
  }
26
32
  .pkt-calendar .pkt-cal-month-nav .pkt-btn,
27
33
  .pkt-calendar .pkt-cal-month-nav li,
28
34
  .pkt-calendar .pkt-cal-days .pkt-btn,
29
- .pkt-calendar .pkt-cal-days li {
35
+ .pkt-calendar .pkt-cal-days li,
36
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn,
37
+ pkt-el-calendar .pkt-cal-month-nav li,
38
+ pkt-el-calendar .pkt-cal-days .pkt-btn,
39
+ pkt-el-calendar .pkt-cal-days li {
30
40
  font: inherit;
31
41
  aspect-ratio: 1/1;
32
42
  display: flex;
@@ -34,24 +44,33 @@
34
44
  align-items: center;
35
45
  }
36
46
  .pkt-calendar .pkt-cal-month-nav .pkt-btn,
37
- .pkt-calendar .pkt-cal-days .pkt-btn {
47
+ .pkt-calendar .pkt-cal-days .pkt-btn,
48
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn,
49
+ pkt-el-calendar .pkt-cal-days .pkt-btn {
38
50
  margin: 1px;
39
51
  z-index: 1;
40
52
  border-radius: 50%;
41
53
  }
42
54
  .pkt-calendar .pkt-cal-month-nav .pkt-btn:focus, .pkt-calendar .pkt-cal-month-nav .pkt-btn:active,
43
55
  .pkt-calendar .pkt-cal-days .pkt-btn:focus,
44
- .pkt-calendar .pkt-cal-days .pkt-btn:active {
56
+ .pkt-calendar .pkt-cal-days .pkt-btn:active,
57
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn:focus,
58
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn:active,
59
+ pkt-el-calendar .pkt-cal-days .pkt-btn:focus,
60
+ pkt-el-calendar .pkt-cal-days .pkt-btn:active {
45
61
  outline: 0;
46
62
  border: 0;
47
63
  }
48
64
  .pkt-calendar .pkt-cal-month-nav .pkt-btn:disabled,
49
- .pkt-calendar .pkt-cal-days .pkt-btn:disabled {
65
+ .pkt-calendar .pkt-cal-days .pkt-btn:disabled,
66
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn:disabled,
67
+ pkt-el-calendar .pkt-cal-days .pkt-btn:disabled {
50
68
  background-color: transparent;
51
69
  border: 0;
52
70
  cursor: not-allowed;
53
71
  }
54
- .pkt-calendar .pkt-cal-days {
72
+ .pkt-calendar .pkt-cal-days,
73
+ pkt-el-calendar .pkt-cal-days {
55
74
  list-style: none;
56
75
  display: grid;
57
76
  grid-template-columns: repeat(7, 14.285%);
@@ -60,7 +79,8 @@
60
79
  justify-content: center;
61
80
  align-items: center;
62
81
  }
63
- .pkt-calendar .pkt-cal-days > li {
82
+ .pkt-calendar .pkt-cal-days > li,
83
+ pkt-el-calendar .pkt-cal-days > li {
64
84
  aspect-ratio: 1/1;
65
85
  justify-content: center;
66
86
  align-items: center;
@@ -68,7 +88,9 @@
68
88
  text-align: center;
69
89
  z-index: 1;
70
90
  }
71
- .pkt-calendar .pkt-cal-days > li:before, .pkt-calendar .pkt-cal-days > li:after {
91
+ .pkt-calendar .pkt-cal-days > li:before, .pkt-calendar .pkt-cal-days > li:after,
92
+ pkt-el-calendar .pkt-cal-days > li:before,
93
+ pkt-el-calendar .pkt-cal-days > li:after {
72
94
  content: "";
73
95
  display: block;
74
96
  position: absolute;
@@ -76,54 +98,77 @@
76
98
  bottom: 0;
77
99
  z-index: 0;
78
100
  }
79
- .pkt-calendar .pkt-cal-days > li:before {
101
+ .pkt-calendar .pkt-cal-days > li:before,
102
+ pkt-el-calendar .pkt-cal-days > li:before {
80
103
  left: 0;
81
104
  right: 50%;
82
105
  }
83
- .pkt-calendar .pkt-cal-days > li:after {
106
+ .pkt-calendar .pkt-cal-days > li:after,
107
+ pkt-el-calendar .pkt-cal-days > li:after {
84
108
  left: 50%;
85
109
  right: 0;
86
110
  }
87
- .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names, .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days {
111
+ .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names, .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,
112
+ pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,
113
+ pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-days {
88
114
  grid-template-columns: repeat(8, 12.5%);
89
115
  }
90
- .pkt-calendar .pkt-cal-other {
116
+ .pkt-calendar .pkt-cal-other,
117
+ pkt-el-calendar .pkt-cal-other {
91
118
  color: var(--pkt-color-grays-gray-200);
92
119
  }
93
- .pkt-calendar .pkt-cal-other .pkt-btn {
120
+ .pkt-calendar .pkt-cal-other .pkt-btn,
121
+ pkt-el-calendar .pkt-cal-other .pkt-btn {
94
122
  color: inherit;
95
123
  background: transparent;
96
124
  border: none;
97
125
  }
98
- .pkt-calendar .pkt-cal-today .pkt-btn {
126
+ .pkt-calendar .pkt-cal-today .pkt-btn,
127
+ pkt-el-calendar .pkt-cal-today .pkt-btn {
99
128
  z-index: 2;
100
129
  text-decoration: underline;
101
130
  outline: 1px solid var(--pkt-color-border-default);
102
131
  }
103
132
  .pkt-calendar .pkt-cal-selected .pkt-btn,
104
- .pkt-calendar .pkt-cal-selected .pkt-btn:focus {
133
+ .pkt-calendar .pkt-cal-selected .pkt-btn:focus,
134
+ pkt-el-calendar .pkt-cal-selected .pkt-btn,
135
+ pkt-el-calendar .pkt-cal-selected .pkt-btn:focus {
105
136
  background-color: var(--pkt-color-surface-strong-blue);
106
137
  }
107
138
  .pkt-calendar .pkt-cal-selected .pkt-btn:hover,
108
- .pkt-calendar .pkt-cal-selected .pkt-btn:focus:hover {
139
+ .pkt-calendar .pkt-cal-selected .pkt-btn:focus:hover,
140
+ pkt-el-calendar .pkt-cal-selected .pkt-btn:hover,
141
+ pkt-el-calendar .pkt-cal-selected .pkt-btn:focus:hover {
109
142
  border-color: var(--pkt-color-surface-strong-blue);
110
143
  }
111
- .pkt-calendar .pkt-cal-in-range:before, .pkt-calendar .pkt-cal-in-range:after, .pkt-calendar .pkt-cal-in-range-first:after, .pkt-calendar .pkt-cal-in-range-last:before {
144
+ .pkt-calendar .pkt-cal-in-range:before, .pkt-calendar .pkt-cal-in-range:after, .pkt-calendar .pkt-cal-in-range-first:after, .pkt-calendar .pkt-cal-in-range-last:before,
145
+ pkt-el-calendar .pkt-cal-in-range:before,
146
+ pkt-el-calendar .pkt-cal-in-range:after,
147
+ pkt-el-calendar .pkt-cal-in-range-first:after,
148
+ pkt-el-calendar .pkt-cal-in-range-last:before {
112
149
  background-color: var(--pkt-color-surface-default-light-blue);
113
150
  }
114
- .pkt-calendar .pkt-cal-in-range-first:before, .pkt-calendar .pkt-cal-in-range-last:after {
151
+ .pkt-calendar .pkt-cal-in-range-first:before, .pkt-calendar .pkt-cal-in-range-last:after,
152
+ pkt-el-calendar .pkt-cal-in-range-first:before,
153
+ pkt-el-calendar .pkt-cal-in-range-last:after {
115
154
  background-color: transparent;
116
155
  }
117
156
  .pkt-calendar .pkt-cal-range-hover:before,
118
- .pkt-calendar .pkt-cal-range-hover .pkt-btn {
157
+ .pkt-calendar .pkt-cal-range-hover .pkt-btn,
158
+ pkt-el-calendar .pkt-cal-range-hover:before,
159
+ pkt-el-calendar .pkt-cal-range-hover .pkt-btn {
119
160
  background-color: var(--pkt-color-surface-default-light-blue);
120
161
  }
121
- .pkt-calendar .pkt-cal-range-hover .pkt-btn {
162
+ .pkt-calendar .pkt-cal-range-hover .pkt-btn,
163
+ pkt-el-calendar .pkt-cal-range-hover .pkt-btn {
122
164
  border-color: var(--pkt-color-surface-default-light-blue);
123
165
  }
124
- .pkt-calendar .pkt-cal-excluded {
166
+ .pkt-calendar .pkt-cal-excluded,
167
+ pkt-el-calendar .pkt-cal-excluded {
125
168
  background-color: var(--pkt-color-brand-neutrals-100);
126
169
  }
127
- .pkt-calendar .pkt-cal-excluded:before, .pkt-calendar .pkt-cal-excluded:after {
170
+ .pkt-calendar .pkt-cal-excluded:before, .pkt-calendar .pkt-cal-excluded:after,
171
+ pkt-el-calendar .pkt-cal-excluded:before,
172
+ pkt-el-calendar .pkt-cal-excluded:after {
128
173
  background-color: transparent;
129
174
  }
package/dist/css/components/calendar.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-calendar{max-width:25rem}.pkt-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{font-size:1rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav li,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days li{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn{margin:1px;z-index:1;border-radius:50%}.pkt-calendar .pkt-cal-month-nav .pkt-btn:focus,.pkt-calendar .pkt-cal-month-nav .pkt-btn:active,.pkt-calendar .pkt-cal-days .pkt-btn:focus,.pkt-calendar .pkt-cal-days .pkt-btn:active{outline:0;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn:disabled,.pkt-calendar .pkt-cal-days .pkt-btn:disabled{background-color:rgba(0,0,0,0);border:0;cursor:not-allowed}.pkt-calendar .pkt-cal-days{list-style:none;display:grid;grid-template-columns:repeat(7, 14.285%);margin:0;padding-left:0;justify-content:center;align-items:center}.pkt-calendar .pkt-cal-days>li{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center;z-index:1}.pkt-calendar .pkt-cal-days>li:before,.pkt-calendar .pkt-cal-days>li:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:0}.pkt-calendar .pkt-cal-days>li:before{left:0;right:50%}.pkt-calendar .pkt-cal-days>li:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other{color:var(--pkt-color-grays-gray-200)}.pkt-calendar .pkt-cal-other .pkt-btn{color:inherit;background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn{z-index:2;text-decoration:underline;outline:1px solid var(--pkt-color-border-default)}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus{background-color:var(--pkt-color-surface-strong-blue)}.pkt-calendar .pkt-cal-selected .pkt-btn:hover,.pkt-calendar .pkt-cal-selected .pkt-btn:focus:hover{border-color:var(--pkt-color-surface-strong-blue)}.pkt-calendar .pkt-cal-in-range:before,.pkt-calendar .pkt-cal-in-range:after,.pkt-calendar .pkt-cal-in-range-first:after,.pkt-calendar .pkt-cal-in-range-last:before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first:before,.pkt-calendar .pkt-cal-in-range-last:after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover:before,.pkt-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded:before,.pkt-calendar .pkt-cal-excluded:after{background-color:rgba(0,0,0,0)}
1
+ .pkt-calendar,pkt-el-calendar{max-width:25rem}.pkt-calendar .pkt-cal-month-nav,pkt-el-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{font-size:1rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year,pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav li,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days li,pkt-el-calendar .pkt-cal-month-nav .pkt-btn,pkt-el-calendar .pkt-cal-month-nav li,pkt-el-calendar .pkt-cal-days .pkt-btn,pkt-el-calendar .pkt-cal-days li{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-el-calendar .pkt-cal-month-nav .pkt-btn,pkt-el-calendar .pkt-cal-days .pkt-btn{margin:1px;z-index:1;border-radius:50%}.pkt-calendar .pkt-cal-month-nav .pkt-btn:focus,.pkt-calendar .pkt-cal-month-nav .pkt-btn:active,.pkt-calendar .pkt-cal-days .pkt-btn:focus,.pkt-calendar .pkt-cal-days .pkt-btn:active,pkt-el-calendar .pkt-cal-month-nav .pkt-btn:focus,pkt-el-calendar .pkt-cal-month-nav .pkt-btn:active,pkt-el-calendar .pkt-cal-days .pkt-btn:focus,pkt-el-calendar .pkt-cal-days .pkt-btn:active{outline:0;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn:disabled,.pkt-calendar .pkt-cal-days .pkt-btn:disabled,pkt-el-calendar .pkt-cal-month-nav .pkt-btn:disabled,pkt-el-calendar .pkt-cal-days .pkt-btn:disabled{background-color:rgba(0,0,0,0);border:0;cursor:not-allowed}.pkt-calendar .pkt-cal-days,pkt-el-calendar .pkt-cal-days{list-style:none;display:grid;grid-template-columns:repeat(7, 14.285%);margin:0;padding-left:0;justify-content:center;align-items:center}.pkt-calendar .pkt-cal-days>li,pkt-el-calendar .pkt-cal-days>li{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center;z-index:1}.pkt-calendar .pkt-cal-days>li:before,.pkt-calendar .pkt-cal-days>li:after,pkt-el-calendar .pkt-cal-days>li:before,pkt-el-calendar .pkt-cal-days>li:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:0}.pkt-calendar .pkt-cal-days>li:before,pkt-el-calendar .pkt-cal-days>li:before{left:0;right:50%}.pkt-calendar .pkt-cal-days>li:after,pkt-el-calendar .pkt-cal-days>li:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other,pkt-el-calendar .pkt-cal-other{color:var(--pkt-color-grays-gray-200)}.pkt-calendar .pkt-cal-other .pkt-btn,pkt-el-calendar .pkt-cal-other .pkt-btn{color:inherit;background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-el-calendar .pkt-cal-today .pkt-btn{z-index:2;text-decoration:underline;outline:1px solid var(--pkt-color-border-default)}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-el-calendar .pkt-cal-selected .pkt-btn,pkt-el-calendar .pkt-cal-selected .pkt-btn:focus{background-color:var(--pkt-color-surface-strong-blue)}.pkt-calendar .pkt-cal-selected .pkt-btn:hover,.pkt-calendar .pkt-cal-selected .pkt-btn:focus:hover,pkt-el-calendar .pkt-cal-selected .pkt-btn:hover,pkt-el-calendar .pkt-cal-selected .pkt-btn:focus:hover{border-color:var(--pkt-color-surface-strong-blue)}.pkt-calendar .pkt-cal-in-range:before,.pkt-calendar .pkt-cal-in-range:after,.pkt-calendar .pkt-cal-in-range-first:after,.pkt-calendar .pkt-cal-in-range-last:before,pkt-el-calendar .pkt-cal-in-range:before,pkt-el-calendar .pkt-cal-in-range:after,pkt-el-calendar .pkt-cal-in-range-first:after,pkt-el-calendar .pkt-cal-in-range-last:before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first:before,.pkt-calendar .pkt-cal-in-range-last:after,pkt-el-calendar .pkt-cal-in-range-first:before,pkt-el-calendar .pkt-cal-in-range-last:after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover:before,.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-el-calendar .pkt-cal-range-hover:before,pkt-el-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-el-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,pkt-el-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded:before,.pkt-calendar .pkt-cal-excluded:after,pkt-el-calendar .pkt-cal-excluded:before,pkt-el-calendar .pkt-cal-excluded:after{background-color:rgba(0,0,0,0)}
package/dist/css/components/icon.css CHANGED
@@ -4,30 +4,30 @@
4
4
  * TODO: use SVG icons instead
5
5
  */
6
6
  .pkt-icon,
7
- pkt-icon {
7
+ pkt-el-icon {
8
8
  display: inline-flex;
9
9
  min-height: 1rem;
10
10
  min-width: 1rem;
11
11
  }
12
12
  .pkt-icon > svg,
13
- pkt-icon > svg {
13
+ pkt-el-icon > svg {
14
14
  min-height: 1rem;
15
15
  min-width: 1rem;
16
16
  max-height: 100%;
17
17
  max-width: 100%;
18
18
  }
19
19
  .pkt-icon--small,
20
- pkt-icon--small {
20
+ pkt-el-icon--small {
21
21
  height: 1rem;
22
22
  width: 1rem;
23
23
  }
24
24
  .pkt-icon--medium,
25
- pkt-icon--medium {
25
+ pkt-el-icon--medium {
26
26
  height: 1.5rem;
27
27
  width: 1.5rem;
28
28
  }
29
29
  .pkt-icon--large,
30
- pkt-icon--large {
30
+ pkt-el-icon--large {
31
31
  height: 4rem;
32
32
  width: 4rem;
33
33
  }
package/dist/css/components/icon.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-icon,pkt-icon{display:inline-flex;min-height:1rem;min-width:1rem}.pkt-icon>svg,pkt-icon>svg{min-height:1rem;min-width:1rem;max-height:100%;max-width:100%}.pkt-icon--small,pkt-icon--small{height:1rem;width:1rem}.pkt-icon--medium,pkt-icon--medium{height:1.5rem;width:1.5rem}.pkt-icon--large,pkt-icon--large{height:4rem;width:4rem}
1
+ .pkt-icon,pkt-el-icon{display:inline-flex;min-height:1rem;min-width:1rem}.pkt-icon>svg,pkt-el-icon>svg{min-height:1rem;min-width:1rem;max-height:100%;max-width:100%}.pkt-icon--small,pkt-el-icon--small{height:1rem;width:1rem}.pkt-icon--medium,pkt-el-icon--medium{height:1.5rem;width:1.5rem}.pkt-icon--large,pkt-el-icon--large{height:4rem;width:4rem}
package/dist/css/components/tabs.css CHANGED
@@ -37,8 +37,8 @@
37
37
  white-space: nowrap;
38
38
  }
39
39
  .pkt-tabs__link .pkt-icon,
40
- .pkt-tabs__link pkt-icon, .pkt-tabs__button .pkt-icon,
41
- .pkt-tabs__button pkt-icon {
40
+ .pkt-tabs__link pkt-el-icon, .pkt-tabs__button .pkt-icon,
41
+ .pkt-tabs__button pkt-el-icon {
42
42
  --fg-color: currentColor;
43
43
  }
44
44
  .pkt-tabs__link, .pkt-tabs__link:hover, .pkt-tabs__link:active, .pkt-tabs__button, .pkt-tabs__button:hover, .pkt-tabs__button:active {
package/dist/css/components/tabs.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-tabs{--pkt-tabs-bg: var(--pkt-color-background-default);background-color:var(--pkt-tabs-bg);position:relative;border-bottom:1px solid var(--pkt-color-border-gray)}.pkt-tabs__list{position:relative;width:auto;width:100%;overflow-x:auto;scrollbar-width:thin;padding:.25rem 4rem 0 .25rem;margin:0;display:flex;flex-wrap:nowrap;align-items:flex-start}.pkt-tabs__button{border:0;padding:0;background:none;border-radius:0}.pkt-tabs__link,.pkt-tabs__button{cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;color:var(--pkt-color-text-action-disabled);border-bottom:.25rem solid rgba(0,0,0,0);font-size:1rem;font-weight:400;letter-spacing:-0.2px;line-height:1.5rem;white-space:nowrap}.pkt-tabs__link .pkt-icon,.pkt-tabs__link pkt-icon,.pkt-tabs__button .pkt-icon,.pkt-tabs__button pkt-icon{--fg-color: currentColor}.pkt-tabs__link,.pkt-tabs__link:hover,.pkt-tabs__link:active,.pkt-tabs__button,.pkt-tabs__button:hover,.pkt-tabs__button:active{text-decoration:none}.pkt-tabs__link:focus:not(:active),.pkt-tabs__link:focus-visible:not(:active),.pkt-tabs__button:focus:not(:active),.pkt-tabs__button:focus-visible:not(:active){border:0;box-shadow:none;background-color:var(--pkt-color-surface-default-gray);outline:.25rem solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-tabs__link.active:focus,.pkt-tabs__link.active:focus-visible,.pkt-tabs__button.active:focus,.pkt-tabs__button.active:focus-visible{box-shadow:none;border-bottom:.25rem solid var(--pkt-color-border-blue)}.pkt-tabs__link:hover,.pkt-tabs__link:focus,.pkt-tabs__link:focus-visible,.pkt-tabs__link:focus-visible:is(:active),.pkt-tabs__link:focus:is(:active),.pkt-tabs__link:active,.pkt-tabs__button:hover,.pkt-tabs__button:focus,.pkt-tabs__button:focus-visible,.pkt-tabs__button:focus-visible:is(:active),.pkt-tabs__button:focus:is(:active),.pkt-tabs__button:active{outline:0;color:var(--pkt-color-text-action-active);border-bottom:.25rem solid var(--pkt-color-border-states-hover)}.pkt-tabs__link.active,.pkt-tabs__button.active{color:var(--pkt-color-text-action-normal);border-bottom:.25rem solid var(--pkt-color-border-blue);font-size:1rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5rem}.pkt-tabs:after{content:"";display:block;position:absolute;z-index:3;background:linear-gradient(90deg, transparent 0%, var(--pkt-tabs-bg) 100%);top:0;right:0;bottom:0;width:5rem;pointer-events:none}
1
+ .pkt-tabs{--pkt-tabs-bg: var(--pkt-color-background-default);background-color:var(--pkt-tabs-bg);position:relative;border-bottom:1px solid var(--pkt-color-border-gray)}.pkt-tabs__list{position:relative;width:auto;width:100%;overflow-x:auto;scrollbar-width:thin;padding:.25rem 4rem 0 .25rem;margin:0;display:flex;flex-wrap:nowrap;align-items:flex-start}.pkt-tabs__button{border:0;padding:0;background:none;border-radius:0}.pkt-tabs__link,.pkt-tabs__button{cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;color:var(--pkt-color-text-action-disabled);border-bottom:.25rem solid rgba(0,0,0,0);font-size:1rem;font-weight:400;letter-spacing:-0.2px;line-height:1.5rem;white-space:nowrap}.pkt-tabs__link .pkt-icon,.pkt-tabs__link pkt-el-icon,.pkt-tabs__button .pkt-icon,.pkt-tabs__button pkt-el-icon{--fg-color: currentColor}.pkt-tabs__link,.pkt-tabs__link:hover,.pkt-tabs__link:active,.pkt-tabs__button,.pkt-tabs__button:hover,.pkt-tabs__button:active{text-decoration:none}.pkt-tabs__link:focus:not(:active),.pkt-tabs__link:focus-visible:not(:active),.pkt-tabs__button:focus:not(:active),.pkt-tabs__button:focus-visible:not(:active){border:0;box-shadow:none;background-color:var(--pkt-color-surface-default-gray);outline:.25rem solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-tabs__link.active:focus,.pkt-tabs__link.active:focus-visible,.pkt-tabs__button.active:focus,.pkt-tabs__button.active:focus-visible{box-shadow:none;border-bottom:.25rem solid var(--pkt-color-border-blue)}.pkt-tabs__link:hover,.pkt-tabs__link:focus,.pkt-tabs__link:focus-visible,.pkt-tabs__link:focus-visible:is(:active),.pkt-tabs__link:focus:is(:active),.pkt-tabs__link:active,.pkt-tabs__button:hover,.pkt-tabs__button:focus,.pkt-tabs__button:focus-visible,.pkt-tabs__button:focus-visible:is(:active),.pkt-tabs__button:focus:is(:active),.pkt-tabs__button:active{outline:0;color:var(--pkt-color-text-action-active);border-bottom:.25rem solid var(--pkt-color-border-states-hover)}.pkt-tabs__link.active,.pkt-tabs__button.active{color:var(--pkt-color-text-action-normal);border-bottom:.25rem solid var(--pkt-color-border-blue);font-size:1rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5rem}.pkt-tabs:after{content:"";display:block;position:absolute;z-index:3;background:linear-gradient(90deg, transparent 0%, var(--pkt-tabs-bg) 100%);top:0;right:0;bottom:0;width:5rem;pointer-events:none}
package/dist/css/pkt-components.css CHANGED
@@ -625,35 +625,45 @@
625
625
  }
626
626
  }
627
627
 
628
- .pkt-calendar {
628
+ .pkt-calendar,
629
+ pkt-el-calendar {
629
630
  max-width: 25rem;
630
631
  }
631
- .pkt-calendar .pkt-cal-month-nav {
632
+ .pkt-calendar .pkt-cal-month-nav,
633
+ pkt-el-calendar .pkt-cal-month-nav {
632
634
  display: flex;
633
635
  justify-content: space-between;
634
636
  align-items: center;
635
637
  margin-bottom: 1rem;
636
638
  }
637
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
639
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,
640
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
638
641
  display: flex;
639
642
  gap: 0.5rem;
640
643
  }
641
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
644
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,
645
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
642
646
  font-size: 1rem;
643
647
  font-weight: 500;
644
648
  letter-spacing: -0.2px;
645
649
  line-height: 1.5rem;
646
650
  }
647
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
651
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),
652
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
648
653
  text-align: right;
649
654
  }
650
- .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
655
+ .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year,
656
+ pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
651
657
  max-width: 4.5rem;
652
658
  }
653
659
  .pkt-calendar .pkt-cal-month-nav .pkt-btn,
654
660
  .pkt-calendar .pkt-cal-month-nav li,
655
661
  .pkt-calendar .pkt-cal-days .pkt-btn,
656
- .pkt-calendar .pkt-cal-days li {
662
+ .pkt-calendar .pkt-cal-days li,
663
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn,
664
+ pkt-el-calendar .pkt-cal-month-nav li,
665
+ pkt-el-calendar .pkt-cal-days .pkt-btn,
666
+ pkt-el-calendar .pkt-cal-days li {
657
667
  font: inherit;
658
668
  aspect-ratio: 1/1;
659
669
  display: flex;
@@ -661,24 +671,33 @@
661
671
  align-items: center;
662
672
  }
663
673
  .pkt-calendar .pkt-cal-month-nav .pkt-btn,
664
- .pkt-calendar .pkt-cal-days .pkt-btn {
674
+ .pkt-calendar .pkt-cal-days .pkt-btn,
675
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn,
676
+ pkt-el-calendar .pkt-cal-days .pkt-btn {
665
677
  margin: 1px;
666
678
  z-index: 1;
667
679
  border-radius: 50%;
668
680
  }
669
681
  .pkt-calendar .pkt-cal-month-nav .pkt-btn:focus, .pkt-calendar .pkt-cal-month-nav .pkt-btn:active,
670
682
  .pkt-calendar .pkt-cal-days .pkt-btn:focus,
671
- .pkt-calendar .pkt-cal-days .pkt-btn:active {
683
+ .pkt-calendar .pkt-cal-days .pkt-btn:active,
684
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn:focus,
685
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn:active,
686
+ pkt-el-calendar .pkt-cal-days .pkt-btn:focus,
687
+ pkt-el-calendar .pkt-cal-days .pkt-btn:active {
672
688
  outline: 0;
673
689
  border: 0;
674
690
  }
675
691
  .pkt-calendar .pkt-cal-month-nav .pkt-btn:disabled,
676
- .pkt-calendar .pkt-cal-days .pkt-btn:disabled {
692
+ .pkt-calendar .pkt-cal-days .pkt-btn:disabled,
693
+ pkt-el-calendar .pkt-cal-month-nav .pkt-btn:disabled,
694
+ pkt-el-calendar .pkt-cal-days .pkt-btn:disabled {
677
695
  background-color: transparent;
678
696
  border: 0;
679
697
  cursor: not-allowed;
680
698
  }
681
- .pkt-calendar .pkt-cal-days {
699
+ .pkt-calendar .pkt-cal-days,
700
+ pkt-el-calendar .pkt-cal-days {
682
701
  list-style: none;
683
702
  display: grid;
684
703
  grid-template-columns: repeat(7, 14.285%);
@@ -687,7 +706,8 @@
687
706
  justify-content: center;
688
707
  align-items: center;
689
708
  }
690
- .pkt-calendar .pkt-cal-days > li {
709
+ .pkt-calendar .pkt-cal-days > li,
710
+ pkt-el-calendar .pkt-cal-days > li {
691
711
  aspect-ratio: 1/1;
692
712
  justify-content: center;
693
713
  align-items: center;
@@ -695,7 +715,9 @@
695
715
  text-align: center;
696
716
  z-index: 1;
697
717
  }
698
- .pkt-calendar .pkt-cal-days > li:before, .pkt-calendar .pkt-cal-days > li:after {
718
+ .pkt-calendar .pkt-cal-days > li:before, .pkt-calendar .pkt-cal-days > li:after,
719
+ pkt-el-calendar .pkt-cal-days > li:before,
720
+ pkt-el-calendar .pkt-cal-days > li:after {
699
721
  content: "";
700
722
  display: block;
701
723
  position: absolute;
@@ -703,55 +725,78 @@
703
725
  bottom: 0;
704
726
  z-index: 0;
705
727
  }
706
- .pkt-calendar .pkt-cal-days > li:before {
728
+ .pkt-calendar .pkt-cal-days > li:before,
729
+ pkt-el-calendar .pkt-cal-days > li:before {
707
730
  left: 0;
708
731
  right: 50%;
709
732
  }
710
- .pkt-calendar .pkt-cal-days > li:after {
733
+ .pkt-calendar .pkt-cal-days > li:after,
734
+ pkt-el-calendar .pkt-cal-days > li:after {
711
735
  left: 50%;
712
736
  right: 0;
713
737
  }
714
- .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names, .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days {
738
+ .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names, .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,
739
+ pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,
740
+ pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-days {
715
741
  grid-template-columns: repeat(8, 12.5%);
716
742
  }
717
- .pkt-calendar .pkt-cal-other {
743
+ .pkt-calendar .pkt-cal-other,
744
+ pkt-el-calendar .pkt-cal-other {
718
745
  color: var(--pkt-color-grays-gray-200);
719
746
  }
720
- .pkt-calendar .pkt-cal-other .pkt-btn {
747
+ .pkt-calendar .pkt-cal-other .pkt-btn,
748
+ pkt-el-calendar .pkt-cal-other .pkt-btn {
721
749
  color: inherit;
722
750
  background: transparent;
723
751
  border: none;
724
752
  }
725
- .pkt-calendar .pkt-cal-today .pkt-btn {
753
+ .pkt-calendar .pkt-cal-today .pkt-btn,
754
+ pkt-el-calendar .pkt-cal-today .pkt-btn {
726
755
  z-index: 2;
727
756
  text-decoration: underline;
728
757
  outline: 1px solid var(--pkt-color-border-default);
729
758
  }
730
759
  .pkt-calendar .pkt-cal-selected .pkt-btn,
731
- .pkt-calendar .pkt-cal-selected .pkt-btn:focus {
760
+ .pkt-calendar .pkt-cal-selected .pkt-btn:focus,
761
+ pkt-el-calendar .pkt-cal-selected .pkt-btn,
762
+ pkt-el-calendar .pkt-cal-selected .pkt-btn:focus {
732
763
  background-color: var(--pkt-color-surface-strong-blue);
733
764
  }
734
765
  .pkt-calendar .pkt-cal-selected .pkt-btn:hover,
735
- .pkt-calendar .pkt-cal-selected .pkt-btn:focus:hover {
766
+ .pkt-calendar .pkt-cal-selected .pkt-btn:focus:hover,
767
+ pkt-el-calendar .pkt-cal-selected .pkt-btn:hover,
768
+ pkt-el-calendar .pkt-cal-selected .pkt-btn:focus:hover {
736
769
  border-color: var(--pkt-color-surface-strong-blue);
737
770
  }
738
- .pkt-calendar .pkt-cal-in-range:before, .pkt-calendar .pkt-cal-in-range:after, .pkt-calendar .pkt-cal-in-range-first:after, .pkt-calendar .pkt-cal-in-range-last:before {
771
+ .pkt-calendar .pkt-cal-in-range:before, .pkt-calendar .pkt-cal-in-range:after, .pkt-calendar .pkt-cal-in-range-first:after, .pkt-calendar .pkt-cal-in-range-last:before,
772
+ pkt-el-calendar .pkt-cal-in-range:before,
773
+ pkt-el-calendar .pkt-cal-in-range:after,
774
+ pkt-el-calendar .pkt-cal-in-range-first:after,
775
+ pkt-el-calendar .pkt-cal-in-range-last:before {
739
776
  background-color: var(--pkt-color-surface-default-light-blue);
740
777
  }
741
- .pkt-calendar .pkt-cal-in-range-first:before, .pkt-calendar .pkt-cal-in-range-last:after {
778
+ .pkt-calendar .pkt-cal-in-range-first:before, .pkt-calendar .pkt-cal-in-range-last:after,
779
+ pkt-el-calendar .pkt-cal-in-range-first:before,
780
+ pkt-el-calendar .pkt-cal-in-range-last:after {
742
781
  background-color: transparent;
743
782
  }
744
783
  .pkt-calendar .pkt-cal-range-hover:before,
745
- .pkt-calendar .pkt-cal-range-hover .pkt-btn {
784
+ .pkt-calendar .pkt-cal-range-hover .pkt-btn,
785
+ pkt-el-calendar .pkt-cal-range-hover:before,
786
+ pkt-el-calendar .pkt-cal-range-hover .pkt-btn {
746
787
  background-color: var(--pkt-color-surface-default-light-blue);
747
788
  }
748
- .pkt-calendar .pkt-cal-range-hover .pkt-btn {
789
+ .pkt-calendar .pkt-cal-range-hover .pkt-btn,
790
+ pkt-el-calendar .pkt-cal-range-hover .pkt-btn {
749
791
  border-color: var(--pkt-color-surface-default-light-blue);
750
792
  }
751
- .pkt-calendar .pkt-cal-excluded {
793
+ .pkt-calendar .pkt-cal-excluded,
794
+ pkt-el-calendar .pkt-cal-excluded {
752
795
  background-color: var(--pkt-color-brand-neutrals-100);
753
796
  }
754
- .pkt-calendar .pkt-cal-excluded:before, .pkt-calendar .pkt-cal-excluded:after {
797
+ .pkt-calendar .pkt-cal-excluded:before, .pkt-calendar .pkt-cal-excluded:after,
798
+ pkt-el-calendar .pkt-cal-excluded:before,
799
+ pkt-el-calendar .pkt-cal-excluded:after {
755
800
  background-color: transparent;
756
801
  }
757
802
 
@@ -1200,30 +1245,30 @@
1200
1245
  * TODO: use SVG icons instead
1201
1246
  */
1202
1247
  .pkt-icon,
1203
- pkt-icon {
1248
+ pkt-el-icon {
1204
1249
  display: inline-flex;
1205
1250
  min-height: 1rem;
1206
1251
  min-width: 1rem;
1207
1252
  }
1208
1253
  .pkt-icon > svg,
1209
- pkt-icon > svg {
1254
+ pkt-el-icon > svg {
1210
1255
  min-height: 1rem;
1211
1256
  min-width: 1rem;
1212
1257
  max-height: 100%;
1213
1258
  max-width: 100%;
1214
1259
  }
1215
1260
  .pkt-icon--small,
1216
- pkt-icon--small {
1261
+ pkt-el-icon--small {
1217
1262
  height: 1rem;
1218
1263
  width: 1rem;
1219
1264
  }
1220
1265
  .pkt-icon--medium,
1221
- pkt-icon--medium {
1266
+ pkt-el-icon--medium {
1222
1267
  height: 1.5rem;
1223
1268
  width: 1.5rem;
1224
1269
  }
1225
1270
  .pkt-icon--large,
1226
- pkt-icon--large {
1271
+ pkt-el-icon--large {
1227
1272
  height: 4rem;
1228
1273
  width: 4rem;
1229
1274
  }
@@ -1425,8 +1470,8 @@ pkt-icon--large {
1425
1470
  white-space: nowrap;
1426
1471
  }
1427
1472
  .pkt-tabs__link .pkt-icon,
1428
- .pkt-tabs__link pkt-icon, .pkt-tabs__button .pkt-icon,
1429
- .pkt-tabs__button pkt-icon {
1473
+ .pkt-tabs__link pkt-el-icon, .pkt-tabs__button .pkt-icon,
1474
+ .pkt-tabs__button pkt-el-icon {
1430
1475
  --fg-color: currentColor;
1431
1476
  }
1432
1477
  .pkt-tabs__link, .pkt-tabs__link:hover, .pkt-tabs__link:active, .pkt-tabs__button, .pkt-tabs__button:hover, .pkt-tabs__button:active {