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

package/dist/scss/base/_grid-responsive.scss

@@ -26,11 +26,20 @@
   & > * > .pkt-cell {
     @each $bp-name, $bp-value in variables.$breakpoints {
       @include bp-up($bp-value) {
-        @for $i from 2 through 12 {
+        @for $i from 1 through 12 {
           &.pkt-cell--span#{$i}-#{$bp-name}-up {
             grid-column-end: span $i;
           }
         }
+
+        @for $i from 1 through 13 {
+          &.pkt-cell--start#{$i}-#{$bp-name}-up {
+            grid-column-start: $i;
+          }
+          &.pkt-cell--end#{$i}-#{$bp-name}-up {
+            grid-column-end: $i;
+          }
+        }
       }
     }
   }

package/dist/scss/base/_grid.scss

@@ -27,6 +27,14 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
     }
   }
 
+  &--inline {
+    display: inline-grid;
+  }
+
+  &--dense {
+    grid-auto-flow: dense;
+  }
+
   // Widths
   &--full {
     max-width: 100%;
@@ -108,10 +116,20 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
       align-self: self-end;
     }
 
-    @for $i from 2 through 12 {
+    @for $i from 1 through 12 {
       &.pkt-cell--span#{$i} {
         grid-column-end: span $i;
       }
     }
+
+    // Eksplisitt plassering. 13 er linja etter siste kolonne.
+    @for $i from 1 through 13 {
+      &.pkt-cell--start#{$i} {
+        grid-column-start: $i;
+      }
+      &.pkt-cell--end#{$i} {
+        grid-column-end: $i;
+      }
+    }
   }
 }

package/dist/scss/base/_link.scss

@@ -4,6 +4,10 @@
 
 @use '../abstracts/variables';
 
+pkt-link {
+  display: inline;
+}
+
 a,
 .pkt-link-button {
   // Order of pseudoclasses is important for specificity:

package/dist/scss/components/_backlink.scss

@@ -7,6 +7,10 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/mixins/typography';
 
+pkt-backlink {
+  display: block;
+}
+
 .pkt-back-link {
   .pkt-link {
     display: inline-flex;

package/dist/scss/components/_breadcrumbs.scss

@@ -7,6 +7,10 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/mixins/typography';
 
+pkt-breadcrumbs {
+  display: block;
+}
+
 .pkt-breadcrumbs {
   position: relative;
   @include typography.get-text('pkt-txt-14-light');

package/dist/scss/components/_card.scss

@@ -34,21 +34,14 @@ pkt-card {
   }
 
   // HEADINGS, TEXT, SUBTEXT
-
-  .pkt-card__heading {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5 {
-      padding: 0;
-      margin: 0;
-      font-size: map.get(variables.$font-size, 'size-30');
-      font-weight: map.get(variables.$font-weight, 'regular');
-      margin-block-end: map.get(variables.$spacing, 'size-8');
-      hyphens: auto;
-      overflow-wrap: break-word;
-    }
+  // Typografien kommer fra pkt-heading. Doblet klasse for å slå
+  // pkt-heading sin egen marg-nullstilling, som også er (0,2,0).
+  &.pkt-card .pkt-card__heading {
+    padding: 0;
+    margin: 0;
+    margin-block-end: map.get(variables.$spacing, 'size-8');
+    hyphens: auto;
+    overflow-wrap: break-word;
   }
 
   .pkt-card__link {
@@ -57,20 +50,20 @@ pkt-card {
   }
 
   p.pkt-card__subheading {
+    @include get-text('pkt-txt-20-light');
+
     padding: 0;
     margin: 0;
-    line-height: unset;
     margin-block-end: map.get(variables.$spacing, 'size-16');
-    font-size: map.get(variables.$font-size, 'size-20');
-    font-weight: map.get(variables.$font-weight, 'light');
     hyphens: auto;
     overflow-wrap: break-word;
   }
 
   .pkt-card__metadata {
+    @include get-text('pkt-txt-16-light');
+
     margin-block-start: map.get(variables.$spacing, 'size-16');
     margin-block-end: 0;
-    line-height: unset;
     gap: map.get(variables.$spacing, 'size-8');
   }
 
@@ -130,6 +123,31 @@ pkt-card {
     }
   }
 
+  // ZOOM
+
+  &.pkt-card--zoom {
+    .pkt-card__image img {
+      transform: scale(1);
+      transition: transform 0.5s ease-in-out;
+    }
+
+    &:hover .pkt-card__image img,
+    &:focus-within .pkt-card__image img {
+      transform: scale(1.1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .pkt-card__image img {
+        transition: none;
+      }
+
+      &:hover .pkt-card__image img,
+      &:focus-within .pkt-card__image img {
+        transform: none;
+      }
+    }
+  }
+
   //horizontal image styles
   &.pkt-card--horizontal {
     .pkt-card__image {
@@ -175,6 +193,65 @@ pkt-card {
     }
   }
 
+  // IMAGE ASPECT RATIO
+  // Overstyrer standardforholdet. Uten disse klassene er bildet 1:1, eller
+  // 19:10 med padding-none + vertical. Doblet .pkt-card gir samme spesifisitet
+  // som padding-none-reglene over, og vinner fordi den kommer sist.
+  &.pkt-card .pkt-card__image.pkt-card__image-aspect-auto {
+    aspect-ratio: auto;
+
+    img {
+      height: auto;
+    }
+  }
+
+  &.pkt-card .pkt-card__image.pkt-card__image-aspect-1-1 {
+    aspect-ratio: 1;
+  }
+
+  &.pkt-card .pkt-card__image.pkt-card__image-aspect-4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.pkt-card .pkt-card__image.pkt-card__image-aspect-3-2 {
+    aspect-ratio: 3 / 2;
+  }
+
+  &.pkt-card .pkt-card__image.pkt-card__image-aspect-16-9 {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.pkt-card .pkt-card__image.pkt-card__image-aspect-19-10 {
+    aspect-ratio: 19 / 10;
+  }
+
+  // IMAGE HEIGHT
+  // Låser bildehøyden i stedet for sideforholdet, og trappes opp med
+  // skjermbredden. Bildet beskjæres sentrert, så kortet får forutsigbar høyde
+  // uansett kildebilde.
+  &.pkt-card .pkt-card__image.pkt-card__image-restricted {
+    aspect-ratio: auto;
+
+    img {
+      width: 100%;
+      height: 12.5rem;
+      object-fit: cover;
+      object-position: center;
+    }
+
+    @include bp('tablet-up') {
+      img {
+        height: 14.375rem;
+      }
+    }
+
+    @include bp('tablet-big-up') {
+      img {
+        height: 18.125rem;
+      }
+    }
+  }
+
   // LINK
 
   .pkt-card__wrapper .pkt-card__link::before {

package/dist/scss/components/_consent.scss

@@ -0,0 +1,3 @@
+pkt-consent {
+  display: inline;
+}

package/dist/scss/components/_datepicker.scss

@@ -1,5 +1,10 @@
 @use '../abstracts/mixins/typography';
 
+pkt-date-tags,
+pkt-datepicker-popup {
+  display: block;
+}
+
 .pkt-datepicker,
 pkt-datepicker {
   display: block;

package/dist/scss/components/_footer.scss

@@ -12,6 +12,11 @@
 @use '../abstracts/mixins/container-queries' as *;
 @use '../abstracts/mixins/typography';
 
+pkt-footer,
+pkt-footer-simple {
+  display: block;
+}
+
 $-footer-content-max-width: 75rem;
 
 .pkt-footer,

package/dist/scss/components/_header-global.scss

@@ -8,6 +8,10 @@
 @use '../abstracts/mixins/' as *;
 @use 'header-shared' as shared;
 
+pkt-header-global {
+  display: block;
+}
+
 .pkt-header-global-spacer {
   height: map.get(variables.$spacing, 'size-104');
 

package/dist/scss/components/_header-menu.scss

@@ -7,6 +7,10 @@
 @use '../abstracts/mixins/container-queries' as *;
 @use '../abstracts/mixins/typography';
 
+pkt-header-menu {
+  display: block;
+}
+
 $pkt-header-menu-breakpoint: 48rem;
 
 @mixin pkt-header-menu-region-inner {

package/dist/scss/components/_header-service.scss

@@ -25,6 +25,10 @@
 @use '../abstracts/mixins/' as *;
 @use 'header-shared' as shared;
 
+pkt-header-service {
+  display: block;
+}
+
 .pkt-header-service-spacer {
   height: map.get(variables.$spacing, 'size-104');
 

package/dist/scss/components/_header-user-menu.scss

@@ -6,6 +6,10 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins/' as *;
 
+pkt-header-user-menu {
+  display: block;
+}
+
 // User Menu specific styles
 .pkt-header-service__user-menu {
   &::after {

package/dist/scss/components/_header.scss

@@ -6,6 +6,10 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins/' as *;
 
+pkt-header {
+  display: block;
+}
+
 .pkt-header {
   background-color: var(--pkt-color-background-default);
   border-bottom: 1px solid var(--pkt-color-border-subtle);

package/dist/scss/components/_heading.scss

@@ -12,6 +12,13 @@ pkt-heading {
   font-weight: 600;
   line-height: 1.2;
 
+  // Doblet klasse gir spesifisitet (0,2,0), som slår vertsdokumentets
+  // `.noe h1`–`h6` (0,1,1). Uten dette arver overskriften marger per
+  // nivå fra siden den står på, selv når den visuelle størrelsen er lik.
+  &.pkt-heading {
+    margin-block: 0;
+  }
+
   &--xlarge {
     @include typography.get-text('pkt-txt-40');
 

package/dist/scss/components/_index.scss

@@ -6,6 +6,7 @@
 @forward 'calendar';
 @forward 'card';
 @forward 'combobox';
+@forward 'consent';
 @forward 'datepicker';
 @forward 'fileupload';
 @forward 'footer';

package/dist/scss/components/_inputwrapper.scss

@@ -4,6 +4,10 @@
 @use '../abstracts/functions';
 @use '../abstracts/mixins/typography';
 
+pkt-helptext {
+  display: block;
+}
+
 pkt-input-wrapper {
   display: block;
 

package/dist/scss/components/_loader.scss

@@ -8,6 +8,14 @@
 @use '../abstracts/' as *;
 @use '../abstracts/mixins/typography';
 
+pkt-loader {
+  display: block;
+
+  &[inline] {
+    display: inline-block;
+  }
+}
+
 .pkt-loader {
   color: currentColor;
   width: fit-content;

package/dist/scss/components/_modal.scss

@@ -7,6 +7,10 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/' as *;
 
+pkt-modal {
+  display: contents;
+}
+
 $pkt-modal-gap: map.get(variables.$spacing, 'size-32');
 $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
 

package/dist/scss/components/_progressbar.scss

@@ -1,3 +1,7 @@
+pkt-progressbar {
+  display: block;
+}
+
 .pkt-progressbar {
   --pkt-progress-width: 0%;
   --pkt-progress-label-width: 5rem;

package/dist/scss/components/_searchinput.scss

@@ -3,6 +3,10 @@
 @use '../abstracts/functions';
 @use '../abstracts/mixins/typography';
 
+pkt-searchinput {
+  display: block;
+}
+
 .pkt-searchinput {
   position: relative;
 

package/dist/scss/elements/_button.scss

@@ -13,6 +13,14 @@
 @use '../abstracts/placeholders';
 @use '../abstracts/mixins/typography';
 
+pkt-button {
+  display: inline-block;
+
+  &[full-width] {
+    display: block;
+  }
+}
+
 $-module-name: 'pkt-btn';
 $-sizes: (
   'medium': (

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

@@ -9,6 +9,11 @@
 @use '../abstracts/functions';
 @use '../abstracts/mixins/typography';
 
+pkt-checkbox,
+pkt-radiobutton {
+  display: block;
+}
+
 $-module-name: 'pkt-input-check';
 
 .#{$-module-name} {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "18.3.2",
+  "version": "18.5.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": "8ad9db4f1ecb76423707a9441055ddb36ca914a8"
+  "gitHead": "dd8d7102f860aab26f29b63534788f27a8d52cf6"
 }