@oslokommune/punkt-css 15.4.3 → 16.0.0

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

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

package/dist/scss/components/_combobox.scss

@@ -8,11 +8,13 @@
 $-box-separator: map.get(variables.$spacing, 'size-8');
 $-input-spacing: map.get(variables.$spacing, 'size-4');
 
-pkt-combobox {
+pkt-combobox,
+.pkt-combobox-component {
   display: block;
   max-width: 31rem;
   width: 100%;
-  &[fullwidth] {
+  &[fullwidth],
+  &--fullwidth {
     max-width: 100%;
   }
 }
@@ -27,38 +29,21 @@ pkt-combobox {
     flex-direction: column;
     width: 100%;
 
+    // Legacy arrow button styles (kept for backward compat with older markup)
     &__arrow.pkt-btn {
       position: absolute;
       right: 0.25rem;
       height: 100%;
       min-width: 1.125rem;
       min-height: 1.125rem;
-      transform: rotate(0deg);
-      transition: transform 1s linear;
       padding: 0.5rem;
-
-      // legg til liten bevgelse på pilen på hover
       svg {
-        transition: transform 0.1s ease-in-out;
         width: 1.5rem;
         height: 1.5rem;
       }
-
-      &-icon {
-        transform: rotate(0deg);
-        transition: transform 0.3s ease;
-        &--open {
-          transform: rotate(180deg);
-          transition: transform 0.3s ease;
-        }
-      }
-
       &:hover:not([data-disabled]) {
         background-color: inherit;
         border-color: transparent;
-        svg {
-          transform: translateY(0.25rem);
-        }
       }
     }
 
@@ -72,7 +57,9 @@ pkt-combobox {
       position: relative;
       margin: 0;
       padding: 0.5rem 2rem 0.5rem 0.5rem;
-      border: 2px solid var(--pkt-color-border-default);
+      background-color: var(--pkt-color-input-background-normal);
+      border: 2px solid var(--pkt-color-input-border-normal);
+      color: var(--pkt-color-input-text-normal);
       min-height: 3rem;
       gap: 0.375rem;
       flex-wrap: wrap;
@@ -81,15 +68,27 @@ pkt-combobox {
 
       &-div {
         display: contents;
-        &:first-child input {
-          padding-left: 0.5rem;
-        }
       }
 
       &--fullwidth {
         width: 100%;
       }
 
+      &:hover:not(&--disabled):not(&--error) {
+        border-color: var(--pkt-color-input-border-hover);
+
+        > .pkt-combobox__value {
+          color: var(--pkt-color-input-text-hover);
+        }
+
+        .pkt-combobox__arrow-icon {
+          --fg-color: var(--pkt-color-brand-warm-blue-1000);
+          &:not(.pkt-combobox__arrow-icon--open) svg {
+            transform: translateY(0.25rem);
+          }
+        }
+      }
+
       &--error {
         &,
         &:hover,
@@ -103,8 +102,8 @@ pkt-combobox {
       &:focus-within,
       &:focus-visible,
       &--open {
-        border-color: var(--pkt-color-brand-warm-blue-1000);
-        outline: none;
+        border-color: var(--pkt-color-input-border-active);
+        outline: 2px solid var(--pkt-color-input-border-active);
       }
 
       &--disabled {
@@ -128,12 +127,16 @@ pkt-combobox {
         background: transparent;
         letter-spacing: inherit;
         line-height: 1.4rem;
-        padding: 0;
+        padding: 0 0 0 0.5rem;
         margin: 0;
-        width: 0;
+        flex: 1;
+        min-width: 3rem;
+        &::placeholder {
+          color: var(--pkt-color-text-placeholder);
+          opacity: 1;
+        }
         &:focus,
         &:active {
-          width: 100%;
           outline: none;
         }
       }
@@ -141,6 +144,34 @@ pkt-combobox {
         margin: 0;
       }
     }
+    &__tag-list {
+      display: contents;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        display: contents;
+      }
+    }
+    &__arrow-icon {
+      position: absolute;
+      right: 0.25rem;
+      min-width: 1.125rem;
+      min-height: 1.125rem;
+      padding: 0.5rem;
+      transform: rotate(0deg);
+      transition: transform 0.3s ease;
+      pointer-events: none;
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: transform 0.1s ease-in-out;
+      }
+      &--open {
+        transform: rotate(180deg);
+        transition: transform 0.3s ease;
+      }
+    }
     &__tags-outside {
       display: flex;
       flex-wrap: wrap;
@@ -148,6 +179,17 @@ pkt-combobox {
       .pkt-tag {
         margin: 0;
       }
+      .pkt-combobox__tag-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.375rem;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+          display: contents;
+        }
+      }
     }
 
     &__placeholder {

package/dist/scss/components/_fileupload.scss

@@ -240,6 +240,7 @@ pkt-fileupload,
         padding: map.get(variables.$spacing, 'size-8');
         min-width: 0;
         overflow: hidden;
+        justify-content: end;
       }
 
       // In-progress items span full width
@@ -553,7 +554,7 @@ pkt-fileupload,
 
         &--fallback {
           .pkt-fileupload__queue-display__item__thumbnail__title {
-            @include typography.get-text('pkt-txt-12');
+            @include typography.get-text('pkt-txt-14');
           }
         }
       }

package/dist/scss/components/_listbox.scss

@@ -16,7 +16,8 @@ pkt-listbox {
   margin: 0;
   overflow-y: auto;
   border: 2px solid var(--pkt-color-border-gray);
-  background-color: white;
+  background-color: var(--pkt-color-input-background-normal);
+  color: var(--pkt-color-input-text-normal);
   max-height: 18rem;
 
   &.pkt-listbox__open {
@@ -110,6 +111,12 @@ pkt-listbox {
     }
   }
 
+  .pkt-listbox__empty {
+    padding: $listbox-padding;
+    color: var(--pkt-color-text-body-muted);
+    list-style: none;
+  }
+
   .pkt-listbox__banners {
     padding: 0.25rem;
     margin: 0;
@@ -132,7 +139,8 @@ pkt-listbox {
     box-sizing: border-box;
 
     &--new-option,
-    &--user-message {
+    &--user-message,
+    &--empty {
       background-color: var(--pkt-color-surface-default-gray);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "15.4.3",
+  "version": "16.0.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^15.0.0",
+    "@oslokommune/punkt-assets": "^16.0.0",
     "astro": "^5.7.5",
     "edit-json-file": "^1.8.0",
     "fs-extra": "^11.2.0",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "2209815d9725ba435cd62f140625a3f40903202a"
+  "gitHead": "b3e88b7c06f9a63c2e911693af6b9860cd73c27b"
 }