@oslokommune/punkt-css 11.12.1 → 11.12.3

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 (15) hide show
  1. package/CHANGELOG.md +17 -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.css +79 -34
  11. package/dist/css/pkt.min.css +1 -1
  12. package/dist/scss/components/_calendar.scss +2 -1
  13. package/dist/scss/components/_icon.scss +1 -1
  14. package/dist/scss/components/_tabs.scss +1 -1
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [11.12.3](https://github.com/oslokommune/punkt/compare/11.12.2...11.12.3) (2024-05-07)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ Ingen
18
+
19
+ ### Chores
20
+ Ingen
21
+
22
+ ---
23
+
24
+
8
25
  ## [11.12.1](https://github.com/oslokommune/punkt/compare/11.12.0...11.12.1) (2024-05-06)
9
26
 
10
27
  ### ⚠ 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 {