@oslokommune/punkt-css 14.1.1 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +51 -0
  2. package/dist/css/components/calendar.css +10 -75
  3. package/dist/css/components/calendar.min.css +1 -1
  4. package/dist/css/components/datepicker.css +121 -0
  5. package/dist/css/components/datepicker.min.css +1 -0
  6. package/dist/css/components/textinput.css +5 -2
  7. package/dist/css/components/textinput.min.css +1 -1
  8. package/dist/css/elements/checkbox-radio.css +3 -3
  9. package/dist/css/elements/checkbox-radio.min.css +1 -1
  10. package/dist/css/elements/input.css +5 -2
  11. package/dist/css/elements/input.min.css +1 -1
  12. package/dist/css/elements/select.css +5 -2
  13. package/dist/css/elements/select.min.css +1 -1
  14. package/dist/css/pkt-base.css +12 -1
  15. package/dist/css/pkt-base.min.css +1 -1
  16. package/dist/css/pkt-components.css +136 -76
  17. package/dist/css/pkt-components.min.css +1 -1
  18. package/dist/css/pkt-docs.css +151 -80
  19. package/dist/css/pkt-docs.min.css +1 -1
  20. package/dist/css/pkt-elements.css +8 -5
  21. package/dist/css/pkt-elements.min.css +1 -1
  22. package/dist/css/pkt.css +151 -80
  23. package/dist/css/pkt.min.css +1 -1
  24. package/dist/scss/abstracts/variables/_index.scss +1 -1
  25. package/dist/scss/base/_index.scss +1 -0
  26. package/dist/scss/base/_layouts.scss +6 -0
  27. package/dist/scss/base/_visibility.scss +3 -0
  28. package/dist/scss/components/_calendar.scss +7 -78
  29. package/dist/scss/components/_datepicker.scss +139 -0
  30. package/dist/scss/components/_index.scss +1 -0
  31. package/dist/scss/elements/_input.scss +4 -0
  32. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -5,6 +5,57 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [15.0.0](https://github.com/oslokommune/punkt/compare/14.5.4...15.0.0) (2026-02-12)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ * PktDatepicker er nå en ren React-komponent - pluss endringer i Elements pkt-datepicker (#3241). BREAKING CHANGE: **React datepicker bruker ikke Custom Event i onValueChange, men returnerer array direkte**
12
+
13
+ BREAKING CHANGE: **Endringer i HTML-attributter for Punkt Elements `<pkt-datepicker>`**
14
+
15
+ `showRangeLabels` er nå `show-range-labels`
16
+ `calendarOpen` er nå `calendar-open`
17
+
18
+ JavaScript-properties og React-props (`showRangeLabels`, `calendarOpen`) er uendret — kun HTML-attributtene i Punkt Elements-varianten er endret.
19
+
20
+ **Andre endringer:**
21
+
22
+ Lagt til til en metode for å overstyre `today`, slik at dagens dato i kalenderen kan være markert som en annen dato enn dagens faktiske dato (nyttig om man har snapshot-tester som daglig vil vike fra gårsdagens snapshots.
23
+
24
+ Fikset en drøss med små visuelle bugs som er rapportert fra brukere og designer.
25
+
26
+ Datepicker støtter endelig attributten `fullwidth`.
27
+
28
+
29
+ ### Features
30
+ Ingen
31
+
32
+ ### Bug Fixes
33
+ Ingen
34
+
35
+ ### Chores
36
+ Ingen
37
+
38
+ ---
39
+
40
+
41
+ ## [14.5.3](https://github.com/oslokommune/punkt/compare/14.5.2...14.5.3) (2026-02-09)
42
+
43
+ ### ⚠ BREAKING CHANGES
44
+ Ingen
45
+
46
+ ### Features
47
+ Ingen
48
+
49
+ ### Bug Fixes
50
+ Ingen
51
+
52
+ ### Chores
53
+ * Punkt Claude skills (#3233).
54
+
55
+
56
+ ---
57
+
58
+
8
59
  ## [14.1.1](https://github.com/oslokommune/punkt/compare/14.1.0...14.1.1) (2026-02-04)
9
60
 
10
61
  ### ⚠ BREAKING CHANGES
package/dist/css/components/calendar.css CHANGED
@@ -139,6 +139,15 @@ pkt-calendar .pkt-cal-selected .pkt-btn,
139
139
  pkt-calendar .pkt-cal-selected .pkt-btn:focus,
140
140
  pkt-calendar .pkt-cal-selected .pkt-btn:hover {
141
141
  background-color: var(--pkt-color-surface-strong-blue);
142
+ color: var(--pkt-color-brand-dark-blue-1000);
143
+ }
144
+ .pkt-calendar .pkt-cal-in-range .pkt-btn,
145
+ .pkt-calendar .pkt-cal-in-range .pkt-btn:focus,
146
+ .pkt-calendar .pkt-cal-in-range .pkt-btn:hover,
147
+ pkt-calendar .pkt-cal-in-range .pkt-btn,
148
+ pkt-calendar .pkt-cal-in-range .pkt-btn:focus,
149
+ pkt-calendar .pkt-cal-in-range .pkt-btn:hover {
150
+ color: var(--pkt-color-brand-dark-blue-1000);
142
151
  }
143
152
  .pkt-calendar .pkt-cal-in-range :before,
144
153
  .pkt-calendar .pkt-cal-in-range :after, .pkt-calendar .pkt-cal-in-range-first :after, .pkt-calendar .pkt-cal-in-range-last :before,
@@ -158,6 +167,7 @@ pkt-calendar .pkt-cal-in-range-last :after {
158
167
  pkt-calendar .pkt-cal-range-hover :before,
159
168
  pkt-calendar .pkt-cal-range-hover .pkt-btn {
160
169
  background-color: var(--pkt-color-surface-default-light-blue);
170
+ color: var(--pkt-color-brand-dark-blue-1000);
161
171
  }
162
172
  .pkt-calendar .pkt-cal-range-hover ::after,
163
173
  pkt-calendar .pkt-cal-range-hover ::after {
@@ -176,79 +186,4 @@ pkt-calendar .pkt-cal-excluded {
176
186
  pkt-calendar .pkt-cal-excluded :before,
177
187
  pkt-calendar .pkt-cal-excluded :after {
178
188
  background-color: transparent;
179
- }
180
-
181
- pkt-datepicker {
182
- display: block;
183
- position: relative;
184
- }
185
- pkt-datepicker .pkt-datepicker {
186
- position: relative;
187
- }
188
- pkt-datepicker .pkt-datepicker__tags .pkt-tag {
189
- margin: 0 0.25rem 0.5rem 0;
190
- }
191
-
192
- pkt-datepicker-single,
193
- pkt-datepicker-range,
194
- pkt-datepicker-multiple {
195
- display: block;
196
- }
197
-
198
- .pkt-datepicker__inputs {
199
- width: 100%;
200
- position: relative;
201
- }
202
- .pkt-datepicker__inputs .pkt-input__container {
203
- width: fit-content;
204
- }
205
- .pkt-datepicker__inputs button.pkt-input-icon {
206
- padding-left: 0.25rem;
207
- padding-right: 0.25rem;
208
- }
209
- .pkt-datepicker__inputs button.pkt-input-icon:hover {
210
- background-color: inherit !important;
211
- border-color: inherit !important;
212
- --fg-color: var(--pkt-color-button-text-hover);
213
- }
214
- .pkt-datepicker__inputs .pkt-datepicker__input {
215
- padding-right: 0;
216
- background-image: none;
217
- }
218
- .pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
219
- padding-left: 0.25rem;
220
- }
221
-
222
- .pkt-calendar-popup {
223
- top: 100%;
224
- left: 0;
225
- z-index: 2;
226
- margin: 0;
227
- padding: 0.5rem;
228
- position: absolute;
229
- width: max-content;
230
- background: var(--pkt-color-background-default);
231
- box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
232
- }
233
-
234
- .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
235
- width: 8.3rem;
236
- }
237
-
238
- .pkt-datepicker__input::-webkit-inner-spin-button,
239
- .pkt-datepicker__input::-webkit-calendar-picker-indicator {
240
- display: none;
241
- -webkit-appearance: none;
242
- }
243
-
244
- @-moz-document url-prefix() {
245
- .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
246
- width: 10.5rem;
247
- }
248
- .pkt-datepicker__inputs button.pkt-input-icon {
249
- display: none;
250
- }
251
- .pkt-datepicker__inputs input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
252
- border-right-width: 2px !important;
253
- }
254
189
  }
package/dist/css/components/calendar.min.css CHANGED
@@ -1 +1 @@
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{letter-spacing:-0.2px;font-weight:500;font-size:1rem;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-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>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-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 button,.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days button,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 button:before,.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days button: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 button:before,.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button: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);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 ::after,pkt-calendar .pkt-cal-range-hover ::after{background-color:rgba(0,0,0,0)}.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-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-datepicker__inputs .pkt-input__container{width:fit-content}.pkt-datepicker__inputs button.pkt-input-icon{padding-left:.25rem;padding-right:.25rem}.pkt-datepicker__inputs button.pkt-input-icon:hover{background-color:inherit !important;border-color:inherit !important;--fg-color: var(--pkt-color-button-text-hover)}.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:0;background-image:none}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-left:.25rem}.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)}.pkt-datepicker__input:not(.pkt-datepicker--multiple){width:8.3rem}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}@-moz-document url-prefix(){.pkt-datepicker__input:not(.pkt-datepicker--multiple){width:10.5rem}.pkt-datepicker__inputs button.pkt-input-icon{display:none}.pkt-datepicker__inputs input.pkt-datepicker__input:has(~button):not(:has(~.pkt-input-separator)):not(:has(~.pkt-input-prefix)){border-right-width:2px !important}}
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{letter-spacing:-0.2px;font-weight:500;font-size:1rem;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-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>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-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 button,.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days button,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 button:before,.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days button: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 button:before,.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button: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);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);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range .pkt-btn,.pkt-calendar .pkt-cal-in-range .pkt-btn:focus,.pkt-calendar .pkt-cal-in-range .pkt-btn:hover,pkt-calendar .pkt-cal-in-range .pkt-btn,pkt-calendar .pkt-cal-in-range .pkt-btn:focus,pkt-calendar .pkt-cal-in-range .pkt-btn:hover{color:var(--pkt-color-brand-dark-blue-1000)}.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);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-range-hover ::after,pkt-calendar .pkt-cal-range-hover ::after{background-color:rgba(0,0,0,0)}.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)}
package/dist/css/components/datepicker.css ADDED
@@ -0,0 +1,121 @@
1
+ .pkt-datepicker,
2
+ pkt-datepicker {
3
+ display: block;
4
+ position: relative;
5
+ }
6
+
7
+ .pkt-datepicker__tags button.pkt-tag {
8
+ margin: 0 0.25rem 0.5rem 0;
9
+ }
10
+
11
+ .pkt-datepicker-single,
12
+ .pkt-datepicker-range,
13
+ .pkt-datepicker-multiple,
14
+ pkt-datepicker-single,
15
+ pkt-datepicker-range,
16
+ pkt-datepicker-multiple {
17
+ display: block;
18
+ }
19
+
20
+ .pkt-datepicker__inputs {
21
+ width: 100%;
22
+ position: relative;
23
+ }
24
+ .pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
25
+ width: fit-content;
26
+ }
27
+ .pkt-datepicker__inputs > .pkt-input__container {
28
+ border: 2px solid var(--pkt-color-input-border-normal);
29
+ }
30
+ .pkt-datepicker__inputs > .pkt-input__container .pkt-input,
31
+ .pkt-datepicker__inputs > .pkt-input__container .pkt-input-prefix,
32
+ .pkt-datepicker__inputs > .pkt-input__container .pkt-input-suffix,
33
+ .pkt-datepicker__inputs > .pkt-input__container .pkt-input-icon,
34
+ .pkt-datepicker__inputs > .pkt-input__container .pkt-input-separator {
35
+ border: 0;
36
+ }
37
+ .pkt-datepicker__inputs > .pkt-input__container:hover {
38
+ border-color: var(--pkt-color-input-border-active);
39
+ }
40
+ .pkt-datepicker__inputs > .pkt-input__container:focus-within {
41
+ border-color: var(--pkt-color-input-border-active);
42
+ }
43
+ .pkt-datepicker__inputs > .pkt-input__container:has(input:disabled), .pkt-datepicker__inputs > .pkt-input__container:has(input[readonly]) {
44
+ border-color: var(--pkt-color-input-border-disabled);
45
+ }
46
+ .pkt-datepicker__inputs > .pkt-input__container:has(.pkt-input--counter-error) {
47
+ border-color: var(--pkt-color-input-border-error);
48
+ }
49
+ .pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container {
50
+ border-color: var(--pkt-color-brand-red-1000);
51
+ }
52
+ .pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container:hover, .pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container:focus-within {
53
+ border-color: var(--pkt-color-brand-red-1000);
54
+ }
55
+ .pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container {
56
+ border-color: var(--pkt-color-border-states-disabled);
57
+ }
58
+ .pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container:hover, .pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container:focus-within {
59
+ border-color: var(--pkt-color-border-states-disabled);
60
+ box-shadow: none;
61
+ outline: none;
62
+ }
63
+ .pkt-datepicker__inputs button.pkt-input-icon {
64
+ padding-left: 0.75rem;
65
+ padding-right: 0.75rem;
66
+ }
67
+ .pkt-datepicker__inputs button.pkt-input-icon:hover {
68
+ background-color: inherit !important;
69
+ border-color: inherit !important;
70
+ --fg-color: var(--pkt-color-button-text-hover);
71
+ }
72
+ .pkt-datepicker__inputs .pkt-datepicker__input {
73
+ padding-right: 0;
74
+ background-image: none;
75
+ }
76
+ .pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
77
+ padding-left: 0.25rem;
78
+ }
79
+
80
+ .pkt-calendar-popup {
81
+ top: 100%;
82
+ left: 0;
83
+ z-index: 2;
84
+ margin: 0;
85
+ padding: 0.5rem;
86
+ position: absolute;
87
+ width: max-content;
88
+ background: var(--pkt-color-background-default);
89
+ box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
90
+ }
91
+
92
+ .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
93
+ width: 8.3rem;
94
+ }
95
+
96
+ .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
97
+ width: auto;
98
+ flex: 1;
99
+ }
100
+
101
+ .pkt-datepicker__input::-webkit-inner-spin-button,
102
+ .pkt-datepicker__input::-webkit-calendar-picker-indicator {
103
+ display: none;
104
+ -webkit-appearance: none;
105
+ }
106
+
107
+ @-moz-document url-prefix() {
108
+ .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
109
+ width: 10.5rem;
110
+ }
111
+ .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
112
+ width: auto;
113
+ flex: 1;
114
+ }
115
+ .pkt-datepicker__inputs button.pkt-input-icon {
116
+ display: none;
117
+ }
118
+ .pkt-datepicker__inputs input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
119
+ border-right-width: 2px !important;
120
+ }
121
+ }
package/dist/css/components/datepicker.min.css ADDED
@@ -0,0 +1 @@
1
+ .pkt-datepicker,pkt-datepicker{display:block;position:relative}.pkt-datepicker__tags button.pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker-single,.pkt-datepicker-range,.pkt-datepicker-multiple,pkt-datepicker-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)){width:fit-content}.pkt-datepicker__inputs>.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal)}.pkt-datepicker__inputs>.pkt-input__container .pkt-input,.pkt-datepicker__inputs>.pkt-input__container .pkt-input-prefix,.pkt-datepicker__inputs>.pkt-input__container .pkt-input-suffix,.pkt-datepicker__inputs>.pkt-input__container .pkt-input-icon,.pkt-datepicker__inputs>.pkt-input__container .pkt-input-separator{border:0}.pkt-datepicker__inputs>.pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs>.pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs>.pkt-input__container:has(input:disabled),.pkt-datepicker__inputs>.pkt-input__container:has(input[readonly]){border-color:var(--pkt-color-input-border-disabled)}.pkt-datepicker__inputs>.pkt-input__container:has(.pkt-input--counter-error){border-color:var(--pkt-color-input-border-error)}.pkt-inputwrapper--error .pkt-datepicker__inputs>.pkt-input__container{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-datepicker__inputs>.pkt-input__container:hover,.pkt-inputwrapper--error .pkt-datepicker__inputs>.pkt-input__container:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs>.pkt-input__container{border-color:var(--pkt-color-border-states-disabled)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs>.pkt-input__container:hover,.pkt-inputwrapper--disabled .pkt-datepicker__inputs>.pkt-input__container:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-datepicker__inputs button.pkt-input-icon{padding-left:.75rem;padding-right:.75rem}.pkt-datepicker__inputs button.pkt-input-icon:hover{background-color:inherit !important;border-color:inherit !important;--fg-color: var(--pkt-color-button-text-hover)}.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:0;background-image:none}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-left:.25rem}.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)}.pkt-datepicker__input:not(.pkt-datepicker--multiple){width:8.3rem}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){width:auto;flex:1}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}@-moz-document url-prefix(){.pkt-datepicker__input:not(.pkt-datepicker--multiple){width:10.5rem}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){width:auto;flex:1}.pkt-datepicker__inputs button.pkt-input-icon{display:none}.pkt-datepicker__inputs input.pkt-datepicker__input:has(~button):not(:has(~.pkt-input-separator)):not(:has(~.pkt-input-prefix)){border-right-width:2px !important}}
package/dist/css/components/textinput.css CHANGED
@@ -48,7 +48,10 @@ pkt-select {
48
48
  .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
49
49
  width: fit-content;
50
50
  }
51
- .pkt-input--fullwidth, .pkt-input--fullwidth + .pkt-input__counter {
51
+ .pkt-input--fullwidth, *:has(.pkt-input--fullwidth) ~ .pkt-input__counter, .pkt-input--fullwidth + .pkt-input__counter {
52
+ width: 100%;
53
+ }
54
+ [fullwidth] .pkt-input__counter {
52
55
  width: 100%;
53
56
  }
54
57
  .pkt-input:is(textarea), .pkt-textinput__input:is(textarea) {
@@ -61,7 +64,7 @@ pkt-select {
61
64
  padding-right: 3rem;
62
65
  }
63
66
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
64
- --svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/chevron-thin-down.svg);
67
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/chevron-thin-down.svg);
65
68
  background-image: var(--svg);
66
69
  background-repeat: no-repeat;
67
70
  background-position: right 0.7rem top 50%;
package/dist/css/components/textinput.min.css CHANGED
@@ -1 +1 @@
1
- pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-textinput__input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-textinput__input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-input-compact.pkt-textinput__input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-input-compact.pkt-textinput__input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),[readonly].pkt-textinput__input:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-textinput__input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-textinput__input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input,.pkt-input__container .pkt-textinput__input{border:0}}
1
+ pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-textinput__input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-textinput__input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-input-compact.pkt-textinput__input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-input-compact.pkt-textinput__input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),[readonly].pkt-textinput__input:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-textinput__input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-textinput__input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input,.pkt-input__container .pkt-textinput__input{border:0}}
package/dist/css/elements/checkbox-radio.css CHANGED
@@ -93,7 +93,7 @@
93
93
  outline-color: var(--pkt-color-input-border-hover);
94
94
  }
95
95
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
96
- --svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/minus-sign.svg);
96
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/minus-sign.svg);
97
97
  position: relative;
98
98
  background-color: var(--pkt-color-input-border-normal);
99
99
  }
@@ -119,7 +119,7 @@
119
119
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
120
120
  }
121
121
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
122
- --svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/check-medium.svg);
122
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/check-medium.svg);
123
123
  position: relative;
124
124
  background-color: var(--pkt-color-input-border-normal);
125
125
  }
@@ -177,7 +177,7 @@
177
177
  cursor: not-allowed;
178
178
  }
179
179
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
180
- --svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/check-medium.svg);
180
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/check-medium.svg);
181
181
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
182
182
  filter: grayscale(100%) brightness(400%);
183
183
  }
package/dist/css/elements/checkbox-radio.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-input-check{display:flex;flex-direction:column;row-gap:1rem}.pkt-input-check__input{display:flex}.pkt-input-check__input-label{color:var(--pkt-color-text-body-default);padding-left:.5rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-check__input-label--left{padding-left:0;padding-right:.5rem}.pkt-input-check__input-helptext{padding-top:.5rem;max-width:21.875rem;color:var(--pkt-color-text-body-default);letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input-check__input:hover>.pkt-input-check__input-checkbox:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox{appearance:none;background-color:var(--pkt-color-input-check-background);border:2px solid var(--pkt-color-input-check-border);width:1.5rem;height:1.5rem;flex-shrink:0;transition:all .3s ease-out}.pkt-input-check__input-checkbox[type=checkbox]{border-radius:0}.pkt-input-check__input-checkbox[type=checkbox][role=switch]{position:relative;height:calc(1.5rem + 2px);width:2.5rem;border-radius:calc(.75rem + 2px)}.pkt-input-check__input-checkbox[type=checkbox][role=switch]:after{display:block;content:"";border:2px solid var(--pkt-color-input-check-border);background-color:var(--pkt-color-input-check-background);position:absolute;top:-1px;bottom:-1px;left:-1px;width:1.5rem;border-radius:.75rem;transition:all .3s ease-out}.pkt-input-check__input-checkbox[type=radio]{border-radius:50%;border:none;width:1.25rem;height:1.25rem;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:focus-visible:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox[type=checkbox]:hover{--pkt-color-input-check-border: var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox[type=checkbox]:active:not(:disabled){--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:6px solid var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox[type=checkbox]:focus-visible{--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input-check__input-checkbox[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);outline-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]){--svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/minus-sign.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[type=checkbox]{--svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/check-medium.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[role=switch]:after{left:calc(100% + 1px);transform:translate(-100%, 0);background-image:var(--svg);background-repeat:no-repeat}.pkt-input-check__input-checkbox:checked[type=radio]{background-color:var(--pkt-color-input-border-normal);border:3px solid var(--pkt-color-input-check-background);box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox:checked[type=checkbox]:hover{background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:checked[type=radio]:focus-visible{background-color:var(--pkt-color-input-border-active);border:3px solid var(--pkt-color-input-check-background);outline:none;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-active),0px 0px 0px .375rem var(--pkt-color-border-states-focus)}.pkt-input-check__input-checkbox:checked[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:disabled[type=checkbox]{background-color:var(--pkt-color-surface-default-gray);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after{--svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/check-medium.svg);--pkt-color-input-check-border: var(--pkt-color-input-border-normal);filter:grayscale(100%) brightness(400%)}.pkt-input-check__input-checkbox:disabled[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-surface-default-gray);cursor:not-allowed;outline-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=checkbox]{background-color:var(--pkt-color-input-border-disabled);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-label--disabled,.pkt-input-check__input-label--disabled .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label .pkt-input-check__input-helptext{color:var(--pkt-color-input-text-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox--error[type=checkbox]:not([role=switch]):checked:after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}.pkt-input-check__input-checkbox--error[type=checkbox],.pkt-input-check__input-checkbox--error[type=checkbox]:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled),.pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked:before{background-color:var(--pkt-color-surface-default-faded-red);--pkt-color-input-check-border: var(--pkt-color-input-border-error);outline-color:var(--pkt-color-input-border-error)}.pkt-input-check__input-checkbox--error[type=radio],.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:active:not(:disabled){box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input-check__input-checkbox--error[type=radio]:checked,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible+.pkt-input-check__input--tile{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input--tile{border:2px solid var(--pkt-color-border-subtle);width:21.875rem;position:relative}.pkt-input-check__input--tile .pkt-input-check__input-label:before{content:""}.pkt-input-check__input--tile>.pkt-input-check__input-label{padding:1rem 1rem 1rem .5rem;width:100%}.pkt-input-check__input--tile>.pkt-input-check__input-checkbox{margin:1rem 0 1rem 1rem}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:checked:not(:disabled)+.pkt-input-check__input-label:before{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;top:-2px;border:2px solid var(--pkt-color-border-default);pointer-events:none}.pkt-input-check__input--tile:focus-within{background-color:var(--pkt-color-input-background-normal);border-color:var(--pkt-color-border-states-active);outline:4px solid var(--pkt-color-border-states-focus)}.pkt-input-check__input--tile:hover:not(.pkt-input-check__input--tile-disabled){border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:hover>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:active:not(:disabled)>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-active)}.pkt-input-check__input--tile:disabled{border-color:var(--pkt-color-border-states-disabled)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible{box-shadow:0px 0px 0px .125rem var(--pkt-color-border-states-active)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox[type=checkbox]:focus-visible{outline:none}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox]:not([role=switch]):after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:not(:disabled){background-color:var(--pkt-color-input-border-hover);border-color:var(--pkt-color-input-border-hover)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:after{background-color:var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:disabled:not(:checked){background-color:rgba(0,0,0,0)}[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input),[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input):checked:checked{background-color:var(--pkt-color-surface-default-faded-red);border-color:var(--pkt-color-input-border-error)}
1
+ .pkt-input-check{display:flex;flex-direction:column;row-gap:1rem}.pkt-input-check__input{display:flex}.pkt-input-check__input-label{color:var(--pkt-color-text-body-default);padding-left:.5rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-check__input-label--left{padding-left:0;padding-right:.5rem}.pkt-input-check__input-helptext{padding-top:.5rem;max-width:21.875rem;color:var(--pkt-color-text-body-default);letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input-check__input:hover>.pkt-input-check__input-checkbox:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox{appearance:none;background-color:var(--pkt-color-input-check-background);border:2px solid var(--pkt-color-input-check-border);width:1.5rem;height:1.5rem;flex-shrink:0;transition:all .3s ease-out}.pkt-input-check__input-checkbox[type=checkbox]{border-radius:0}.pkt-input-check__input-checkbox[type=checkbox][role=switch]{position:relative;height:calc(1.5rem + 2px);width:2.5rem;border-radius:calc(.75rem + 2px)}.pkt-input-check__input-checkbox[type=checkbox][role=switch]:after{display:block;content:"";border:2px solid var(--pkt-color-input-check-border);background-color:var(--pkt-color-input-check-background);position:absolute;top:-1px;bottom:-1px;left:-1px;width:1.5rem;border-radius:.75rem;transition:all .3s ease-out}.pkt-input-check__input-checkbox[type=radio]{border-radius:50%;border:none;width:1.25rem;height:1.25rem;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:focus-visible:not(:disabled)+.pkt-input-check__input-label{color:var(--pkt-color-input-check-text-hover)}.pkt-input-check__input-checkbox[type=checkbox]:hover{--pkt-color-input-check-border: var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox[type=checkbox]:active:not(:disabled){--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:6px solid var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox[type=checkbox]:focus-visible{--pkt-color-input-check-border: var(--pkt-color-input-border-active);outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input-check__input-checkbox[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);outline-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]){--svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/minus-sign.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[type=checkbox]{--svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/check-medium.svg);position:relative;background-color:var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.pkt-input-check__input-checkbox:checked:not([role=switch])[type=checkbox]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:24px;height:24px;background-image:var(--svg);background-repeat:no-repeat;filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%)}.pkt-input-check__input-checkbox:checked[role=switch]:after{left:calc(100% + 1px);transform:translate(-100%, 0);background-image:var(--svg);background-repeat:no-repeat}.pkt-input-check__input-checkbox:checked[type=radio]{background-color:var(--pkt-color-input-border-normal);border:3px solid var(--pkt-color-input-check-background);box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-normal)}.pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox:checked[type=checkbox]:hover{background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:checked[type=radio]:focus-visible{background-color:var(--pkt-color-input-border-active);border:3px solid var(--pkt-color-input-check-background);outline:none;box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-active),0px 0px 0px .375rem var(--pkt-color-border-states-focus)}.pkt-input-check__input-checkbox:checked[type=radio]:hover{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-hover);background-color:var(--pkt-color-input-border-hover)}.pkt-input-check__input-checkbox:disabled[type=checkbox]{background-color:var(--pkt-color-surface-default-gray);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after{--svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/check-medium.svg);--pkt-color-input-check-border: var(--pkt-color-input-border-normal);filter:grayscale(100%) brightness(400%)}.pkt-input-check__input-checkbox:disabled[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-surface-default-gray);cursor:not-allowed;outline-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=checkbox]{background-color:var(--pkt-color-input-border-disabled);--pkt-color-input-check-border: var(--pkt-color-input-border-disabled)}.pkt-input-check__input-checkbox:disabled:checked[type=radio]{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-input-border-disabled)}.pkt-input-check__input-label--disabled,.pkt-input-check__input-label--disabled .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper,.pkt-input-check__input-checkbox:disabled+.pkt-inputwrapper .pkt-input-check__input-helptext,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label,.pkt-input-check__input-checkbox:disabled+.pkt-input-check__input-label .pkt-input-check__input-helptext{color:var(--pkt-color-input-text-disabled);cursor:not-allowed}.pkt-input-check__input-checkbox--error[type=checkbox]:not([role=switch]):checked:after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}.pkt-input-check__input-checkbox--error[type=checkbox],.pkt-input-check__input-checkbox--error[type=checkbox]:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover,.pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled),.pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked:before{background-color:var(--pkt-color-surface-default-faded-red);--pkt-color-input-check-border: var(--pkt-color-input-border-error);outline-color:var(--pkt-color-input-border-error)}.pkt-input-check__input-checkbox--error[type=radio],.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:hover,.pkt-input-check__input-checkbox--error[type=radio]:active:not(:disabled){box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input-check__input-checkbox--error[type=radio]:checked,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible,.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible+.pkt-input-check__input--tile{box-shadow:0px 0px 0px .125rem var(--pkt-color-input-border-error);background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input-checkbox--error[type=radio]:checked:hover,.pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible{background-color:var(--pkt-color-input-border-active)}.pkt-input-check__input--tile{border:2px solid var(--pkt-color-border-subtle);width:21.875rem;position:relative}.pkt-input-check__input--tile .pkt-input-check__input-label:before{content:""}.pkt-input-check__input--tile>.pkt-input-check__input-label{padding:1rem 1rem 1rem .5rem;width:100%}.pkt-input-check__input--tile>.pkt-input-check__input-checkbox{margin:1rem 0 1rem 1rem}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:checked:not(:disabled)+.pkt-input-check__input-label:before{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;top:-2px;border:2px solid var(--pkt-color-border-default);pointer-events:none}.pkt-input-check__input--tile:focus-within{background-color:var(--pkt-color-input-background-normal);border-color:var(--pkt-color-border-states-active);outline:4px solid var(--pkt-color-border-states-focus)}.pkt-input-check__input--tile:hover:not(.pkt-input-check__input--tile-disabled){border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:hover>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-hover)}.pkt-input-check__input--tile:active:not(:disabled)>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before{border-color:var(--pkt-color-border-states-active)}.pkt-input-check__input--tile:disabled{border-color:var(--pkt-color-border-states-disabled)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible{box-shadow:0px 0px 0px .125rem var(--pkt-color-border-states-active)}.pkt-input-check__input--tile .pkt-input-check__input-checkbox[type=checkbox]:focus-visible{outline:none}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox]:not([role=switch]):after{filter:brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:not(:disabled){background-color:var(--pkt-color-input-border-hover);border-color:var(--pkt-color-input-border-hover)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:checked:after{background-color:var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox][role=switch]:disabled:not(:checked){background-color:rgba(0,0,0,0)}[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input),[data-mode=dark] .pkt-input-check__input-checkbox--error[type=checkbox][role=switch]:is(input):checked:checked{background-color:var(--pkt-color-surface-default-faded-red);border-color:var(--pkt-color-input-border-error)}
package/dist/css/elements/input.css CHANGED
@@ -42,7 +42,10 @@ pkt-select {
42
42
  .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
43
43
  width: fit-content;
44
44
  }
45
- .pkt-input--fullwidth, .pkt-input--fullwidth + .pkt-input__counter {
45
+ .pkt-input--fullwidth, *:has(.pkt-input--fullwidth) ~ .pkt-input__counter, .pkt-input--fullwidth + .pkt-input__counter {
46
+ width: 100%;
47
+ }
48
+ [fullwidth] .pkt-input__counter {
46
49
  width: 100%;
47
50
  }
48
51
  .pkt-input:is(textarea) {
@@ -55,7 +58,7 @@ pkt-select {
55
58
  padding-right: 3rem;
56
59
  }
57
60
  .pkt-input:is(select):not([multiple]) {
58
- --svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/chevron-thin-down.svg);
61
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/chevron-thin-down.svg);
59
62
  background-image: var(--svg);
60
63
  background-repeat: no-repeat;
61
64
  background-position: right 0.7rem top 50%;
package/dist/css/elements/input.min.css CHANGED
@@ -1 +1 @@
1
- pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea){min-height:8rem}.pkt-input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-input.pkt-input--hover{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-input.pkt-input__textinput--focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input{border:0}}
1
+ pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea){min-height:8rem}.pkt-input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-input.pkt-input--hover{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-input.pkt-input__textinput--focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input{border:0}}
package/dist/css/elements/select.css CHANGED
@@ -53,7 +53,10 @@ pkt-select {
53
53
  .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
54
54
  width: fit-content;
55
55
  }
56
- .pkt-input--fullwidth, .pkt-input--fullwidth + .pkt-input__counter {
56
+ .pkt-input--fullwidth, *:has(.pkt-input--fullwidth) ~ .pkt-input__counter, .pkt-input--fullwidth + .pkt-input__counter {
57
+ width: 100%;
58
+ }
59
+ [fullwidth] .pkt-input__counter {
57
60
  width: 100%;
58
61
  }
59
62
  .pkt-input:is(textarea), .pkt-select select:is(textarea),
@@ -69,7 +72,7 @@ pkt-select {
69
72
  }
70
73
  .pkt-input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
71
74
  .pkt-select:is(select):not([multiple]) {
72
- --svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/chevron-thin-down.svg);
75
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/chevron-thin-down.svg);
73
76
  background-image: var(--svg);
74
77
  background-repeat: no-repeat;
75
78
  background-position: right 0.7rem top 50%;
package/dist/css/elements/select.min.css CHANGED
@@ -1 +1 @@
1
- pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-select select,.pkt-select:is(select){display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-select select:not(.pkt-input-compact),.pkt-select:not(.pkt-input-compact):is(select){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-select select.pkt-input-compact,.pkt-input-compact.pkt-select:is(select){border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-select select.pkt-input-compact:is(select):not([multiple]),.pkt-input-compact.pkt-select:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-select select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)):is(select),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-select select:is(textarea),.pkt-select:is(textarea):is(select){min-height:8rem}.pkt-input:is(select),.pkt-select select:is(select),.pkt-select:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-select select:is(select):not([multiple]),.pkt-select:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-select select:is(select) option,.pkt-select:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-select select::placeholder,.pkt-select:is(select)::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-select select:hover,.pkt-select:hover:is(select),.pkt-input.pkt-input--hover,.pkt-select select.pkt-input--hover,.pkt-input--hover.pkt-select:is(select){border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-select select:focus-visible,.pkt-select:focus-visible:is(select),.pkt-input.pkt-input__textinput--focus,.pkt-select select.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-select:is(select){box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-select select:focus,.pkt-select:focus:is(select){outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-select select:disabled,.pkt-select:disabled:is(select),.pkt-input:disabled::placeholder,.pkt-select select:disabled::placeholder,.pkt-select:disabled:is(select)::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),.pkt-select select[readonly]:not(.ios-readonly-hack),[readonly].pkt-select:not(.ios-readonly-hack):is(select){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-select select:disabled:active,.pkt-select:disabled:active:is(select){border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-select select,.pkt-select .pkt-input__container:hover select,.pkt-input__container:hover .pkt-select:is(select),.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-select select:disabled,.pkt-select .pkt-input__container:hover select:disabled,.pkt-input__container:hover .pkt-select:disabled:is(select),.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-select select,.pkt-select .pkt-input__container:focus-within select,.pkt-input__container:focus-within .pkt-select:is(select),.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input,.pkt-input__container .pkt-select select,.pkt-select .pkt-input__container select,.pkt-input__container .pkt-select:is(select){border:0}}
1
+ pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-select select,.pkt-select:is(select){display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-select select:not(.pkt-input-compact),.pkt-select:not(.pkt-input-compact):is(select){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-select select.pkt-input-compact,.pkt-input-compact.pkt-select:is(select){border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-select select.pkt-input-compact:is(select):not([multiple]),.pkt-input-compact.pkt-select:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-select select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)):is(select),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-select select:is(textarea),.pkt-select:is(textarea):is(select){min-height:8rem}.pkt-input:is(select),.pkt-select select:is(select),.pkt-select:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-select select:is(select):not([multiple]),.pkt-select:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-select select:is(select) option,.pkt-select:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-select select::placeholder,.pkt-select:is(select)::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-select select:hover,.pkt-select:hover:is(select),.pkt-input.pkt-input--hover,.pkt-select select.pkt-input--hover,.pkt-input--hover.pkt-select:is(select){border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-select select:focus-visible,.pkt-select:focus-visible:is(select),.pkt-input.pkt-input__textinput--focus,.pkt-select select.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-select:is(select){box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-select select:focus,.pkt-select:focus:is(select){outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-select select:disabled,.pkt-select:disabled:is(select),.pkt-input:disabled::placeholder,.pkt-select select:disabled::placeholder,.pkt-select:disabled:is(select)::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),.pkt-select select[readonly]:not(.ios-readonly-hack),[readonly].pkt-select:not(.ios-readonly-hack):is(select){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-select select:disabled:active,.pkt-select:disabled:active:is(select){border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-select select,.pkt-select .pkt-input__container:hover select,.pkt-input__container:hover .pkt-select:is(select),.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-select select:disabled,.pkt-select .pkt-input__container:hover select:disabled,.pkt-input__container:hover .pkt-select:disabled:is(select),.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-select select,.pkt-select .pkt-input__container:focus-within select,.pkt-input__container:focus-within .pkt-select:is(select),.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input,.pkt-input__container .pkt-select select,.pkt-select .pkt-input__container select,.pkt-input__container .pkt-select:is(select){border:0}}
package/dist/css/pkt-base.css CHANGED
@@ -14158,7 +14158,7 @@ a:active, a.pkt-link--active,
14158
14158
  .pkt-link--external::after {
14159
14159
  display: inline-block;
14160
14160
  content: " ";
14161
- --svg: url(https://punkt-cdn.oslo.kommune.no/14.1/icons/new-window-small.svg);
14161
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/new-window-small.svg);
14162
14162
  background-image: var(--svg);
14163
14163
  background-repeat: no-repeat;
14164
14164
  background-size: 18px 18px;
@@ -17330,6 +17330,13 @@ button.pkt-link {
17330
17330
  display: contents;
17331
17331
  }
17332
17332
 
17333
+ .pkt-layout {
17334
+ display: grid;
17335
+ width: 100vw;
17336
+ min-height: 100vh;
17337
+ grid-template-rows: auto 1fr auto;
17338
+ }
17339
+
17333
17340
  /*
17334
17341
  * Visibility
17335
17342
  */
@@ -17341,6 +17348,10 @@ button.pkt-link {
17341
17348
  display: block !important;
17342
17349
  }
17343
17350
 
17351
+ .pkt-invisible {
17352
+ visibility: hidden !important;
17353
+ }
17354
+
17344
17355
  @media screen and (min-width: 0) {
17345
17356
  .pkt-hide-mobile-up,
17346
17357
  .pkt-show.pkt-hide-mobile-up {