@oslokommune/punkt-css 16.7.2 → 16.7.6

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 (20) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/css/components/datepicker.css +1 -0
  3. package/dist/css/components/datepicker.min.css +1 -1
  4. package/dist/css/components/textinput.css +14 -14
  5. package/dist/css/components/textinput.min.css +1 -1
  6. package/dist/css/elements/input.css +13 -13
  7. package/dist/css/elements/input.min.css +1 -1
  8. package/dist/css/elements/select.css +17 -17
  9. package/dist/css/elements/select.min.css +1 -1
  10. package/dist/css/pkt-components.css +15 -14
  11. package/dist/css/pkt-components.min.css +1 -1
  12. package/dist/css/pkt-docs.css +19 -18
  13. package/dist/css/pkt-docs.min.css +1 -1
  14. package/dist/css/pkt-elements.css +17 -17
  15. package/dist/css/pkt-elements.min.css +1 -1
  16. package/dist/css/pkt.css +19 -18
  17. package/dist/css/pkt.min.css +1 -1
  18. package/dist/scss/components/_datepicker.scss +1 -0
  19. package/dist/scss/elements/_input.scss +26 -27
  20. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,42 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [16.7.6](https://github.com/oslokommune/punkt/compare/16.7.5...16.7.6) (2026-04-15)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * Datepicker bøgger ut når plassert i "ukjent bredde" (#3420). Innholdet i containere klarer ikke rapportere sin egen bredde, så vi må falle tilbake til media queries.
18
+
19
+
20
+ ### Chores
21
+ Ingen
22
+
23
+ ---
24
+
25
+
26
+ ## [16.7.3](https://github.com/oslokommune/punkt/compare/16.7.2...16.7.3) (2026-04-14)
27
+
28
+ ### ⚠ BREAKING CHANGES
29
+ Ingen
30
+
31
+ ### Features
32
+ Ingen
33
+
34
+ ### Bug Fixes
35
+ * Fikser markup i testsider for CSS (#3415).
36
+
37
+
38
+ ### Chores
39
+ Ingen
40
+
41
+ ---
42
+
43
+
8
44
  ## [16.7.2](https://github.com/oslokommune/punkt/compare/16.7.1...16.7.2) (2026-04-13)
9
45
 
10
46
  ### ⚠ BREAKING CHANGES
package/dist/css/components/datepicker.css CHANGED
@@ -76,6 +76,7 @@ pkt-datepicker-multiple {
76
76
  .pkt-datepicker__inputs .pkt-datepicker__input {
77
77
  padding-right: 0;
78
78
  background-image: none;
79
+ width: 8.3rem;
79
80
  }
80
81
  .pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
81
82
  padding-left: 0.25rem;
package/dist/css/components/datepicker.min.css CHANGED
@@ -1 +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);background-color:var(--pkt-color-input-background-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;height:100%;min-height:2.75rem}.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]:not(.ios-readonly-hack)){border-color:var(--pkt-color-input-border-disabled);--fg-color: var(--pkt-color-input-text-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-top:.5rem;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray)}.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:8.3rem;max-width:calc(100% - 3rem)}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){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__inputs .pkt-datepicker__input{padding-right:.5rem}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:10.5rem;max-width:100%}.pkt-datepicker__inputs .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}}
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);background-color:var(--pkt-color-input-background-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;height:100%;min-height:2.75rem}.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]:not(.ios-readonly-hack)){border-color:var(--pkt-color-input-border-disabled);--fg-color: var(--pkt-color-input-text-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;width:8.3rem}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-left:.25rem}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin-top:.5rem;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray)}.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:8.3rem;max-width:calc(100% - 3rem)}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){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__inputs .pkt-datepicker__input{padding-right:.5rem}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:10.5rem;max-width:100%}.pkt-datepicker__inputs .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
@@ -221,35 +221,35 @@ pkt-select {
221
221
  .pkt-input__counter--error {
222
222
  color: var(--pkt-color-input-text-error);
223
223
  }
224
- .pkt-input__range-inputs {
225
- container: range/inline-size;
226
- }
227
224
 
228
- @container range (width < 30rem) {
229
- .pkt-input__container {
225
+ @media screen and (max-width: 30rem) {
226
+ .pkt-input__range-inputs {
227
+ max-width: 100%;
228
+ }
229
+ .pkt-input__range-inputs .pkt-input__container {
230
230
  border: 2px solid var(--pkt-color-input-border-normal);
231
231
  display: grid;
232
232
  grid-template-rows: auto auto;
233
233
  grid-template-columns: auto 3rem;
234
234
  gap: 0;
235
235
  }
236
- .pkt-input__container .pkt-input-prefix,
237
- .pkt-input__container .pkt-input-suffix,
238
- .pkt-input__container .pkt-input-icon,
239
- .pkt-input__container .pkt-input,
240
- .pkt-input__container .pkt-textinput__input {
236
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,
237
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,
238
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-icon,
239
+ .pkt-input__range-inputs .pkt-input__container .pkt-input,
240
+ .pkt-input__range-inputs .pkt-input__container .pkt-textinput__input {
241
241
  border: 0;
242
242
  }
243
- .pkt-input__container .pkt-input-separator {
243
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-separator {
244
244
  margin: 0 auto;
245
245
  }
246
- .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input {
246
+ .pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input {
247
247
  padding-left: 1rem;
248
248
  }
249
- .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
249
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
250
250
  grid-column-start: span 2;
251
251
  }
252
- .pkt-input__container:has(> :first-child.pkt-input-prefix) {
252
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) {
253
253
  grid-template-columns: min-content auto 3rem;
254
254
  }
255
255
  }
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))):not(:is(:has(.pkt-timepicker__input))){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/16.7/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);color:var(--pkt-color-input-text-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:not(:disabled),.pkt-input__container:hover .pkt-textinput__input:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.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{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:auto 3rem;gap:0}.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}.pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input{padding-left:1rem}.pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
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))):not(:is(:has(.pkt-timepicker__input))){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/16.7/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);color:var(--pkt-color-input-text-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:not(:disabled),.pkt-input__container:hover .pkt-textinput__input:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.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)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input,.pkt-input__range-inputs .pkt-input__container .pkt-textinput__input{border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input{padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
package/dist/css/elements/input.css CHANGED
@@ -215,34 +215,34 @@ pkt-select {
215
215
  .pkt-input__counter--error {
216
216
  color: var(--pkt-color-input-text-error);
217
217
  }
218
- .pkt-input__range-inputs {
219
- container: range/inline-size;
220
- }
221
218
 
222
- @container range (width < 30rem) {
223
- .pkt-input__container {
219
+ @media screen and (max-width: 30rem) {
220
+ .pkt-input__range-inputs {
221
+ max-width: 100%;
222
+ }
223
+ .pkt-input__range-inputs .pkt-input__container {
224
224
  border: 2px solid var(--pkt-color-input-border-normal);
225
225
  display: grid;
226
226
  grid-template-rows: auto auto;
227
227
  grid-template-columns: auto 3rem;
228
228
  gap: 0;
229
229
  }
230
- .pkt-input__container .pkt-input-prefix,
231
- .pkt-input__container .pkt-input-suffix,
232
- .pkt-input__container .pkt-input-icon,
233
- .pkt-input__container .pkt-input {
230
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,
231
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,
232
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-icon,
233
+ .pkt-input__range-inputs .pkt-input__container .pkt-input {
234
234
  border: 0;
235
235
  }
236
- .pkt-input__container .pkt-input-separator {
236
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-separator {
237
237
  margin: 0 auto;
238
238
  }
239
- .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range {
239
+ .pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range {
240
240
  padding-left: 1rem;
241
241
  }
242
- .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
242
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
243
243
  grid-column-start: span 2;
244
244
  }
245
- .pkt-input__container:has(> :first-child.pkt-input-prefix) {
245
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) {
246
246
  grid-template-columns: min-content auto 3rem;
247
247
  }
248
248
  }
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))):not(:is(:has(.pkt-timepicker__input))){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/16.7/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);color:var(--pkt-color-input-text-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:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.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{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:auto 3rem;gap:0}.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}.pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range{padding-left:1rem}.pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
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))):not(:is(:has(.pkt-timepicker__input))){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/16.7/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);color:var(--pkt-color-input-text-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:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.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)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input{border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range{padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
package/dist/css/elements/select.css CHANGED
@@ -242,38 +242,38 @@ pkt-select {
242
242
  .pkt-input__counter--error {
243
243
  color: var(--pkt-color-input-text-error);
244
244
  }
245
- .pkt-input__range-inputs {
246
- container: range/inline-size;
247
- }
248
245
 
249
- @container range (width < 30rem) {
250
- .pkt-input__container {
246
+ @media screen and (max-width: 30rem) {
247
+ .pkt-input__range-inputs {
248
+ max-width: 100%;
249
+ }
250
+ .pkt-input__range-inputs .pkt-input__container {
251
251
  border: 2px solid var(--pkt-color-input-border-normal);
252
252
  display: grid;
253
253
  grid-template-rows: auto auto;
254
254
  grid-template-columns: auto 3rem;
255
255
  gap: 0;
256
256
  }
257
- .pkt-input__container .pkt-input-prefix,
258
- .pkt-input__container .pkt-input-suffix,
259
- .pkt-input__container .pkt-input-icon,
260
- .pkt-input__container .pkt-input,
261
- .pkt-input__container .pkt-select select,
262
- .pkt-select .pkt-input__container select,
263
- .pkt-input__container .pkt-select:is(select) {
257
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,
258
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,
259
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-icon,
260
+ .pkt-input__range-inputs .pkt-input__container .pkt-input,
261
+ .pkt-input__range-inputs .pkt-input__container .pkt-select select,
262
+ .pkt-select .pkt-input__range-inputs .pkt-input__container select,
263
+ .pkt-input__range-inputs .pkt-input__container .pkt-select:is(select) {
264
264
  border: 0;
265
265
  }
266
- .pkt-input__container .pkt-input-separator {
266
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-separator {
267
267
  margin: 0 auto;
268
268
  }
269
- .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__container .pkt-select select.pkt-datepicker__input.pkt-datepicker--range, .pkt-select .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,
270
- .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select) {
269
+ .pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__range-inputs .pkt-input__container .pkt-select select.pkt-datepicker__input.pkt-datepicker--range, .pkt-select .pkt-input__range-inputs .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,
270
+ .pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select) {
271
271
  padding-left: 1rem;
272
272
  }
273
- .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
273
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
274
274
  grid-column-start: span 2;
275
275
  }
276
- .pkt-input__container:has(> :first-child.pkt-input-prefix) {
276
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) {
277
277
  grid-template-columns: min-content auto 3rem;
278
278
  }
279
279
  }
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))):not(:is(:has(.pkt-timepicker__input))){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/16.7/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);color:var(--pkt-color-input-text-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:not(:disabled),.pkt-input__container:hover .pkt-select select:not(:disabled),.pkt-select .pkt-input__container:hover select:not(:disabled),.pkt-input__container:hover .pkt-select:not(:disabled):is(select),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.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{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:auto 3rem;gap:0}.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}.pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__container .pkt-select select.pkt-datepicker__input.pkt-datepicker--range,.pkt-select .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select){padding-left:1rem}.pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
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))):not(:is(:has(.pkt-timepicker__input))){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/16.7/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);color:var(--pkt-color-input-text-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:not(:disabled),.pkt-input__container:hover .pkt-select select:not(:disabled),.pkt-select .pkt-input__container:hover select:not(:disabled),.pkt-input__container:hover .pkt-select:not(:disabled):is(select),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.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)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input,.pkt-input__range-inputs .pkt-input__container .pkt-select select,.pkt-select .pkt-input__range-inputs .pkt-input__container select,.pkt-input__range-inputs .pkt-input__container .pkt-select:is(select){border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-select select.pkt-datepicker__input.pkt-datepicker--range,.pkt-select .pkt-input__range-inputs .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select){padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
package/dist/css/pkt-components.css CHANGED
@@ -1220,6 +1220,7 @@ pkt-datepicker-multiple {
1220
1220
  .pkt-datepicker__inputs .pkt-datepicker__input {
1221
1221
  padding-right: 0;
1222
1222
  background-image: none;
1223
+ width: 8.3rem;
1223
1224
  }
1224
1225
  .pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
1225
1226
  padding-left: 0.25rem;
@@ -5680,35 +5681,35 @@ pkt-select {
5680
5681
  .pkt-input__counter--error {
5681
5682
  color: var(--pkt-color-input-text-error);
5682
5683
  }
5683
- .pkt-input__range-inputs {
5684
- container: range/inline-size;
5685
- }
5686
5684
 
5687
- @container range (width < 30rem) {
5688
- .pkt-input__container {
5685
+ @media screen and (max-width: 30rem) {
5686
+ .pkt-input__range-inputs {
5687
+ max-width: 100%;
5688
+ }
5689
+ .pkt-input__range-inputs .pkt-input__container {
5689
5690
  border: 2px solid var(--pkt-color-input-border-normal);
5690
5691
  display: grid;
5691
5692
  grid-template-rows: auto auto;
5692
5693
  grid-template-columns: auto 3rem;
5693
5694
  gap: 0;
5694
5695
  }
5695
- .pkt-input__container .pkt-input-prefix,
5696
- .pkt-input__container .pkt-input-suffix,
5697
- .pkt-input__container .pkt-input-icon,
5698
- .pkt-input__container .pkt-input,
5699
- .pkt-input__container .pkt-textinput__input {
5696
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,
5697
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,
5698
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-icon,
5699
+ .pkt-input__range-inputs .pkt-input__container .pkt-input,
5700
+ .pkt-input__range-inputs .pkt-input__container .pkt-textinput__input {
5700
5701
  border: 0;
5701
5702
  }
5702
- .pkt-input__container .pkt-input-separator {
5703
+ .pkt-input__range-inputs .pkt-input__container .pkt-input-separator {
5703
5704
  margin: 0 auto;
5704
5705
  }
5705
- .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input {
5706
+ .pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input {
5706
5707
  padding-left: 1rem;
5707
5708
  }
5708
- .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
5709
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
5709
5710
  grid-column-start: span 2;
5710
5711
  }
5711
- .pkt-input__container:has(> :first-child.pkt-input-prefix) {
5712
+ .pkt-input__range-inputs .pkt-input__container:has(> :first-child.pkt-input-prefix) {
5712
5713
  grid-template-columns: min-content auto 3rem;
5713
5714
  }
5714
5715
  }