@oslokommune/punkt-css 17.0.8 → 17.1.0

package/dist/scss/elements/_input.scss

@@ -10,6 +10,26 @@ pkt-select {
   display: block;
 }
 
+.pkt-textinput,
+.pkt-textarea,
+.pkt-select {
+  display: block;
+
+  &:has(> .pkt-inputwrapper--inline) {
+    display: inline-block;
+    width: fit-content;
+  }
+}
+
+:where(.pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))) {
+  width: min(31rem, 100%);
+}
+
+.pkt-textinput:has(.pkt-input--fullwidth),
+.pkt-select:has(.pkt-input--fullwidth) {
+  width: 100%;
+}
+
 .pkt-input {
   display: flex;
   align-items: center;
@@ -61,19 +81,25 @@ pkt-select {
     }
   }
 
-  // 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))) {
+  &__container {
     width: min(31rem, 100%);
   }
 
-  &__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(&--fullwidth))) {
+  & {
+    width: min(31rem, 100%);
+  }
+
+  &:where([size], [cols]) {
+    width: auto;
+  }
+
+  &:where(select):not(.pkt-input--fullwidth) {
+    width: auto;
+  }
+
+  &__container:where(:has(> :is(input[size], textarea[cols]))) {
     width: fit-content;
+    align-self: flex-start;
   }
 
   &--fullwidth {
@@ -83,9 +109,6 @@ pkt-select {
       width: 100%;
     }
   }
-  [fullwidth] &__counter {
-    width: 100%;
-  }
 
   // Med rows-attributt styrer rows høyden alene
   &:is(textarea:not([rows])) {
@@ -346,11 +369,6 @@ pkt-select {
     align-items: center;
     align-self: stretch;
 
-    &:is(:has(input[size])),
-    &:is(:has(textarea[cols])) {
-      align-self: flex-start;
-    }
-
     :first-child:not(:only-child) {
       border-right-width: 0;
     }
@@ -408,7 +426,7 @@ pkt-select {
     @include typography.get-text('pkt-txt-14-light');
 
     & {
-      width: min(100%, 31rem);
+      width: min(31rem, 100%);
       text-align: right;
     }
 
@@ -451,3 +469,7 @@ pkt-select {
     }
   }
 }
+
+.pkt-input__container:where(:has(> .pkt-input--fullwidth)) {
+  width: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "17.0.8",
+  "version": "17.1.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -62,5 +62,5 @@
   "dependencies": {
     "astro": "^7.2.0"
   },
-  "gitHead": "e755eac6123dd25b4f93b1de4cc8febe170eee2d"
+  "gitHead": "20e21ac32f77c4b3981dcabfcace7cd0565c2f7a"
 }