@oslokommune/punkt-css 15.4.2 → 15.4.3

package/dist/scss/components/_datepicker.scss

@@ -29,8 +29,9 @@ pkt-datepicker-multiple {
   .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
     width: fit-content;
   }
-  > .pkt-input__container {
+  .pkt-input__container {
     border: 2px solid var(--pkt-color-input-border-normal);
+    background-color: var(--pkt-color-input-background-normal);
     .pkt-input,
     .pkt-input-prefix,
     .pkt-input-suffix,
@@ -52,6 +53,7 @@ pkt-datepicker-multiple {
     &:has(input:disabled),
     &:has(input[readonly]:not(.ios-readonly-hack)) {
       border-color: var(--pkt-color-input-border-disabled);
+      --fg-color: var(--pkt-color-input-text-disabled);
     }
 
     &:has(.pkt-input--counter-error) {
@@ -108,11 +110,11 @@ pkt-datepicker-multiple {
     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;
 }
 .pkt-datepicker__input::-webkit-inner-spin-button,

package/dist/scss/elements/_input.scss

@@ -103,6 +103,8 @@ pkt-select {
   &.pkt-input__textinput--focus {
     box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
     border-color: var(--pkt-color-input-border-active);
+    //outline: 4px solid var(--pkt-color-border-states-focus);
+    // TODO: Hva skal vi gjøre her egentlig? Denne fjernet vi for årevis siden men kanskje vi skal ha den tilbake?
   }
 
   &:focus {
@@ -117,6 +119,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;
   }
 
@@ -236,9 +239,10 @@ pkt-select {
     &:hover .pkt-input-prefix,
     &:hover .pkt-input-suffix,
     &:hover .pkt-input-icon {
-      border-color: var(--pkt-color-input-border-active);
-      &:disabled {
-        border-color: var(--pkt-color-input-border-disabled);
+      &:not(:disabled) {
+        border-color: var(--pkt-color-input-border-active);
+        color: var(--pkt-color-input-text-hover);
+        --fg-color: var(--pkt-color-input-text-hover);
       }
     }
 
@@ -272,7 +276,6 @@ pkt-select {
   }
 
   &__range-inputs {
-    min-width: 17rem;
     container: range / inline-size;
   }
 }
@@ -281,16 +284,25 @@ 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;
-    > :nth-child(2) {
-      grid-column-start: span 2;
-    }
     .pkt-input-prefix,
     .pkt-input-suffix,
     .pkt-input-icon,
     .pkt-input {
       border: 0;
     }
+    .pkt-input-separator {
+      margin: 0 auto;
+    }
+    .pkt-input.pkt-datepicker__input.pkt-datepicker--range {
+      padding-left: 1rem;
+    }
+  }
+  .pkt-input__container:has(> :first-child.pkt-input-prefix) {
+    > :nth-child(2) {
+      grid-column-start: span 2;
+    }
+    grid-template-columns: min-content auto 3rem;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "15.4.2",
+  "version": "15.4.3",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "1186b7601af17e09107f3f8e55410af0fea62248"
+  "gitHead": "2209815d9725ba435cd62f140625a3f40903202a"
 }