@oslokommune/punkt-css 17.0.4 → 17.0.6

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

@@ -84,7 +84,7 @@
   &__label {
     @include get-text('pkt-txt-14-medium');
     color: var(--pkt-color-text-placeholder);
-    margin-bottom: map.get(variables.$spacing, 'size-8');
+    margin-block-end: map.get(variables.$spacing, 'size-8');
   }
 
   &__name {
@@ -96,7 +96,7 @@
   }
 
   &__action {
-    margin-top: map.get(variables.$spacing, 'size-16');
+    margin-block-start: map.get(variables.$spacing, 'size-16');
   }
 
   &__button {
@@ -120,7 +120,7 @@
     }
 
     .pkt-link__icon {
-      margin-right: map.get(variables.$spacing, 'size-8');
+      margin-inline-end: map.get(variables.$spacing, 'size-8');
       align-self: baseline;
     }
   }

package/dist/scss/components/_header.scss

@@ -67,7 +67,7 @@
     }
 
     &-service {
-      padding-top: 0.3rem;
+      padding-block-start: 0.3rem;
       display: none;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -80,7 +80,7 @@
       }
 
       @include bp('laptop-up') {
-        padding-top: 0.6rem;
+        padding-block-start: 0.6rem;
         @include get-text('pkt-txt-24-light');
       }
     }
@@ -104,7 +104,7 @@
       gap: map.get(variables.$spacing, 'size-16');
 
       &-service {
-        padding-top: 0.28rem;
+        padding-block-start: 0.28rem;
         @include get-text('pkt-txt-18-light');
       }
 
@@ -137,7 +137,7 @@
 
     &-row {
       list-style: none;
-      padding-left: 0;
+      padding-inline-start: 0;
       margin: 0;
       display: flex;
       align-items: center;
@@ -153,10 +153,10 @@
     z-index: 2;
     position: absolute;
     margin: 0;
-    margin-top: map.get(variables.$spacing, 'size-12');
+    margin-block-start: map.get(variables.$spacing, 'size-12');
     right: 0;
     left: 0;
-    padding-left: 0;
+    padding-inline-start: 0;
     list-style: none;
     visibility: hidden;
     max-height: calc(100vh - 4.5rem);
@@ -165,7 +165,7 @@
     color: var(--pkt-color-text-body-dark);
 
     @include bp('tablet-up') {
-      margin-top: map.get(variables.$spacing, 'size-16');
+      margin-block-start: map.get(variables.$spacing, 'size-16');
       left: auto;
       right: 0;
       min-width: 23rem;
@@ -177,8 +177,7 @@
       background-color: var(--pkt-color-surface-subtle-white);
 
       &.footer {
-        padding-top: map.get(variables.$spacing, 'size-16');
-        padding-bottom: map.get(variables.$spacing, 'size-16');
+        padding-block: map.get(variables.$spacing, 'size-16');
       }
 
       &:nth-child(odd) {

package/dist/scss/components/_heading.scss

@@ -88,8 +88,7 @@ pkt-heading {
   }
 
   &--noSpacing {
-    margin-bottom: 0;
-    margin-top: 0;
+    margin-block: 0;
   }
 
   &--start {

package/dist/scss/components/_linkcard.scss

@@ -69,7 +69,7 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
         width: 1.5rem;
         background-size: 1.5rem 1.5rem;
         background-position: center;
-        margin-left: 0.5rem;
+        margin-inline-start: 0.5rem;
         flex: 0 0 auto;
         align-self: flex-start;
       }
@@ -78,17 +78,17 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
 
   > .pkt-icon.pkt-link__icon,
   pkt-icon.pkt-link__icon {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   &__text {
     grid-column: 2;
     p:first-of-type {
-      margin-top: 0;
+      margin-block-start: 0;
     }
 
     p:last-of-type {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 

package/dist/scss/components/_listbox.scss

@@ -60,7 +60,7 @@ pkt-listbox {
     }
 
     &-description {
-      padding-top: 0.25rem;
+      padding-block-start: 0.25rem;
       grid-area: description;
     }
 
@@ -76,14 +76,14 @@ pkt-listbox {
       padding: 0.75rem 0.5rem 0.75rem 0.75rem;
       column-gap: 0.5rem;
       &:focus {
-        padding-left: 10px;
+        padding-inline-start: 10px;
       }
     }
 
     &--selected {
-      padding-left: 0.25rem;
+      padding-inline-start: 0.25rem;
       &:focus {
-        padding-left: 2px;
+        padding-inline-start: 2px;
       }
     }
 
@@ -98,13 +98,13 @@ pkt-listbox {
   }
 
   .pkt-listbox__option {
-    margin-bottom: 0.125rem;
+    margin-block-end: 0.125rem;
     overflow-wrap: break-word;
     hyphens: auto;
     cursor: pointer;
 
     &:first-child:not(.pkt-listbox__search, .pkt-listbox__banners) {
-      margin-top: 0.125rem;
+      margin-block-start: 0.125rem;
     }
 
     &:hover:not(.pkt-listbox__search) {
@@ -184,7 +184,7 @@ pkt-listbox {
       cursor: default;
       display: flex;
       align-items: center;
-      padding-right: 0.25rem;
+      padding-inline-end: 0.25rem;
 
       .pkt-icon {
         width: 1.25rem;

package/dist/scss/components/_loader.scss

@@ -61,7 +61,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 8em;
+    margin-block-start: 8em;
     font-size: 0.4rem;
     width: 25em;
     height: 5em;

package/dist/scss/components/_messagebox.scss

@@ -70,10 +70,10 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
     @include get-text('pkt-txt-18-light');
 
     p {
-      margin-bottom: map.get(variables.$spacing, 'size-16');
+      margin-block-end: map.get(variables.$spacing, 'size-16');
 
       &:last-of-type {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
   }

package/dist/scss/components/_modal.scss

@@ -75,7 +75,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
     &--right {
       left: auto;
       right: 0;
-      margin-right: 0;
+      margin-inline-end: 0;
       translate: 100% 0;
       @starting-style {
         &[open] {
@@ -86,7 +86,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
     &--left {
       left: 0;
       right: auto;
-      margin-left: 0;
+      margin-inline-start: 0;
       translate: -100% 0;
       @starting-style {
         &[open] {
@@ -125,8 +125,8 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
   }
 
   .pkt-modal__container {
-    padding-top: $pkt-modal-gap;
-    margin-top: -1px;
+    padding-block-start: $pkt-modal-gap;
+    margin-block-start: -1px;
     background: var(--pkt-color-background-default);
     display: flex;
     flex-direction: column;
@@ -218,7 +218,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-40');
-    padding-top: 0;
+    padding-block-start: 0;
     position: relative;
     color: var(--pkt-color-text-body-default);
     background:
@@ -255,7 +255,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
 }
 
 .pkt-modal__btn-wrapper {
-  padding-top: map.get(variables.$spacing, 'size-24');
+  padding-block-start: map.get(variables.$spacing, 'size-24');
   display: flex;
   justify-content: flex-start;
   gap: map.get(variables.$spacing, 'size-16');
@@ -350,7 +350,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
 
 .pkt-modal.pkt-modal--noHeadingText {
   .pkt-modal__container {
-    padding-top: 1rem;
+    padding-block-start: 1rem;
   }
 }
 

package/dist/scss/components/_preview.scss

@@ -64,7 +64,7 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      margin-bottom: 1rem;
+      margin-block-end: 1rem;
     }
   }
   &__options {
@@ -89,13 +89,13 @@
   .hide-code-button {
     position: absolute;
     top: 100%;
-    margin-top: -1.5rem;
+    margin-block-start: -1.5rem;
     left: 0;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    padding-bottom: 1rem;
+    padding-block-end: 1rem;
     z-index: 2;
   }
   &__code {
@@ -128,7 +128,7 @@
     pre {
       max-height: 30rem;
       overflow: auto;
-      margin-top: 0 !important;
+      margin-block-start: 0 !important;
       background-color: transparent !important;
       font-size: 1rem;
       padding: 2rem 0;
@@ -168,7 +168,7 @@
   }
   &__add-object {
     text-align: right;
-    margin-top: 0.5rem;
+    margin-block-start: 0.5rem;
   }
   &__remove-object {
     position: absolute;
@@ -177,7 +177,7 @@
   }
   &__specs {
     pre {
-      margin-top: 0 !important;
+      margin-block-start: 0 !important;
     }
   }
 }

package/dist/scss/components/_progressbar.scss

@@ -8,7 +8,7 @@
   &__title {
     display: block;
     margin: 0;
-    margin-bottom: 8px;
+    margin-block-end: 8px;
     text-align: left;
     font-weight: 500;
     font-size: 0.875rem;
@@ -43,7 +43,7 @@
   }
 
   &__status {
-    margin-top: 8px;
+    margin-block-start: 8px;
     position: relative;
     white-space: nowrap;
     font-weight: 400;
@@ -57,7 +57,7 @@
 
   &__status-placement {
     &--following {
-      margin-left: max(
+      margin-inline-start: max(
         0%,
         min(
           calc(100% - var(--pkt-progress-label-width)),

package/dist/scss/components/_searchinput.scss

@@ -80,7 +80,7 @@
 
   &--local .pkt-input__container--small .pkt-input,
   &--local .pkt-input__container--xsmall .pkt-input {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 
   &--local &__button {
@@ -88,7 +88,7 @@
       border-color: var(--pkt-color-input-border-disabled);
     }
     & svg {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
     --pkt-color-button-border-hover: var(--pkt-color-input-border-active);
   }

package/dist/scss/components/_stepper.scss

@@ -39,7 +39,7 @@
 
     &__content {
       font-weight: map.get(variables.$font-weight, 'light');
-      padding-bottom: map.get(variables.$spacing, 'size-24');
+      padding-block-end: map.get(variables.$spacing, 'size-24');
       width: 100%;
     }
 
@@ -67,7 +67,7 @@
     &__nav-wrapper {
       display: flex;
       gap: 20px;
-      margin-top: map.get(variables.$spacing, 'size-16');
+      margin-block-start: map.get(variables.$spacing, 'size-16');
     }
   }
 }
@@ -91,11 +91,11 @@
         background-color: var(--pkt-color-surface-subtle-pale-blue);
       }
       .pkt-step__content {
-        padding-top: 0;
+        padding-block-start: 0;
       }
 
       .pkt-step__wrapper {
-        margin-bottom: map.get(variables.$spacing, 'size-24');
+        margin-block-end: map.get(variables.$spacing, 'size-24');
       }
     }
 

package/dist/scss/components/_tabs.scss

@@ -106,7 +106,7 @@ pkt-tab-item {
 
   &--with-separator {
     .pkt-tabs__list {
-      padding-right: 0.25rem;
+      padding-inline-end: 0.25rem;
       align-items: center;
     }
 

package/dist/scss/components/_tag.scss

@@ -88,13 +88,13 @@ pkt-tag > .pkt-tag {
   &__icon {
     width: 16px;
     height: 16px;
-    margin-right: map.get(variables.$spacing, 'size-8');
+    margin-inline-end: map.get(variables.$spacing, 'size-8');
   }
 
   &__close-btn {
     width: 16px;
     height: 16px;
-    margin-left: map.get(variables.$spacing, 'size-8');
+    margin-inline-start: map.get(variables.$spacing, 'size-8');
   }
 
   // Modifiers

package/dist/scss/components/_timepicker.scss

@@ -56,8 +56,7 @@ pkt-timepicker {
       border: 0;
       height: auto;
       min-height: 0;
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-block: 0;
       flex: 0 0 auto;
     }
 
@@ -99,10 +98,10 @@ pkt-timepicker {
         }
       }
       &.pkt-timepicker__button--prev {
-        margin-right: 0.25rem;
+        margin-inline-end: 0.25rem;
       }
       &.pkt-timepicker__button--next {
-        margin-left: 0.25rem;
+        margin-inline-start: 0.25rem;
       }
     }
 
@@ -152,7 +151,7 @@ pkt-timepicker {
 
   // Stepper variant: no left padding — the prev button takes that space
   &--stepper .pkt-input__container {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   &--fullwidth {
@@ -166,7 +165,7 @@ pkt-timepicker {
   &--fullwidth:not(.pkt-timepicker--stepper) {
     .pkt-input__container {
       .pkt-input-icon {
-        margin-left: auto;
+        margin-inline-start: auto;
       }
     }
   }
@@ -175,11 +174,11 @@ pkt-timepicker {
   &--fullwidth.pkt-timepicker--stepper {
     .pkt-input__container {
       .pkt-timepicker__button--prev + .pkt-timepicker__input {
-        margin-left: auto;
+        margin-inline-start: auto;
       }
 
       .pkt-timepicker__separator + .pkt-timepicker__input {
-        margin-right: auto;
+        margin-inline-end: auto;
       }
     }
   }
@@ -234,7 +233,7 @@ pkt-timepicker {
     top: 100%;
     left: 0;
     z-index: 2;
-    margin-top: 0.5rem;
+    margin-block-start: 0.5rem;
     display: flex;
     padding: 0;
     background: var(--pkt-color-background-default);

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

@@ -21,17 +21,17 @@ $-module-name: 'pkt-input-check';
 
     &-label {
       color: var(--pkt-color-text-body-default);
-      padding-left: 0.5rem;
+      padding-inline-start: 0.5rem;
       @include typography.get-text('pkt-txt-16-light');
 
       &--left {
-        padding-left: 0;
-        padding-right: 0.5rem;
+        padding-inline-start: 0;
+        padding-inline-end: 0.5rem;
       }
     }
 
     &-helptext {
-      padding-top: 0.5rem;
+      padding-block-start: 0.5rem;
       max-width: 21.875rem;
       color: var(--pkt-color-text-body-default);
       @include typography.get-text('pkt-txt-14-light');

package/dist/scss/elements/_form.scss

@@ -24,7 +24,7 @@
  */
 .pkt-form {
   &-group {
-    margin-bottom: map.get(variables.$spacing, 'size-24');
+    margin-block-end: map.get(variables.$spacing, 'size-24');
 
     &:focus-within {
       color: var(--pkt-color-brand-warm-blue-1000);

package/dist/scss/elements/_list.scss

@@ -45,15 +45,15 @@
   padding: 0;
 
   li {
-    padding-right: map.get(variables.$spacing, 'size-16');
+    padding-inline-end: map.get(variables.$spacing, 'size-16');
   }
 
   li+li {
-    padding-left: map.get(variables.$spacing, 'size-16');
+    padding-inline-start: map.get(variables.$spacing, 'size-16');
   }
 
   li:last-child {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 
   &.bordered {

package/dist/scss/elements/_section.scss

@@ -89,9 +89,9 @@
 }
 
 [class*='ok-section-'] > [class^='ok-title-'] {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .pkt-section--margin-top {
-  margin-top: 2.5rem;
+  margin-block-start: 2.5rem;
 }

package/dist/scss/elements/_table.scss

@@ -114,7 +114,7 @@ $-spacing-size-16: map.get(variables.$spacing, 'size-16');
       .pkt-table__data-cell,
       td {
         &::before {
-          padding-top: 1rem;
+          padding-block-start: 1rem;
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "17.0.4",
+  "version": "17.0.6",
   "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": "13e41d75e4930d5903d126e4e6f592e15369076a"
+  "gitHead": "f4da9988f5b752f93a42c1e5ba435bb133af2a86"
 }