@oslokommune/punkt-css 16.26.2 → 17.0.0

package/dist/scss/elements/_input.scss

@@ -20,11 +20,34 @@ pkt-select {
   color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
+  min-height: 3rem;
 
   @include typography.get-text('pkt-txt-18-light');
 
-  &:not(&-compact) {
-    min-height: 3rem;
+  &--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+    min-height: 2.625rem;
+    padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16');
+    @include typography.get-text('pkt-txt-16-light');
+
+    &:not(select[multiple]) {
+      height: 2.625rem;
+    }
+  }
+
+  &--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+    min-height: 2.25rem;
+    padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12');
+    @include typography.get-text('pkt-txt-14-light');
+
+    &:not(select[multiple]) {
+      height: 2.25rem;
+    }
+  }
+
+  // Native inputs should not use flex layout (breaks composite prefix/suffix rows)
+  input.pkt-input,
+  select.pkt-input {
+    display: block;
   }
 
   &-compact#{&} {
@@ -38,7 +61,11 @@ pkt-select {
     }
   }
 
-  &:not(textarea[cols]):not(input[size]):not(&--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
+  // Default field width cap (31rem). Exclusions:
+  // - textarea: width set in _textarea.scss (needs wrapper/host, not this rule)
+  // - [cols]: native HTML width; browser sizes from character count — do not override
+  // - input[size]: same escape hatch for text inputs
+  &:not(:is(textarea)):not(input[size]):not(&--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
   &__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(
       :is(:has(input[size]))
     ):not(:is(:has(&--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
@@ -60,8 +87,9 @@ pkt-select {
     width: 100%;
   }
 
-  &:is(textarea) {
-    min-height: map.get(variables.$spacing, 'size-128');
+  // Med rows-attributt styrer rows høyden alene
+  &:is(textarea:not([rows])) {
+    min-height: map.get(variables.$spacing, 'size-148');
   }
 
   &:is(select) {
@@ -78,6 +106,25 @@ pkt-select {
       background-size:
         1.5rem auto,
         100%;
+
+      // Nestet her for å vinne over @extend-utvidede baseselektorer (f.eks. .pkt-select select)
+      &.pkt-input--small {
+        background-size:
+          1.25rem auto,
+          100%;
+        background-position: right 0.5rem top 50%;
+        padding: map.get(variables.$spacing, 'size-6') 2.5rem map.get(variables.$spacing, 'size-6')
+          map.get(variables.$spacing, 'size-16');
+      }
+
+      &.pkt-input--xsmall {
+        background-size:
+          1.125rem auto,
+          100%;
+        background-position: right 0.5rem top 50%;
+        padding: map.get(variables.$spacing, 'size-4') 2.25rem map.get(variables.$spacing, 'size-4')
+          map.get(variables.$spacing, 'size-12');
+      }
     }
 
     option {
@@ -93,7 +140,6 @@ pkt-select {
     opacity: 1; // 1
   }
 
-  // states
   &:hover,
   &.pkt-input--hover {
     border-color: var(--pkt-color-input-border-hover);
@@ -196,6 +242,95 @@ pkt-select {
     padding: 0.5rem 0;
   }
 
+  // Composite fields (prefix / suffix): size the row as one unit — do not fix height on each child
+  &__container--small {
+    align-items: stretch;
+
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon {
+      height: auto;
+      min-height: 2.625rem;
+      @include typography.get-text('pkt-txt-16-light');
+    }
+
+    .pkt-input-prefix {
+      padding: map.get(variables.$spacing, 'size-6') 0 map.get(variables.$spacing, 'size-6')
+        map.get(variables.$spacing, 'size-16');
+    }
+
+    .pkt-input-suffix {
+      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16')
+        map.get(variables.$spacing, 'size-6') 0;
+    }
+
+    input.pkt-input,
+    select.pkt-input {
+      height: auto;
+      min-height: 2.625rem;
+      flex: 1 1 auto;
+      min-width: 0;
+      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16');
+      @include typography.get-text('pkt-txt-16-light');
+    }
+
+    .pkt-input-icon svg,
+    .pkt-input-suffix svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    .pkt-input-suffix::before {
+      height: 1.25rem;
+    }
+  }
+
+  &__container--xsmall {
+    align-items: stretch;
+
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon {
+      height: auto;
+      min-height: 2.25rem;
+      @include typography.get-text('pkt-txt-14-light');
+    }
+
+    .pkt-input-prefix {
+      padding: map.get(variables.$spacing, 'size-4') 0 map.get(variables.$spacing, 'size-4')
+        map.get(variables.$spacing, 'size-12');
+    }
+
+    .pkt-input-suffix {
+      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12')
+        map.get(variables.$spacing, 'size-4') 0;
+    }
+
+    input.pkt-input,
+    select.pkt-input {
+      height: auto;
+      min-height: 2.25rem;
+      flex: 1 1 auto;
+      min-width: 0;
+      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12');
+      @include typography.get-text('pkt-txt-14-light');
+    }
+
+    .pkt-input-icon {
+      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
+    }
+
+    .pkt-input-icon svg,
+    .pkt-input-suffix svg {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+
+    .pkt-input-suffix::before {
+      height: 1.125rem;
+    }
+  }
+
   &--counter-error,
   &--counter-error:focus {
     border-color: var(--pkt-color-input-border-error);
@@ -233,7 +368,6 @@ pkt-select {
       margin: 0;
     }
 
-    //states
     & input:focus {
       outline: none;
       box-shadow: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "16.26.2",
+  "version": "17.0.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -25,7 +25,7 @@
     ]
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^16.26.2",
+    "@oslokommune/punkt-assets": "^17.0.0",
     "edit-json-file": "^1.8.1",
     "fs-extra": "^11.3.5",
     "prettier": "^3.8.4",
@@ -62,5 +62,5 @@
   "dependencies": {
     "astro": "^7.0.0-beta.4"
   },
-  "gitHead": "b667fcd160da4b1c4e556fdd0bb23d50cc433827"
+  "gitHead": "16ef60f40da1a44e59bb72380712e4636768e2c5"
 }