@oslokommune/punkt-css 13.1.2 → 13.2.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/13.1/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/13.2/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_accordion.scss

@@ -126,6 +126,18 @@ pkt-accordion[compact] {
   transition: transform 0.3s;
   appearance: none;
   text-align: left;
+  position: relative;
+
+  @supports (interpolate-size: allow-keywords) {
+    &::details-content {
+      transition:
+        height 0.3s ease,
+        content-visibility 0.3s ease;
+      transition-behavior: allow-discrete;
+      height: 0;
+      overflow: clip;
+    }
+  }
 
   summary::-webkit-details-marker {
     display: none;
@@ -159,7 +171,6 @@ pkt-accordion[compact] {
   &__content {
     @include pkt-accordion-item-standard-content;
     border-top: none;
-    display: none;
   }
 
   // Skin variations for single accordion item (standalone)
@@ -198,8 +209,16 @@ pkt-accordion[compact] {
     @include pkt-accordion-item-compact-content;
   }
 }
-// Accordion item when opened
 .pkt-accordion-item[open] {
+  @supports (interpolate-size: allow-keywords) {
+    &::details-content {
+      height: auto;
+      @starting-style {
+        height: 0;
+      }
+    }
+  }
+
   .pkt-accordion-item {
     &__title {
       border-bottom: none;
@@ -210,10 +229,6 @@ pkt-accordion[compact] {
       }
     }
 
-    &__content {
-      display: block;
-    }
-
     &__icon {
       transform: rotate(180deg) translateY(0);
     }

package/dist/scss/normalise/_index.scss

@@ -17,6 +17,11 @@
   box-sizing: border-box;
 }
 
+/* Support animating to `auto` */
+:root {
+  interpolate-size: allow-keywords;
+}
+
 /* Prevent adjustments of font size after orientation changes in iOS.
  * https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "13.1.2",
+  "version": "13.2.0",
   "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": "cb98f3d45e891775f449eb4b78b3ae8cab40725f"
+  "gitHead": "36713c6c03feb884203fd9def6d137402c212eb0"
 }