@oslokommune/punkt-css 15.4.2 → 15.4.4

package/dist/css/pkt-docs.css

@@ -18795,6 +18795,7 @@ pkt-select {
   opacity: 1;
   background-color: var(--pkt-color-surface-default-gray);
   border-color: var(--pkt-color-input-border-disabled);
+  color: var(--pkt-color-input-text-disabled);
   cursor: inherit;
 }
 .pkt-input:disabled:active, .pkt-textinput__input:disabled:active, .pkt-select select:disabled:active,
@@ -18888,13 +18889,11 @@ pkt-select {
   outline: none;
   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 {
+.pkt-input__container:hover .pkt-input:not(:disabled), .pkt-input__container:hover .pkt-textinput__input:not(:disabled), .pkt-input__container:hover .pkt-select select:not(:disabled), .pkt-select .pkt-input__container:hover select:not(:disabled),
+.pkt-input__container:hover .pkt-select:not(:disabled):is(select), .pkt-input__container:hover .pkt-input-prefix:not(:disabled), .pkt-input__container:hover .pkt-input-suffix:not(:disabled), .pkt-input__container:hover .pkt-input-icon:not(:disabled) {
   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-select select:disabled, .pkt-select .pkt-input__container:hover select:disabled,
-.pkt-input__container:hover .pkt-select:disabled:is(select), .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);
+  color: var(--pkt-color-input-text-hover);
+  --fg-color: var(--pkt-color-input-text-hover);
 }
 .pkt-input__container:focus-within {
   outline: 2px solid var(--pkt-color-input-border-active);
@@ -18926,7 +18925,6 @@ pkt-select {
   color: var(--pkt-color-input-text-error);
 }
 .pkt-input__range-inputs {
-  min-width: 17rem;
   container: range/inline-size;
 }
 
@@ -18935,12 +18933,9 @@ pkt-select {
     border: 2px solid var(--pkt-color-input-border-normal);
     display: grid;
     grid-template-rows: auto auto;
-    grid-template-columns: min-content auto 4rem;
+    grid-template-columns: auto 3rem;
     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,
@@ -18951,6 +18946,19 @@ pkt-select {
   .pkt-input__container .pkt-select:is(select) {
     border: 0;
   }
+  .pkt-input__container .pkt-input-separator {
+    margin: 0 auto;
+  }
+  .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input, .pkt-input__container .pkt-select select.pkt-datepicker__input.pkt-datepicker--range, .pkt-select .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,
+  .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select) {
+    padding-left: 1rem;
+  }
+  .pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
+    grid-column-start: span 2;
+  }
+  .pkt-input__container:has(> :first-child.pkt-input-prefix) {
+    grid-template-columns: min-content auto 3rem;
+  }
 }
 /* 
  * List elements
@@ -20554,40 +20562,42 @@ pkt-datepicker-multiple {
 .pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
   width: fit-content;
 }
-.pkt-datepicker__inputs > .pkt-input__container {
+.pkt-datepicker__inputs .pkt-input__container {
   border: 2px solid var(--pkt-color-input-border-normal);
+  background-color: var(--pkt-color-input-background-normal);
 }
-.pkt-datepicker__inputs > .pkt-input__container .pkt-input,
-.pkt-datepicker__inputs > .pkt-input__container .pkt-input-prefix,
-.pkt-datepicker__inputs > .pkt-input__container .pkt-input-suffix,
-.pkt-datepicker__inputs > .pkt-input__container .pkt-input-icon,
-.pkt-datepicker__inputs > .pkt-input__container .pkt-input-separator {
+.pkt-datepicker__inputs .pkt-input__container .pkt-input,
+.pkt-datepicker__inputs .pkt-input__container .pkt-input-prefix,
+.pkt-datepicker__inputs .pkt-input__container .pkt-input-suffix,
+.pkt-datepicker__inputs .pkt-input__container .pkt-input-icon,
+.pkt-datepicker__inputs .pkt-input__container .pkt-input-separator {
   border: 0;
   height: 100%;
   min-height: 2.75rem;
 }
-.pkt-datepicker__inputs > .pkt-input__container:hover {
+.pkt-datepicker__inputs .pkt-input__container:hover {
   border-color: var(--pkt-color-input-border-active);
 }
-.pkt-datepicker__inputs > .pkt-input__container:focus-within {
+.pkt-datepicker__inputs .pkt-input__container:focus-within {
   border-color: var(--pkt-color-input-border-active);
 }
-.pkt-datepicker__inputs > .pkt-input__container:has(input:disabled), .pkt-datepicker__inputs > .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)) {
+.pkt-datepicker__inputs .pkt-input__container:has(input:disabled), .pkt-datepicker__inputs .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)) {
   border-color: var(--pkt-color-input-border-disabled);
+  --fg-color: var(--pkt-color-input-text-disabled);
 }
-.pkt-datepicker__inputs > .pkt-input__container:has(.pkt-input--counter-error) {
+.pkt-datepicker__inputs .pkt-input__container:has(.pkt-input--counter-error) {
   border-color: var(--pkt-color-input-border-error);
 }
-.pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container {
+.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container {
   border-color: var(--pkt-color-brand-red-1000);
 }
-.pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container:hover, .pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container:focus-within {
+.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:hover, .pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:focus-within {
   border-color: var(--pkt-color-brand-red-1000);
 }
-.pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container {
+.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container {
   border-color: var(--pkt-color-border-states-disabled);
 }
-.pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container:hover, .pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container:focus-within {
+.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:hover, .pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:focus-within {
   border-color: var(--pkt-color-border-states-disabled);
   box-shadow: none;
   outline: none;
@@ -20621,12 +20631,12 @@ pkt-datepicker-multiple {
   box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
-.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
+.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
   width: 8.3rem;
+  max-width: calc(100% - 3rem);
 }
 
 .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
-  width: auto;
   flex: 1;
 }
 
@@ -20888,6 +20898,7 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
   padding: 0.5rem;
   min-width: 0;
   overflow: hidden;
+  justify-content: end;
 }
 pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress,
 .pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress {
@@ -21226,8 +21237,8 @@ pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-
 .pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-display__item__thumbnail__title {
   letter-spacing: -0.2px;
   font-weight: 400;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
 }
 pkt-fileupload__queue-display__item--canceled,
 .pkt-fileupload__queue-display__item--canceled {