@oslokommune/punkt-css 12.1.0 → 12.3.0

package/dist/css/components/tag.min.css

@@ -1 +1 @@
-.pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-tag{background:var(--pkt-color-surface-default-light-blue);padding:.25rem .5rem;display:inline-flex;align-items:center;height:1.875rem;column-gap:0;color:var(--pkt-color-tag-text-normal);font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem}.pkt-tag.pkt-btn:hover,.pkt-tag.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover);text-decoration:underline;border-color:rgba(0,0,0,0)}.pkt-tag.pkt-btn:hover>svg,.pkt-tag.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);border-color:var(--pkt-color-text-action-active);outline:4px solid var(--pkt-color-border-states-focus);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:focus>svg,.pkt-tag.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag.pkt-tag--active,.pkt-tag.pkt-tag--active:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-btn:active>svg,.pkt-tag.pkt-tag--active>svg,.pkt-tag.pkt-tag--active:hover>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag__icon{width:16px;height:16px;margin-right:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-left:.5rem}.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag--green.pkt-btn:hover,.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:hover>svg,.pkt-tag--green.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:focus,.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:focus>svg,.pkt-tag--green.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:active,.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag--green.pkt-btn:active>svg,.pkt-tag--green.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag--yellow.pkt-btn:hover,.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:hover>svg,.pkt-tag--yellow.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:focus,.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:focus>svg,.pkt-tag--yellow.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:active,.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag--yellow.pkt-btn:active>svg,.pkt-tag--yellow.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag--red.pkt-btn:hover,.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:hover>svg,.pkt-tag--red.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:focus,.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:focus>svg,.pkt-tag--red.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:active,.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag--red.pkt-btn:active>svg,.pkt-tag--red.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag--beige.pkt-btn:hover,.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:hover>svg,.pkt-tag--beige.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:focus,.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:focus>svg,.pkt-tag--beige.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:active,.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag--beige.pkt-btn:active>svg,.pkt-tag--beige.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag--grey.pkt-btn:hover,.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag--grey.pkt-btn:hover>svg,.pkt-tag--grey.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--grey.pkt-btn:focus,.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--grey.pkt-btn:focus>svg,.pkt-tag--grey.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--grey.pkt-btn:active,.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--grey.pkt-btn:active>svg,.pkt-tag--grey.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:hover>svg,.pkt-tag--blue-light.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:focus>svg,.pkt-tag--blue-light.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:active,.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag--blue-light.pkt-btn:active>svg,.pkt-tag--blue-light.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--small{padding:.25rem;height:1.375rem}.pkt-tag--medium{padding:.25rem .5rem;height:1.875rem}.pkt-tag--large{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;padding:.25rem .5rem;height:2.25rem}.pkt-tag--normal-text{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem}.pkt-tag--thin-text{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem}
+.pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-tag{--pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-tag{background:var(--pkt-color-surface-default-light-blue);padding:.25rem .5rem;display:inline-flex;align-items:center;height:1.875rem;column-gap:0;color:var(--pkt-color-tag-text-normal);font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem}.pkt-tag.pkt-btn:hover,.pkt-tag.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover);text-decoration:underline;border-color:rgba(0,0,0,0)}.pkt-tag.pkt-btn:hover>svg,.pkt-tag.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag.pkt-btn:focus,.pkt-tag.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);border-color:var(--pkt-color-text-action-active);outline:4px solid var(--pkt-color-border-states-focus);color:var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:focus>svg,.pkt-tag.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag.pkt-btn:active,.pkt-tag.pkt-tag--active,.pkt-tag.pkt-tag--active:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag.pkt-btn:active>svg,.pkt-tag.pkt-tag--active>svg,.pkt-tag.pkt-tag--active:hover>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag__icon{width:16px;height:16px;margin-right:.5rem}.pkt-tag__close-btn{width:16px;height:16px;margin-left:.5rem}.pkt-tag--green{background:var(--pkt-color-surface-strong-light-green)}.pkt-tag--green.pkt-btn:hover,.pkt-tag--green.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:hover>svg,.pkt-tag--green.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--green.pkt-btn:focus,.pkt-tag--green.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:focus>svg,.pkt-tag--green.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--green.pkt-btn:active,.pkt-tag--green.pkt-tag--active{background-color:var(--pkt-color-surface-strong-green);color:var(--pkt-color-tag-text-active)}.pkt-tag--green.pkt-btn:active>svg,.pkt-tag--green.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--yellow{background:var(--pkt-color-surface-default-yellow)}.pkt-tag--yellow.pkt-btn:hover,.pkt-tag--yellow.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:hover>svg,.pkt-tag--yellow.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--yellow.pkt-btn:focus,.pkt-tag--yellow.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:focus>svg,.pkt-tag--yellow.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--yellow.pkt-btn:active,.pkt-tag--yellow.pkt-tag--active{background-color:var(--pkt-color-surface-strong-yellow);color:var(--pkt-color-tag-text-active)}.pkt-tag--yellow.pkt-btn:active>svg,.pkt-tag--yellow.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--red{background:var(--pkt-color-surface-default-red)}.pkt-tag--red.pkt-btn:hover,.pkt-tag--red.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:hover>svg,.pkt-tag--red.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--red.pkt-btn:focus,.pkt-tag--red.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:focus>svg,.pkt-tag--red.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--red.pkt-btn:active,.pkt-tag--red.pkt-tag--active{background-color:var(--pkt-color-surface-strong-red);color:var(--pkt-color-tag-text-active)}.pkt-tag--red.pkt-btn:active>svg,.pkt-tag--red.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--beige{background:var(--pkt-color-surface-default-light-beige)}.pkt-tag--beige.pkt-btn:hover,.pkt-tag--beige.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:hover>svg,.pkt-tag--beige.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--beige.pkt-btn:focus,.pkt-tag--beige.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:focus>svg,.pkt-tag--beige.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--beige.pkt-btn:active,.pkt-tag--beige.pkt-tag--active{background-color:var(--pkt-color-surface-strong-beige);color:var(--pkt-color-tag-text-active)}.pkt-tag--beige.pkt-btn:active>svg,.pkt-tag--beige.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray,.pkt-tag--grey{background:var(--pkt-color-surface-default-gray)}.pkt-tag--gray.pkt-btn:hover,.pkt-tag--gray.pkt-tag--hover,.pkt-tag--grey.pkt-btn:hover,.pkt-tag--grey.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:hover>svg,.pkt-tag--gray.pkt-tag--hover>svg,.pkt-tag--grey.pkt-btn:hover>svg,.pkt-tag--grey.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--gray.pkt-btn:focus,.pkt-tag--gray.pkt-tag--focus,.pkt-tag--grey.pkt-btn:focus,.pkt-tag--grey.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:focus>svg,.pkt-tag--gray.pkt-tag--focus>svg,.pkt-tag--grey.pkt-btn:focus>svg,.pkt-tag--grey.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active,.pkt-tag--gray.pkt-tag--active,.pkt-tag--grey.pkt-btn:active,.pkt-tag--grey.pkt-tag--active{background-color:var(--pkt-color-surface-strong-gray);color:var(--pkt-color-tag-text-active)}.pkt-tag--gray.pkt-btn:active>svg,.pkt-tag--gray.pkt-tag--active>svg,.pkt-tag--grey.pkt-btn:active>svg,.pkt-tag--grey.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--blue-light{background:var(--pkt-color-surface-subtle-light-blue)}.pkt-tag--blue-light.pkt-btn:hover,.pkt-tag--blue-light.pkt-tag--hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:hover>svg,.pkt-tag--blue-light.pkt-tag--hover>svg{--fg-color: var(--pkt-color-tag-text-hover)}.pkt-tag--blue-light.pkt-btn:focus,.pkt-tag--blue-light.pkt-tag--focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:focus>svg,.pkt-tag--blue-light.pkt-tag--focus>svg{--fg-color: var(--pkt-color-tag-text-focus)}.pkt-tag--blue-light.pkt-btn:active,.pkt-tag--blue-light.pkt-tag--active{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-tag-text-active)}.pkt-tag--blue-light.pkt-btn:active>svg,.pkt-tag--blue-light.pkt-tag--active>svg{--fg-color: var(--pkt-color-tag-text-active)}.pkt-tag--small{padding:.25rem;height:1.375rem}.pkt-tag--medium{padding:.25rem .5rem;height:1.875rem}.pkt-tag--large{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;padding:.25rem .5rem;height:2.25rem}.pkt-tag--normal-text{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem}.pkt-tag--thin-text{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem}

package/dist/css/components/textinput.css

@@ -58,6 +58,9 @@
   margin: 0;
   padding: 0.5rem 1rem;
 }
+.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);
@@ -87,7 +90,7 @@
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/12.1/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.3/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -232,4 +235,27 @@
   letter-spacing: -0.2px;
   line-height: 1.375rem;
   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: 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/components/textinput.min.css

@@ -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-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;font-size:1rem;font-weight:300;letter-spacing:-0.2px;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),.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/12.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],[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)}
+.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(.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;font-size:1rem;font-weight:300;letter-spacing:-0.2px;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),.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/12.3/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)}.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: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/pkt-base.css

@@ -13294,6 +13294,11 @@ a,
   word-wrap: break-word;
   cursor: pointer;
 }
+a span,
+.pkt-link-button span {
+  color: inherit;
+  text-decoration: inherit;
+}
 a:visited:not(.pkt-linkcard):not(.pkt-btn):not(.pkt-tabs__link),
 .pkt-link-button:visited:not(.pkt-linkcard):not(.pkt-btn):not(.pkt-tabs__link) {
   color: inherit;
@@ -13326,37 +13331,42 @@ a:active, a.pkt-link--active,
 .pkt-link {
   display: inline;
   text-align: left;
-  align-items: center;
+  align-items: baseline;
 }
+
 .pkt-link__icon {
   --fg-color: currentColor;
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+  align-self: center;
 }
-.pkt-link--icon-left {
+.pkt-link--icon-left, .pkt-link--icon-right {
   display: inline-flex;
-  flex-direction: row;
   text-decoration: none;
+  align-items: baseline;
+}
+.pkt-link--icon-left {
+  flex-direction: row;
 }
 .pkt-link--icon-right {
-  display: inline-flex;
   flex-direction: row-reverse;
-  text-decoration: none;
 }
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/12.1/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.3/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
   width: 1.125rem;
   height: 1.125rem;
   vertical-align: middle;
+  align-self: center;
 }
-.pkt-link--external:hover::after {
+.pkt-link--external:hover::after, .pkt-link:hover pkt-icon {
   filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
 }
 
@@ -16401,6 +16411,14 @@ button.pkt-link {
   white-space: nowrap;
 }
 
+/*
+ * Display contents and disregard layout
+ */
+.pkt-display-contents,
+.pkt-contents {
+  display: contents;
+}
+
 /* 
  * Visibility
  */