Version Packages (#2206)

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 5.1.0
+
+## 5.0.3
+
 ## 5.0.2
 
 ## 5.0.1

@navikt/aksel-icons/README.md

@@ -63,4 +63,4 @@ declare module "*.svg" {
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 5.1.0
+
+## 5.0.3
+
 ## 5.0.2
 
 ## 5.0.1

@navikt/aksel-stylelint/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 5.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`5b78f7188`](https://github.com/navikt/aksel/commit/5b78f71884b65987a175bfdbdd332cc8406cba2d), [`54a43cf92`](https://github.com/navikt/aksel/commit/54a43cf924c63954da8c5abd901a0b8fb4498948)]:
+  - @navikt/ds-css@5.1.0
+
+## 5.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`8d934e093`](https://github.com/navikt/aksel/commit/8d934e0931caaa6f774a8f1b20fa34a19ece7218), [`8d934e093`](https://github.com/navikt/aksel/commit/8d934e0931caaa6f774a8f1b20fa34a19ece7218)]:
+  - @navikt/ds-css@5.0.3
+
 ## 5.0.2
 
 ### Patch Changes

@navikt/aksel/README.md

@@ -242,4 +242,4 @@ This codemod can only be ran once, since the size-scale will keep decreasing for
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "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": "5.0.2",
+    "@navikt/ds-css": "5.1.0",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-css
 
+## 5.1.0
+
+### Patch Changes
+
+- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
+
+- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
+
+## 5.0.3
+
+### Patch Changes
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))
+
 ## 5.0.2
 
 ## 5.0.1

@navikt/core/css/README.md

@@ -40,4 +40,4 @@ But you can import it in a .css-file
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

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

@@ -132,12 +132,12 @@
 
 .navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
   transform: translate(0.25rem, -10%);
-  height: 1.25rem;
 }
 
 /* Tailwind sets all svg to block */
 .navds-checkbox__icon > svg {
   display: inline;
+  vertical-align: initial;
 }
 
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {

@navikt/core/css/modal.css

@@ -4,7 +4,7 @@
 
 .navds-modal {
   background-color: var(--ac-modal-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-modal-border, var(--a-border-subtle));
+  border: none;
   border-radius: var(--a-border-radius-large);
   box-shadow: var(--a-shadow-xlarge);
   padding: 0;

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.0.2",
+    "@navikt/ds-tokens": "^5.1.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/table.css

@@ -139,7 +139,7 @@
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
   background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
-  color: var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle));
+  color: var(--ac-table-sort-button-sorted-text, var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle)));
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {

@navikt/core/css/tokens.json

@@ -196,7 +196,6 @@
   },
   "modal": {
     "--ac-modal-bg": "--a-surface-default",
-    "--ac-modal-border": "--a-border-subtle",
     "--ac-modal-backdrop": "--a-surface-backdrop",
     "--ac-modal-width-small": "450px",
     "--ac-modal-width-medium": "700px"

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @navikt/ds-react
 
+## 5.1.0
+
+### Minor Changes
+
+- :sparkles: Modal: mulighet for å rendre i portal ([#2209](https://github.com/navikt/aksel/pull/2209))
+
+### Patch Changes
+
+- :white_check_mark: Modal: use polyfill in JSDOM ([#2208](https://github.com/navikt/aksel/pull/2208))
+
+- Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.1.0
+
+## 5.0.3
+
+### Patch Changes
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.0.3
+
 ## 5.0.2
 
 ### Patch Changes

@navikt/core/react/README.md

@@ -33,4 +33,4 @@ function App() {
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "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": "^5.0.2",
+    "@navikt/aksel-icons": "^5.1.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/date/DateInput.tsx

@@ -107,7 +107,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...omit(rest, ["error", "errorId", "size"])}
           {...inputProps}
           autoComplete="off"
-          aria-controls={ariaId}
+          aria-controls={open ? ariaId : undefined}
           readOnly={readOnly}
           className={cl(
             "navds-date__field-input",

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

@@ -88,12 +88,7 @@ export const ConfirmationPanel = forwardRef<
           {label}
         </Checkbox>
       </div>
-      <div
-        className="navds-form-field__error"
-        id={errorId}
-        aria-relevant="additions removals"
-        aria-live="polite"
-      >
+      <div className="navds-form-field__error" id={errorId} role="alert">
         {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
       </div>
     </div>

@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
-import { ConfirmationPanel } from "../index";
 import { Meta } from "@storybook/react";
+import React, { useState } from "react";
 import { Link } from "../..";
+import { ConfirmationPanel } from "../index";
+
 export default {
   title: "ds-react/ConfirmationPanel",
   component: ConfirmationPanel,

@navikt/core/react/src/modal/Modal.test.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Button, Modal } from "..";
+import { BODY_CLASS } from "./ModalUtils";
+
+const Test = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Modal open={open}>
+      <Modal.Body>
+        <p>Foobar</p>
+        <Button onClick={() => setOpen(false)}>Close</Button>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+describe("Modal", () => {
+  test("should be visible", () => {
+    render(<Test />);
+    expect(screen.getByText("Foobar")).toBeVisible();
+  });
+
+  test("should be hidden after setting 'open' to false", async () => {
+    render(<Test />);
+    fireEvent.click(screen.getByText("Close"));
+    expect(screen.getByText("Foobar")).not.toBeVisible();
+  });
+
+  test("should toggle body class", async () => {
+    render(<Test />);
+    expect(document.body.classList).toContain(BODY_CLASS);
+
+    fireEvent.click(screen.getByText("Close"));
+    await waitFor(() =>
+      expect(document.body.classList).not.toContain(BODY_CLASS)
+    );
+  });
+
+  test("should toggle body class when using portal", async () => {
+    render(
+      <Modal portal open>
+        <Modal.Header />
+      </Modal>
+    );
+    expect(document.body.classList).toContain(BODY_CLASS);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() =>
+      expect(document.body.classList).not.toContain(BODY_CLASS)
+    );
+  });
+});

@navikt/core/react/src/modal/Modal.tsx

@@ -5,18 +5,17 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { createPortal } from "react-dom";
+import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
-import dialogPolyfill from "./dialog-polyfill";
-import { Detail, Heading, mergeRefs, useId } from "..";
+import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
+import { Detail, Heading, mergeRefs, useId, useProvider } from "..";
 import ModalBody from "./ModalBody";
 import ModalHeader from "./ModalHeader";
 import ModalFooter from "./ModalFooter";
 import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
 import { ModalContext } from "./ModalContext";
 
-const needPolyfill =
-  typeof window !== "undefined" && window.HTMLDialogElement === undefined;
-
 export interface ModalProps
   extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
@@ -65,6 +64,11 @@ export interface ModalProps
    * @default fit-content (up to 700px)
    * */
   width?: "medium" | "small" | number | `${number}${string}`;
+  /**
+   * Lets you render the modal into a different part of the DOM.
+   * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.
+   */
+  portal?: boolean;
   /**
    * User defined classname for modal
    */
@@ -141,6 +145,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onBeforeClose,
       onCancel,
       width,
+      portal,
       className,
       "aria-labelledby": ariaLabelledby,
       style,
@@ -151,35 +156,41 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const ariaLabelId = useId();
+    const rootElement = useProvider()?.rootElement;
+    const portalNode = useFloatingPortalNode({ root: rootElement });
 
     if (useContext(ModalContext)) {
       console.error("Modals should not be nested");
     }
 
     useEffect(() => {
-      if (needPolyfill && modalRef.current) {
+      // If using portal, modalRef.current will not be set before portalNode is set.
+      // If not using portal, modalRef.current is available first.
+      // We check both to avoid activating polyfill twice when not using portal.
+      if (needPolyfill && modalRef.current && portalNode) {
         dialogPolyfill.registerDialog(modalRef.current);
       }
-    }, [modalRef]);
+    }, [modalRef, portalNode]);
 
     useEffect(() => {
       // We need to have this in a useEffect so that the content renders before the modal is displayed,
       // and in case `open` is true initially.
-      if (modalRef.current && open !== undefined) {
+      // We need to check both modalRef.current and portalNode to make sure the polyfill has been activated.
+      if (modalRef.current && portalNode && open !== undefined) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
         } else if (!open && modalRef.current.open) {
           modalRef.current.close();
         }
       }
-    }, [modalRef, open]);
+    }, [modalRef, portalNode, open]);
 
-    useBodyScrollLock(modalRef, "navds-modal__document-body");
+    useBodyScrollLock(modalRef, portalNode);
 
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    return (
+    const component = (
       <dialog
         ref={mergedRef}
         className={cl("navds-modal", className, {
@@ -229,6 +240,12 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         </ModalContext.Provider>
       </dialog>
     );
+
+    if (portal) {
+      if (portalNode) return createPortal(component, portalNode);
+      return null;
+    }
+    return component;
   }
 ) as ModalComponent;
 

@navikt/core/react/src/modal/ModalUtils.ts

@@ -13,17 +13,19 @@ export function getCloseHandler(
   return () => modalRef.current?.close();
 }
 
+export const BODY_CLASS = "navds-modal__document-body";
+
 export function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement>,
-  bodyClass: string
+  portalNode: HTMLElement | null
 ) {
   React.useEffect(() => {
-    if (!modalRef.current) return;
-    if (modalRef.current.open) document.body.classList.add(bodyClass); // In case `open` is true initially
+    if (!modalRef.current || !portalNode) return; // We check both to avoid running this twice when not using portal
+    if (modalRef.current.open) document.body.classList.add(BODY_CLASS); // In case `open` is true initially
 
     const observer = new MutationObserver(() => {
-      if (modalRef.current?.open) document.body.classList.add(bodyClass);
-      else document.body.classList.remove(bodyClass);
+      if (modalRef.current?.open) document.body.classList.add(BODY_CLASS);
+      else document.body.classList.remove(BODY_CLASS);
     });
     observer.observe(modalRef.current, {
       attributes: true,
@@ -31,7 +33,7 @@ export function useBodyScrollLock(
     });
     return () => {
       observer.disconnect();
-      document.body.classList.remove(bodyClass); // In case modal is unmounted before it's closed
+      document.body.classList.remove(BODY_CLASS); // In case modal is unmounted before it's closed
     };
-  }, [modalRef, bodyClass]);
+  }, [modalRef, portalNode]);
 }

@navikt/core/react/src/modal/dialog-polyfill.ts

@@ -1,5 +1,10 @@
 // @ts-nocheck
 
+export const needPolyfill =
+  typeof window !== "undefined" &&
+  (window.HTMLDialogElement === undefined ||
+    navigator.userAgent.includes("jsdom"));
+
 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -44,35 +49,6 @@ function safeDispatchEvent(target, event) {
   return target.dispatchEvent(event);
 }
 
-/**
- * @param {Element} el to check for stacking context
- * @return {boolean} whether this el or its parents creates a stacking context
- */
-function createsStackingContext(el) {
-  while (el && el !== document.body) {
-    var s = window.getComputedStyle(el);
-    var invalid = function (k, ok) {
-      return !(s[k] === undefined || s[k] === ok);
-    };
-
-    if (
-      s.opacity < 1 ||
-      invalid("zIndex", "auto") ||
-      invalid("transform", "none") ||
-      invalid("mixBlendMode", "normal") ||
-      invalid("filter", "none") ||
-      invalid("perspective", "none") ||
-      s["isolation"] === "isolate" ||
-      s.position === "fixed" ||
-      s.webkitOverflowScrolling === "touch"
-    ) {
-      return true;
-    }
-    el = el.parentElement;
-  }
-  return false;
-}
-
 /**
  * Finds the nearest <dialog> from the passed element.
  *
@@ -476,14 +452,6 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
       );
     }
 
-    if (createsStackingContext(this.dialog_.parentElement)) {
-      console.warn(
-        "A dialog is being shown inside a stacking context. " +
-          "This may cause it to be unusable. For more information, see this link: " +
-          "https://github.com/GoogleChrome/dialog-polyfill/#stacking-context"
-      );
-    }
-
     this.setOpen(true);
     this.openAsModal_ = true;
 
@@ -602,7 +570,7 @@ dialogPolyfill.needsCentering = function (dialog) {
  * @param {!Element} element to force upgrade
  */
 dialogPolyfill.forceRegisterDialog = function (element) {
-  if (window.HTMLDialogElement || element.showModal) {
+  if (element.showModal) {
     console.warn(
       "This browser already supports <dialog>, the polyfill " +
         "may not work correctly",
@@ -847,7 +815,7 @@ dialogPolyfill.DialogManager.prototype.removeDialog = function (dpi) {
   this.updateStacking();
 };
 
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (needPolyfill) {
   dialogPolyfill.dm = new dialogPolyfill.DialogManager();
   dialogPolyfill.formSubmitter = null;
   dialogPolyfill.imagemapUseValue = null;
@@ -857,7 +825,7 @@ if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
  * Installs global handlers, such as click listers and native method overrides. These are needed
  * even if a no dialog is registered, as they deal with <form method="dialog">.
  */
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (needPolyfill) {
   /**
    * If HTMLFormElement translates method="DIALOG" into 'get', then replace the descriptor with
    * one that returns the correct value.

@navikt/core/react/src/modal/modal.stories.tsx

@@ -160,8 +160,8 @@ export const Small = () => (
   </Modal>
 );
 
-export const Medium = () => (
-  <Modal open width="medium" header={{ heading: "Simple header" }}>
+export const MediumWithPortal = () => (
+  <Modal open portal width="medium" header={{ heading: "Simple header" }}>
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 5.1.0
+
+## 5.0.3
+
 ## 5.0.2
 
 ## 5.0.1

@navikt/core/tailwind/README.md

@@ -26,4 +26,4 @@ module.exports = {
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "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": "^5.0.2",
+    "@navikt/ds-tokens": "^5.1.0",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-tokens
 
+## 5.1.0
+
+## 5.0.3
+
+### Patch Changes
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+- Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))
+
 ## 5.0.2
 
 ## 5.0.1

@navikt/core/tokens/README.md

@@ -33,4 +33,4 @@ backgroundcolor: var(--a-surface-default);
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/core/tokens/docs.json

@@ -390,7 +390,7 @@
   "semantic-icon-alt": [
     { "name": "--a-icon-alt-1", "value": "rgba(99, 70, 137, 1)" },
     { "name": "--a-icon-alt-2", "value": "rgba(127, 137, 0, 1)" },
-    { "name": "--a-icon-alt-3", "value": "rgba(51, 128, 165, 1)" }
+    { "name": "--a-icon-alt-3", "value": "rgba(0, 91, 130, 1)" }
   ],
 
   "semantic-data-surface": [

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/core/tokens/src/semantic-colors.json

@@ -316,7 +316,7 @@
         "value": "{a.limegreen.700.value}"
       },
       "alt3": {
-        "value": "{a.deepblue.400.value}"
+        "value": "{a.deepblue.500.value}"
       },
       "on": {
         "neutral": {

CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 5.1.0
+
+### @navikt/ds-react
+
+- :sparkles: Modal: mulighet for å rendre i portal ([#2209](https://github.com/navikt/aksel/pull/2209))
+
+<!---->
+
+- :white_check_mark: Modal: use polyfill in JSDOM ([#2208](https://github.com/navikt/aksel/pull/2208))
+
+- Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))
+
+### @navikt/ds-css
+
+- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
+
+- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
+
+## 5.0.3
+
+### @navikt/ds-react
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+### @navikt/ds-tokens
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+- Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+### @navikt/ds-css
+
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
+
+- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))
+
 ## 5.0.2
 
 ### @navikt/ds-react
@@ -14,6 +50,20 @@
 
 ## 5.0.0
 
+### @navikt/ds-react
+
+- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
+
+  - :sparkles: Støtte for header og footer
+  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
+  - :boom: Provider: `appElement` er fjernet
+
+<!---->
+
+- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
+
+- Table: Har lagt til ny size: 'large'. ([#2178](https://github.com/navikt/aksel/pull/2178))
+
 ### @navikt/ds-tokens
 
 - Gray: Gråfarger er nå mindre varme ([#2092](https://github.com/navikt/aksel/pull/2092))
@@ -33,44 +83,18 @@
 
 - Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
 
-### @navikt/ds-react
-
-- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
-
-  - :sparkles: Støtte for header og footer
-  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
-  - :boom: Provider: `appElement` er fjernet
-
-<!---->
-
-- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
-
-- Table: Har lagt til ny size: 'large'. ([#2178](https://github.com/navikt/aksel/pull/2178))
-
 ## 4.12.1
 
-### @navikt/ds-css
+### @navikt/ds-react
 
 - Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
 
-### @navikt/ds-react
+### @navikt/ds-css
 
 - Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
 
 ## 4.12.0
 
-### @navikt/ds-css
-
-- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
-
-<!---->
-
-- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
-
-- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
-
-- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
-
 ### @navikt/ds-react
 
 - Combobox: La til støtte for feilmeldinger i Combobox ([#2182](https://github.com/navikt/aksel/pull/2182))
@@ -91,6 +115,18 @@
 
 - Combobox: Lukker nå nedtrekksmeny hvis man legger til ny option i singleselect ([#2177](https://github.com/navikt/aksel/pull/2177))
 
+### @navikt/ds-css
+
+- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
+
+<!---->
+
+- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
+
+- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
+
+- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
+
 ## 4.11.2
 
 ### @navikt/ds-css
@@ -105,16 +141,6 @@
 
 ## 4.11.0
 
-### @navikt/ds-css
-
-- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
-
-<!---->
-
-- List: Fikset alignment av ikoner ([#2149](https://github.com/navikt/aksel/pull/2149))
-
-- Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))
-
 ### @navikt/ds-react
 
 - HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
@@ -125,6 +151,16 @@
 
 - Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
 
+### @navikt/ds-css
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+<!---->
+
+- List: Fikset alignment av ikoner ([#2149](https://github.com/navikt/aksel/pull/2149))
+
+- Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))
+
 ## 4.10.2
 
 ### @navikt/ds-css
@@ -133,19 +169,15 @@
 
 ## 4.10.0
 
-### @navikt/ds-css
-
-- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
-
 ### @navikt/ds-react
 
 - Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
 
-## 4.9.1
-
 ### @navikt/ds-css
 
-- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
+- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
+
+## 4.9.1
 
 ### @navikt/ds-react
 
@@ -153,36 +185,40 @@
 
 - Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
 
+### @navikt/ds-css
+
+- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
+
 ## 4.9.0
 
-### @navikt/ds-css
+### @navikt/ds-react
 
 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))
 
-### @navikt/ds-react
+### @navikt/ds-css
 
 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))
 
 ## 4.8.0
 
-### @navikt/ds-css
+### @navikt/ds-react
 
 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))
 
-### @navikt/ds-react
+### @navikt/ds-css
 
 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))
 
 ## 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))
 
+### @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))
+
 ## 4.7.3
 
 ### @navikt/ds-react
@@ -191,11 +227,11 @@
 
 ## 4.7.2
 
-### @navikt/ds-css
+### @navikt/ds-react
 
 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))
 
-### @navikt/ds-react
+### @navikt/ds-css
 
 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))
 
@@ -207,10 +243,6 @@
 
 ## 4.7.0
 
-### @navikt/ds-css
-
-- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
-
 ### @navikt/ds-react
 
 - Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
@@ -221,28 +253,36 @@
 
 - Combobox post-release tweaks ([#2112](https://github.com/navikt/aksel/pull/2112))
 
+### @navikt/ds-css
+
+- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
+
 ## 4.6.1
 
-### @navikt/ds-css
+### @navikt/ds-react
 
 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
 
-### @navikt/ds-react
+### @navikt/ds-css
 
 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
 
 ## 4.6.0
 
-### @navikt/ds-css
-
-- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
-
 ### @navikt/ds-react
 
 - Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
 
+### @navikt/ds-css
+
+- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
 ## 4.5.0
 
+### @navikt/ds-react
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
 ### @navikt/ds-css
 
 - - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
@@ -251,10 +291,6 @@
 
 - - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
 
-### @navikt/ds-react
-
-- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
-
 ## 4.4.2
 
 ### @navikt/ds-react
@@ -269,25 +305,29 @@
 
 ## 4.4.0
 
+### @navikt/ds-react
+
+- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
+
 ### @navikt/ds-tokens
 
 - Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
 
+### @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))
+
 ### @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))
+## 4.3.0
 
 ### @navikt/ds-react
 
-- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
-
-## 4.3.0
+- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
 
 ### @navikt/ds-css
 
@@ -297,20 +337,16 @@
 
 - ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
 
-### @navikt/ds-react
-
-- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
-
 ## 4.2.0
 
-### @navikt/ds-css
-
-- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
-
 ### @navikt/ds-react
 
 - Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
 
+### @navikt/ds-css
+
+- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
+
 ## 4.1.7
 
 ### @navikt/ds-react
@@ -327,16 +363,16 @@
 
 ## 4.1.5
 
+### @navikt/aksel-icons
+
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
+
 ### @navikt/ds-react
 
 - `OverridableComponent` fungerer nå med komponenter som allerede bruker 'as'-prop. ([PR](https://github.com/navikt/aksel/pull/2051))
 
 - Popover: `bubbleEscape`-prop tilbyr muligheten for escape-events til å sendes opp gjennom dom-treet. ([PR](https://github.com/navikt/aksel/pull/2052))
 
-### @navikt/aksel-icons
-
-- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
-
 ## 4.1.4
 
 ### @navikt/ds-css
@@ -367,22 +403,6 @@
 
 - Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
 
-### @navikt/ds-tokens
-
-- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
-- 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))
-
-- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
-
 ### @navikt/ds-react
 
 - Chips: `neutral` og `action`-varianter for Chips.Toggle. `checkmark`-prop for Chips.Toggle ([PR](https://github.com/navikt/aksel/pull/2035))
@@ -395,13 +415,29 @@
 
 - Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))
 
+### @navikt/ds-tokens
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @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))
+
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
 ## 4.0.0
 
-### @navikt/aksel
+### @navikt/ds-react
 
-- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
+- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
 
-- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
 
 ### @navikt/ds-css
 
@@ -413,11 +449,11 @@
 
 - Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)
 
-### @navikt/ds-react
+### @navikt/aksel
 
-- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
 
-- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
 
 ## 3.4.2
 
@@ -437,11 +473,11 @@
 
 - Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
 
-### @navikt/ds-css
+### @navikt/ds-react
 
 - Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
 
-### @navikt/ds-react
+### @navikt/ds-css
 
 - Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
 
@@ -465,11 +501,9 @@
 
 ## 3.2.3
 
-### @navikt/ds-css
+### @navikt/aksel-icons
 
-- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
-
-- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
 
 ### @navikt/ds-react
 
@@ -477,9 +511,11 @@
 
 - CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
 
-### @navikt/aksel-icons
+### @navikt/ds-css
 
-- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
+- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
 
 ## 3.2.2
 
@@ -501,6 +537,10 @@
 
 ## 3.1.0
 
+### @navikt/ds-react
+
+- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
 ### @navikt/ds-css
 
 - Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))
@@ -509,10 +549,6 @@
 
 - Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
 
-### @navikt/ds-react
-
-- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
-
 ## 3.0.1
 
 ### @navikt/ds-react
@@ -523,16 +559,16 @@
 
 ## 3.0.0
 
-### @navikt/ds-css
-
-- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
-
 ### @navikt/ds-react
 
 - Accordion: left-aligner chevron, `neutral`-variant, `size`-prop ([PR](https://github.com/navikt/aksel/pull/1964))
 
 - Bruker nå nå `@navikt/aksel-icons` for interne ikoner ([PR](https://github.com/navikt/aksel/pull/1964))
 
+### @navikt/ds-css
+
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
+
 ## 2.9.8
 
 ### @navikt/aksel-icons
@@ -627,14 +663,14 @@
 
 ## 2.8.7
 
-### @navikt/ds-css
-
-- Button: token for tertiary
-
 ### @navikt/ds-react
 
 - Fikset typografi-bruk for `Radio` og `Checkbox`.
 
+### @navikt/ds-css
+
+- Button: token for tertiary
+
 ## 2.8.6
 
 ### @navikt/ds-css
@@ -663,14 +699,14 @@
 
 ## 2.8.2
 
-### @navikt/ds-css
-
-- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))
-
 ### @navikt/ds-react
 
 - ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
 
+### @navikt/ds-css
+
+- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))
+
 ## 2.8.1
 
 ### @navikt/ds-react
@@ -749,14 +785,14 @@
 
 ## 2.4.2
 
-### @navikt/ds-css
-
-- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))
-
 ### @navikt/ds-react
 
 - List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
 
+### @navikt/ds-css
+
+- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))
+
 ## 2.4.1
 
 ### @navikt/ds-react
@@ -787,6 +823,12 @@
 
 ## 2.2.0
 
+### @navikt/ds-react
+
+- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
+
 ### @navikt/ds-tokens
 
 - Justeringer av semantiske fargetokens, statusfarger nå mer tydelig ([PR](https://github.com/navikt/aksel/pull/1787))
@@ -799,12 +841,6 @@
 
 - Button: `Neutral`-variant.
 
-### @navikt/ds-react
-
-- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
-- Button: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
-
 ## 2.1.7
 
 ### @navikt/ds-react
@@ -849,14 +885,14 @@
 
 ## 2.1.0
 
-### @navikt/ds-tokens
-
-- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
-
 ### @navikt/ds-react
 
 - Datepicker/Monthpicker: år med 2 siffer i input fungerer nå
 
+### @navikt/ds-tokens
+
+- Fikset feil danger-hover token ([PR](https://github.com/navikt/aksel/pull/1665))
+
 ## 2.0.18
 
 ### @navikt/ds-react
@@ -919,23 +955,23 @@
 
 ## 2.0.0
 
+### @navikt/ds-react
+
+- Fonter blir bruk i all typografi blir nå lastet fra CDN
+
 ### @navikt/ds-tokens
 
 - 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
 
 - Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.
 
-### @navikt/ds-react
+### @navikt/ds-tailwind
 
-- Fonter blir bruk i all typografi blir nå lastet fra CDN
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
 
 ## 1.5.10
 
@@ -981,16 +1017,16 @@
 
 ## 1.5.0
 
-### @navikt/ds-css
-
-- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
-
 ### @navikt/ds-react
 
 - Tag: `filles`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
 
 - Ny komponent Chips! ([PR](https://github.com/navikt/aksel/pull/1668))
 
+### @navikt/ds-css
+
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
 ## 1.4.4
 
 ### @navikt/ds-react
@@ -1017,10 +1053,6 @@
 
 ## 1.3.39
 
-### @navikt/ds-css
-
-- Fikset bruk av `:watch` for diverse parsere (less, parcel)
-
 ### @navikt/ds-react
 
 - useId-bug fikset ved bruk i både react 17 og 18
@@ -1043,6 +1075,10 @@
 
 - Stepper: `interactive` og `completed`-props for wizard-løsninger
 
+### @navikt/ds-css
+
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)
+
 ## 1.3.24
 
 ### @navikt/ds-css

LICENSE

@@ -1,8 +1,4 @@
-Font License
-
-SIL Open Font License (OFL)
-
-# The MIT License
+# MIT License
 
 Copyright 2023 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
 

README.md

@@ -64,7 +64,7 @@ Vi tar gjerne i mot PR-er! [CONTRIBUTING.md](https://github.com/navikt/aksel/blo
 
 ## Lisenser
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)
 
 ## Codeowners
 

aksel.nav.no/package.json

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

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -102,7 +102,7 @@ function SideLenker() {
           Hva er Aksel?
         </FooterLink>
         <FooterLink href="/side/personvernerklaering">
-          Personvernserklæring
+          Personvernerklæring
         </FooterLink>
         <FooterLink href="/side/tilgjengelighetserklaring-for-aksel">
           Tilgjengelighetserklæring

aksel.nav.no/website/components/website-modules/icon-page/Page.tsx

@@ -10,9 +10,9 @@ import Fuse from "fuse.js";
 import Head from "next/head";
 import Link from "next/link";
 import { useMemo, useRef, useState } from "react";
-import { categorizeIcons, getFillIcon } from "./utils";
 import { IconSidebar } from "./Sidebar";
 import { TitleLinks } from "./TitleLinks";
+import { categorizeIcons, getFillIcon } from "./utils";
 
 const fuseStroke = new Fuse(
   Object.values(meta).filter((x) => x.variant.toLowerCase() === "stroke"),
@@ -69,10 +69,14 @@ export const IconPage = ({ name }: { name: string }) => {
     );
   }, [toggle, query, strokeIcons, fillIcons]);
 
-  const subCategoryWordLength = Math.max(
-    ...categories.map((cat) =>
-      Math.max(...cat.sub_categories.map((sub) => sub.sub_category.length))
-    )
+  const subCategoryWordLength = useMemo(
+    () =>
+      Math.max(
+        ...categorizeIcons(strokeIcons).map((cat) =>
+          Math.max(...cat.sub_categories.map((sub) => sub.sub_category.length))
+        )
+      ),
+    [strokeIcons]
   );
 
   return (
@@ -255,6 +259,7 @@ export const IconPage = ({ name }: { name: string }) => {
                     open={!!name}
                     aria-label={`${name} ikon`}
                     className="rounded px-2 py-6 sm:px-6"
+                    onClose={() => null}
                   >
                     {name && <IconSidebar name={name} focusRef={focusRef} />}
                   </Modal>

aksel.nav.no/website/sanity/plugins/structure/index.tsx

@@ -65,24 +65,11 @@ export const structure = async (
 
   const editor = ids.find(({ user_id }) => user_id?.current === currentUser.id);
   const adminOrDev = currentUser.roles.find((x) =>
-    ["developer", "administrator", "editor"].includes(x.name)
+    ["developer", "administrator"].includes(x.name)
   );
   const developer = currentUser.roles.find((x) =>
     ["developer"].includes(x.name)
   );
-  /* const hasBloggerRole = currentUser.roles.find((x) => x.name === "blogger");
-  const hasGrunnleggendeRole = currentUser.roles.find(
-    (x: Role) => x.name === "grunnleggende"
-  );
-  const hasKomponenterRole = currentUser.roles.find(
-    (x: Role) => x.name === "komponenter"
-  );
-  const hasPrinsipperRole = currentUser.roles.find(
-    (x: Role) => x.name === "prinsipper"
-  );
-  const hasGodPraksisForfatterRole = currentUser.roles.find(
-    (x: Role) => x.name === "god-praksis-forfatter"
-  ); */
 
   const feedback = await getClient({ apiVersion: "2021-06-07" }).fetch(
     `*[_type == "aksel_feedback" && $id in doc_ref->contributors[]->user_id.current]{_id, behandlet}`,
@@ -429,7 +416,7 @@ export const defaultDocumentNode = (S, { schemaType }) => {
         .options({
           url: (doc) => resolveProductionUrl(doc),
         })
-        .title("Forhåndsvinsing"),
+        .title("Forhåndsvisning"),
       S.view
         .component(FeedbackView)
         .icon(CommentIcon)

aksel.nav.no/website/sanity/sanity.config.tsx

@@ -60,12 +60,13 @@ function defaultConfig() {
       },
     },
     document: {
-      newDocumentOptions: (prev, { currentUser }) =>
-        currentUser.roles.find((x) =>
-          ["developer", "administrator", "editor"].includes(x.name)
+      newDocumentOptions: (prev, { currentUser }) => {
+        return currentUser.roles.find((x) =>
+          ["developer", "administrator"].includes(x.name)
         )
-          ? [...getTemplates(currentUser.roles), ...prev]
-          : getTemplates(currentUser.roles),
+          ? [...getTemplates(prev), ...prev]
+          : getTemplates();
+      },
     },
     plugins: [
       deskTool({

aksel.nav.no/website/sanity/util.tsx

@@ -3,7 +3,6 @@ import { BodyLong, Heading, Link } from "@navikt/ds-react";
 import { KBD } from "@sanity/ui";
 import { InlineCode } from "components/website-modules/InlineCode";
 import NextLink from "next/link";
-import { Role } from "sanity";
 
 export const toPlainText = (blocks) => {
   if (!blocks || blocks.length === 0) {
@@ -21,7 +20,7 @@ export const toPlainText = (blocks) => {
     .join("\n\n");
 };
 
-export const getTemplates = (roles: Role[]) => {
+export const getTemplates = (restTemplates: any[] = []) => {
   const templates = {
     profil: [
       {
@@ -78,17 +77,10 @@ export const getTemplates = (roles: Role[]) => {
       },
     ],
   };
-  return Object.values(templates).flat();
-  /* return [
-    ...roles
-      .map((role) => {
-        if (templates[role.name.replaceAll("-", "_")]) {
-          return templates[role.name.replaceAll("-", "_")];
-        }
-        return [];
-      })
-      .flat(),
-  ]; */
+
+  return Object.values(templates)
+    .flat()
+    .filter((x) => !restTemplates.find((y) => y.templateId === x.templateId));
 };
 
 export const serializers = {

examples/shadow-dom/main.tsx

@@ -18,7 +18,7 @@ class CustomComponent extends HTMLElement {
     this.attachShadow({ mode: "closed" }).appendChild(rootElement);
 
     ReactDOM.createRoot(appElement).render(
-      <Provider rootElement={rootElement} appElement={appElement}>
+      <Provider rootElement={rootElement}>
         <style>{styles}</style>
         <Button>Click me!</Button>
         <CheckboxGroup legend="Legend" defaultValue={["tekst2"]}>
@@ -41,7 +41,7 @@ const ModalWrapper = () => {
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+      <Modal portal open={isOpen} onClose={() => setIsOpen(false)}>
         <Modal.Body>modal content</Modal.Body>
       </Modal>
     </>

examples/shadow-dom/open.tsx

@@ -11,7 +11,7 @@ class CustomComponent extends HTMLElement {
     this.attachShadow({ mode: "open" }).appendChild(rootElement);
 
     ReactDOM.createRoot(appElement).render(
-      <Provider rootElement={rootElement} appElement={appElement}>
+      <Provider rootElement={rootElement}>
         <style>{styles}</style>
         <DateWrapper />
       </Provider>

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "5.0.2",
-    "@navikt/ds-react": "5.0.2",
+    "@navikt/ds-css": "5.1.0",
+    "@navikt/ds-react": "5.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

fonts/LICENSE

@@ -0,0 +1,3 @@
+# Font License
+
+SIL Open Font License (OFL)

yarn.lock

@@ -3351,7 +3351,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.0.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.0.3, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3378,8 +3378,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.0.1
-    "@navikt/ds-tokens": ^5.0.1
+    "@navikt/ds-css": ^5.0.3
+    "@navikt/ds-tokens": ^5.0.3
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3396,7 +3396,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.0.1
+    "@navikt/ds-css": 5.0.3
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3420,11 +3420,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.0.1, @navikt/ds-css@^5.0.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.0.3, @navikt/ds-css@^5.0.3, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^5.0.1
+    "@navikt/ds-tokens": ^5.0.3
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3437,12 +3437,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@5.0.1, @navikt/ds-react@^5.0.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@5.0.3, @navikt/ds-react@^5.0.3, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^5.0.1
+    "@navikt/aksel-icons": ^5.0.3
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3476,11 +3476,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.0.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.0.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^5.0.1
+    "@navikt/ds-tokens": ^5.0.3
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3491,7 +3491,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.0.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.0.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8033,11 +8033,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.0.1
-    "@navikt/ds-css": ^5.0.1
-    "@navikt/ds-react": ^5.0.1
-    "@navikt/ds-tailwind": ^5.0.1
-    "@navikt/ds-tokens": ^5.0.1
+    "@navikt/aksel-icons": ^5.0.3
+    "@navikt/ds-css": ^5.0.3
+    "@navikt/ds-react": ^5.0.3
+    "@navikt/ds-tailwind": ^5.0.3
+    "@navikt/ds-tokens": ^5.0.3
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -22026,8 +22026,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 5.0.1
-    "@navikt/ds-react": 5.0.1
+    "@navikt/ds-css": 5.0.3
+    "@navikt/ds-react": 5.0.3
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^3.1.0