@oslokommune/punkt-css 17.0.10 → 17.1.1

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/17.0/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/17.1/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_combobox.scss

@@ -8,12 +8,15 @@
 $-box-separator: map.get(variables.$spacing, 'size-8');
 $-input-spacing: map.get(variables.$spacing, 'size-4');
 
-pkt-combobox,
+pkt-combobox {
+  display: block;
+}
+
 .pkt-combobox-component {
   display: block;
   max-width: 31rem;
   width: 100%;
-  &[fullwidth],
+
   &--fullwidth {
     max-width: 100%;
   }

package/dist/scss/components/_datepicker.scss

@@ -6,6 +6,10 @@ pkt-datepicker {
   position: relative;
 }
 
+.pkt-datepicker--fullwidth {
+  width: 100%;
+}
+
 .pkt-datepicker__tags {
   button.pkt-tag {
     margin: 0 0.25rem 0.5rem 0;
@@ -21,12 +25,13 @@ pkt-datepicker-multiple {
   display: block;
 }
 
+.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)):not(:has(.pkt-datepicker--multiple)) {
+  width: fit-content;
+}
+
 .pkt-datepicker__inputs {
   width: 100%;
   position: relative;
-  .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
-    width: fit-content;
-  }
   .pkt-input__container {
     border: 2px solid var(--pkt-color-input-border-normal);
     background-color: var(--pkt-color-input-background-normal);
@@ -89,6 +94,8 @@ pkt-datepicker-multiple {
   .pkt-datepicker__input {
     padding-inline-end: 0;
     background-image: none;
+  }
+  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
     width: 8.3rem;
   }
   .pkt-input-separator ~ .pkt-datepicker--range {
@@ -110,9 +117,18 @@ pkt-datepicker-multiple {
   width: 8.3rem;
   max-width: calc(100% - 3rem);
 }
-.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
+.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
   flex: 1;
 }
+
+.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range {
+  flex: 0 0 auto;
+  width: 8.3rem;
+}
+
+.pkt-input__container:has(.pkt-datepicker--range.pkt-input--fullwidth) button.pkt-input-icon {
+  margin-inline-start: auto;
+}
 .pkt-datepicker__input::-webkit-inner-spin-button,
 .pkt-datepicker__input::-webkit-calendar-picker-indicator {
   display: none;
@@ -167,6 +183,10 @@ pkt-datepicker-multiple {
         width: $input-width;
       }
 
+      .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range {
+        width: $input-width;
+      }
+
       .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
         max-width: calc(100% - $button-width);
       }
@@ -191,10 +211,15 @@ pkt-datepicker-multiple {
       width: auto;
       max-width: 100%;
     }
-    .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
+    .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
       width: auto;
       flex: 1;
     }
+
+    .pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--range {
+      width: auto;
+      flex: 0 0 auto;
+    }
     .pkt-input__container:has(.pkt-datepicker__input[type='date']) button.pkt-input-icon {
       display: none;
     }

package/dist/scss/components/_fileupload.scss

@@ -6,7 +6,14 @@
 
 $-module-name: 'pkt-fileupload';
 
-pkt-fileupload,
+pkt-fileupload {
+  display: block;
+}
+
+.pkt-fileupload-component {
+  display: block;
+}
+
 .pkt-fileupload {
   display: block;
   width: min(100%, 31rem);
@@ -29,8 +36,7 @@ pkt-fileupload,
   // COMPONENT MODIFIERS
   // ============================================
 
-  &--full-width,
-  &[fullwidth] {
+  &--full-width {
     width: 100%;
 
     .pkt-fileupload__drop-zone,

package/dist/scss/components/_inputwrapper.scss

@@ -6,6 +6,10 @@
 
 pkt-input-wrapper {
   display: block;
+
+  &[inline] {
+    display: inline-block;
+  }
 }
 @supports selector(:not(:has(*))) {
   // Skjul helptext-container hvis den ikke har innhold.
@@ -23,6 +27,8 @@ pkt-input-wrapper {
   }
 }
 .pkt-inputwrapper {
+  display: block;
+
   &__label {
     display: flex;
     flex-direction: row;
@@ -135,8 +141,9 @@ pkt-input-wrapper {
 
   &--inline {
     display: inline-block;
+    width: fit-content;
     vertical-align: middle;
-    margin-right: 8px;
+    margin-inline-end: 8px;
   }
 
   .pkt-alert {
@@ -144,7 +151,6 @@ pkt-input-wrapper {
     margin: 0 0 0.5rem 0;
   }
 
-  // Alert — stretch to match field width (fieldset uses align-items: flex-start)
   &__alert-wrapper {
     align-self: stretch;
     max-width: min(100%, 31rem);

package/dist/scss/components/_messagebox.scss

@@ -6,8 +6,6 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/' as *;
 
-$-module-name: 'pkt-messagebox';
-
 pkt-messagebox {
   display: block;
 }
@@ -18,28 +16,28 @@ $-messagebox-spacing-compact: map.get(variables.$spacing, 'size-16');
 $-border-thickness: map.get(variables.$spacing, 'size-4');
 
 // default is "info"
-.#{$-module-name} {
+.pkt-messagebox {
   --pkt-color-messagebox-bc: var(--pkt-color-border-beige);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);
   --pkt-color-messagebox-txt: var(--pkt-color-text-body-dark);
 }
 
-.#{$-module-name}--red {
+.pkt-messagebox--red {
   --pkt-color-messagebox-bc: var(--pkt-color-border-red);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-faded-red);
 }
 
-.#{$-module-name}--green {
+.pkt-messagebox--green {
   --pkt-color-messagebox-bc: var(--pkt-color-border-green);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-green);
 }
 
-.#{$-module-name}--blue {
+.pkt-messagebox--blue {
   --pkt-color-messagebox-bc: var(--pkt-color-border-blue);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue);
 }
 
-.#{$-module-name} {
+.pkt-messagebox {
   padding: $-messagebox-spacing $-messagebox-spacing $-messagebox-spacing
     calc($-messagebox-spacing - $-border-thickness);
 
@@ -49,7 +47,7 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   overflow-wrap: break-word;
   overflow: hidden;
 
-  &:not(:has(.#{$-module-name}__title)):has(.#{$-module-name}__close) {
+  &:not(:has(.pkt-messagebox__title)):has(.pkt-messagebox__close) {
     grid-template: 'text close';
     grid-template-columns: minmax(0, 1fr) 40px;
   }
@@ -69,10 +67,11 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
     margin: 0;
     @include get-text('pkt-txt-18-light');
 
-    p {
+    p,
+    ul {
       margin-block-end: map.get(variables.$spacing, 'size-16');
 
-      &:last-of-type {
+      &:last-child {
         margin-block-end: 0;
       }
     }
@@ -88,18 +87,19 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
 }
 
 // Compact variant
-.#{$-module-name}--compact {
-  padding: $-messagebox-spacing-compact $-messagebox-spacing-compact $-messagebox-spacing-compact
-    calc($-messagebox-spacing-compact - $-border-thickness);
-  .#{$-module-name}__title {
+.pkt-messagebox--compact {
+  padding: $-messagebox-spacing-compact $-messagebox-spacing $-messagebox-spacing-compact
+    calc($-messagebox-spacing - $-border-thickness);
+  .pkt-messagebox__title {
     @include get-text('pkt-txt-16-medium');
+    margin-block-end: $-messagebox-spacing-compact;
   }
 
-  .#{$-module-name}__text {
+  .pkt-messagebox__text {
     @include get-text('pkt-txt-16-light');
   }
 
-  .#{$-module-name}__close > .pkt-btn {
+  .pkt-messagebox__close > .pkt-btn {
     top: -15px;
   }
 }

package/dist/scss/components/_textarea.scss

@@ -9,22 +9,11 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins/typography';
 
-// Match textinput: cap at 31rem; field fills the wrapper.
-// React: .pkt-inputwrapper is the outer box. Elements: pkt-textarea is the flex child and
-// shrink-wraps unless capped here — inner .pkt-inputwrapper width: 100% then resolves correctly.
-pkt-textarea:not([fullwidth]):has(textarea.pkt-input:not([cols])) {
+:where(.pkt-textarea:has(textarea.pkt-input:not(.pkt-input--fullwidth):not([cols]))) {
   width: min(31rem, 100%);
 }
 
-pkt-textarea[fullwidth] {
-  width: 100%;
-}
-
-.pkt-inputwrapper:has(textarea.pkt-input:not(.pkt-input--fullwidth):not([cols])) {
-  width: min(31rem, 100%);
-}
-
-.pkt-inputwrapper:has(textarea.pkt-input--fullwidth) {
+.pkt-textarea:has(textarea.pkt-input--fullwidth) {
   width: 100%;
 }
 

package/dist/scss/components/_timepicker.scss

@@ -6,7 +6,6 @@ pkt-timepicker {
   display: block;
 }
 
-/// Size overrides for small / xsmall. Base .pkt-input__container styles use medium (48px).
 @mixin timepicker-field-size($min-height, $text-style, $icon-size, $padding-inline: 0.5rem) {
   .pkt-input__container {
     min-height: $min-height;
@@ -34,8 +33,7 @@ pkt-timepicker {
   }
 }
 
-.pkt-timepicker,
-pkt-timepicker {
+.pkt-timepicker {
   &__anchor {
     position: relative;
   }
@@ -155,6 +153,8 @@ pkt-timepicker {
   }
 
   &--fullwidth {
+    width: 100%;
+
     .pkt-timepicker__anchor,
     .pkt-input__container {
       width: 100%;

package/dist/scss/elements/_button.scss

@@ -343,12 +343,6 @@ $-skins: (
   @include -skin($key, map.get($value, 'light'));
 }
 
-pkt-button[disabled],
-pkt-button[data-disabled],
-pkt-button[isLoading] {
-  pointer-events: none;
-}
-
 // Selve knappe-klassen
 .pkt-btn {
   border-radius: 0;

package/dist/scss/elements/_checkbox-radio.scss

@@ -55,11 +55,13 @@ $-module-name: 'pkt-input-check';
       }
 
       &[type='checkbox'][role='switch'] {
+        transition: all 0.15s ease-in-out;
         position: relative;
         height: calc(1.5rem + 2px);
         width: 2.5rem;
         border-radius: calc(0.75rem + 2px);
         &:after {
+          transition: all 0.15s ease-in-out;
           display: block;
           content: '';
           border: 2px solid var(--pkt-color-input-check-border);
@@ -92,7 +94,6 @@ $-module-name: 'pkt-input-check';
 
       &[type='checkbox']:active:not(:disabled) {
         --pkt-color-input-check-border: var(--pkt-color-input-border-active);
-        outline: 6px solid var(--pkt-color-input-border-active);
       }
 
       &[type='checkbox']:focus-visible {

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.10",
+  "version": "17.1.1",
   "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": "d7aa97ec38415ce31bd73314e4669ca2ba04a8cf"
+  "gitHead": "0e600db899cfda4ac87979c94724908424ba56c8"
 }