@oslokommune/punkt-css 11.8.1 → 11.9.1

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.
package/CHANGELOG.md CHANGED
@@ -5,6 +5,56 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [11.9.1](https://github.com/oslokommune/punkt/compare/11.9.0...11.9.1) (2024-03-12)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ Ingen
18
+
19
+ ### Chores
20
+ * Ny modus for Alert (#1581). Kode: PÅSKEFIGUR
21
+
22
+
23
+ ---
24
+
25
+
26
+ ## [11.9.0](https://github.com/oslokommune/punkt/compare/11.8.2...11.9.0) (2024-03-11)
27
+
28
+ ### ⚠ BREAKING CHANGES
29
+ Ingen
30
+
31
+ ### Features
32
+ * template for Forms (skjema mal) (#1580). * feat(react)-1406: ✨ add template for schema
33
+
34
+ - Add all example fields except upload file and datepicker (no current components available).
35
+ - Add styling classes for responsive design on text sizes & spacing
36
+ - Use stylings vars for readability
37
+ - Add regex and validation functions for address, postalCode and postalArea (only to show an example of how it can be done)
38
+ - Set transportError to true to show example of radio button group with error
39
+ - Add summary of errors
40
+
41
+ 📝 Notes:
42
+ - Would like to have an alert message box without icons.
43
+
44
+ * fix 🔧: radiobutton validation, schema --> form..
45
+ correct field id.
46
+ * feat(vue): ✨ add form template for Vue (#1555)
47
+
48
+
49
+ ### Bug Fixes
50
+ Ingen
51
+
52
+ ### Chores
53
+ Ingen
54
+
55
+ ---
56
+
57
+
8
58
  ## [11.8.1](https://github.com/oslokommune/punkt/compare/11.8.0...11.8.1) (2024-03-06)
9
59
 
10
60
  ### ⚠ BREAKING CHANGES
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  /*
2
3
  * Alert component
3
4
  */
@@ -24,6 +25,49 @@
24
25
  --pkt-color-alert-bg: var(--pkt-color-surface-default-yellow);
25
26
  }
26
27
 
28
+ .pkt-alert--🐣 {
29
+ --pkt-color-alert-bc: var(--pkt-color-border-yellow);
30
+ --pkt-color-alert-bg: white;
31
+ --angle: 0deg;
32
+ border: 0.25rem solid var(--pkt-color-alert-bc);
33
+ border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
34
+ animation: 1s 🐣 linear infinite;
35
+ }
36
+ .pkt-alert--🐣 .pkt-alert__icon {
37
+ animation: 0.5s 🐰 linear infinite;
38
+ font-size: 2rem;
39
+ }
40
+ .pkt-alert--🐣.pkt-alert--compact .pkt-alert__icon {
41
+ font-size: 1.5rem;
42
+ }
43
+
44
+ @keyframes 🐣 {
45
+ to {
46
+ --angle: 360deg;
47
+ }
48
+ }
49
+ @keyframes 🐰 {
50
+ 0% {
51
+ transform: rotate(0deg);
52
+ }
53
+ 25% {
54
+ transform: rotate(10deg);
55
+ }
56
+ 50% {
57
+ transform: rotate(0eg);
58
+ }
59
+ 75% {
60
+ transform: rotate(-10deg);
61
+ }
62
+ 100% {
63
+ transform: rotate(0deg);
64
+ }
65
+ }
66
+ @property --angle {
67
+ syntax: "<angle>";
68
+ initial-value: 0deg;
69
+ inherits: false;
70
+ }
27
71
  .pkt-alert {
28
72
  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
29
73
  display: block;
@@ -1 +1 @@
1
- .pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 1.5rem 2.5rem}.pkt-alert__close~.pkt-alert__title{margin:0 4rem 1.5rem 2.5rem}.pkt-alert__text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 0 2.5rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__close+.pkt-alert__text{margin:0 4rem 0 2.5rem}.pkt-alert__title+.pkt-alert__text{margin-left:0;margin-right:0}.pkt-alert__date{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{position:absolute;right:1.125rem;top:.625rem}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--compact{padding:.75rem 1rem .75rem .25rem}.pkt-alert--compact .pkt-alert__icon{width:1.375rem;height:1.375rem;top:.81rem;left:1.25rem}.pkt-alert--compact .pkt-alert__text{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem;margin:0 2.875rem}.pkt-alert--compact .pkt-alert__close{top:.25rem}
1
+ .pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}.pkt-alert--🐣{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: white;--angle: 0deg;border:.25rem solid var(--pkt-color-alert-bc);border-image:conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;animation:1s 🐣 linear infinite}.pkt-alert--🐣 .pkt-alert__icon{animation:.5s 🐰 linear infinite;font-size:2rem}.pkt-alert--🐣.pkt-alert--compact .pkt-alert__icon{font-size:1.5rem}@keyframes 🐣{to{--angle: 360deg}}@keyframes 🐰{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-10deg)}100%{transform:rotate(0deg)}}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 1.5rem 2.5rem}.pkt-alert__close~.pkt-alert__title{margin:0 4rem 1.5rem 2.5rem}.pkt-alert__text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 0 2.5rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__close+.pkt-alert__text{margin:0 4rem 0 2.5rem}.pkt-alert__title+.pkt-alert__text{margin-left:0;margin-right:0}.pkt-alert__date{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{position:absolute;right:1.125rem;top:.625rem}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--compact{padding:.75rem 1rem .75rem .25rem}.pkt-alert--compact .pkt-alert__icon{width:1.375rem;height:1.375rem;top:.81rem;left:1.25rem}.pkt-alert--compact .pkt-alert__text{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem;margin:0 2.875rem}.pkt-alert--compact .pkt-alert__close{top:.25rem}
@@ -74,7 +74,7 @@
74
74
  padding-right: 3rem;
75
75
  }
76
76
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
77
- --svg: url(https://punkt-cdn.oslo.kommune.no/11.8/icons/chevron-thin-down.svg);
77
+ --svg: url(https://punkt-cdn.oslo.kommune.no/11.9/icons/chevron-thin-down.svg);
78
78
  background-image: var(--svg);
79
79
  background-repeat: no-repeat;
80
80
  background-position: right 0.7rem top 50%;
@@ -1 +1 @@
1
- .pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;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}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.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/11.8/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],[readonly].pkt-textinput__input{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{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;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;margin-left:.5rem}.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:none}.pkt-input__container :last-child:not(:only-child){border-left:none}.pkt-input__container :not(:first-child):not(:last-child){border-left:none;border-right:none}.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{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:min(100%,31rem);text-align:right}.pkt-input__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--pkt-color-input-text-error)}
1
+ .pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;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}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.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/11.9/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],[readonly].pkt-textinput__input{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{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;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;margin-left:.5rem}.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:none}.pkt-input__container :last-child:not(:only-child){border-left:none}.pkt-input__container :not(:first-child):not(:last-child){border-left:none;border-right:none}.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{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:min(100%,31rem);text-align:right}.pkt-input__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--pkt-color-input-text-error)}
@@ -13345,7 +13345,7 @@ a:active, a.pkt-link--active,
13345
13345
  }
13346
13346
  .pkt-link--external::after {
13347
13347
  content: " ";
13348
- --svg: url(https://punkt-cdn.oslo.kommune.no/11.8/icons/new-window-small.svg);
13348
+ --svg: url(https://punkt-cdn.oslo.kommune.no/11.9/icons/new-window-small.svg);
13349
13349
  background-image: var(--svg);
13350
13350
  background-repeat: no-repeat;
13351
13351
  background-size: 18px 18px;