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

package/dist/scss/base/_defaults.scss

@@ -39,3 +39,8 @@ body {
   text-rendering: optimizeSpeed;
   scroll-behavior: smooth;
 }
+
+// Slot-omslag i komponentene: skal ikke lage en boks av seg selv.
+.pkt-contents {
+  display: contents;
+}

package/dist/scss/base/_index.scss

@@ -5,6 +5,7 @@
 
 @forward 'defaults';
 @forward 'typography';
+@forward 'link';
 
 @forward 'containers';
 @forward 'grid';

package/dist/scss/base/_link.scss

@@ -0,0 +1,136 @@
+/*
+ * Link
+ */
+
+@use '../abstracts/variables';
+
+a,
+.pkt-link-button {
+  // Order of pseudoclasses is important for specificity:
+  // link, visited, hover, focus, active
+  // but we don't use visited, so we can skip :link
+
+  color: var(--pkt-color-text-action-normal);
+  text-decoration: underline;
+  word-wrap: break-word;
+  cursor: pointer;
+
+  span {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  // visited
+  &:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
+    color: inherit;
+  }
+
+  // hover
+  &:hover,
+  &.pkt-link--hover {
+    color: var(--pkt-color-text-action-active);
+    text-decoration: underline;
+    svg {
+      --fg-color: currentColor;
+    }
+  }
+
+  // focus
+  &:focus-visible,
+  &.pkt-link--focus {
+    box-shadow:
+      0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
+      0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
+    outline: none;
+    color: var(--pkt-color-text-action-active);
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0.125rem solid var(--pkt-color-text-action-active);
+    color: var(--pkt-color-text-action-active);
+  }
+
+  // active
+  &:active,
+  &.pkt-link--active {
+    color: var(--pkt-color-text-action-active);
+  }
+}
+
+.pkt-link {
+  display: inline;
+  text-align: left;
+  align-items: baseline;
+}
+
+.pkt-link {
+  &__icon {
+    --fg-color: currentColor;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+    margin-inline: 0.25rem;
+    align-self: center;
+  }
+
+  &--icon-left,
+  &--icon-right {
+    display: inline-flex;
+    text-decoration: none;
+    align-items: baseline;
+  }
+
+  &--icon-left {
+    flex-direction: row;
+  }
+
+  &--icon-right {
+    flex-direction: row-reverse;
+  }
+
+  &--external::after {
+    display: inline-block;
+    content: ' ';
+    --svg: url(#{variables.$icon-path}/new-window-small.svg);
+    background-image: var(--svg);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    width: 1.125rem;
+    height: 1.125rem;
+    vertical-align: middle;
+    align-self: center;
+  }
+
+  &--external:hover::after {
+    // #1f42aa
+    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
+      contrast(90%);
+  }
+}
+
+button.pkt-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+  font-weight: inherit;
+}
+
+@at-root [data-mode='dark'] {
+  .pkt-link {
+    &--external::after {
+      // white
+      filter: brightness(0) saturate(100%) invert(100%);
+    }
+
+    &--external:hover::after,
+    &:hover:not(.pkt-btn) pkt-icon,
+    &:hover:not(.pkt-btn) .pkt-icon {
+      // #b3f5ff
+      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
+        contrast(105%);
+    }
+  }
+}

package/dist/scss/base/_typography.scss

@@ -36,137 +36,6 @@ strong {
   font-weight: map.get(variables.$font-weight, 'medium');
 }
 
-a,
-.pkt-link-button {
-  // Order of pseudoclasses is important for specificity:
-  // link, visited, hover, focus, active
-  // but we don't use visited, so we can skip :link
-
-  color: var(--pkt-color-text-action-normal);
-  text-decoration: underline;
-  word-wrap: break-word;
-  cursor: pointer;
-
-  span {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  // visited
-  &:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
-    color: inherit;
-  }
-
-  // hover
-  &:hover,
-  &.pkt-link--hover {
-    color: var(--pkt-color-text-action-active);
-    text-decoration: underline;
-    svg {
-      --fg-color: currentColor;
-    }
-  }
-
-  // focus
-  &:focus-visible,
-  &.pkt-link--focus {
-    box-shadow:
-      0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
-      0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
-    outline: none;
-    color: var(--pkt-color-text-action-active);
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0.125rem solid var(--pkt-color-text-action-active);
-    color: var(--pkt-color-text-action-active);
-  }
-
-  // active
-  &:active,
-  &.pkt-link--active {
-    color: var(--pkt-color-text-action-active);
-  }
-}
-
-.pkt-link {
-  display: inline;
-  text-align: left;
-  align-items: baseline;
-}
-
-.pkt-link {
-  &__icon {
-    --fg-color: currentColor;
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-    margin-inline: 0.25rem;
-    align-self: center;
-  }
-
-  &--icon-left,
-  &--icon-right {
-    display: inline-flex;
-    text-decoration: none;
-    align-items: baseline;
-  }
-
-  &--icon-left {
-    flex-direction: row;
-  }
-
-  &--icon-right {
-    flex-direction: row-reverse;
-  }
-
-  &--external::after {
-    display: inline-block;
-    content: ' ';
-    --svg: url(#{variables.$icon-path}/new-window-small.svg);
-    background-image: var(--svg);
-    background-repeat: no-repeat;
-    background-size: 18px 18px;
-    width: 1.125rem;
-    height: 1.125rem;
-    vertical-align: middle;
-    align-self: center;
-  }
-
-  &--external:hover::after {
-    // #1f42aa
-    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
-      contrast(90%);
-  }
-}
-
-button.pkt-link {
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: inherit;
-  cursor: pointer;
-  font-weight: inherit;
-}
-
-@at-root [data-mode='dark'] {
-  .pkt-link {
-    &--external::after {
-      // white
-      filter: brightness(0) saturate(100%) invert(100%);
-    }
-
-    &--external:hover::after,
-    &:hover:not(.pkt-btn) pkt-icon,
-    &:hover:not(.pkt-btn) .pkt-icon {
-      // #b3f5ff
-      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
-        contrast(105%);
-    }
-  }
-}
-
 /*
  * origo typography
  * prefix pkt
@@ -213,11 +82,3 @@ button.pkt-link {
 .pkt-truncate-text {
   @include typography.truncate-text();
 }
-
-/*
- * Display contents and disregard layout
- */
-.pkt-display-contents,
-.pkt-contents {
-  display: contents;
-}

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%;
   }
@@ -228,56 +231,55 @@ pkt-combobox,
   .pkt-listbox__open {
     margin-block-start: $-box-separator;
   }
-}
-
-.pkt-inputwrapper:not([data-navtype='pointer']) .pkt-combobox__input:focus-within {
-  outline: 4px solid var(--pkt-color-border-states-focus);
-}
+  &.pkt-inputwrapper:not([data-navtype='pointer']) .pkt-combobox__input:focus-within {
+    outline: 4px solid var(--pkt-color-border-states-focus);
+  }
 
-// Dropdown scale follows input wrapper size (small / xsmall combobox fields)
-.pkt-inputwrapper--small,
-.pkt-inputwrapper--xsmall {
-  .pkt-listbox {
-    .pkt-listbox__option:not(.pkt-listbox__search) {
-      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
-      @include typography.get-text('pkt-txt-16-light');
-    }
+  // Dropdown scale follows input wrapper size (small / xsmall combobox fields)
+  &.pkt-inputwrapper--small,
+  &.pkt-inputwrapper--xsmall {
+    .pkt-listbox {
+      .pkt-listbox__option:not(.pkt-listbox__search) {
+        padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
+        @include typography.get-text('pkt-txt-16-light');
+      }
 
-    .pkt-listbox__empty,
-    .pkt-listbox__banner {
-      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
-      @include typography.get-text('pkt-txt-16-light');
-    }
+      .pkt-listbox__empty,
+      .pkt-listbox__banner {
+        padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
+        @include typography.get-text('pkt-txt-16-light');
+      }
 
-    .pkt-listbox__search input {
-      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-12');
-      @include typography.get-text('pkt-txt-16-light');
+      .pkt-listbox__search input {
+        padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-12');
+        @include typography.get-text('pkt-txt-16-light');
+      }
     }
   }
-}
 
-.pkt-inputwrapper--xsmall {
-  .pkt-listbox {
-    .pkt-listbox__option:not(.pkt-listbox__search) {
-      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
-      @include typography.get-text('pkt-txt-14-light');
-    }
+  &.pkt-inputwrapper--xsmall {
+    .pkt-listbox {
+      .pkt-listbox__option:not(.pkt-listbox__search) {
+        padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
+        @include typography.get-text('pkt-txt-14-light');
+      }
 
-    .pkt-listbox__empty,
-    .pkt-listbox__banner {
-      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
-      @include typography.get-text('pkt-txt-14-light');
-    }
+      .pkt-listbox__empty,
+      .pkt-listbox__banner {
+        padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
+        @include typography.get-text('pkt-txt-14-light');
+      }
 
-    .pkt-listbox__banner-icon,
-    .pkt-listbox__search-icon .pkt-icon {
-      width: 1.125rem;
-      height: 1.125rem;
-    }
+      .pkt-listbox__banner-icon,
+      .pkt-listbox__search-icon .pkt-icon {
+        width: 1.125rem;
+        height: 1.125rem;
+      }
 
-    .pkt-listbox__search input {
-      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-8');
-      @include typography.get-text('pkt-txt-14-light');
+      .pkt-listbox__search input {
+        padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-8');
+        @include typography.get-text('pkt-txt-14-light');
+      }
     }
   }
 }

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/_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 {