@oslokommune/punkt-css 7.2.0 → 8.0.0

package/dist/css/pkt.css

@@ -12361,7 +12361,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/7.2/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/8.0/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -13377,7 +13377,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/7.2/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/8.0/icons/check-medium.svg);
   position: relative;
   background-color: blue;
 }
@@ -13476,6 +13476,194 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   display: inline-block;
 }
 
+/* Common styles for all inputs */
+.pkt-input, .pkt-textinput__input, .pkt-select select,
+.pkt-select:is(select) {
+  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(--color-white);
+  border: 2px solid var(--color-blue-dark);
+  border-radius: 0;
+  color: var(--color-blue-dark);
+  margin: 0;
+  padding: 0.5rem 1rem;
+  width: 100%;
+}
+.pkt-input:is(textarea), .pkt-textinput__input:is(textarea), .pkt-select select:is(textarea),
+.pkt-select:is(textarea):is(select) {
+  min-height: 8rem;
+}
+.pkt-input:is(select), .pkt-textinput__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-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
+.pkt-select:is(select):not([multiple]) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--fg-color  %232A2859)' fill-rule='evenodd' d='M16 19.41 6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem top 50%;
+  background-size: 1.5rem auto, 100%;
+}
+.pkt-input:is(select) option, .pkt-textinput__input:is(select) option, .pkt-select select:is(select) option,
+.pkt-select:is(select) option {
+  background-color: var(--color-white);
+  color: var(--color-blue-dark);
+  font-weight: normal;
+}
+.pkt-input::placeholder, .pkt-textinput__input::placeholder, .pkt-select select::placeholder,
+.pkt-select:is(select)::placeholder {
+  color: var(--color-grayscale-50);
+  opacity: 1;
+}
+.pkt-input:hover, .pkt-textinput__input:hover, .pkt-select select:hover,
+.pkt-select:hover:is(select), .pkt-input.pkt-input--hover, .pkt-input--hover.pkt-textinput__input, .pkt-select select.pkt-input--hover,
+.pkt-input--hover.pkt-select:is(select) {
+  border-color: var(--color-hover);
+}
+.pkt-input:focus-visible + .pkt-input-suffix, .pkt-textinput__input:focus-visible + .pkt-input-suffix, .pkt-select select:focus-visible + .pkt-input-suffix,
+.pkt-select:focus-visible:is(select) + .pkt-input-suffix, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input, .pkt-select select.pkt-input__textinput--focus,
+.pkt-input__textinput--focus.pkt-select:is(select) {
+  box-shadow: 0 0 0 2px var(--color-active);
+  border-color: var(--color-active);
+}
+.pkt-input:focus, .pkt-textinput__input:focus, .pkt-select select:focus,
+.pkt-select:focus:is(select) {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-active);
+  border-color: var(--color-active);
+}
+.pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-select select:disabled,
+.pkt-select:disabled:is(select), .pkt-input:disabled::placeholder, .pkt-textinput__input:disabled::placeholder, .pkt-select select:disabled::placeholder,
+.pkt-select:disabled:is(select)::placeholder, .pkt-input[readonly], [readonly].pkt-textinput__input, .pkt-select select[readonly],
+[readonly].pkt-select:is(select) {
+  opacity: 1;
+  background-color: var(--color-disabled-light);
+  border-color: var(--color-disabled);
+  cursor: inherit;
+}
+.pkt-input:disabled:active, .pkt-textinput__input:disabled:active, .pkt-select select:disabled:active,
+.pkt-select:disabled:active:is(select) {
+  border: 2px solid var(--color-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(--color-blue-dark);
+  flex-shrink: 0;
+}
+.pkt-input-prefix {
+  padding: 0.5rem 0rem 0.5rem 1rem;
+}
+.pkt-input-prefix::after {
+  content: "";
+  width: 1px;
+  margin-left: 0.5rem;
+  height: 100%;
+  background-color: var(--color-blue-dark);
+}
+.pkt-input-suffix {
+  padding: 0.5rem 1rem 0.5rem 0rem;
+}
+.pkt-input-suffix svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 0.5rem;
+}
+.pkt-input-suffix::before {
+  content: "";
+  width: 1px;
+  margin-right: 0.5rem;
+  height: 1.5rem;
+  background-color: var(--color-blue-dark);
+}
+.pkt-input-icon {
+  padding: 0.5rem 1rem;
+  align-self: stretch;
+}
+.pkt-input-icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 0.5rem;
+}
+.pkt-input--counter-error, .pkt-input--counter-error:focus {
+  border-color: var(--color-red);
+  background-color: var(--color-red-30);
+}
+.pkt-input--counter-error:focus {
+  box-shadow: 0 0 0 2px var(--color-red);
+}
+.pkt-input__container {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.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 {
+  box-shadow: none;
+}
+.pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-textinput__input, .pkt-input__container:hover .pkt-select select, .pkt-select .pkt-input__container:hover select,
+.pkt-input__container:hover .pkt-select:is(select), .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
+  border-color: var(--color-hover);
+}
+.pkt-input__container:focus-within {
+  outline: 2px solid var(--color-active);
+}
+.pkt-input__container:focus-within .pkt-input, .pkt-input__container:focus-within .pkt-textinput__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(--color-active);
+}
+.pkt-input__counter {
+  font-size: 0.875rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+  width: 100%;
+  text-align: right;
+}
+.pkt-input__counter--error {
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+  color: var(--color-red);
+}
+
+[data-mode=dark] .pkt-input-prefix,
+[data-mode=dark] .pkt-input-suffix,
+[data-mode=dark] .pkt-input-icon {
+  background-color: var(--color-white);
+  color: var(--color-blue-dark);
+}
+
 /* 
  * List elements
  */
@@ -13804,63 +13992,9 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 /* 
  * Select component
  *
- * TODO: Det er ikke optimalt løst å duplisere svg-ikonet,
- * så dette må refaktoreres ved anledning.
+ * Denne blir stilsatt av .pkt-input
+ * Ikke bruk klassen .pkt-select 
  */
-.pkt-select {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/7.2/icons/chevron-thin-down.svg);
-  display: block;
-  background-color: var(--color-white);
-  background-image: var(--svg);
-  background-repeat: no-repeat;
-  background-position: right 0.7rem top 50%;
-  background-size: 2rem auto, 100%;
-  border: 2px solid var(--color-blue-dark);
-  border-radius: 0;
-  color: var(--color-blue-dark);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: normal;
-  height: 3.125rem;
-  line-height: 2rem;
-  margin: 0;
-  max-width: 100%;
-  padding: 0.4375rem 3rem 0.4375rem 0.5rem;
-  width: 100%;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-.pkt-select::-ms-expand {
-  display: none;
-}
-.pkt-select:enabled:focus {
-  border-color: var(--color-active);
-  outline: 2px solid var(--color-active);
-}
-.pkt-select:enabled:hover {
-  --fg-color: var(--color-active);
-  border-color: var(--color-active);
-  color: var(--color-active);
-}
-.pkt-select:enabled:active {
-  border-color: var(--color-active);
-  outline: none;
-}
-.pkt-select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 var(--color-active);
-}
-.pkt-select:disabled {
-  filter: grayscale(1) brightness(4.16);
-  font-weight: 500;
-}
-.pkt-select option {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
-  font-weight: normal;
-}
-
 /* 
  * Table elements
  */
@@ -14809,6 +14943,12 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   letter-spacing: -0.2px;
   line-height: 1.375rem;
 }
+.pkt-inputwrapper__helptext > *:first-child {
+  margin-top: 0;
+}
+.pkt-inputwrapper__helptext > *:last-child {
+  margin-bottom: 0;
+}
 .pkt-inputwrapper__helptext-expandable {
   display: inline-flex;
   text-align: left;
@@ -14879,63 +15019,57 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   padding: 0;
   height: auto;
 }
-.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 {
+.pkt-inputwrapper--error .pkt-input,
+.pkt-inputwrapper--error .pkt-input-prefix,
+.pkt-inputwrapper--error .pkt-input-suffix,
+.pkt-inputwrapper--error .pkt-input-icon {
   border-color: var(--color-red);
 }
-.pkt-inputwrapper--error .pkt-textinput__input:hover,
-.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-prefix,
-.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-suffix,
-.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-icon {
+.pkt-inputwrapper--error .pkt-input:hover,
+.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input,
+.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-prefix,
+.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-suffix,
+.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon {
   border-color: var(--color-red);
 }
-.pkt-inputwrapper--error .pkt-textinput__input:focus-within,
-.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
-.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
-.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
+.pkt-inputwrapper--error .pkt-input:focus-within,
+.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input,
+.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-prefix,
+.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-suffix,
+.pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-icon {
   border-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 {
+.pkt-inputwrapper--disabled .pkt-input,
+.pkt-inputwrapper--disabled .pkt-input-prefix,
+.pkt-inputwrapper--disabled .pkt-input-suffix,
+.pkt-inputwrapper--disabled .pkt-input-icon {
   border-color: var(--color-disabled);
   background-color: var(--color-disabled-light);
 }
-.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input,
-.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-prefix,
-.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-suffix,
-.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-icon {
+.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input,
+.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-prefix,
+.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-suffix,
+.pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-icon {
   border-color: var(--color-disabled);
 }
-.pkt-inputwrapper--disabled .pkt-textinput__input:hover {
+.pkt-inputwrapper--disabled .pkt-input:hover {
   border-color: var(--color-disabled);
   box-shadow: none;
 }
-.pkt-inputwrapper--disabled .pkt-textinput__input:focus {
+.pkt-inputwrapper--disabled .pkt-input:focus {
   border-color: var(--color-disabled);
   box-shadow: none;
   outline: none;
 }
-.pkt-inputwrapper--disabled .pkt-textinput__container:active .pkt-textinput__input {
+.pkt-inputwrapper--disabled .pkt-input__container:active .pkt-input {
   border-right: none;
   box-shadow: none;
   outline: none;
 }
-[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);
-}
 
 /* 
  * Header element
@@ -15133,149 +15267,9 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   color: var(--color-hover) !important;
 }
 
-/* textinput */
-.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(--color-white);
-  border: 2px solid var(--color-blue-dark);
-  border-radius: 0;
-  color: var(--color-blue-dark);
-  margin: 0;
-  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;
-}
-.pkt-textinput__input:hover, .pkt-textinput__input.pkt-textinput__textinput--hover {
-  border-color: var(--color-hover);
-}
-.pkt-textinput__input:focus-visible + .pkt-textinput-suffix, .pkt-textinput__input.pkt-textinput__textinput--focus {
-  box-shadow: 0 0 0 2px var(--color-active);
-  border-color: var(--color-active);
-}
-.pkt-textinput__input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-active);
-  border-color: var(--color-active);
-}
-.pkt-textinput__input:disabled, .pkt-textinput__input:disabled::placeholder, .pkt-textinput__input[readonly] {
-  opacity: 1;
-  background-color: var(--color-disabled-light);
-  border-color: var(--color-disabled);
-  cursor: inherit;
-}
-.pkt-textinput__input:disabled:active {
-  border: 2px solid var(--color-disabled);
-}
-.pkt-textinput__input-prefix, .pkt-textinput__input-suffix, .pkt-textinput__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(--color-blue-dark);
-  flex-shrink: 0;
-}
-.pkt-textinput__input-prefix {
-  padding: 0.5rem 0rem 0.5rem 1rem;
-}
-.pkt-textinput__input-prefix::after {
-  content: "";
-  width: 1px;
-  margin-left: 0.5rem;
-  height: 100%;
-  background-color: var(--color-blue-dark);
-}
-.pkt-textinput__input-suffix {
-  padding: 0.5rem 1rem 0.5rem 0rem;
-}
-.pkt-textinput__input-suffix svg {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-left: 0.5rem;
-}
-.pkt-textinput__input-suffix::before {
-  content: "";
-  width: 1px;
-  margin-right: 0.5rem;
-  height: 1.5rem;
-  background-color: var(--color-blue-dark);
-}
-.pkt-textinput__input-icon {
-  padding: 0.5rem 1rem;
-  align-self: stretch;
-}
-.pkt-textinput__input-icon svg {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-left: 0.5rem;
-}
-.pkt-textinput__input--counter-error, .pkt-textinput__input--counter-error:focus {
-  border-color: var(--color-red);
-  background-color: var(--color-red-30);
-}
-.pkt-textinput__input--counter-error:focus {
-  box-shadow: 0 0 0 2px var(--color-red);
-}
-.pkt-textinput__container {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.pkt-textinput__container :first-child:not(:only-child) {
-  border-right: none;
-}
-.pkt-textinput__container :last-child:not(:only-child) {
-  border-left: none;
-}
-.pkt-textinput__container :not(:first-child):not(:last-child) {
-  border-left: none;
-  border-right: none;
-}
-.pkt-textinput__container p {
-  margin: 0;
-}
-.pkt-textinput__container input:focus {
-  box-shadow: none;
-}
-.pkt-textinput__container:hover .pkt-textinput__input, .pkt-textinput__container:hover .pkt-textinput__input-prefix, .pkt-textinput__container:hover .pkt-textinput__input-suffix, .pkt-textinput__container:hover .pkt-textinput__input-icon {
-  border-color: var(--color-hover);
-}
-.pkt-textinput__container:focus-within {
-  outline: 2px solid var(--color-active);
-}
-.pkt-textinput__container:focus-within .pkt-textinput__input,
-.pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
-.pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
-.pkt-textinput__container:focus-within .pkt-textinput__input-icon {
-  border-color: var(--color-active);
-}
-.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__counter--error {
-  font-size: 0.875rem;
-  font-weight: 500;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-  color: var(--color-red);
-}
+/* 
+ * Textinput component 
+ *
+ * Denne blir stilsatt av .pkt-input
+ * Ikke bruk klassen .pkt-textinput 
+*/