@oslokommune/punkt-css 6.0.5 → 7.0.0

package/dist/css/pkt.css

@@ -11539,7 +11539,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/6.0/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -12555,7 +12555,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: 6px solid var(--choice-checked-rb-bc);
 }
 .pkt-form-check-input:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/6.0/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/check-medium.svg);
   position: relative;
   background-color: blue;
 }
@@ -12986,7 +12986,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * så dette må refaktoreres ved anledning.
  */
 .pkt-select {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/6.0/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/chevron-thin-down.svg);
   display: block;
   background-color: var(--color-white);
   background-image: var(--svg);
@@ -14000,6 +14000,127 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   width: 4rem;
 }
 
+/* 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;
+}
+.pkt-inputwrapper__label > h2 {
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  display: inline;
+  margin-bottom: 0;
+}
+.pkt-inputwrapper__helptext {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+.pkt-inputwrapper__helptext-expandable {
+  display: inline-flex;
+  text-align: left;
+  align-items: center;
+}
+.pkt-inputwrapper__helptext-expandable-heading {
+  font-size: 1.125rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.75rem;
+  margin: 0;
+}
+.pkt-inputwrapper__helptext-expandable-open {
+  width: 100%;
+  display: block;
+}
+.pkt-inputwrapper__helptext-expandable-closed {
+  display: none;
+}
+.pkt-inputwrapper--disabled {
+  color: var(--color-disabled);
+  cursor: inherit;
+}
+.pkt-inputwrapper--disabled .pkt-tag {
+  background-color: var(--color-disabled-light);
+}
+.pkt-inputwrapper--disabled .pkt-alert {
+  background-color: var(--color-disabled-light);
+  border-color: var(--color-disabled);
+}
+.pkt-inputwrapper--inline {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.pkt-inputwrapper .pkt-alert {
+  width: 100%;
+  padding: 0.75rem 1rem 0.75rem 4px;
+  margin: 0 0 0.5rem 0;
+}
+.pkt-inputwrapper .pkt-alert--error {
+  margin: 0.5rem 0 0.5rem 0;
+}
+.pkt-inputwrapper .pkt-alert__icon {
+  width: 1.375rem;
+  height: 1.375rem;
+  top: 0.81rem;
+  left: 1.25rem;
+}
+.pkt-inputwrapper .pkt-alert__text {
+  font-size: 1rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.5rem;
+  margin: 0 0 0 2.875rem;
+}
+.pkt-inputwrapper .pkt-tag {
+  margin-left: 8px;
+}
+.pkt-inputwrapper .pkt-btn {
+  font-size: 0.875rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+  padding: 0;
+}
+.pkt-inputwrapper--error .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__input-prefix,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix,
+.pkt-inputwrapper--error .pkt-textinput__input-icon {
+  border-color: var(--color-red);
+}
+.pkt-inputwrapper--error .pkt-textinput__input:hover,
+.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
+  border-color: var(--color-red);
+}
+.pkt-inputwrapper--error .pkt-textinput__input:focus-within,
+.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
+.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix,
+.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,
+.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
+  border-color: var(--color-red);
+}
+
 /* 
  * Header element
  */
@@ -14197,53 +14318,6 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 
 /* textinput */
-.pkt-textinput__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;
-}
-.pkt-textinput__label > h2 {
-  font-size: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-  display: inline;
-  margin-bottom: 0;
-}
-.pkt-textinput__helptext {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-}
-.pkt-textinput__helptext-expandable {
-  display: inline-flex;
-  text-align: left;
-  align-items: center;
-}
-.pkt-textinput__helptext-expandable-heading {
-  font-size: 1.125rem;
-  font-weight: 500;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
-  margin: 0;
-}
-.pkt-textinput__helptext-expandable-open {
-  width: 100%;
-  display: block;
-}
-.pkt-textinput__helptext-expandable-closed {
-  display: none;
-}
 .pkt-textinput__input {
   font-size: 1.125rem;
   font-weight: 300;
@@ -14260,6 +14334,9 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   padding: 0.5rem 1rem;
   width: 100%;
 }
+.pkt-textinput__input:is(textarea) {
+  min-height: 8rem;
+}
 .pkt-textinput__input::placeholder {
   color: var(--color-grayscale-50);
   opacity: 1;
@@ -14393,110 +14470,64 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   height: 1.5rem;
   margin-left: 0.5rem;
 }
-.pkt-textinput--disabled {
-  color: var(--color-disabled);
-  cursor: inherit;
+.pkt-textinput__input--counter-error, .pkt-textinput__input--counter-error:focus {
+  border-color: var(--color-red);
+  background-color: var(--color-red-30);
 }
-.pkt-textinput--disabled .pkt-tag {
-  background-color: var(--color-disabled-light);
+.pkt-textinput__input--counter-error:focus {
+  box-shadow: 0 0 0 2px var(--color-red);
 }
-.pkt-textinput--disabled .pkt-alert {
-  background-color: var(--color-disabled-light);
-  border-color: var(--color-disabled);
+.pkt-textinput__counter {
+  font-size: 0.875rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+  width: 100%;
+  text-align: right;
 }
-.pkt-textinput--disabled .pkt-textinput__input,
-.pkt-textinput--disabled .pkt-textinput__input-prefix,
-.pkt-textinput--disabled .pkt-textinput__input-suffix,
-.pkt-textinput--disabled .pkt-textinput__input-icon {
+.pkt-textinput__counter--error {
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+  color: var(--color-red);
+}
+.pkt-inputwrapper--disabled {
+  color: var(--color-disabled);
+  cursor: inherit;
+}
+.pkt-inputwrapper--disabled .pkt-textinput__input,
+.pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-icon {
   border-color: var(--color-disabled);
   background-color: var(--color-disabled-light);
 }
-.pkt-textinput--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-.pkt-textinput--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-.pkt-textinput--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-.pkt-textinput--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-.pkt-textinput--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
+.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
+.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
+.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
   border-color: var(--color-disabled);
 }
-.pkt-textinput--disabled .pkt-textinput__input:hover {
+.pkt-inputwrapper--disabled .pkt-textinput__input:hover {
   border-color: var(--color-disabled);
   box-shadow: none;
 }
-.pkt-textinput--disabled .pkt-textinput__input:focus {
+.pkt-inputwrapper--disabled .pkt-textinput__input:focus {
   border-color: var(--color-disabled);
   box-shadow: none;
   outline: none;
 }
-.pkt-textinput--disabled .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
+.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
   border-right: none;
   box-shadow: none;
   outline: none;
 }
-.pkt-textinput--error .pkt-textinput__input,
-.pkt-textinput--error .pkt-textinput__input-prefix,
-.pkt-textinput--error .pkt-textinput__input-suffix,
-.pkt-textinput--error .pkt-textinput__input-icon {
-  border-color: var(--color-red);
-}
-.pkt-textinput--error .pkt-textinput__input:hover,
-.pkt-textinput--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-.pkt-textinput--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-.pkt-textinput--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-.pkt-textinput--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-.pkt-textinput--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
-  border-color: var(--color-red);
-}
-.pkt-textinput--error .pkt-textinput__input:focus-within,
-.pkt-textinput--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-textinput--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
-.pkt-textinput--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix,
-.pkt-textinput--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-textinput--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-textinput--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
-.pkt-textinput--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,
-.pkt-textinput--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
-  border-color: var(--color-red);
-}
-.pkt-textinput--inline {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 8px;
-}
+
 [data-mode=dark] .pkt-textinput__input-prefix,
 [data-mode=dark] .pkt-textinput__input-suffix,
 [data-mode=dark] .pkt-textinput__input-icon {
   background-color: var(--color-white);
   color: var(--color-blue-dark);
-}
-
-.pkt-textinput .pkt-alert {
-  width: 100%;
-  padding: 0.75rem 1rem 0.75rem 4px;
-  margin: 0 0 0.5rem 0;
-}
-.pkt-textinput .pkt-alert--error {
-  margin: 0.5rem 0 0.5rem 0;
-}
-.pkt-textinput .pkt-alert__icon {
-  width: 1.375rem;
-  height: 1.375rem;
-  top: 0.81rem;
-  left: 1.25rem;
-}
-.pkt-textinput .pkt-alert__text {
-  font-size: 1rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.5rem;
-  margin: 0 0 0 2.875rem;
-}
-.pkt-textinput .pkt-tag {
-  margin-left: 8px;
-}
-.pkt-textinput .pkt-btn {
-  font-size: 0.875rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-  padding: 0;
 }