@oslokommune/punkt-css 12.12.0 → 12.12.3

package/dist/css/pkt-components.css

@@ -160,22 +160,22 @@
   color: var(--pkt-color-alert-txt);
 }
 .pkt-alert__title {
-  font-size: 1.125rem;
-  font-weight: 500;
+  margin: 0 0 1.5rem 2.5rem;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.125rem;
   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;
   overflow-wrap: break-word;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 .pkt-alert__text p {
   margin-bottom: 1rem;
@@ -194,11 +194,11 @@
   margin-right: 0;
 }
 .pkt-alert__date {
-  font-size: 0.875rem;
-  font-weight: 300;
+  margin-top: 1.5rem;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
   line-height: 1.375rem;
-  margin-top: 1.5rem;
 }
 .pkt-alert__icon {
   --fg-color: var(--pkt-color-alert-icon-fg);
@@ -227,28 +227,28 @@
   left: 1.25rem;
 }
 .pkt-alert--compact .pkt-alert__text {
-  font-size: 1rem;
-  font-weight: 300;
+  margin: 0 2.875rem;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
   line-height: 1.5rem;
-  margin: 0 2.875rem;
 }
 .pkt-alert--compact .pkt-alert__close {
   top: 0.25rem;
 }
 
-/* 
+/*
  * Back link component
  */
 .pkt-back-link__icon {
   flex-basis: 1rem;
 }
 .pkt-back-link__text {
-  font-size: 0.875rem;
-  font-weight: 300;
+  flex-grow: 1;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
   line-height: 1.375rem;
-  flex-grow: 1;
 }
 
 /* 
@@ -298,9 +298,9 @@
  */
 .pkt-breadcrumbs {
   position: relative;
-  font-size: 0.875rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
   line-height: 1.375rem;
 }
 .pkt-breadcrumbs__list {
@@ -412,9 +412,9 @@ pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,
 pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
-  font-size: 1rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),
@@ -699,15 +699,15 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
  * Footer element
  */
 .pkt-footer {
-  font-size: 1.125rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
   padding: 2.5rem 1.5rem;
   background-color: var(--pkt-color-surface-strong-dark-blue);
   color: var(--pkt-color-text-body-default);
   display: flex;
   align-items: center;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 @media screen and (min-width: 80rem) {
   .pkt-footer {
@@ -719,13 +719,13 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
   max-width: 80rem;
 }
 .pkt-footer__title {
-  font-size: 1.5rem;
-  font-weight: 500;
-  letter-spacing: -0.2px;
-  line-height: 2.25rem;
   margin-bottom: 2rem;
   margin-top: 0;
   color: var(--pkt-color-text-body-default);
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 2.25rem;
 }
 .pkt-footer__text:last-child {
   margin-bottom: 0;
@@ -802,15 +802,15 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
 }
 
 .pkt-footer-simple {
-  font-size: 1.125rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
   padding: 2rem 1.5rem;
   background-color: var(--pkt-color-surface-strong-dark-blue);
   color: var(--pkt-color-text-body-default);
   display: flex;
   align-items: center;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 @media screen and (min-width: 80rem) {
   .pkt-footer-simple {
@@ -926,9 +926,9 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  font-size: 1.375rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.375rem;
   line-height: 2.125rem;
 }
 @media screen and (min-width: 48rem) {
@@ -939,9 +939,9 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
 @media screen and (min-width: 80rem) {
   .pkt-header__logo-service {
     padding-top: 0.6rem;
-    font-size: 1.5rem;
-    font-weight: 300;
     letter-spacing: -0.2px;
+    font-weight: 300;
+    font-size: 1.5rem;
     line-height: 2.25rem;
   }
 }
@@ -964,9 +964,9 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
 }
 .pkt-header--narrow .pkt-header__logo-service {
   padding-top: 0.28rem;
-  font-size: 1.125rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
   line-height: 1.75rem;
 }
 .pkt-header--narrow .pkt-header__logo-svg {
@@ -1096,21 +1096,21 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
 }
 .pkt-user-menu__label {
   color: var(--pkt-color-grays-gray-600);
-  font-size: 0.875rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
   line-height: 1.375rem;
 }
 .pkt-user-menu__name {
-  font-size: 1.125rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.125rem;
   line-height: 1.75rem;
 }
 .pkt-user-menu__last-logged-in, .pkt-user-menu__org_number {
-  font-size: 1rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 .pkt-user-menu .pkt-list {
@@ -1168,15 +1168,15 @@ pkt-icon > svg {
 
 /* inputwrapper */
 .pkt-inputwrapper__label {
-  font-size: 1.125rem;
-  font-weight: 500;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
   color: var(--pkt-color-text-body-default);
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 .pkt-inputwrapper__label > h2 {
   font-size: inherit;
@@ -1188,22 +1188,22 @@ pkt-icon > svg {
 }
 .pkt-inputwrapper__helptext {
   width: min(100%, 31rem);
-  font-size: 0.875rem;
-  font-weight: 300;
+  color: var(--pkt-color-text-body-default);
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--pkt-color-text-body-default);
 }
 .pkt-inputwrapper__helptext > .pkt-btn, .pkt-inputwrapper__helptext-expandable .pkt-btn {
-  font-size: 0.875rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
   padding: 0;
   height: auto;
   display: inline-flex;
   text-align: left;
   align-items: center;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
 }
 .pkt-inputwrapper__helptext > *:first-child {
   margin-top: 0;
@@ -1212,11 +1212,11 @@ pkt-icon > svg {
   margin-bottom: 0;
 }
 .pkt-inputwrapper__helptext-expandable-heading {
-  font-size: 1.125rem;
-  font-weight: 500;
+  margin: 0;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.125rem;
   line-height: 1.75rem;
-  margin: 0;
 }
 .pkt-inputwrapper__helptext-expandable-open {
   display: block;
@@ -1354,9 +1354,9 @@ pkt-icon > svg {
 }
 .pkt-linkcard__title {
   grid-column: 2;
-  font-size: 1.25rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.25rem;
   line-height: 2rem;
 }
 .pkt-linkcard__title > p {
@@ -1364,9 +1364,9 @@ pkt-icon > svg {
 }
 @media screen and (min-width: 35.938rem) {
   .pkt-linkcard__title {
-    font-size: 1.5rem;
-    font-weight: 500;
     letter-spacing: -0.2px;
+    font-weight: 500;
+    font-size: 1.5rem;
     line-height: 2.25rem;
   }
 }
@@ -1472,9 +1472,9 @@ pkt-icon > svg {
   aspect-ratio: 600/165;
 }
 .pkt-loader--small > p {
-  font-size: 0.75rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.75rem;
   line-height: 1.25rem;
 }
 .pkt-loader--small .pkt-loader__svg svg {
@@ -1484,9 +1484,9 @@ pkt-icon > svg {
   width: 1rem;
 }
 .pkt-loader--medium > p {
-  font-size: 1rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 .pkt-loader--medium .pkt-loader__svg svg {
@@ -1496,9 +1496,9 @@ pkt-icon > svg {
   width: 2.5rem;
 }
 .pkt-loader--large > p {
-  font-size: 1.125rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
   line-height: 1.75rem;
 }
 .pkt-loader--large .pkt-loader__svg svg {
@@ -1753,19 +1753,19 @@ body.pkt-modal--open {
 }
 .pkt-messagebox__title {
   grid-area: title;
-  font-size: 1.5rem;
-  font-weight: 500;
+  margin: 0 0 1.5rem 0;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.5rem;
   line-height: 2.25rem;
-  margin: 0 0 1.5rem 0;
 }
 .pkt-messagebox__text {
   grid-area: text;
-  font-size: 1.125rem;
-  font-weight: 300;
+  margin: 0;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
   line-height: 1.75rem;
-  margin: 0;
 }
 .pkt-messagebox__text p {
   margin-bottom: 1rem;
@@ -1784,15 +1784,15 @@ body.pkt-modal--open {
   padding: 1rem 1rem 1rem 0.75rem;
 }
 .pkt-messagebox--compact .pkt-messagebox__title {
-  font-size: 1rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 .pkt-messagebox--compact .pkt-messagebox__text {
-  font-size: 1rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 .pkt-messagebox--compact .pkt-messagebox__close > .pkt-btn {
@@ -1934,9 +1934,9 @@ body.pkt-modal--open {
 /* Common styles for all inputs */
 .pkt-searchinput {
   position: relative;
-  font-size: 1.125rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
   line-height: 1.75rem;
 }
 .pkt-searchinput__field {
@@ -2012,9 +2012,9 @@ body.pkt-modal--open {
   cursor: pointer;
 }
 .pkt-searchinput__suggestion-title {
-  font-size: 1.125rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.125rem;
   line-height: 1.75rem;
 }
 .pkt-searchinput__suggestion-text {
@@ -2259,11 +2259,11 @@ body.pkt-modal--open {
   padding: 0.75rem 1rem;
   color: var(--pkt-color-text-action-disabled);
   border-bottom: 0.25rem solid transparent;
-  font-size: 1rem;
-  font-weight: 400;
+  white-space: nowrap;
   letter-spacing: -0.2px;
+  font-weight: 400;
+  font-size: 1rem;
   line-height: 1.5rem;
-  white-space: nowrap;
 }
 .pkt-tabs__link .pkt-icon,
 .pkt-tabs__link pkt-icon, .pkt-tabs__button .pkt-icon,
@@ -2292,9 +2292,9 @@ body.pkt-modal--open {
 .pkt-tabs__link.active, .pkt-tabs__button.active {
   color: var(--pkt-color-text-action-normal);
   border-bottom: 0.25rem solid var(--pkt-color-border-blue);
-  font-size: 1rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 .pkt-tabs:after {
@@ -2310,7 +2310,7 @@ body.pkt-modal--open {
   pointer-events: none;
 }
 
-/* 
+/*
  * Tag element
  */
 .pkt-tag {
@@ -2335,9 +2335,9 @@ body.pkt-modal--open {
   height: 1.875rem;
   column-gap: 0;
   color: var(--pkt-color-tag-text-normal);
-  font-size: 0.875rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
   line-height: 1.375rem;
 }
 .pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
@@ -2528,23 +2528,23 @@ body.pkt-modal--open {
   height: 1.875rem;
 }
 .pkt-tag--large {
-  font-size: 1.125rem;
-  font-weight: 500;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
   padding: 0.25rem 0.5rem;
   height: 2.25rem;
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 .pkt-tag--normal-text {
-  font-size: 0.875rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
   line-height: 1.375rem;
 }
 .pkt-tag--thin-text {
-  font-size: 0.875rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
   line-height: 1.375rem;
 }
 
@@ -2648,10 +2648,6 @@ body.pkt-modal--open {
 }
 
 .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;
@@ -2661,6 +2657,10 @@ body.pkt-modal--open {
   color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.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;
@@ -2669,9 +2669,9 @@ body.pkt-modal--open {
   border: 0;
   border-bottom: 1px solid var(--pkt-color-input-border-normal);
   padding: 0 0 0.1rem 0;
-  font-size: 1rem;
-  font-weight: 300;
   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]) {
@@ -2679,7 +2679,10 @@ body.pkt-modal--open {
   padding-right: 2rem;
 }
 .pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))) {
-  width: min(100%, 31rem);
+  width: min(31rem, 100%);
+}
+.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
+  width: fit-content;
 }
 .pkt-input--fullwidth, .pkt-input--fullwidth + .pkt-input__counter {
   width: 100%;
@@ -2731,10 +2734,12 @@ body.pkt-modal--open {
   border: 2px solid var(--pkt-color-input-border-disabled);
 }
 .pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
-  font-size: 1.125rem;
-  font-weight: 300;
   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;
@@ -2791,7 +2796,6 @@ body.pkt-modal--open {
   box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
 }
 .pkt-input__container {
-  width: fit-content;
   display: flex;
   align-items: center;
   align-self: stretch;
@@ -2832,18 +2836,22 @@ body.pkt-modal--open {
   border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input__counter {
-  font-size: 0.875rem;
-  font-weight: 300;
   letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
   line-height: 1.375rem;
+}
+.pkt-input__counter {
   width: min(100%, 31rem);
   text-align: right;
 }
 .pkt-input__counter--error {
-  font-size: 0.875rem;
-  font-weight: 500;
   letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
   line-height: 1.375rem;
+}
+.pkt-input__counter--error {
   color: var(--pkt-color-input-text-error);
 }
 .pkt-input__range-inputs {