Version Packages (#2138)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.storybook/indexer.ts

@@ -10,6 +10,11 @@ module.exports = (indexers) => {
   const exampleIndexer = async (fileName: string, opts) => {
     let code = readFileSync(fileName, "utf-8").toString();
 
+    code = code
+      .split("\n")
+      .filter((line) => !line.includes("withDsExample"))
+      .join("\n");
+
     code = code.replace("export const args =", "const args =");
 
     code += `\nexport default { title: "Eksempler/${fileName

.storybook/main.cjs

@@ -1,5 +1,4 @@
 const storyIndexers = require("./indexer");
-
 const path = require("path");
 const { mergeConfig } = require("vite");
 
@@ -59,15 +58,11 @@ module.exports = {
   },
   async viteFinal(config) {
     return mergeConfig(config, {
-      define: { "process.env": {} },
+      define: {
+        "process.env": {},
+      },
       resolve: {
         alias: [
-          /*
-          // Example
-          {
-            find: "@components",
-            replacement: path.resolve(__dirname, "./src/components"),
-          }, */
           {
             find: "components",
             replacement: path.resolve(

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 4.7.4
+
+## 4.7.3
+
 ## 4.7.2
 
 ## 4.7.1

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 4.7.4
+
+## 4.7.3
+
 ## 4.7.2
 
 ## 4.7.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^4.7.2",
-    "@navikt/ds-tokens": "^4.7.2",
+    "@navikt/ds-css": "^4.7.4",
+    "@navikt/ds-tokens": "^4.7.4",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 4.7.4
+
+### Patch Changes
+
+- Updated dependencies [[`492cfc180`](https://github.com/navikt/aksel/commit/492cfc1801df4ab16306185345d5089e24a0d659)]:
+  - @navikt/ds-css@4.7.4
+
+## 4.7.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.7.3
+
 ## 4.7.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "4.7.2",
+    "@navikt/ds-css": "4.7.4",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 4.7.4
+
+### Patch Changes
+
+- Oppdatert bruk av REM i komponenter for forbedret utrykk ved font-scaling i browser ([#2126](https://github.com/navikt/aksel/pull/2126))
+
+## 4.7.3
+
 ## 4.7.2
 
 ### Patch Changes

@navikt/core/css/chips.css

@@ -25,11 +25,11 @@
   padding: 0 var(--a-spacing-3);
   text-decoration: none;
   border-radius: var(--a-border-radius-full);
-  min-height: 32px;
+  min-height: 2rem;
 }
 
 .navds-chips--small .navds-chips__chip {
-  min-height: 24px;
+  min-height: 1.5rem;
   padding: 0 var(--a-spacing-2);
 }
 

@navikt/core/css/copybutton.css

@@ -52,7 +52,7 @@
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
-  margin-left: -4px;
+  margin-left: -0.25rem;
 }
 
 .navds-copybutton__icon:only-child {
@@ -60,7 +60,7 @@
 }
 
 :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
-  margin: -2px;
+  margin: -0.125rem;
 }
 
 .navds-copybutton:focus-visible {

@navikt/core/css/date.css

@@ -223,7 +223,7 @@
 
 .navds-date__field-button {
   position: absolute;
-  right: 1px;
+  right: 0.0625rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--ac-date-input-button-text, var(--a-text-default));
@@ -238,7 +238,7 @@
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
-  height: calc(100% - 2px);
+  height: calc(100% - 0.125rem);
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
@@ -284,7 +284,6 @@
 }
 
 /* Readonly */
-
 .navds-date__field--readonly .navds-date__field-button {
   cursor: default;
 }

@navikt/core/css/expansioncard.css

@@ -66,7 +66,7 @@
  *************************/
 
 .navds-expansioncard__title--small {
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
 
 .navds-expansioncard__title--medium {

@navikt/core/css/form/combobox.css

@@ -11,7 +11,7 @@
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  border: 1px solid black;
+  border: 1px solid var(--a-border-default);
 }
 
 .navds-combobox__wrapper-inner > :first-child {
@@ -52,7 +52,7 @@
   letter-spacing: 0;
   line-height: var(--a-font-line-height-large);
   margin: 0;
-  padding-left: calc(0.5rem - 4px);
+  padding-left: 0.25rem;
 }
 
 .navds-combobox__input-wrapper {
@@ -190,8 +190,8 @@
   align-items: flex-start;
   padding: 0;
   box-shadow: var(--a-shadow-small);
-  border-radius: 4px;
-  gap: 4px 0;
+  border-radius: var(--a-border-radius-medium);
+  gap: var(--a-spacing-1) 0;
   background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
   color: var(--ac-combobox-list-text, var(--a-text-default));
 }

@navikt/core/css/form/form.css

@@ -9,7 +9,7 @@
 }
 
 .navds-form-field__description {
-  margin-top: -6px;
+  margin-top: -0.375rem;
   color: var(--ac-form-description, var(--a-text-subtle));
 }
 

@navikt/core/css/form/radio-checkbox.css

@@ -7,10 +7,10 @@
 .navds-checkbox__input,
 .navds-radio__input {
   position: absolute;
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   top: 0;
-  left: -12px;
+  left: -0.75rem;
   z-index: 1;
   opacity: 0;
   cursor: pointer;
@@ -51,15 +51,15 @@
 
 .navds-checkbox--small > .navds-checkbox__input,
 .navds-radio--small > .navds-radio__input {
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   top: 0;
-  left: -6px;
+  left: -0.375rem;
 }
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: 6px 0;
+  padding: 0.375rem 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -115,15 +115,15 @@
 
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-position: 6px center;
+  background-position: 0.375rem center;
   background-repeat: no-repeat;
-  background-size: 13px;
+  background-size: 0.8125rem;
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-position: 4px center;
+  background-position: 0.25rem center;
 }
 
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,

@navikt/core/css/form/search.css

@@ -104,8 +104,8 @@
 
 .navds-search__button-search {
   flex-shrink: 0;
-  min-width: 64px;
-  min-height: 32px;
+  min-width: 4rem;
+  min-height: 2rem;
   border-radius: 0;
   border-top-right-radius: var(--a-border-radius-medium);
   border-bottom-right-radius: var(--a-border-radius-medium);
@@ -116,7 +116,7 @@
 }
 
 .navds-form-field--small .navds-search__button-search {
-  min-width: 40px;
+  min-width: 2.5rem;
 }
 
 .navds-search__button-search.navds-button--secondary {

@navikt/core/css/form/select.css

@@ -6,7 +6,7 @@
   color: var(--ac-select-text, var(--a-text-default));
   width: 100%;
   box-sizing: border-box;
-  min-height: 48px;
+  min-height: 3rem;
   display: inline-block;
   position: relative;
   padding: 0.5rem;
@@ -45,7 +45,7 @@
 }
 
 .navds-form-field--small .navds-select__input {
-  min-height: 32px;
+  min-height: 2rem;
   padding: 0 2rem 0 0.25rem;
 }
 

@navikt/core/css/form/switch.css

@@ -1,6 +1,6 @@
 .navds-switch {
   position: relative;
-  min-height: 48px;
+  min-height: 3rem;
   width: fit-content;
 }
 
@@ -10,7 +10,7 @@
 
 .navds-switch--small {
   position: relative;
-  min-height: 32px;
+  min-height: 2rem;
 }
 
 /* Input */
@@ -18,14 +18,14 @@
   cursor: pointer;
   position: absolute;
   z-index: 1;
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   opacity: 0;
   top: 0;
 }
 
 .navds-switch--small > .navds-switch__input {
-  height: 32px;
+  height: 2rem;
   top: 0;
 }
 
@@ -47,11 +47,11 @@
 }
 
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
 }
 
 .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
 }
 
 .navds-switch--with-description,
@@ -70,8 +70,8 @@
 
 /* Track */
 .navds-switch__track {
-  width: 44px;
-  height: 24px;
+  width: 2.75rem;
+  height: 1.5rem;
   background-color: var(--ac-switch-bg, var(--a-surface-neutral));
   position: absolute;
   top: var(--a-spacing-3);
@@ -125,12 +125,12 @@
   background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
   border-radius: var(--a-border-radius-full);
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   position: absolute;
   transform: translateX(0);
-  left: 2px;
-  top: 2px;
+  left: var(--a-spacing-05);
+  top: var(--a-spacing-05);
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
@@ -138,17 +138,17 @@
 }
 
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(20px);
+  transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
 }
 
 @media (hover: hover) and (pointer: fine) {
   .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(2px);
+    transform: translateX(0.125rem);
   }
 
   .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(18px);
+    transform: translateX(1.125rem);
   }
 }
 
@@ -157,7 +157,7 @@
 }
 
 .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(20px);
+  transform: translateX(1.25rem);
 }
 
 /* Loader */
@@ -216,6 +216,6 @@
   }
 
   .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(20px);
+    transform: translateX(1.25rem);
   }
 }

@navikt/core/css/form/text-field.css

@@ -13,7 +13,7 @@
   background-color: var(--ac-textfield-bg, var(--a-surface-default));
   border-radius: var(--a-border-radius-medium);
   border: 1px solid var(--ac-textfield-border, var(--a-border-default));
-  min-height: 48px;
+  min-height: 3rem;
   width: 100%;
   color: var(--ac-textfield-text, var(--a-text-default));
 }
@@ -27,8 +27,8 @@
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 0.5rem;
-  min-height: 32px;
+  padding: 0 var(--a-spacing-2);
+  min-height: 2rem;
 }
 
 .navds-text-field__input:hover {

@navikt/core/css/form/textarea.css

@@ -51,7 +51,7 @@
 }
 
 .navds-form-field--small .navds-textarea__input {
-  padding: 6px;
+  padding: 0.375rem;
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -64,8 +64,8 @@
   font-style: italic;
   position: absolute;
   text-align: left;
-  left: 1px;
-  bottom: 1px;
+  left: 0.0625rem;
+  bottom: 0.0625rem;
   padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 

@navikt/core/css/internalheader.css

@@ -2,7 +2,7 @@
   display: flex;
   align-self: stretch;
   background: var(--ac-internalheader-bg, var(--a-surface-inverted));
-  min-height: var(--a-spacing-12);
+  min-height: 3rem;
 
   --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
 }

@navikt/core/css/list.css

@@ -34,7 +34,7 @@
 
 .navds-list .navds-list__item-marker--bullet {
   display: flex;
-  margin-top: 6px;
+  margin-top: 0.375rem;
   grid-column: 1 / 2;
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,11 +27,11 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^4.7.2",
+    "@navikt/ds-tokens": "^4.7.4",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",
-    "nodemon": "^2.0.12",
+    "nodemon": "^3.0.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/css/read-more.css

@@ -8,12 +8,12 @@
   gap: var(--a-spacing-05);
   color: var(--ac-read-more-text, var(--a-text-action));
   border-radius: var(--a-border-radius-small);
-  padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;
+  padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-05);
   text-align: start;
 }
 
 .navds-read-more--small .navds-read-more__button {
-  padding: 2px var(--a-spacing-1) 2px 2px;
+  padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-05);
 }
 
 .navds-read-more__button:hover {
@@ -39,14 +39,14 @@
 .navds-read-more__content {
   margin-top: var(--a-spacing-1);
   border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
-  margin-left: 13px;
-  padding-left: 13px;
+  margin-left: 0.8125rem;
+  padding-left: 0.8125rem;
   color: var(--a-text-default);
 }
 
 .navds-read-more--small .navds-read-more__content {
-  margin-left: 11px;
-  padding-left: 11px;
+  margin-left: 0.6875rem;
+  padding-left: 0.6875rem;
 }
 
 .navds-read-more__content--closed {

@navikt/core/css/stepper.css

@@ -113,7 +113,7 @@ button.navds-stepper__step {
 .navds-stepper__circle--success {
   border: none;
   background: none;
-  font-size: 28px;
+  font-size: 1.75rem;
   color: var(--a-text-on-action);
   background-color: var(--ac-stepper-text, var(--a-surface-action));
 }

@navikt/core/css/table.css

@@ -80,11 +80,11 @@
 }
 
 .navds-table .navds-checkbox .navds-checkbox__input {
-  top: -12px;
+  top: -0.75rem;
 }
 
 .navds-table .navds-checkbox--small .navds-checkbox__input {
-  top: -6px;
+  top: -0.375rem;
 }
 
 .navds-table .navds-checkbox .navds-checkbox__label {
@@ -168,12 +168,12 @@
 
 .navds-table__toggle-expand-cell {
   padding: 0;
-  width: 56px;
+  width: 3.5rem;
 }
 
 .navds-table--small .navds-table__toggle-expand-cell {
   padding: 0;
-  width: 36px;
+  width: 2.25rem;
 }
 
 .navds-table__toggle-expand-button {

@navikt/core/css/tabs.css

@@ -20,7 +20,7 @@
 
 .navds-tabs__scroll-button {
   padding: var(--a-spacing-3) var(--a-spacing-4);
-  width: 44px;
+  width: 2.75rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,11 +38,11 @@
 
 .navds-tabs--small .navds-tabs__scroll-button {
   padding: 0.375rem var(--a-spacing-4);
-  width: 32px;
+  width: 2rem;
 }
 
 .navds-tabs__tab {
-  min-height: 48px;
+  min-height: 3rem;
   padding: var(--a-spacing-3) var(--a-spacing-4);
   display: inline-flex;
   justify-content: center;
@@ -92,7 +92,7 @@
 }
 
 .navds-tabs__tab--small {
-  min-height: 32px;
+  min-height: 2rem;
   padding: 0.375rem var(--a-spacing-4);
 }
 

@navikt/core/css/tag.css

@@ -5,17 +5,17 @@
   align-items: center;
   justify-content: center;
   padding: var(--a-spacing-05) var(--a-spacing-2);
-  min-height: 32px;
+  min-height: 2rem;
   line-height: 1;
 }
 
 .navds-tag--small {
-  min-height: 24px;
+  min-height: 1.5rem;
   padding: 0 0.375rem;
 }
 
 .navds-tag--xsmall {
-  min-height: 20px;
+  min-height: 1.25rem;
   padding: 0 var(--a-spacing-1);
 }
 

@navikt/core/css/timeline.css

@@ -12,6 +12,7 @@
   height: 1rem;
   box-sizing: content-box;
   grid-column: 2;
+  margin-bottom: var(--a-spacing-1);
 }
 
 .navds-timeline__row-label {
@@ -181,7 +182,7 @@
     0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
   z-index: 2;
   border-radius: var(--a-border-radius-full);
-  padding: 3.5px;
+  padding: var(--a-spacing-1);
   position: relative;
 }
 
@@ -232,7 +233,7 @@
 .navds-timeline__pin-wrapper::before {
   content: "";
   top: var(--navdsc-timeline-pin-size);
-  height: calc(94% - var(--navdsc-timeline-pin-size));
+  height: calc(88% - var(--navdsc-timeline-pin-size));
   width: 1px;
   margin: 0 auto;
   background: var(--a-surface-inverted);

@navikt/core/css/toggle-group.css

@@ -8,7 +8,7 @@
   border-radius: var(--a-border-radius-medium);
   background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
-  padding: calc(var(--a-spacing-1) + 1px);
+  padding: calc(var(--a-spacing-1) + 0.0625rem);
   gap: var(--a-spacing-1);
   display: inline-grid;
   grid-auto-flow: column;
@@ -16,7 +16,7 @@
 }
 
 .navds-toggle-group--small {
-  padding: calc(var(--a-spacing-05) + 1px);
+  padding: calc(var(--a-spacing-05) + 0.0625rem);
 }
 
 .navds-toggle-group--neutral {
@@ -29,7 +29,7 @@
   align-items: center;
   justify-content: center;
   padding: var(--a-spacing-1) var(--a-spacing-3);
-  min-height: 38px;
+  min-height: 2.375rem;
   border: none;
   cursor: pointer;
   background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
@@ -124,7 +124,7 @@
 
 .navds-toggle-group--small > .navds-toggle-group__button {
   padding: var(--a-spacing-05) var(--a-spacing-3);
-  min-height: 26px;
+  min-height: 1.625rem;
   min-width: fit-content;
 }
 

@navikt/core/css/tooltip.css

@@ -25,8 +25,8 @@
 }
 
 .navds-tooltip__arrow {
-  height: 7px;
-  width: 7px;
+  height: 0.4375rem;
+  width: 0.4375rem;
   transform: rotate(45deg);
   z-index: -1;
   background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
@@ -45,8 +45,8 @@
   color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
   border-radius: var(--a-border-radius-small);
   padding: 0 var(--a-spacing-1);
-  min-width: 18px;
-  height: 18px;
+  min-width: 1.125rem;
+  height: 1.125rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-react
 
+## 4.7.4
+
+### Patch Changes
+
+- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.7.4
+
+## 4.7.3
+
+### Patch Changes
+
+- Chips: Removable Chips submitter ikke forms ved klikk lengre ([#2124](https://github.com/navikt/aksel/pull/2124))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.7.3
+
 ## 4.7.2
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.7.2",
+    "@navikt/aksel-icons": "^4.7.4",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/chips/Removable.tsx

@@ -1,7 +1,6 @@
 import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -22,26 +21,27 @@ export interface RemovableChipsProps
   onDelete?: () => void;
 }
 
-export const RemovableChips: OverridableComponent<
-  RemovableChipsProps,
-  HTMLButtonElement
-> = forwardRef(
+export const RemovableChips = forwardRef<
+  HTMLButtonElement,
+  RemovableChipsProps
+>(
   (
     {
       className,
       children,
       variant = "action",
-      as: Component = "button",
       removeLabel = "slett",
       onDelete,
+      type = "button",
       ...rest
     },
     ref
   ) => {
     return (
-      <Component
+      <button
         {...rest}
         ref={ref}
+        type={type}
         className={cl(
           "navds-chips__chip navds-chips__removable navds-chips--icon-right",
           className,
@@ -57,7 +57,7 @@ export const RemovableChips: OverridableComponent<
         <span className="navds-chips__removable-icon">
           <XMarkIcon aria-hidden />
         </span>
-      </Component>
+      </button>
     );
   }
 );

@navikt/core/react/src/dropdown/Menu/GroupedList/index.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../../util/OverridableComponent";
-import GroupedHeading, { GroupedHeadingProps } from "./Heading";
-import GroupedItem, { GroupedItemProps } from "./Item";
+import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
+import GroupedItem, { GroupedItemProps } from "./GroupedItem";
 
 export interface GroupedListProps
   extends React.HTMLAttributes<HTMLDListElement> {

@navikt/core/react/src/form/TextField.tsx

@@ -31,7 +31,7 @@ export interface TextFieldProps
    * Type of form control. Picking the correct type helps user fill inn their required information
    * @default "text"
    */
-  type?: "email" | "number" | "password" | "tel" | "text" | "url";
+  type?: "email" | "number" | "password" | "tel" | "text" | "url" | "time";
 }
 
 /**

@navikt/core/react/src/loader/Loader.tsx

@@ -5,7 +5,7 @@ import { useId } from "..";
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
    * Changes Loader width/height
-   * 64px | 40px | 32px | 24px | 20px | 16px
+   * 88px | 64px | 40px | 32px | 24px | 20px | 16px
    * @default "medium"
    */
   size?:

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 4.7.4
+
+## 4.7.3
+
 ## 4.7.2
 
 ## 4.7.1

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^4.7.2",
+    "@navikt/ds-tokens": "^4.7.4",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 4.7.4
+
+## 4.7.3
+
 ## 4.7.2
 
 ## 4.7.1

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -33,7 +33,7 @@
     "color": "4.2.3",
     "jest": "^29.0.0",
     "lodash": "^4.17.21",
-    "nodemon": "^2.0.12",
+    "nodemon": "^3.0.1",
     "style-dictionary": "^3.0.2",
     "ts-jest": "^29.0.0",
     "ts-node": "10.9.0",

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 4.7.4
+
+### @navikt/ds-css
+
+- Oppdatert bruk av REM i komponenter for forbedret utrykk ved font-scaling i browser ([#2126](https://github.com/navikt/aksel/pull/2126))
+
+### @navikt/ds-react
+
+- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
+
+## 4.7.3
+
+### @navikt/ds-react
+
+- Chips: Removable Chips submitter ikke forms ved klikk lengre ([#2124](https://github.com/navikt/aksel/pull/2124))
+
 ## 4.7.2
 
 ### @navikt/ds-css
@@ -84,6 +100,12 @@
 
 - Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
 
+### @navikt/ds-tailwind
+
+- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
 ### @navikt/ds-css
 
 - Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
@@ -92,12 +114,6 @@
 
 - Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
 
-### @navikt/ds-tailwind
-
-- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
-
-- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
-
 ## 4.3.0
 
 ### @navikt/ds-css
@@ -184,6 +200,10 @@
 
 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
 
+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
 ### @navikt/ds-css
 
 - Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
@@ -202,10 +222,6 @@
 
 - Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))
 
-### @navikt/ds-tailwind
-
-- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
 ## 4.0.0
 
 ### @navikt/aksel
@@ -734,6 +750,10 @@
 
 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
 
+### @navikt/ds-tailwind
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ### @navikt/ds-css
 
 - Fontlasting: Fonter lastes nå fra NAV-CDN
@@ -744,10 +764,6 @@
 
 - Fonter blir bruk i all typografi blir nå lastet fra CDN
 
-### @navikt/ds-tailwind
-
-- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
-
 ## 1.5.10
 
 ### @navikt/ds-react

aksel.nav.no/package.json

@@ -15,11 +15,11 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^4.7.2",
-    "@navikt/ds-css": "^4.7.2",
-    "@navikt/ds-react": "^4.7.2",
-    "@navikt/ds-tailwind": "^4.7.2",
-    "@navikt/ds-tokens": "^4.7.2"
+    "@navikt/aksel-icons": "^4.7.4",
+    "@navikt/ds-css": "^4.7.4",
+    "@navikt/ds-react": "^4.7.4",
+    "@navikt/ds-tailwind": "^4.7.4",
+    "@navikt/ds-tokens": "^4.7.4"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/layout/WithSidebar.tsx

@@ -75,7 +75,7 @@ export const WithSidebar = ({
     <>
       <Header />
       <div className="bg-bg-default">
-        <div className="mx-auto mb-24 mt-6 flex w-full max-w-screen-2xl gap-6">
+        <div className="mx-auto mb-24 flex w-full max-w-screen-2xl gap-6 pt-6">
           <Sidebar kategori={pageType.type} links={sidebar} />
           <div className="relative w-full">
             <main

aksel.nav.no/website/pages/eksempler/datepicker/anchor.tsx

@@ -1,5 +1,7 @@
 import { Button, DatePicker } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
+import format from "date-fns/format";
+import nbLocale from "date-fns/locale/nb";
 import { useState } from "react";
 
 const Example = () => {
@@ -20,7 +22,9 @@ const Example = () => {
       {days && (
         <div className="pt-4">
           {days.map((x) => (
-            <div key={x.toString()}>{x.toDateString()}</div>
+            <div key={x.toString()}>
+              {format(x, "dd.MM.yyyy", { locale: nbLocale })}
+            </div>
           ))}
         </div>
       )}

aksel.nav.no/website/pages/eksempler/datepicker/input-range.tsx

@@ -1,5 +1,7 @@
 import { DatePicker, useRangeDatepicker } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
+import format from "date-fns/format";
+import nbLocale from "date-fns/locale/nb";
 
 const Example = () => {
   const { datepickerProps, toInputProps, fromInputProps, selectedRange } =
@@ -18,8 +20,14 @@ const Example = () => {
       </DatePicker>
       {selectedRange && (
         <div className="pt-4">
-          <div>{selectedRange?.from && selectedRange.from.toDateString()}</div>
-          <div>{selectedRange?.to && selectedRange.to.toDateString()}</div>
+          <div>
+            {selectedRange?.from &&
+              format(selectedRange.from, "dd.MM.yyyy", { locale: nbLocale })}
+          </div>
+          <div>
+            {selectedRange?.to &&
+              format(selectedRange.to, "dd.MM.yyyy", { locale: nbLocale })}
+          </div>
         </div>
       )}
     </div>

aksel.nav.no/website/pages/eksempler/datepicker/input-single.tsx

@@ -1,5 +1,7 @@
 import { DatePicker, useDatepicker } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
+import format from "date-fns/format";
+import nbLocale from "date-fns/locale/nb";
 
 const Example = () => {
   const { datepickerProps, inputProps, selectedDay } = useDatepicker({
@@ -12,7 +14,9 @@ const Example = () => {
       <DatePicker {...datepickerProps}>
         <DatePicker.Input {...inputProps} label="Velg dato" />
       </DatePicker>
-      <div className="pt-4">{selectedDay && selectedDay.toDateString()}</div>
+      <div className="pt-4">
+        {selectedDay && format(selectedDay, "dd.MM.yyyy", { locale: nbLocale })}
+      </div>
     </div>
   );
 };

aksel.nav.no/website/pages/eksempler/datepicker/modal.tsx

@@ -7,6 +7,8 @@ import {
 } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 import { useEffect, useState } from "react";
+import format from "date-fns/format";
+import nbLocale from "date-fns/locale/nb";
 
 const Example = () => {
   const [open, setOpen] = useState(false);
@@ -40,7 +42,8 @@ const Example = () => {
               <DatePicker.Input {...inputProps} label="Velg dato" />
             </DatePicker>
             <div className="pt-4">
-              {selectedDay && selectedDay.toDateString()}
+              {selectedDay &&
+                format(selectedDay, "dd.MM.yyyy", { locale: nbLocale })}
             </div>
           </div>
         </Modal.Content>

aksel.nav.no/website/pages/eksempler/datepicker/two-digit-year.tsx

@@ -1,5 +1,7 @@
 import { DatePicker, useDatepicker } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
+import format from "date-fns/format";
+import nbLocale from "date-fns/locale/nb";
 
 const Example = () => {
   const { datepickerProps, inputProps, selectedDay } = useDatepicker({
@@ -13,7 +15,9 @@ const Example = () => {
       <DatePicker {...datepickerProps}>
         <DatePicker.Input {...inputProps} label="Velg dato" />
       </DatePicker>
-      <div className="pt-4">{selectedDay && selectedDay.toDateString()}</div>
+      <div className="pt-4">
+        {selectedDay && format(selectedDay, "dd.MM.yyyy", { locale: nbLocale })}
+      </div>
     </div>
   );
 };

aksel.nav.no/website/scripts/update-props.tsx

@@ -26,15 +26,18 @@ const propList = (
   name: string
 ) =>
   src.map((prop) => {
+    let dupe = false;
     if (ids.includes(`${prop?.displayName?.toLowerCase()}_${name}_ds_props`)) {
       console.error(
         `Found duplicate id: ${`${prop.displayName.toLowerCase()}_${name}_ds_props`}`
       );
+      dupe = true;
     }
-    ids.push(`${prop.displayName.toLowerCase()}_${name}_ds_props`);
+    const id = `${prop.displayName.toLowerCase()}_${name}_ds_props`;
+    ids.push(id);
 
     return {
-      _id: `${prop.displayName.toLowerCase()}_${name}_ds_props`,
+      _id: dupe ? `${id}_2` : id,
       _type: "ds_props",
       title: prop.displayName,
       displayname: prop.displayName,
@@ -60,13 +63,22 @@ const updateProps = async () => {
   // this is our transactional client, it won't push anything until we say .commit() later
   const transactionClient = noCdnClient(token).transaction();
 
-  propList(CoreDocs as any, "core").forEach((x) =>
-    transactionClient.createOrReplace(x)
-  );
+  const props = propList(CoreDocs as any, "core");
+
+  // Preserve existing props that are not in the new list to allow documenting deprecated props
+  /* const remoteProps = await noCdnClient(token).fetch(`*[_type == "ds_props"]`);
+
+  for (const prop of remoteProps) {
+    if (!props.find((x) => prop._id === x._id)) {
+      transactionClient.delete(prop._id);
+    }
+  } */
+
+  props.forEach((x) => transactionClient.createOrReplace(x));
 
   await transactionClient
     .commit()
-    .then(() => console.log(`Updated props`))
+    .then((e) => console.log(e))
     .catch((e) => console.error(e.message));
 };
 

examples/shadow-dom/package.json

@@ -10,16 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "4.7.2",
-    "@navikt/ds-react": "4.7.2",
+    "@navikt/ds-css": "4.7.4",
+    "@navikt/ds-react": "4.7.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "typescript": "^4.8.0",
-    "vite": "^3.1.0"
+    "vite": "^4.2.0"
   }
 }

package.json

@@ -210,22 +210,22 @@
     "url": "https://github.com/navikt/aksel.git"
   },
   "devDependencies": {
-    "@changesets/cli": "2.25.0",
-    "@storybook/addon-a11y": "7.0.4",
-    "@storybook/addon-actions": "7.0.4",
-    "@storybook/addon-essentials": "7.0.4",
-    "@storybook/addon-interactions": "7.0.4",
-    "@storybook/addon-storysource": "7.0.4",
-    "@storybook/addons": "7.0.4",
-    "@storybook/csf-tools": "7.0.4",
+    "@changesets/cli": "2.26.2",
+    "@storybook/addon-a11y": "7.2.0",
+    "@storybook/addon-actions": "7.2.0",
+    "@storybook/addon-essentials": "7.2.0",
+    "@storybook/addon-interactions": "7.2.0",
+    "@storybook/addon-storysource": "7.2.0",
+    "@storybook/addons": "7.2.0",
+    "@storybook/csf-tools": "7.2.0",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "7.0.4",
-    "@storybook/react-vite": "7.0.4",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "7.0.4",
+    "@storybook/react": "7.2.0",
+    "@storybook/react-vite": "7.2.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "7.2.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@typescript-eslint/parser": "^5.41.0",
-    "@whitespace/storybook-addon-html": "^5.1.4",
+    "@whitespace/storybook-addon-html": "^5.1.6",
     "chromatic": "6.5.4",
     "concurrently": "7.2.1",
     "cross-env": "^7.0.0",
@@ -244,14 +244,14 @@
     "react": "^18.0.0",
     "react-docgen-typescript": "2.2.2",
     "react-dom": "^18.0.0",
-    "storybook": "7.0.4",
+    "storybook": "7.2.0",
     "stylelint": "^14.8.5",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "^4.8.0",
-    "vite": "4.1.1",
+    "vite": "^4.2.0",
     "yarn": "^1.22.10"
   },
   "packageManager": "yarn@3.2.1"