@oslokommune/punkt-css 17.0.6 → 17.0.8

package/dist/scss/base/_colors-tokens.scss

@@ -0,0 +1,106 @@
+/* 
+ * Colors
+ * Brand
+ * Light mode
+ * Dark mode
+ */
+
+@use '../abstracts/variables';
+
+:root {
+  /**
+   * @tokens Colors
+   * @presenter Color
+   */
+  // Brand
+  @each $name, $color in variables.$pkt-colors {
+    --pkt-color-#{$name}: #{$color};
+  }
+
+  // Semantic
+  @each $name, $color in variables.$pkt-semantic-colors {
+    --pkt-color-#{$name}: #{$color};
+  }
+
+  // Deprecated colors
+  @each $name, $color in variables.$colors {
+    --#{$name}: #{$color};
+  }
+
+  // Dark mode
+  &[data-mode='dark'],
+  [data-mode='dark'] {
+    // Background
+    --pkt-color-background-card: var(--pkt-color-grays-gray-700);
+    --pkt-color-background-default: var(--pkt-color-grays-gray-1000);
+    --pkt-color-background-subtle: var(--pkt-color-grays-gray-1000);
+    --pkt-color-background-transparent: var(--pkt-color-brand-neutrals-transparent);
+
+    // Borders
+    --pkt-color-border-default: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-border-beige: var(--pkt-color-brand-dark-beige-1000);
+    --pkt-color-border-blue: var(--pkt-color-brand-blue-1000);
+    --pkt-color-border-green: var(--pkt-color-brand-green-1000);
+    --pkt-color-border-light-beige: var(--pkt-color-brand-light-beige-1000);
+    --pkt-color-border-red: var(--pkt-color-brand-red-1000);
+    --pkt-color-border-subtle: var(--pkt-color-brand-dark-blue-700);
+    --pkt-color-border-yellow: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-border-states-active: var(--pkt-color-brand-blue-500);
+    --pkt-color-border-states-disabled: var(--pkt-color-grays-gray-500);
+    --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
+    --pkt-color-border-states-hover: var(--pkt-color-brand-blue-500);
+    
+    // Surface
+    --pkt-color-surface-default-faded-green: var(--pkt-color-brand-light-green-400);
+    --pkt-color-surface-default-faded-red: var(--pkt-color-brand-red-400);
+    --pkt-color-surface-default-gray: var(--pkt-color-brand-neutrals-100);
+    --pkt-color-surface-default-light-beige: var(--pkt-color-brand-light-beige-1000);
+    --pkt-color-surface-default-light-blue: var(--pkt-color-brand-blue-300);
+    --pkt-color-surface-default-light-green: var(--pkt-color-brand-green-400);
+    --pkt-color-surface-default-red: var(--pkt-color-brand-red-600);
+    --pkt-color-surface-default-yellow: var(--pkt-color-brand-yellow-500);
+    --pkt-color-surface-strong-beige: var(--pkt-color-brand-dark-beige-1000);
+    --pkt-color-surface-strong-blue: var(--pkt-color-brand-blue-1000);
+    --pkt-color-surface-strong-dark-blue: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-surface-strong-dark-green: var(--pkt-color-brand-dark-green-1000);
+    --pkt-color-surface-strong-gray: var(--pkt-color-brand-neutrals-200);
+    --pkt-color-surface-strong-green: var(--pkt-color-brand-green-1000);
+    --pkt-color-surface-strong-light-green: var(--pkt-color-brand-light-green-1000);
+    --pkt-color-surface-strong-red: var(--pkt-color-brand-red-1000);
+    --pkt-color-surface-strong-yellow: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-surface-subtle-light-blue: var(--pkt-color-brand-blue-200);
+    --pkt-color-surface-subtle-light-red: var(--pkt-color-brand-red-100);
+    --pkt-color-surface-subtle-pale-blue: var(--pkt-color-brand-blue-100);
+    --pkt-color-surface-subtle-white: var(--pkt-color-brand-neutrals-white);
+
+    // Text
+    --pkt-color-text-body-dark: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-text-body-default: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-text-body-light: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-text-placeholder: var(--pkt-color-grays-gray-300);
+    --pkt-color-text-action-disabled: var(--pkt-color-grays-gray-200);
+    --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
+    --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
+    --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
+
+    // Input (shared)
+    --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
+    --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
+    --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+    --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
+    --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+    --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
+    --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+    --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+    --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
+
+    // Input - Checkbox/Radio specific
+    --pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
+    --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
+  }
+}

package/dist/scss/base/_colors-utilities.scss

@@ -0,0 +1,43 @@
+// Colors
+// Hjelpeklasser
+
+@use '../abstracts/variables';
+
+@each $name, $color in variables.$pkt-colors {
+  .pkt-color-bg-#{$name} {
+    background-color: $color !important;
+  }
+
+  .pkt-color-txt-#{$name} {
+    color: $color !important;
+  }
+
+  .pkt-color-border-#{$name} {
+    border-color: $color !important;
+  }
+}
+
+@each $name, $color in variables.$pkt-semantic-colors {
+  .pkt-color-bg-#{$name} {
+    background-color: var(--pkt-color-#{$name}) !important;
+  }
+
+  .pkt-color-txt-#{$name} {
+    color: var(--pkt-color-#{$name}) !important;
+  }
+
+  .pkt-color-border-#{$name} {
+    border-color: var(--pkt-color-#{$name}) !important;
+  }
+}
+
+// Deprecated
+@each $name, $color in variables.$colors {
+  .bg-#{$name} {
+    background-color: $color !important;
+  }
+
+  .txt-#{$name} {
+    color: $color !important;
+  }
+}

package/dist/scss/base/_colors.scss

@@ -1,144 +1,2 @@
-/* 
- * Colors
- * Brand
- * Light mode
- * Dark mode
- */
-
-@use '../abstracts/variables';
-
-:root {
-  /**
-   * @tokens Colors
-   * @presenter Color
-   */
-  // Brand
-  @each $name, $color in variables.$pkt-colors {
-    --pkt-color-#{$name}: #{$color};
-  }
-
-  // Semantic
-  @each $name, $color in variables.$pkt-semantic-colors {
-    --pkt-color-#{$name}: #{$color};
-  }
-
-  // Deprecated colors
-  @each $name, $color in variables.$colors {
-    --#{$name}: #{$color};
-  }
-
-  // Dark mode
-  &[data-mode='dark'],
-  [data-mode='dark'] {
-    // Background
-    --pkt-color-background-card: var(--pkt-color-grays-gray-700);
-    --pkt-color-background-default: var(--pkt-color-grays-gray-1000);
-    --pkt-color-background-subtle: var(--pkt-color-grays-gray-1000);
-    --pkt-color-background-transparent: var(--pkt-color-brand-neutrals-transparent);
-
-    // Borders
-    --pkt-color-border-default: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-border-beige: var(--pkt-color-brand-dark-beige-1000);
-    --pkt-color-border-blue: var(--pkt-color-brand-blue-1000);
-    --pkt-color-border-green: var(--pkt-color-brand-green-1000);
-    --pkt-color-border-light-beige: var(--pkt-color-brand-light-beige-1000);
-    --pkt-color-border-red: var(--pkt-color-brand-red-1000);
-    --pkt-color-border-subtle: var(--pkt-color-brand-dark-blue-700);
-    --pkt-color-border-yellow: var(--pkt-color-brand-yellow-1000);
-    --pkt-color-border-states-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-border-states-disabled: var(--pkt-color-grays-gray-500);
-    --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
-    --pkt-color-border-states-hover: var(--pkt-color-brand-blue-500);
-    // Surface
-    --pkt-color-surface-default-faded-green: var(--pkt-color-brand-light-green-400);
-    --pkt-color-surface-default-faded-red: var(--pkt-color-brand-red-400);
-    --pkt-color-surface-default-gray: var(--pkt-color-brand-neutrals-100);
-    --pkt-color-surface-default-light-beige: var(--pkt-color-brand-light-beige-1000);
-    --pkt-color-surface-default-light-blue: var(--pkt-color-brand-blue-300);
-    --pkt-color-surface-default-light-green: var(--pkt-color-brand-green-400);
-    --pkt-color-surface-default-red: var(--pkt-color-brand-red-600);
-    --pkt-color-surface-default-yellow: var(--pkt-color-brand-yellow-500);
-    --pkt-color-surface-strong-beige: var(--pkt-color-brand-dark-beige-1000);
-    --pkt-color-surface-strong-blue: var(--pkt-color-brand-blue-1000);
-    --pkt-color-surface-strong-dark-blue: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-surface-strong-dark-green: var(--pkt-color-brand-dark-green-1000);
-    --pkt-color-surface-strong-gray: var(--pkt-color-brand-neutrals-200);
-    --pkt-color-surface-strong-green: var(--pkt-color-brand-green-1000);
-    --pkt-color-surface-strong-light-green: var(--pkt-color-brand-light-green-1000);
-    --pkt-color-surface-strong-red: var(--pkt-color-brand-red-1000);
-    --pkt-color-surface-strong-yellow: var(--pkt-color-brand-yellow-1000);
-    --pkt-color-surface-subtle-light-blue: var(--pkt-color-brand-blue-200);
-    --pkt-color-surface-subtle-light-red: var(--pkt-color-brand-red-100);
-    --pkt-color-surface-subtle-pale-blue: var(--pkt-color-brand-blue-100);
-    --pkt-color-surface-subtle-white: var(--pkt-color-brand-neutrals-white);
-
-    // Text
-    --pkt-color-text-body-dark: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-text-body-default: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-text-body-light: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-text-placeholder: var(--pkt-color-grays-gray-300);
-    --pkt-color-text-action-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
-    --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
-
-    // Input (shared)
-    --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
-    --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
-    --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
-
-    // Input - Checkbox/Radio specific
-    --pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
-  }
-}
-
-@each $name, $color in variables.$pkt-colors {
-  .pkt-color-bg-#{$name} {
-    background-color: $color !important;
-  }
-
-  .pkt-color-txt-#{$name} {
-    color: $color !important;
-  }
-
-  .pkt-color-border-#{$name} {
-    border-color: $color !important;
-  }
-}
-
-@each $name, $color in variables.$pkt-semantic-colors {
-  .pkt-color-bg-#{$name} {
-    background-color: var(--pkt-color-#{$name}) !important;
-  }
-
-  .pkt-color-txt-#{$name} {
-    color: var(--pkt-color-#{$name}) !important;
-  }
-
-  .pkt-color-border-#{$name} {
-    border-color: var(--pkt-color-#{$name}) !important;
-  }
-}
-
-// Deprecated
-@each $name, $color in variables.$colors {
-  .bg-#{$name} {
-    background-color: $color !important;
-  }
-
-  .txt-#{$name} {
-    color: $color !important;
-  }
-}
+@forward 'colors-tokens';
+@forward 'colors-utilities';

package/dist/scss/base/_index.scss

@@ -1,10 +1,17 @@
+// tokens → reset → typograhy → grid → utilities → a11y.
+// Utilities ligger sist med vilje, så de vinner på spesifisitet når !important fjernes senere
 @forward 'oslo-sans';
-@forward 'colors';
+@forward 'colors-tokens';
+
 @forward 'defaults';
-@forward 'spacing';
+@forward 'typography';
+
 @forward 'containers';
 @forward 'grid';
-@forward 'typography';
 @forward 'layouts';
+
+@forward 'colors-utilities';
+@forward 'spacing';
 @forward 'visibility';
+
 @forward 'accessibility';

package/dist/scss/components/_index.scss

@@ -24,7 +24,6 @@
 @forward 'loader';
 @forward 'modal';
 @forward 'messagebox';
-@forward 'preview';
 @forward 'progressbar';
 @forward 'searchinput';
 @forward 'skiplink';
@@ -33,6 +32,5 @@
 @forward 'tag';
 @forward 'tag';
 @forward 'teaserlist';
-@forward 'textinput';
 @forward 'textarea';
 @forward 'timepicker';

package/dist/scss/components/_tag.scss

@@ -29,8 +29,22 @@ pkt-tag > .pkt-tag {
   display: flex;
 }
 
+button.pkt-tag {
+  appearance: none;
+  border-radius: 0;
+  cursor: pointer;
+  font-family: inherit;
+  justify-content: center;
+  text-align: left;
+  text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.3em;
+  user-select: none;
+}
+
 .pkt-tag {
   width: fit-content;
+  vertical-align: middle;
   background: var(--pkt-color-surface-default-light-blue);
   padding: 0 map.get(variables.$spacing, 'size-8');
   display: inline-flex;
@@ -51,6 +65,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:hover,
+  &:is(button):hover,
   &.pkt-tag--hover {
     background-color: var(--pkt-color-surface-strong-blue);
     color: var(--pkt-color-tag-text-hover);
@@ -63,6 +78,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:focus,
+  &:is(button):focus,
   &.pkt-tag--focus {
     background-color: var(--pkt-color-surface-strong-blue);
     border-color: var(--pkt-color-text-action-active);
@@ -75,6 +91,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:active,
+  &:is(button):active,
   &.pkt-tag--active,
   &.pkt-tag--active:hover {
     background-color: var(--pkt-color-surface-strong-blue);
@@ -103,6 +120,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-strong-light-green);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-hover);
@@ -113,6 +131,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-focus);
@@ -123,6 +142,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-active);
@@ -137,6 +157,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-yellow);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-hover);
@@ -147,6 +168,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-focus);
@@ -157,6 +179,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-active);
@@ -171,6 +194,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-red);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-hover);
@@ -181,6 +205,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-focus);
@@ -191,6 +216,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-active);
@@ -205,6 +231,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-light-beige);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-hover);
@@ -215,6 +242,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-focus);
@@ -225,6 +253,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-active);
@@ -240,6 +269,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-gray);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-hover);
@@ -250,6 +280,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-active);
@@ -260,6 +291,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-active);
@@ -274,6 +306,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-subtle-light-blue);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-hover);
@@ -284,6 +317,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-focus);
@@ -294,6 +328,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-active);
@@ -310,7 +345,9 @@ pkt-tag > .pkt-tag {
     --fg-color: var(--pkt-color-brand-neutrals-200);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-brand-warm-blue-1000) !important;
       color: var(--pkt-color-brand-neutrals-200) !important;

package/dist/scss/elements/_index.scss

@@ -6,5 +6,4 @@
 @forward 'input';
 @forward 'list';
 @forward 'section';
-@forward 'select';
 @forward 'table';

package/dist/scss/pkt-grid.scss

@@ -0,0 +1,6 @@
+@charset "utf-8";
+
+// Grid, celler og containere. Krever pkt-tokens.
+@forward 'base/containers';
+@forward 'base/grid';
+@forward 'base/layouts';

package/dist/scss/pkt-tokens.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+// Fargevariabler, dark mode og @font-face
+@forward 'base/oslo-sans';
+@forward 'base/colors-tokens';

package/dist/scss/pkt-utilities.scss

@@ -0,0 +1,6 @@
+@charset "utf-8";
+
+// Hjelpeklasser for spacing, farger og visibility. Krever pkt-tokens.
+@forward 'base/colors-utilities';
+@forward 'base/spacing';
+@forward 'base/visibility';

package/dist/scss/pkt.layer.scss

@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@use 'sass:meta';
+
+// meta.load-css, ikke @use, fordi @use ikke kan stå inne i @layer.
+@layer punkt {
+  @include meta.load-css('pkt');
+}

package/package.json

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