@oslokommune/punkt-css 12.1.0 → 12.3.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 (43) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/README.md +4 -12
  3. package/dist/css/components/calendar.css +106 -75
  4. package/dist/css/components/calendar.min.css +1 -1
  5. package/dist/css/components/card.css +70 -0
  6. package/dist/css/components/card.min.css +1 -0
  7. package/dist/css/components/icon.css +6 -8
  8. package/dist/css/components/icon.min.css +1 -1
  9. package/dist/css/components/linkcard.css +4 -4
  10. package/dist/css/components/linkcard.min.css +1 -1
  11. package/dist/css/components/preview.css +4 -0
  12. package/dist/css/components/preview.min.css +1 -1
  13. package/dist/css/components/tabs.css +2 -2
  14. package/dist/css/components/tabs.min.css +1 -1
  15. package/dist/css/components/tag.css +7 -7
  16. package/dist/css/components/tag.min.css +1 -1
  17. package/dist/css/components/textinput.css +27 -1
  18. package/dist/css/components/textinput.min.css +1 -1
  19. package/dist/css/pkt-base.css +26 -8
  20. package/dist/css/pkt-base.min.css +1 -1
  21. package/dist/css/pkt-components.css +227 -97
  22. package/dist/css/pkt-components.min.css +1 -1
  23. package/dist/css/pkt-elements.css +46 -12
  24. package/dist/css/pkt-elements.min.css +1 -1
  25. package/dist/css/pkt-normalise.css +23 -0
  26. package/dist/css/pkt-normalise.min.css +1 -1
  27. package/dist/css/pkt.css +296 -116
  28. package/dist/css/pkt.min.css +1 -1
  29. package/dist/scss/abstracts/variables/_index.scss +1 -1
  30. package/dist/scss/base/_typography.scss +31 -8
  31. package/dist/scss/components/_calendar.scss +61 -32
  32. package/dist/scss/components/_card.scss +92 -0
  33. package/dist/scss/components/_icon.scss +3 -1
  34. package/dist/scss/components/_index.scss +1 -0
  35. package/dist/scss/components/_linkcard.scss +2 -0
  36. package/dist/scss/components/_preview.scss +4 -0
  37. package/dist/scss/components/_tabs.scss +1 -1
  38. package/dist/scss/components/_tag.scss +1 -0
  39. package/dist/scss/elements/_button.scss +11 -4
  40. package/dist/scss/elements/_input.scss +29 -1
  41. package/dist/scss/elements/_section.scss +1 -0
  42. package/dist/scss/normalise/_index.scss +24 -0
  43. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,50 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [12.3.0](https://github.com/oslokommune/punkt/compare/12.2.0...12.3.0) (2024-10-03)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ * Eksperimentell release av Punkt Elements. EKSPERIMENTELL! (#1940). * feat(all): Eksperimentell release av Punkt Elements. EKSPERIMENTELL!
15
+
16
+ * feat(all): Eksperimentell release av Punkt Elements. EKSPERIMENTELL!
17
+
18
+ Tvinger bygg
19
+ * Eksperimentell release av Punkt Elements. EKSPERIMENTELL! (#1939).
20
+ * Eksperimentell release for Punkt Elements. EKSPERIMENTELL!. Denne release bør kun brukes til testing av nye custom elements (web components) og skal helst ikke brukes i produksjon. Når vi er *ferdig testet* vil ny release bli neste major-release.
21
+
22
+
23
+ ### Bug Fixes
24
+ Ingen
25
+
26
+ ### Chores
27
+ Ingen
28
+
29
+ ---
30
+
31
+
32
+ ## [12.2.0](https://github.com/oslokommune/punkt/compare/12.1.0...12.2.0) (2024-09-30)
33
+
34
+ ### ⚠ BREAKING CHANGES
35
+ Ingen
36
+
37
+ ### Features
38
+ * Gray skin Tabs, Tags, LinkCard (#1935). Nå er det mulig å bruke `gray` istedenfor `grey` for farger, men vi har beholdt fallback på `grey` for å unngå breaking changes.
39
+
40
+ Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
41
+
42
+
43
+ ### Bug Fixes
44
+ Ingen
45
+
46
+ ### Chores
47
+ Ingen
48
+
49
+ ---
50
+
51
+
8
52
  ## [12.0.0](https://github.com/oslokommune/punkt/compare/11.19.3...12.0.0) (2024-09-12)
9
53
 
10
54
  ### ⚠ BREAKING CHANGES
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <a href="https://www.npmjs.com/package/@oslokommune/punkt-css" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-css?logo=sass&label=css&style=for-the-badge&color=bf4080" alt="CSS-rammeverk" /></a>
4
4
 
5
- Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er ikke automatikk mellom Figma og denne koden, så kode vil som regel henge litt etter hva som oppdateres i Figma.
5
+ Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma.
6
6
 
7
7
  ## 📖 Innhold
8
8
 
@@ -117,11 +117,7 @@ Legg til den nye klassen -->
117
117
  <!-- src/App.vue
118
118
 
119
119
  Legg til logo -->
120
- <img
121
- class="oslologo"
122
- alt="Oslo kommune logo"
123
- src="@oslokommune/punkt-assets/dist/logos/oslologo.svg"
124
- />
120
+ <img class="oslologo" alt="Oslo kommune logo" src="@oslokommune/punkt-assets/dist/logos/oslologo.svg" />
125
121
 
126
122
  <style lang="scss">
127
123
  /* Legg til moduler */
@@ -149,7 +145,7 @@ Du kan også velge å importere enkelte moduler, eller bare base-modulen.
149
145
  Se tilgjengelige filer på [cdn](https://punkt-cdn.oslo.kommune.no/).
150
146
 
151
147
  ```html
152
- <!DOCTYPE html>
148
+ <!doctype html>
153
149
  <html lang="no">
154
150
  <head>
155
151
  <meta charset="utf-8" />
@@ -159,11 +155,7 @@ Se tilgjengelige filer på [cdn](https://punkt-cdn.oslo.kommune.no/).
159
155
  </head>
160
156
  <body>
161
157
  <h1>Velkommen til Oslo Origo</h1>
162
- <img
163
- src="https://punkt-cdn.oslo.kommune.no/latest/logos/oslologo.svg"
164
- alt="Oslo kommune logo"
165
- height="64"
166
- />
158
+ <img src="https://punkt-cdn.oslo.kommune.no/latest/logos/oslologo.svg" alt="Oslo kommune logo" height="64" />
167
159
  </body>
168
160
  </html>
169
161
  ```
package/dist/css/components/calendar.css CHANGED
@@ -1,174 +1,205 @@
1
1
  .pkt-calendar,
2
- pkt-el-calendar {
2
+ pkt-calendar {
3
+ z-index: 2;
4
+ display: block;
5
+ position: relative;
3
6
  max-width: 25rem;
4
7
  }
5
8
  .pkt-calendar .pkt-cal-month-nav,
6
- pkt-el-calendar .pkt-cal-month-nav {
9
+ pkt-calendar .pkt-cal-month-nav {
7
10
  display: flex;
8
11
  justify-content: space-between;
9
12
  align-items: center;
10
13
  margin-bottom: 1rem;
11
14
  }
12
15
  .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,
13
- pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
16
+ pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
14
17
  display: flex;
15
18
  gap: 0.5rem;
16
19
  }
17
20
  .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 {
21
+ pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
19
22
  font-size: 1rem;
20
23
  font-weight: 500;
21
24
  letter-spacing: -0.2px;
22
25
  line-height: 1.5rem;
23
26
  }
24
27
  .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) {
28
+ pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
26
29
  text-align: right;
27
30
  }
28
31
  .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 {
32
+ pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
30
33
  max-width: 4.5rem;
31
34
  }
35
+ .pkt-calendar .pkt-cal-month-nav td,
36
+ .pkt-calendar .pkt-cal-days td,
37
+ pkt-calendar .pkt-cal-month-nav td,
38
+ pkt-calendar .pkt-cal-days td {
39
+ border: 0;
40
+ }
32
41
  .pkt-calendar .pkt-cal-month-nav .pkt-btn,
33
- .pkt-calendar .pkt-cal-month-nav li,
42
+ .pkt-calendar .pkt-cal-month-nav td > div,
34
43
  .pkt-calendar .pkt-cal-days .pkt-btn,
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 {
44
+ .pkt-calendar .pkt-cal-days td > div,
45
+ pkt-calendar .pkt-cal-month-nav .pkt-btn,
46
+ pkt-calendar .pkt-cal-month-nav td > div,
47
+ pkt-calendar .pkt-cal-days .pkt-btn,
48
+ pkt-calendar .pkt-cal-days td > div {
40
49
  font: inherit;
41
50
  aspect-ratio: 1/1;
42
51
  display: flex;
43
52
  justify-content: center;
44
53
  align-items: center;
54
+ border: 0;
45
55
  }
46
56
  .pkt-calendar .pkt-cal-month-nav .pkt-btn,
47
57
  .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 {
50
- margin: 1px;
51
- z-index: 1;
58
+ pkt-calendar .pkt-cal-month-nav .pkt-btn,
59
+ pkt-calendar .pkt-cal-days .pkt-btn {
60
+ margin: 0;
52
61
  border-radius: 50%;
53
62
  }
54
63
  .pkt-calendar .pkt-cal-month-nav .pkt-btn:focus, .pkt-calendar .pkt-cal-month-nav .pkt-btn:active,
55
64
  .pkt-calendar .pkt-cal-days .pkt-btn:focus,
56
65
  .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 {
66
+ pkt-calendar .pkt-cal-month-nav .pkt-btn:focus,
67
+ pkt-calendar .pkt-cal-month-nav .pkt-btn:active,
68
+ pkt-calendar .pkt-cal-days .pkt-btn:focus,
69
+ pkt-calendar .pkt-cal-days .pkt-btn:active {
61
70
  outline: 0;
62
71
  border: 0;
63
72
  }
64
- .pkt-calendar .pkt-cal-month-nav .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 {
68
- background-color: transparent;
69
- border: 0;
70
- cursor: not-allowed;
71
- }
72
73
  .pkt-calendar .pkt-cal-days,
73
- pkt-el-calendar .pkt-cal-days {
74
- list-style: none;
75
- display: grid;
76
- grid-template-columns: repeat(7, 14.285%);
74
+ pkt-calendar .pkt-cal-days {
77
75
  margin: 0;
78
76
  padding-left: 0;
79
- justify-content: center;
80
- align-items: center;
77
+ border-spacing: 0;
78
+ }
79
+ .pkt-calendar .pkt-cal-days td,
80
+ pkt-calendar .pkt-cal-days td {
81
+ padding: 0;
81
82
  }
82
- .pkt-calendar .pkt-cal-days > li,
83
- pkt-el-calendar .pkt-cal-days > li {
83
+ .pkt-calendar .pkt-cal-days div,
84
+ pkt-calendar .pkt-cal-days div {
84
85
  aspect-ratio: 1/1;
85
86
  justify-content: center;
86
87
  align-items: center;
87
88
  position: relative;
88
89
  text-align: center;
89
- z-index: 1;
90
90
  }
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 {
91
+ .pkt-calendar .pkt-cal-days div:before, .pkt-calendar .pkt-cal-days div:after,
92
+ pkt-calendar .pkt-cal-days div:before,
93
+ pkt-calendar .pkt-cal-days div:after {
94
94
  content: "";
95
95
  display: block;
96
96
  position: absolute;
97
97
  top: 0;
98
98
  bottom: 0;
99
- z-index: 0;
99
+ z-index: -1;
100
100
  }
101
- .pkt-calendar .pkt-cal-days > li:before,
102
- pkt-el-calendar .pkt-cal-days > li:before {
101
+ .pkt-calendar .pkt-cal-days div:before,
102
+ pkt-calendar .pkt-cal-days div:before {
103
103
  left: 0;
104
104
  right: 50%;
105
105
  }
106
- .pkt-calendar .pkt-cal-days > li:after,
107
- pkt-el-calendar .pkt-cal-days > li:after {
106
+ .pkt-calendar .pkt-cal-days div:after,
107
+ pkt-calendar .pkt-cal-days div:after {
108
108
  left: 50%;
109
109
  right: 0;
110
110
  }
111
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 {
112
+ pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,
113
+ pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days {
114
114
  grid-template-columns: repeat(8, 12.5%);
115
115
  }
116
116
  .pkt-calendar .pkt-cal-other,
117
- pkt-el-calendar .pkt-cal-other {
117
+ .pkt-calendar .pkt-cal-days [data-disabled],
118
+ pkt-calendar .pkt-cal-other,
119
+ pkt-calendar .pkt-cal-days [data-disabled] {
120
+ cursor: not-allowed;
118
121
  color: var(--pkt-color-grays-gray-200);
119
122
  }
120
123
  .pkt-calendar .pkt-cal-other .pkt-btn,
121
- pkt-el-calendar .pkt-cal-other .pkt-btn {
124
+ .pkt-calendar .pkt-cal-days [data-disabled] .pkt-btn,
125
+ pkt-calendar .pkt-cal-other .pkt-btn,
126
+ pkt-calendar .pkt-cal-days [data-disabled] .pkt-btn {
122
127
  color: inherit;
123
128
  background: transparent;
124
129
  border: none;
125
130
  }
126
131
  .pkt-calendar .pkt-cal-today .pkt-btn,
127
- pkt-el-calendar .pkt-cal-today .pkt-btn {
128
- z-index: 2;
132
+ pkt-calendar .pkt-cal-today .pkt-btn {
129
133
  text-decoration: underline;
130
134
  outline: 1px solid var(--pkt-color-border-default);
135
+ outline-offset: -1px;
131
136
  }
132
137
  .pkt-calendar .pkt-cal-selected .pkt-btn,
133
138
  .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 {
139
+ .pkt-calendar .pkt-cal-selected .pkt-btn:hover,
140
+ pkt-calendar .pkt-cal-selected .pkt-btn,
141
+ pkt-calendar .pkt-cal-selected .pkt-btn:focus,
142
+ pkt-calendar .pkt-cal-selected .pkt-btn:hover {
136
143
  background-color: var(--pkt-color-surface-strong-blue);
137
144
  }
138
- .pkt-calendar .pkt-cal-selected .pkt-btn: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 {
142
- border-color: var(--pkt-color-surface-strong-blue);
143
- }
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 {
145
+ .pkt-calendar .pkt-cal-in-range :before,
146
+ .pkt-calendar .pkt-cal-in-range :after, .pkt-calendar .pkt-cal-in-range-first :after, .pkt-calendar .pkt-cal-in-range-last :before,
147
+ pkt-calendar .pkt-cal-in-range :before,
148
+ pkt-calendar .pkt-cal-in-range :after,
149
+ pkt-calendar .pkt-cal-in-range-first :after,
150
+ pkt-calendar .pkt-cal-in-range-last :before {
149
151
  background-color: var(--pkt-color-surface-default-light-blue);
150
152
  }
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 {
153
+ .pkt-calendar .pkt-cal-in-range-first :before, .pkt-calendar .pkt-cal-in-range-last :after,
154
+ pkt-calendar .pkt-cal-in-range-first :before,
155
+ pkt-calendar .pkt-cal-in-range-last :after {
154
156
  background-color: transparent;
155
157
  }
156
- .pkt-calendar .pkt-cal-range-hover:before,
158
+ .pkt-calendar .pkt-cal-range-hover :before,
157
159
  .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 {
160
+ pkt-calendar .pkt-cal-range-hover :before,
161
+ pkt-calendar .pkt-cal-range-hover .pkt-btn {
160
162
  background-color: var(--pkt-color-surface-default-light-blue);
161
163
  }
162
164
  .pkt-calendar .pkt-cal-range-hover .pkt-btn,
163
- pkt-el-calendar .pkt-cal-range-hover .pkt-btn {
165
+ pkt-calendar .pkt-cal-range-hover .pkt-btn {
164
166
  border-color: var(--pkt-color-surface-default-light-blue);
165
167
  }
166
168
  .pkt-calendar .pkt-cal-excluded,
167
- pkt-el-calendar .pkt-cal-excluded {
169
+ pkt-calendar .pkt-cal-excluded {
168
170
  background-color: var(--pkt-color-brand-neutrals-100);
169
171
  }
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 {
172
+ .pkt-calendar .pkt-cal-excluded :before,
173
+ .pkt-calendar .pkt-cal-excluded :after,
174
+ pkt-calendar .pkt-cal-excluded :before,
175
+ pkt-calendar .pkt-cal-excluded :after {
173
176
  background-color: transparent;
177
+ }
178
+
179
+ pkt-datepicker {
180
+ display: block;
181
+ position: relative;
182
+ }
183
+ pkt-datepicker .pkt-datepicker {
184
+ position: relative;
185
+ }
186
+ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
187
+ margin: 0 0.25rem 0.5rem 0;
188
+ }
189
+
190
+ .pkt-datepicker__inputs {
191
+ width: 100%;
192
+ position: relative;
193
+ }
194
+
195
+ .pkt-calendar-popup {
196
+ top: 100%;
197
+ left: 0;
198
+ z-index: 2;
199
+ margin: 0;
200
+ padding: 0.5rem;
201
+ position: absolute;
202
+ width: max-content;
203
+ background: var(--pkt-color-background-default);
204
+ box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
174
205
  }
package/dist/css/components/calendar.min.css CHANGED
@@ -1 +1 @@
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)}
1
+ .pkt-calendar,pkt-calendar{z-index:2;display:block;position:relative;max-width:25rem}.pkt-calendar .pkt-cal-month-nav,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,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,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),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,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav td,.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-month-nav td,pkt-calendar .pkt-cal-days td{border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav td>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{margin:0;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-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-days,pkt-calendar .pkt-cal-days{margin:0;padding-left:0;border-spacing:0}.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-days td{padding:0}.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days div{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center}.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:-1}.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days div:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,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,.pkt-calendar .pkt-cal-days [data-disabled],pkt-calendar .pkt-cal-other,pkt-calendar .pkt-cal-days [data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-200)}.pkt-calendar .pkt-cal-other .pkt-btn,.pkt-calendar .pkt-cal-days [data-disabled] .pkt-btn,pkt-calendar .pkt-cal-other .pkt-btn,pkt-calendar .pkt-cal-days [data-disabled] .pkt-btn{color:inherit;background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-calendar .pkt-cal-today .pkt-btn{text-decoration:underline;outline:1px solid var(--pkt-color-border-default);outline-offset:-1px}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,.pkt-calendar .pkt-cal-selected .pkt-btn:hover,pkt-calendar .pkt-cal-selected .pkt-btn,pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-calendar .pkt-cal-selected .pkt-btn:hover{background-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-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,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,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,pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,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,pkt-calendar .pkt-cal-excluded :before,pkt-calendar .pkt-cal-excluded :after{background-color:rgba(0,0,0,0)}pkt-datepicker{display:block;position:relative}pkt-datepicker .pkt-datepicker{position:relative}pkt-datepicker .pkt-datepicker__tags .pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin:0;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);box-shadow:0px 2px 4px -2px rgba(0,0,0,.1),0px 4px 6px -1px rgba(0,0,0,.1)}
package/dist/css/components/card.css ADDED
@@ -0,0 +1,70 @@
1
+ /*
2
+ * Cardcomponent
3
+ */
4
+ .pkt-card {
5
+ padding: 2rem;
6
+ display: flex;
7
+ gap: 3rem;
8
+ }
9
+ .pkt-card__wrapper {
10
+ display: flex;
11
+ flex-direction: column;
12
+ gap: 1rem;
13
+ }
14
+ .pkt-card__tags {
15
+ display: flex;
16
+ gap: 1rem;
17
+ }
18
+ .pkt-card--landscape {
19
+ flex-direction: row;
20
+ max-width: 950px;
21
+ }
22
+ .pkt-card--landscape .pkt-card__image {
23
+ min-width: 320px;
24
+ overflow: hidden;
25
+ }
26
+ .pkt-card--landscape .pkt-card__image img {
27
+ height: 100%;
28
+ width: 100%;
29
+ object-fit: cover;
30
+ object-position: center;
31
+ }
32
+ .pkt-card--portrait {
33
+ flex-direction: column;
34
+ max-width: 500px;
35
+ }
36
+ .pkt-card--portrait .pkt-card__image {
37
+ max-height: 400px;
38
+ overflow: hidden;
39
+ }
40
+ .pkt-card--portrait .pkt-card__image img {
41
+ width: 100%;
42
+ height: 100%;
43
+ object-fit: cover;
44
+ object-position: center;
45
+ }
46
+ .pkt-card--outlined {
47
+ border: 3px solid var(--pkt-color-grays-gray-100);
48
+ background-color: var(--pkt-color-background-default);
49
+ }
50
+ .pkt-card--gray {
51
+ background-color: var(--pkt-color-background-subtle);
52
+ }
53
+ .pkt-card--blue {
54
+ background-color: var(--pkt-color-brand-blue-300);
55
+ }
56
+ .pkt-card--green {
57
+ background-color: var(--pkt-color-brand-light-green-400);
58
+ }
59
+ .pkt-card--beige {
60
+ background-color: var(--pkt-color-brand-light-beige-1000);
61
+ }
62
+ .pkt-card h1,
63
+ .pkt-card h2,
64
+ .pkt-card h3,
65
+ .pkt-card h4,
66
+ .pkt-card h5,
67
+ .pkt-card p {
68
+ padding: 0;
69
+ margin: 0;
70
+ }
package/dist/css/components/card.min.css ADDED
@@ -0,0 +1 @@
1
+ .pkt-card{padding:2rem;display:flex;gap:3rem}.pkt-card__wrapper{display:flex;flex-direction:column;gap:1rem}.pkt-card__tags{display:flex;gap:1rem}.pkt-card--landscape{flex-direction:row;max-width:950px}.pkt-card--landscape .pkt-card__image{min-width:320px;overflow:hidden}.pkt-card--landscape .pkt-card__image img{height:100%;width:100%;object-fit:cover;object-position:center}.pkt-card--portrait{flex-direction:column;max-width:500px}.pkt-card--portrait .pkt-card__image{max-height:400px;overflow:hidden}.pkt-card--portrait .pkt-card__image img{width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card--outlined{border:3px solid var(--pkt-color-grays-gray-100);background-color:var(--pkt-color-background-default)}.pkt-card--gray{background-color:var(--pkt-color-background-subtle)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-300)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card h1,.pkt-card h2,.pkt-card h3,.pkt-card h4,.pkt-card h5,.pkt-card p{padding:0;margin:0}
package/dist/css/components/icon.css CHANGED
@@ -4,30 +4,28 @@
4
4
  * TODO: use SVG icons instead
5
5
  */
6
6
  .pkt-icon,
7
- pkt-el-icon {
7
+ pkt-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-el-icon > svg {
13
+ pkt-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
- .pkt-icon--small,
20
- pkt-el-icon--small {
19
+
20
+ .pkt-icon--small {
21
21
  height: 1rem;
22
22
  width: 1rem;
23
23
  }
24
- .pkt-icon--medium,
25
- pkt-el-icon--medium {
24
+ .pkt-icon--medium {
26
25
  height: 1.5rem;
27
26
  width: 1.5rem;
28
27
  }
29
- .pkt-icon--large,
30
- pkt-el-icon--large {
28
+ .pkt-icon--large {
31
29
  height: 4rem;
32
30
  width: 4rem;
33
31
  }
package/dist/css/components/icon.min.css CHANGED
@@ -1 +1 @@
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}
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{height:1rem;width:1rem}.pkt-icon--medium{height:1.5rem;width:1.5rem}.pkt-icon--large{height:4rem;width:4rem}
package/dist/css/components/linkcard.css CHANGED
@@ -88,14 +88,14 @@
88
88
  .pkt-linkcard--blue:hover, .pkt-linkcard--blue:focus, .pkt-linkcard--blue:focus-visible, .pkt-linkcard--blue:active {
89
89
  color: var(--pkt-color-brand-warm-blue-1000) !important;
90
90
  }
91
- .pkt-linkcard--grey {
91
+ .pkt-linkcard--gray, .pkt-linkcard--grey {
92
92
  background-color: var(--pkt-color-surface-default-gray) !important;
93
93
  color: var(--pkt-color-text-body-dark) !important;
94
94
  }
95
- .pkt-linkcard--grey:hover {
95
+ .pkt-linkcard--gray:hover, .pkt-linkcard--grey:hover {
96
96
  background-color: var(--pkt-color-surface-strong-gray) !important;
97
97
  }
98
- .pkt-linkcard--grey:hover, .pkt-linkcard--grey:focus, .pkt-linkcard--grey:focus-visible, .pkt-linkcard--grey:active {
98
+ .pkt-linkcard--gray:hover, .pkt-linkcard--gray:focus, .pkt-linkcard--gray:focus-visible, .pkt-linkcard--gray:active, .pkt-linkcard--grey:hover, .pkt-linkcard--grey:focus, .pkt-linkcard--grey:focus-visible, .pkt-linkcard--grey:active {
99
99
  color: var(--pkt-color-brand-warm-blue-1000) !important;
100
100
  }
101
101
  .pkt-linkcard--green {
@@ -108,7 +108,7 @@
108
108
  .pkt-linkcard--green:hover, .pkt-linkcard--green:focus, .pkt-linkcard--green:focus-visible, .pkt-linkcard--green:active {
109
109
  color: var(--pkt-color-brand-warm-blue-1000) !important;
110
110
  }
111
- .pkt-linkcard--grey-outline {
111
+ .pkt-linkcard--gray-outline, .pkt-linkcard--grey-outline {
112
112
  border: 4px solid var(--pkt-color-border-subtle) !important;
113
113
  }
114
114
  .pkt-linkcard--beige-outline {
package/dist/css/components/linkcard.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-linkcard{display:grid;grid-template-columns:min-content auto;grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;padding:1rem;text-decoration:none;width:100%;height:100%;transition:background-color .2s linear}@media screen and (min-width: 80rem){.pkt-linkcard{padding:1.5rem}}.pkt-linkcard:hover{text-decoration:none}.pkt-linkcard:hover .pkt-linkcard__title{text-decoration:underline}.pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%)}.pkt-linkcard__title{grid-column:2;font-size:1.25rem;font-weight:500;letter-spacing:-0.2px;line-height:2rem}.pkt-linkcard__title>p{margin:0}@media screen and (min-width: 35.938rem){.pkt-linkcard__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem}}.pkt-linkcard__title.pkt-link--external{display:inline-flex}.pkt-linkcard__title.pkt-link--external::after{height:2.25rem;width:1.5rem;background-size:1.5rem 1.5rem;background-position:center;margin-left:.5rem;flex:0 0 auto;align-self:flex-start}.pkt-linkcard>.pkt-icon.pkt-link__icon,.pkt-linkcard pkt-icon.pkt-link__icon{margin-right:0}.pkt-linkcard__text{grid-column:2}.pkt-linkcard__text p:first-of-type{margin-top:0}.pkt-linkcard__text p:last-of-type{margin-bottom:0}.pkt-linkcard--beige{background-color:var(--pkt-color-surface-default-light-beige) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--beige:hover,.pkt-linkcard--beige:focus,.pkt-linkcard--beige:focus-visible,.pkt-linkcard--beige:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--blue{background-color:var(--pkt-color-surface-subtle-pale-blue) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--blue:hover{background-color:var(--pkt-color-surface-default-light-blue) !important}.pkt-linkcard--blue:hover,.pkt-linkcard--blue:focus,.pkt-linkcard--blue:focus-visible,.pkt-linkcard--blue:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--grey{background-color:var(--pkt-color-surface-default-gray) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--grey:hover{background-color:var(--pkt-color-surface-strong-gray) !important}.pkt-linkcard--grey:hover,.pkt-linkcard--grey:focus,.pkt-linkcard--grey:focus-visible,.pkt-linkcard--grey:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--green{background-color:var(--pkt-color-surface-default-faded-green) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--green:hover{background-color:var(--pkt-color-surface-strong-light-green) !important}.pkt-linkcard--green:hover,.pkt-linkcard--green:focus,.pkt-linkcard--green:focus-visible,.pkt-linkcard--green:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--grey-outline{border:4px solid var(--pkt-color-border-subtle) !important}.pkt-linkcard--beige-outline{border:4px solid var(--pkt-color-border-light-beige) !important}[data-mode=dark] .pkt-linkcard .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%)}[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%)}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after,.pkt-linkcard--blue .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after,.pkt-linkcard--blue .pkt-link--external:hover::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}
1
+ .pkt-linkcard{display:grid;grid-template-columns:min-content auto;grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;padding:1rem;text-decoration:none;width:100%;height:100%;transition:background-color .2s linear}@media screen and (min-width: 80rem){.pkt-linkcard{padding:1.5rem}}.pkt-linkcard:hover{text-decoration:none}.pkt-linkcard:hover .pkt-linkcard__title{text-decoration:underline}.pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%)}.pkt-linkcard__title{grid-column:2;font-size:1.25rem;font-weight:500;letter-spacing:-0.2px;line-height:2rem}.pkt-linkcard__title>p{margin:0}@media screen and (min-width: 35.938rem){.pkt-linkcard__title{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:2.25rem}}.pkt-linkcard__title.pkt-link--external{display:inline-flex}.pkt-linkcard__title.pkt-link--external::after{height:2.25rem;width:1.5rem;background-size:1.5rem 1.5rem;background-position:center;margin-left:.5rem;flex:0 0 auto;align-self:flex-start}.pkt-linkcard>.pkt-icon.pkt-link__icon,.pkt-linkcard pkt-icon.pkt-link__icon{margin-right:0}.pkt-linkcard__text{grid-column:2}.pkt-linkcard__text p:first-of-type{margin-top:0}.pkt-linkcard__text p:last-of-type{margin-bottom:0}.pkt-linkcard--beige{background-color:var(--pkt-color-surface-default-light-beige) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--beige:hover,.pkt-linkcard--beige:focus,.pkt-linkcard--beige:focus-visible,.pkt-linkcard--beige:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--blue{background-color:var(--pkt-color-surface-subtle-pale-blue) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--blue:hover{background-color:var(--pkt-color-surface-default-light-blue) !important}.pkt-linkcard--blue:hover,.pkt-linkcard--blue:focus,.pkt-linkcard--blue:focus-visible,.pkt-linkcard--blue:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--gray,.pkt-linkcard--grey{background-color:var(--pkt-color-surface-default-gray) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--gray:hover,.pkt-linkcard--grey:hover{background-color:var(--pkt-color-surface-strong-gray) !important}.pkt-linkcard--gray:hover,.pkt-linkcard--gray:focus,.pkt-linkcard--gray:focus-visible,.pkt-linkcard--gray:active,.pkt-linkcard--grey:hover,.pkt-linkcard--grey:focus,.pkt-linkcard--grey:focus-visible,.pkt-linkcard--grey:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--green{background-color:var(--pkt-color-surface-default-faded-green) !important;color:var(--pkt-color-text-body-dark) !important}.pkt-linkcard--green:hover{background-color:var(--pkt-color-surface-strong-light-green) !important}.pkt-linkcard--green:hover,.pkt-linkcard--green:focus,.pkt-linkcard--green:focus-visible,.pkt-linkcard--green:active{color:var(--pkt-color-brand-warm-blue-1000) !important}.pkt-linkcard--gray-outline,.pkt-linkcard--grey-outline{border:4px solid var(--pkt-color-border-subtle) !important}.pkt-linkcard--beige-outline{border:4px solid var(--pkt-color-border-light-beige) !important}[data-mode=dark] .pkt-linkcard .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%)}[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%)}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after,.pkt-linkcard--blue .pkt-link--external::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after,.pkt-linkcard--blue .pkt-link--external:hover::after{filter:brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important}
package/dist/css/components/preview.css CHANGED
@@ -66,4 +66,8 @@
66
66
 
67
67
  .astro-code.github-light {
68
68
  background-color: var(--pkt-color-surface-default-gray) !important;
69
+ }
70
+
71
+ .preview-content {
72
+ display: contents;
69
73
  }
package/dist/css/components/preview.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-preview{position:relative}.pkt-preview .pkt-tabs{--pkt-tabs-bg: var(--pkt-color-surface-default-gray)}.pkt-preview__mode{position:absolute;top:1rem;right:1rem}.pkt-preview__component{display:flex;justify-content:space-around;align-items:center;min-height:10rem;padding:3rem 1rem;margin:1rem 0 0;border:.25rem solid var(--pkt-color-surface-default-gray);background-color:var(--pkt-color-background-default);transition:background-color .2s linear}.pkt-preview__component--fullwidth>div{width:100%}.pkt-preview__opts{padding:1rem;background-color:var(--pkt-color-surface-default-gray)}.pkt-preview__opts>.pkt-cell{position:relative}.pkt-preview__opts>.pkt-cell>.pkt-tag{display:block;position:absolute;top:0;right:0;padding:0 .25rem 0}.pkt-preview__code{position:relative;margin-bottom:1rem;font-size:.8rem}.pkt-preview__code>pre{margin-top:0 !important;background-color:var(--pkt-color-surface-default-gray) !important}.pkt-preview__copy{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;align-items:center}.pkt-preview__specs{background-color:var(--pkt-color-surface-default-gray)}.pkt-preview__specs pre{margin-top:0 !important}.pkt-preview__specs h2{padding:1rem}.astro-code.github-light{background-color:var(--pkt-color-surface-default-gray) !important}
1
+ .pkt-preview{position:relative}.pkt-preview .pkt-tabs{--pkt-tabs-bg: var(--pkt-color-surface-default-gray)}.pkt-preview__mode{position:absolute;top:1rem;right:1rem}.pkt-preview__component{display:flex;justify-content:space-around;align-items:center;min-height:10rem;padding:3rem 1rem;margin:1rem 0 0;border:.25rem solid var(--pkt-color-surface-default-gray);background-color:var(--pkt-color-background-default);transition:background-color .2s linear}.pkt-preview__component--fullwidth>div{width:100%}.pkt-preview__opts{padding:1rem;background-color:var(--pkt-color-surface-default-gray)}.pkt-preview__opts>.pkt-cell{position:relative}.pkt-preview__opts>.pkt-cell>.pkt-tag{display:block;position:absolute;top:0;right:0;padding:0 .25rem 0}.pkt-preview__code{position:relative;margin-bottom:1rem;font-size:.8rem}.pkt-preview__code>pre{margin-top:0 !important;background-color:var(--pkt-color-surface-default-gray) !important}.pkt-preview__copy{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;align-items:center}.pkt-preview__specs{background-color:var(--pkt-color-surface-default-gray)}.pkt-preview__specs pre{margin-top:0 !important}.pkt-preview__specs h2{padding:1rem}.astro-code.github-light{background-color:var(--pkt-color-surface-default-gray) !important}.preview-content{display:contents}
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-el-icon, .pkt-tabs__button .pkt-icon,
41
- .pkt-tabs__button pkt-el-icon {
40
+ .pkt-tabs__link pkt-icon, .pkt-tabs__button .pkt-icon,
41
+ .pkt-tabs__button pkt-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-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}
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}
package/dist/css/components/tag.css CHANGED
@@ -159,28 +159,28 @@
159
159
  .pkt-tag--beige.pkt-btn:active > svg, .pkt-tag--beige.pkt-tag--active > svg {
160
160
  --fg-color: var(--pkt-color-tag-text-active);
161
161
  }
162
- .pkt-tag--grey {
162
+ .pkt-tag--gray, .pkt-tag--grey {
163
163
  background: var(--pkt-color-surface-default-gray);
164
164
  }
165
- .pkt-tag--grey.pkt-btn:hover, .pkt-tag--grey.pkt-tag--hover {
165
+ .pkt-tag--gray.pkt-btn:hover, .pkt-tag--gray.pkt-tag--hover, .pkt-tag--grey.pkt-btn:hover, .pkt-tag--grey.pkt-tag--hover {
166
166
  background-color: var(--pkt-color-surface-strong-gray);
167
167
  color: var(--pkt-color-tag-text-hover);
168
168
  }
169
- .pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
169
+ .pkt-tag--gray.pkt-btn:hover > svg, .pkt-tag--gray.pkt-tag--hover > svg, .pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
170
170
  --fg-color: var(--pkt-color-tag-text-hover);
171
171
  }
172
- .pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
172
+ .pkt-tag--gray.pkt-btn:focus, .pkt-tag--gray.pkt-tag--focus, .pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
173
173
  background-color: var(--pkt-color-surface-strong-gray);
174
174
  color: var(--pkt-color-tag-text-active);
175
175
  }
176
- .pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
176
+ .pkt-tag--gray.pkt-btn:focus > svg, .pkt-tag--gray.pkt-tag--focus > svg, .pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
177
177
  --fg-color: var(--pkt-color-tag-text-active);
178
178
  }
179
- .pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
179
+ .pkt-tag--gray.pkt-btn:active, .pkt-tag--gray.pkt-tag--active, .pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
180
180
  background-color: var(--pkt-color-surface-strong-gray);
181
181
  color: var(--pkt-color-tag-text-active);
182
182
  }
183
- .pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
183
+ .pkt-tag--gray.pkt-btn:active > svg, .pkt-tag--gray.pkt-tag--active > svg, .pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
184
184
  --fg-color: var(--pkt-color-tag-text-active);
185
185
  }
186
186
  .pkt-tag--blue-light {