Version Packages (#2002 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Timeline viser popover på hover (#1995 )
2026-10-13 01:02:02 +00:00 · 2023-05-25 12:36:22 +02:00 · 2023-05-25 12:25:26 +02:00 · 2023-05-24 18:26:38 +02:00 · 2023-05-24 15:32:35 +02:00 · 2023-05-24 14:36:34 +02:00
43 changed files with 839 additions and 122 deletions
@@ -1,5 +1,9 @@
 # @navikt/aksel-icons

+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "3.2.3",
+  "version": "3.3.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,19 @@
 # @navikt/aksel

+## 3.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.3.0
+
+## 3.2.4
+
+### Patch Changes
+
+- Updated dependencies [[`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458)]:
+  - @navikt/ds-css@3.2.4
+
 ## 3.2.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "3.2.3",
+  "version": "3.3.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": "3.2.3",
+    "@navikt/ds-css": "3.3.0",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,9 @@
 # @navikt/ds-codemod

+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3

 ## 3.2.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "3.2.3",
+  "version": "3.3.0",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -40,8 +40,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^3.2.3",
-    "@navikt/ds-react": "^3.2.3",
+    "@navikt/ds-icons": "^3.3.0",
+    "@navikt/ds-react": "^3.3.0",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,13 @@
 # @navikt/ds-css

+## 3.3.0
+
+## 3.2.4
+
+### Patch Changes
+
+- [#2000](https://github.com/navikt/aksel/pull/2000) [`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Search støtter nå htmlSize-prop
+
 ## 3.2.3

 ### Patch Changes
@@ -17,6 +17,10 @@
  width: 100%;
 }

+.navds-search--with-size :where(.navds-search__wrapper-inner) {
+  width: inherit;
+}
+
 .navds-search__wrapper {
  display: inline-flex;
  align-items: center;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "3.2.3",
+  "version": "3.3.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": "^3.2.3",
+    "@navikt/ds-tokens": "^3.3.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,27 @@
 # @navikt/ds-react

+## 3.3.0
+
+### Patch Changes
+
+- [#1995](https://github.com/navikt/aksel/pull/1995) [`288cef591`](https://github.com/navikt/aksel/commit/288cef591abb0557295e50cf6e696d7a51607c32) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Timeline viser nå popover/tooltip på hover.
+
+  - Popover vises nå ikke lengre ved klikk.
+  - Period og Pin bruker nå begge ny popover.
+  - Kode og styling for Popover er nå inlinet i Timeline, og bruker ikke `@navikt/ds-react` sin versjon.
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.3.0
+
+## 3.2.4
+
+### Patch Changes
+
+- [#2000](https://github.com/navikt/aksel/pull/2000) [`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Search støtter nå htmlSize-prop
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.2.4
+
 ## 3.2.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "3.2.3",
+  "version": "3.3.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,8 +37,8 @@
    "test": "TZ=UTC jest"
  },
  "dependencies": {
-    "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^3.2.3",
+    "@floating-ui/react": "0.24.1",
+    "@navikt/aksel-icons": "^3.3.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -67,6 +67,10 @@ export interface SearchProps
   * @default "primary"
   */
  variant?: "primary" | "secondary" | "simple";
+  /**
+   * Exposes the HTML size attribute
+   */
+  htmlSize?: number | string;
 }

 interface SearchComponent
@@ -112,6 +116,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
      defaultValue,
      onChange,
      onSearchClick,
+      htmlSize,
      ...rest
    } = props;

@@ -164,9 +169,11 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
          "navds-form-field",
          `navds-form-field--${size}`,
          "navds-search",
+
          {
            "navds-search--error": hasError,
            "navds-search--disabled": !!inputProps.disabled,
+            "navds-search--with-size": !!htmlSize,
          }
        )}
      >
@@ -215,6 +222,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                "navds-body-short",
                `navds-body-${size}`
              )}
+              {...(htmlSize ? { size: Number(htmlSize) } : {})}
            />
            {(value ?? internalValue) && clearButton && (
              <button
@@ -164,3 +164,28 @@ export const NoClearButton = () => (
    />
  </div>
 );
+
+export const HtmlSize = () => (
+  <div className="colgap">
+    <Search
+      label="Lorem ipsum dolor sit amet"
+      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
+      hideLabel={false}
+      htmlSize="20"
+    />
+    <Search
+      label="Lorem ipsum dolor sit amet"
+      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
+      hideLabel={false}
+      htmlSize="20"
+      variant="secondary"
+    />
+    <Search
+      label="Lorem ipsum dolor sit amet"
+      description="Saepe laborum delectus officia perferendis quaerat excepturi possimus hic enim dicta assumenda."
+      hideLabel={false}
+      htmlSize="20"
+      variant="simple"
+    />
+  </div>
+);
@@ -102,8 +102,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
    const {
      x,
      y,
-      reference,
-      floating,
      strategy,
      context,
      update,
@@ -129,12 +127,12 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
    ]);

    useClientLayoutEffect(() => {
-      reference(anchorEl);
+      refs.setReference(anchorEl);
    }, [anchorEl]);

    const floatingRef = useMemo(
-      () => mergeRefs([floating, ref]),
-      [floating, ref]
+      () => mergeRefs([refs.setFloating, ref]),
+      [refs.setFloating, ref]
    );

    useClientLayoutEffect(() => {
@@ -101,8 +101,6 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
    const {
      x,
      y,
-      reference,
-      floating,
      strategy,
      context,
      placement,
@@ -110,6 +108,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
        arrow: { x: arrowX, y: arrowY } = {},
        hide: { referenceHidden } = {},
      },
+      refs,
    } = useFloating({
      placement: _placement,
      open: userOpen ?? open,
@@ -132,12 +131,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
    const ariaId = useId(id);

    const mergedRef = useMemo(
-      () => mergeRefs([ref, floating]),
-      [floating, ref]
+      () => mergeRefs([ref, refs.setFloating]),
+      [refs.setFloating, ref]
    );
    const childMergedRef = useMemo(
-      () => mergeRefs([(children as any).ref, reference]),
-      [children, reference]
+      () => mergeRefs([(children as any).ref, refs.setReference]),
+      [children, refs.setReference]
    );

    if (
@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind

+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3

 ## 3.2.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "3.2.3",
+  "version": "3.3.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": "^3.2.3",
+    "@navikt/ds-tokens": "^3.3.0",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,9 @@
 # @navikt/ds-tokens

+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3

 ## 3.2.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "3.2.3",
+  "version": "3.3.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,9 @@
 # @navikt/ds-icons

+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3

 ## 3.2.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "3.2.3",
+  "version": "3.3.0",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,17 @@
 # @navikt/ds-css-internal

+## 3.3.0
+
+### Minor Changes
+
+- [#1995](https://github.com/navikt/aksel/pull/1995) [`288cef591`](https://github.com/navikt/aksel/commit/288cef591abb0557295e50cf6e696d7a51607c32) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Timeline viser nå popover/tooltip på hover.
+
+  - Popover vises nå ikke lengre ved klikk.
+  - Period og Pin bruker nå begge ny popover.
+  - Kode og styling for Popover er nå inlinet i Timeline, og bruker ikke `@navikt/ds-react` sin versjon.
+
+## 3.2.4
+
 ## 3.2.3

 ## 3.2.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "3.2.3",
+  "version": "3.3.0",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -74,7 +74,7 @@
 }

 .navdsi-timeline__period--inner {
-  margin: 0 var(--a-spacing-1) 0 var(--a-spacing-2);
+  margin: 0 var(--a-spacing-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
@@ -321,3 +321,55 @@
    padding-right: 6px;
  }
 }
+
+/**
+* Timeline Popover
+*/
+
+.navds-timeline__popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-timeline__popover:focus {
+  outline: none;
+}
+
+.navds-timeline__popover-content {
+  padding: var(--a-spacing-3);
+}
+
+.navds-timeline__popover-arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
@@ -1,5 +1,29 @@
 # @navikt/ds-react-internal

+## 3.3.0
+
+### Minor Changes
+
+- [#1995](https://github.com/navikt/aksel/pull/1995) [`288cef591`](https://github.com/navikt/aksel/commit/288cef591abb0557295e50cf6e696d7a51607c32) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Timeline viser nå popover/tooltip på hover.
+
+  - Popover vises nå ikke lengre ved klikk.
+  - Period og Pin bruker nå begge ny popover.
+  - Kode og styling for Popover er nå inlinet i Timeline, og bruker ikke `@navikt/ds-react` sin versjon.
+
+### Patch Changes
+
+- Updated dependencies [[`288cef591`](https://github.com/navikt/aksel/commit/288cef591abb0557295e50cf6e696d7a51607c32)]:
+  - @navikt/ds-react@3.3.0
+  - @navikt/aksel-icons@3.3.0
+
+## 3.2.4
+
+### Patch Changes
+
+- Updated dependencies [[`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458)]:
+  - @navikt/ds-react@3.2.4
+  - @navikt/aksel-icons@3.2.4
+
 ## 3.2.3

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "3.2.3",
+  "version": "3.3.0",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -36,8 +36,9 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/aksel-icons": "^3.2.3",
-    "@navikt/ds-react": "^3.2.3",
+    "@floating-ui/react": "0.24.1",
+    "@navikt/aksel-icons": "^3.3.0",
+    "@navikt/ds-react": "^3.3.0",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -1,11 +1,31 @@
-import { mergeRefs, Popover } from "@navikt/ds-react";
+import {
+  autoUpdate,
+  arrow as flArrow,
+  flip,
+  offset,
+  safePolygon,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+} from "@floating-ui/react";
+import { mergeRefs, useEventListener } from "@navikt/ds-react";
 import { format } from "date-fns";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";

-export interface TimelinePinProps {
+export interface TimelinePinProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
  /**
   * Date position for the pin.
   */
@@ -27,9 +47,64 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
  ({ date, children, ...rest }, ref) => {
    const { startDate, endDate, direction } = useTimelineContext();
    const [open, setOpen] = useState(false);
+    const arrowRef = useRef<HTMLDivElement | null>(null);

-    const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+    const {
+      context,
+      placement,
+      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+      refs,
+      floatingStyles,
+    } = useFloating({
+      placement: "top",
+      open: open,
+      onOpenChange: setOpen,
+      middleware: [
+        offset(16),
+        shift(),
+        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        flArrow({ element: arrowRef, padding: 5 }),
+      ],
+      whileElementsMounted: autoUpdate,
+    });
+
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+      useHover(context, {
+        handleClose: safePolygon(),
+        restMs: 25,
+        delay: { open: 1000 },
+      }),
+      useFocus(context),
+      useDismiss(context),
+    ]);
+
+    const mergedRef = useMemo(
+      () => mergeRefs([refs.setReference, ref]),
+      [ref, refs.setReference]
+    );
+
+    useEventListener(
+      "focusin",
+      useCallback(
+        (e: FocusEvent) => {
+          if (
+            ![refs.domReference.current, refs?.floating?.current].some(
+              (element) => element?.contains(e.target as Node)
+            )
+          ) {
+            open && setOpen(false);
+          }
+        },
+        [open, refs.domReference, refs?.floating]
+      )
+    );
+
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right",
+    }[placement.split("-")[0]];

    return (
      <>
@@ -41,21 +116,48 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
            {...rest}
            ref={mergedRef}
            className="navdsi-timeline__pin-button"
-            onClick={() => setOpen(!open)}
            aria-label={`pin:${format(date, "dd.MM.yyyy")}`}
-            aria-expanded={open}
            type="button"
+            aria-expanded={children ? open : undefined}
+            {...getReferenceProps({
+              onKeyDown: (e) => {
+                rest?.onKeyDown?.(e as React.KeyboardEvent<HTMLButtonElement>);
+                if (e.key === "Enter") {
+                  setOpen((prev) => !prev);
+                } else if (e.key === " ") {
+                  setOpen(false);
+                }
+              },
+            })}
          />
        </div>
        {children && (
-          <Popover
-            open={open}
-            onClose={() => setOpen(false)}
-            anchorEl={buttonRef.current}
-            offset={18}
+          <div
+            className="navds-timeline__popover"
+            data-placement={placement}
+            aria-hidden={!open}
+            ref={refs.setFloating}
+            {...getFloatingProps({
+              tabIndex: -1,
+            })}
+            style={{
+              ...floatingStyles,
+              display: open ? undefined : "none",
+            }}
          >
-            <Popover.Content>{children}</Popover.Content>
-          </Popover>
+            <div className="navds-timeline__popover-content">{children}</div>
+            <div
+              ref={(node) => {
+                arrowRef.current = node;
+              }}
+              style={{
+                ...(arrowX != null ? { left: arrowX } : {}),
+                ...(arrowY != null ? { top: arrowY } : {}),
+                ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+              }}
+              className="navds-timeline__popover-arrow"
+            />
+          </div>
        )}
      </>
    );
@@ -1,6 +1,19 @@
-import { mergeRefs, Popover } from "@navikt/ds-react";
+import {
+  autoUpdate,
+  arrow as flArrow,
+  flip,
+  offset,
+  safePolygon,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+} from "@floating-ui/react";
+import { mergeRefs, useEventListener } from "@navikt/ds-react";
 import cl from "clsx";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -8,7 +21,9 @@ import { ariaLabel, getConditionalClasses } from "../utils/period";
 import { PeriodProps } from "./index";

 interface TimelineClickablePeriodProps extends PeriodProps {
-  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onSelectPeriod?: (
+    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
+  ) => void;
  isActive?: boolean;
  periodRef: React.ForwardedRef<HTMLButtonElement>;
 }
@@ -30,17 +45,69 @@ const ClickablePeriod = React.memo(
    restProps,
    periodRef,
  }: TimelineClickablePeriodProps) => {
-    const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const [selected, setSelected] = useState(false);
+    const [open, setOpen] = useState(false);
    const { index } = useRowContext();
    const { firstFocus } = usePeriodContext();
    const { initiate, addFocusable } = useTimelineContext();
+    const arrowRef = useRef<HTMLDivElement | null>(null);
+
+    const {
+      context,
+      placement,
+      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+      refs,
+      floatingStyles,
+    } = useFloating({
+      placement: "top",
+      open: open,
+      onOpenChange: setOpen,
+      middleware: [
+        offset(16),
+        shift(),
+        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        flArrow({ element: arrowRef, padding: 5 }),
+      ],
+      whileElementsMounted: autoUpdate,
+    });
+
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+      useHover(context, {
+        handleClose: safePolygon(),
+        restMs: 25,
+        delay: { open: 1000 },
+      }),
+      useFocus(context),
+      useDismiss(context),
+    ]);

    const mergedRef = useMemo(
-      () => mergeRefs([buttonRef, periodRef]),
-      [periodRef]
+      () => mergeRefs([refs.setReference, periodRef]),
+      [periodRef, refs.setReference]
    );

+    useEventListener(
+      "focusin",
+      useCallback(
+        (e: FocusEvent) => {
+          if (
+            ![refs.domReference.current, refs?.floating?.current].some(
+              (element) => element?.contains(e.target as Node)
+            )
+          ) {
+            open && setOpen(false);
+          }
+        },
+        [open, refs.domReference, refs?.floating]
+      )
+    );
+
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right",
+    }[placement.split("-")[0]];
+
    return (
      <>
        <button
@@ -50,10 +117,6 @@ const ClickablePeriod = React.memo(
            firstFocus && addFocusable(r, index);
            mergedRef(r);
          }}
-          onClick={(e) => {
-            children && setSelected((x) => !x);
-            onSelectPeriod?.(e);
-          }}
          aria-label={ariaLabel(start, end, status, statusLabel)}
          className={cl(
            "navdsi-timeline__period--clickable",
@@ -63,26 +126,64 @@ const ClickablePeriod = React.memo(
              "navdsi-timeline__period--selected": isActive,
            }
          )}
-          style={{
-            width: `${width}%`,
-            [direction]: `${left}%`,
-          }}
-          aria-expanded={children ? selected : undefined}
-          onFocus={() => {
-            initiate(index);
-          }}
+          aria-expanded={children ? open : undefined}
+          aria-current={isActive || undefined}
+          {...getReferenceProps({
+            onFocus: () => {
+              initiate(index);
+            },
+            onKeyDown: (e) => {
+              restProps?.onKeydown?.(e);
+              if (e.key === "Enter") {
+                setOpen((prev) => !prev);
+              }
+              if (e.key === " ") {
+                onSelectPeriod?.(e);
+                setOpen(false);
+              }
+            },
+            style: {
+              width: `${width}%`,
+              [direction]: `${left}%`,
+            },
+            onClick: (e) => {
+              restProps?.onClick?.(e);
+              if (e.detail === 0) {
+                return;
+              }
+              onSelectPeriod?.(e);
+            },
+          })}
        >
          <span className="navdsi-timeline__period--inner">{icon}</span>
        </button>
        {children && (
-          <Popover
-            open={selected}
-            onClose={() => setSelected(false)}
-            anchorEl={buttonRef.current}
-            strategy="fixed"
+          <div
+            className="navds-timeline__popover"
+            data-placement={placement}
+            aria-hidden={!open}
+            ref={refs.setFloating}
+            {...getFloatingProps({
+              tabIndex: -1,
+            })}
+            style={{
+              ...floatingStyles,
+              display: open ? undefined : "none",
+            }}
          >
-            <Popover.Content>{children}</Popover.Content>
-          </Popover>
+            <div className="navds-timeline__popover-content">{children}</div>
+            <div
+              ref={(node) => {
+                arrowRef.current = node;
+              }}
+              style={{
+                ...(arrowX != null ? { left: arrowX } : {}),
+                ...(arrowY != null ? { top: arrowY } : {}),
+                ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+              }}
+              className="navds-timeline__popover-arrow"
+            />
+          </div>
        )}
      </>
    );
@@ -256,6 +256,7 @@ export const ActivePeriod = () => {
                onSelectPeriod={() => {
                  setActivePeriod(p);
                  p?.onSelectPeriod?.();
+                  console.log("PERIOD SELECTED!");
                }}
                icon={p.icon}
                isActive={activePeriod.id === p.id}
@@ -357,3 +358,87 @@ export const WithYearLabels = () => {
    </div>
  );
 };
+
+export const ContentDemo = () => {
+  const [activePeriod, setActivePeriod] = useState<any>(undefined);
+
+  return (
+    <div style={{ width: "80vw" }}>
+      <Timeline>
+        <Timeline.Pin date={new Date("Apr 15 2022")}>Pin 1</Timeline.Pin>
+        <Timeline.Pin date={new Date("Jun 12 2022")}>
+          Pin 2 <button>test</button>
+        </Timeline.Pin>
+        <Timeline.Pin date={new Date("Jul 28 2022")}>Pin 3</Timeline.Pin>
+        <Timeline.Row
+          label="Rad 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
+          {row1.map((p: any, i) => {
+            return (
+              <Timeline.Period
+                key={p.id}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                onSelectPeriod={() => {
+                  setActivePeriod(p);
+                  p?.onSelectPeriod?.();
+                  console.log("PERIOD SELECTED!");
+                }}
+                icon={p.icon}
+                isActive={activePeriod?.id === p.id}
+                statusLabel={p.statusLabel}
+                aria-controls={
+                  activePeriod?.id === p.id ? "timeline-data" : undefined
+                }
+                id={p.id}
+              >
+                {p.children}
+              </Timeline.Period>
+            );
+          })}
+        </Timeline.Row>
+        <Timeline.Row label="Rad 2">
+          {row2.map((p: any, i) => {
+            return (
+              <Timeline.Period
+                key={p.id}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                onSelectPeriod={() => {
+                  setActivePeriod(p);
+                  p?.onSelectPeriod?.();
+                }}
+                icon={p.icon}
+                isActive={activePeriod?.id === p.id}
+                statusLabel={p.statusLabel}
+                aria-controls={
+                  activePeriod?.id === p.id ? "timeline-data" : undefined
+                }
+                id={p.id}
+              >
+                {p.children}
+              </Timeline.Period>
+            );
+          })}
+        </Timeline.Row>
+        <Timeline.Row label="Rad 3">
+          <Timeline.Period
+            start={new Date("Jan 1 2022")}
+            end={new Date("Aug 20 2022")}
+            status="info"
+            icon={<CheckmarkCircleFillIcon aria-hidden />}
+          />
+        </Timeline.Row>
+      </Timeline>
+      {activePeriod && (
+        <div id="timeline-data" aria-controls={activePeriod.id}>
+          <h2>Period-data</h2>
+          <p>{`Periode:${activePeriod.id}, dato:${activePeriod.start}`}</p>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -15,7 +15,7 @@
          <img src="https://img.shields.io/badge/PRs-welcome-green.svg?color=%23262626"" />
      </a>
    </div>
-    <div><a href="https://www.npmjs.com/package/@navikt/ds-css"><img alt="npm" src="https://img.shields.io/npm/v/@navikt/ds-css?label=%40navikt%2Fds-*"></a></div>
+    <div><a href="https://www.npmjs.com/package/@navikt/ds-css"><img alt="npm" src="https://img.shields.io/npm/v/@navikt/ds-css?label=version"></a></div>
    <br/>
    <a href="https://aksel.nav.no">Nettside</a> | <a href="https://github.com/navikt/aksel/issues">Issues</a>
 <br/>
@@ -15,15 +15,15 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^3.2.3",
-    "@navikt/ds-codemod": "^3.2.3",
-    "@navikt/ds-css": "^3.2.3",
-    "@navikt/ds-css-internal": "^3.2.3",
-    "@navikt/ds-icons": "^3.2.3",
-    "@navikt/ds-react": "^3.2.3",
-    "@navikt/ds-react-internal": "^3.2.3",
-    "@navikt/ds-tailwind": "^3.2.3",
-    "@navikt/ds-tokens": "^3.2.3"
+    "@navikt/aksel-icons": "^3.3.0",
+    "@navikt/ds-codemod": "^3.3.0",
+    "@navikt/ds-css": "^3.3.0",
+    "@navikt/ds-css-internal": "^3.3.0",
+    "@navikt/ds-icons": "^3.3.0",
+    "@navikt/ds-react": "^3.3.0",
+    "@navikt/ds-react-internal": "^3.3.0",
+    "@navikt/ds-tailwind": "^3.3.0",
+    "@navikt/ds-tokens": "^3.3.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -152,6 +152,16 @@ export const Sidebar = ({
                return -1;
              }

+              if (a.sidebarindex !== null || b.sidebarindex !== null) {
+                if (a.sidebarindex !== null && b.sidebarindex !== null) {
+                  return a.sidebarindex - b.sidebarindex;
+                } else if (a.sidebarindex !== null) {
+                  return -1;
+                } else {
+                  return 1;
+                }
+              }
+
              return a?.heading.localeCompare(b?.heading);
            }),
        }))
@@ -12,5 +12,5 @@ const Example = () => {
 export default withDsExample(Example, "inverted");

 export const args = {
-  index: 6,
+  index: 7,
 };
@@ -21,5 +21,5 @@ export const Demo = {
 };

 export const args = {
-  index: 5,
+  index: 6,
 };
@@ -0,0 +1,26 @@
+import { Search } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <form>
+      <Search
+        label="Hva er artikkelnummeret til denne varen?"
+        description="Art.nr. finner du på varens produktside eller i katalogen."
+        hideLabel={false}
+        htmlSize="12"
+      />
+    </form>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+};
@@ -11,7 +11,7 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 import { useState } from "react";

 const Example = () => {
-  const [activePeriod, setActivePeriod] = useState();
+  const [activePeriod, setActivePeriod] = useState<any>();

  return (
    <div className="min-w-[800px] overflow-x-auto">
@@ -27,6 +27,8 @@ const Example = () => {
                icon={p.icon}
                onSelectPeriod={() => setActivePeriod(p.id)}
                isActive={activePeriod && activePeriod === p.id}
+                aria-controls="timeline-panel"
+                id={p.id}
              />
            );
          })}
@@ -42,13 +44,19 @@ const Example = () => {
                icon={p.icon}
                onSelectPeriod={() => setActivePeriod(p.id)}
                isActive={activePeriod && activePeriod === p.id}
+                aria-controls="timeline-panel"
+                id={p.id}
              />
            );
          })}
        </Timeline.Row>
      </Timeline>
      {activePeriod && (
-        <div className="mt-8">{`${activePeriod}: ${
+        <div
+          aria-controls={activePeriod.id}
+          id="timeline-panel"
+          className="mt-8"
+        >{`${activePeriod}: ${
          [...person, ...jobb].find((x) => x.id === activePeriod).start
        }`}</div>
      )}
@@ -0,0 +1,159 @@
+import {
+  VirusIcon,
+  PencilIcon,
+  HospitalIcon,
+  PiggybankIcon,
+  PersonGroupIcon,
+  ParasolBeachIcon,
+} from "@navikt/aksel-icons";
+import { Timeline } from "@navikt/ds-react-internal";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import { useState } from "react";
+
+const Example = () => {
+  const [activePeriod, setActivePeriod] = useState<any>();
+
+  return (
+    <div className="min-w-[800px] overflow-x-auto">
+      <Timeline>
+        <Timeline.Pin date={new Date("Mar 15 2022")}>
+          <p>Utbetalt: 12 345 kr</p>
+        </Timeline.Pin>
+        <Timeline.Row label="Person" icon={<PersonGroupIcon aria-hidden />}>
+          {person.map((p: any, i) => {
+            return (
+              <Timeline.Period
+                key={i}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                icon={p.icon}
+                onSelectPeriod={() => setActivePeriod(p.id)}
+                isActive={activePeriod && activePeriod === p.id}
+                aria-controls="timeline-panel"
+                id={p.id}
+              >
+                {p?.children ?? null}
+              </Timeline.Period>
+            );
+          })}
+        </Timeline.Row>
+        <Timeline.Row label="Sykehus A" icon={<HospitalIcon aria-hidden />}>
+          {jobb.map((p: any, i) => {
+            return (
+              <Timeline.Period
+                key={i}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                icon={p.icon}
+                onSelectPeriod={() => setActivePeriod(p.id)}
+                isActive={activePeriod && activePeriod === p.id}
+                aria-controls="timeline-panel"
+                id={p.id}
+              >
+                {p?.children ?? null}
+              </Timeline.Period>
+            );
+          })}
+        </Timeline.Row>
+      </Timeline>
+      {activePeriod && (
+        <div
+          aria-controls={activePeriod.id}
+          id="timeline-panel"
+          className="mt-8"
+        >{`${activePeriod}: ${
+          [...person, ...jobb].find((x) => x.id === activePeriod).start
+        }`}</div>
+      )}
+    </div>
+  );
+};
+
+const person = [
+  {
+    start: new Date("Jan 1 2022"),
+    end: new Date("Jan 31 2022"),
+    status: "warning",
+    icon: <PencilIcon aria-hidden />,
+    statusLabel: "Sykemeldt",
+    children: <div>50% sykemeldt</div>,
+    id: 1,
+  },
+  {
+    start: new Date("Apr 1 2022"),
+    end: new Date("Apr 30 2022"),
+    status: "neutral",
+    icon: <ParasolBeachIcon aria-hidden />,
+    label: "test",
+    statusLabel: "Ferie",
+    id: 2,
+  },
+  {
+    start: new Date("Jul 1 2022"),
+    end: new Date("Jul 31 2022"),
+    status: "warning",
+    icon: <PencilIcon aria-hidden />,
+    statusLabel: "Sykemeldt",
+    id: 3,
+  },
+  {
+    start: new Date("Aug 1 2022"),
+    end: new Date("Aug 30 2022"),
+    status: "warning",
+    icon: <VirusIcon aria-hidden />,
+    statusLabel: "Stønad korona",
+    id: 4,
+  },
+];
+
+const jobb = [
+  {
+    start: new Date("Feb 2 2022"),
+    end: new Date("Mar 1 2022"),
+    status: "success",
+    statusLabel: "Utbetaling",
+    icon: <PiggybankIcon aria-hidden />,
+    children: <div>100% utbetaling</div>,
+    id: 11,
+  },
+  {
+    start: new Date("Mar 2 2022"),
+    end: new Date("Apr 1 2022"),
+    status: "success",
+    statusLabel: "Utbetaling",
+    icon: <PiggybankIcon aria-hidden />,
+    children: <div>100% utbetaling</div>,
+    id: 22,
+  },
+  {
+    start: new Date("May 2 2022"),
+    end: new Date("June 1 2022"),
+    status: "success",
+    statusLabel: "Utbetaling",
+    icon: <PiggybankIcon aria-hidden />,
+    children: <div>100% utbetaling</div>,
+    id: 33,
+  },
+  {
+    start: new Date("June 2 2022"),
+    end: new Date("July 1 2022"),
+    status: "success",
+    statusLabel: "Utbetaling",
+    icon: <PiggybankIcon aria-hidden />,
+    id: 44,
+  },
+];
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+  desc: "Vi anbefaler å bruke 'aria-controls' begge veier mellom aktive perioder og panelet det refererer til. Dette gir brukere av enkelte skjermlesere keyboard-shortcuts for å hoppe mellom perioder og panelet.",
+};
@@ -180,6 +180,7 @@ export const sidebarQuery = `"sidebar": *[_type == $type && defined(kategori)] {
  "slug": slug.current,
  kategori,
  "tag": status.tag,
+  "sidebarindex": sidebarindex,
 }`;

 export const landingPageQuery = (t) => {
@@ -68,6 +68,14 @@ export const GrunnleggendeArtikkel = defineType({
        collapsed: false,
      },
    }),
+    defineField({
+      title: "Sidebar-index",
+      description:
+        "Overstyrer sortering av artikler i sidebar. Hvis feltet er tomt, sorteres den alfabetisk.",
+      name: "sidebarindex",
+      type: "number",
+      group: "settings",
+    }),
    defineField({
      title: "Innhold",
      description:
@@ -141,6 +141,7 @@ export type AkselSidebarT = Array<{
  slug: string;
  kategori: typeof komponentKategorier[number]["value"];
  tag: "beta" | "new" | "ready" | "deprecated";
+  sidebarindex: number | null;
 }>;

 export type ArticleListT = Array<{
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "3.2.3",
-    "@navikt/ds-react": "3.2.3",
+    "@navikt/ds-css": "3.3.0",
+    "@navikt/ds-react": "3.3.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -3174,6 +3174,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@floating-ui/core@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "@floating-ui/core@npm:1.2.6"
+  checksum: e4aa96c435277f1720d4bc939e17a79b1e1eebd589c20b622d3c646a5273590ff889b8c6e126f7be61873cf8c4d7db7d418895986ea19b8b0d0530de32504c3a
+  languageName: node
+  linkType: hard
+
 "@floating-ui/dom@npm:^1.0.1, @floating-ui/dom@npm:^1.1.1":
  version: 1.2.0
  resolution: "@floating-ui/dom@npm:1.2.0"
@@ -3192,6 +3199,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@floating-ui/dom@npm:^1.2.7":
+  version: 1.2.8
+  resolution: "@floating-ui/dom@npm:1.2.8"
+  dependencies:
+    "@floating-ui/core": ^1.2.6
+  checksum: 02894774475a17baa498c86cd25d2825598e7de0734b8c08f7b8797b19c0bec13c4c726e529feb8bf26c6dee219c153ac1f90d8530a93534f765b3c04cfa3b4a
+  languageName: node
+  linkType: hard
+
 "@floating-ui/react-dom@npm:1.1.1":
  version: 1.1.1
  resolution: "@floating-ui/react-dom@npm:1.1.1"
@@ -3204,7 +3220,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@floating-ui/react-dom@npm:1.2.2, @floating-ui/react-dom@npm:^1.2.0":
+"@floating-ui/react-dom@npm:1.2.2":
  version: 1.2.2
  resolution: "@floating-ui/react-dom@npm:1.2.2"
  dependencies:
@@ -3216,17 +3232,29 @@ __metadata:
  languageName: node
  linkType: hard

-"@floating-ui/react@npm:0.17.0":
-  version: 0.17.0
-  resolution: "@floating-ui/react@npm:0.17.0"
+"@floating-ui/react-dom@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@floating-ui/react-dom@npm:2.0.0"
  dependencies:
-    "@floating-ui/react-dom": ^1.2.0
+    "@floating-ui/dom": ^1.2.7
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: c5dd02b7babf9c26d5e11b8ebe58411131b37844f7d6362a767cd1eedfb506ca6db3228fb192e0a5822c9289a5b500e2ef31e069dce28a0fbec4722f22bcdd95
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react@npm:0.24.1":
+  version: 0.24.1
+  resolution: "@floating-ui/react@npm:0.24.1"
+  dependencies:
+    "@floating-ui/react-dom": ^2.0.0
    aria-hidden: ^1.1.3
    tabbable: ^6.0.1
  peerDependencies:
    react: ">=16.8.0"
    react-dom: ">=16.8.0"
-  checksum: e9729a7825a612df88f588a2299375d4ce7f64a810b32e9f38be4c5f5332c164e24c346e101321ca33c3171afbeced554f7cdbaea19bf67cf31b4af811d433eb
+  checksum: 89e525412a5f71be1437ce74a3a76f4a6c771074e1dca62dddf11062dd9eca7b967091906c369427a0c8f9c9a7c6c7ae06525917e6809d60d832443a4acfc3f3
  languageName: node
  linkType: hard

@@ -3898,7 +3926,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^3.2.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^3.2.4, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3925,7 +3953,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 3.2.2
+    "@navikt/ds-css": 3.2.4
    "@types/inquirer": ^9.0.3
    "@types/jest": ^29.0.0
    axios: 1.3.6
@@ -3949,7 +3977,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-codemod@^3.2.2, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^3.2.4, @navikt/ds-codemod@workspace:@navikt/codemod":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
  dependencies:
@@ -3976,7 +4004,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css-internal@^3.2.2, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^3.2.4, @navikt/ds-css-internal@workspace:@navikt/internal/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
  dependencies:
@@ -3987,11 +4015,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@3.2.2, @navikt/ds-css@^3.2.2, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@3.2.4, @navikt/ds-css@^3.2.4, @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": ^3.2.2
+    "@navikt/ds-tokens": ^3.2.4
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -4004,7 +4032,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-icons@^3.2.2, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^3.2.4, @navikt/ds-icons@workspace:@navikt/icons":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-icons@workspace:@navikt/icons"
  dependencies:
@@ -4040,8 +4068,8 @@ __metadata:
    "@babel/preset-env": 7.19.4
    "@babel/preset-react": 7.18.6
    "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^3.2.2
-    "@navikt/ds-react": ^3.2.2
+    "@navikt/ds-icons": ^3.2.4
+    "@navikt/ds-react": ^3.2.4
    "@rollup/plugin-babel": 6.0.2
    "@rollup/plugin-commonjs": 23.0.2
    "@rollup/plugin-node-resolve": ^15.0.1
@@ -4066,12 +4094,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react-internal@^3.2.2, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^3.2.4, @navikt/ds-react-internal@workspace:@navikt/internal/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
  dependencies:
-    "@navikt/aksel-icons": ^3.2.2
-    "@navikt/ds-react": ^3.2.2
+    "@floating-ui/react": 0.24.1
+    "@navikt/aksel-icons": ^3.2.4
+    "@navikt/ds-react": ^3.2.4
    clsx: ^1.1.1
    concurrently: 7.2.1
    copy-to-clipboard: ^3.3.1
@@ -4087,12 +4116,12 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@3.2.2, @navikt/ds-react@^3.2.2, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@3.2.4, @navikt/ds-react@^3.2.4, @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.17.0
-    "@navikt/aksel-icons": ^3.2.2
+    "@floating-ui/react": 0.24.1
+    "@navikt/aksel-icons": ^3.2.4
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -4128,11 +4157,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^3.2.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^3.2.4, @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": ^3.2.2
+    "@navikt/ds-tokens": ^3.2.4
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -4143,7 +4172,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^3.2.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^3.2.4, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -8302,15 +8331,15 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^3.2.2
-    "@navikt/ds-codemod": ^3.2.2
-    "@navikt/ds-css": ^3.2.2
-    "@navikt/ds-css-internal": ^3.2.2
-    "@navikt/ds-icons": ^3.2.2
-    "@navikt/ds-react": ^3.2.2
-    "@navikt/ds-react-internal": ^3.2.2
-    "@navikt/ds-tailwind": ^3.2.2
-    "@navikt/ds-tokens": ^3.2.2
+    "@navikt/aksel-icons": ^3.2.4
+    "@navikt/ds-codemod": ^3.2.4
+    "@navikt/ds-css": ^3.2.4
+    "@navikt/ds-css-internal": ^3.2.4
+    "@navikt/ds-icons": ^3.2.4
+    "@navikt/ds-react": ^3.2.4
+    "@navikt/ds-react-internal": ^3.2.4
+    "@navikt/ds-tailwind": ^3.2.4
+    "@navikt/ds-tokens": ^3.2.4
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
@@ -23360,8 +23389,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "shadow-dom@workspace:examples/shadow-dom"
  dependencies:
-    "@navikt/ds-css": 3.2.2
-    "@navikt/ds-react": 3.2.2
+    "@navikt/ds-css": 3.2.4
+    "@navikt/ds-react": 3.2.4
    "@types/react": ^18.0.0
    "@types/react-dom": ^18.0.0
    "@vitejs/plugin-react": ^2.1.0
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	c8375ba46f	Version Packages (#2002 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-25 12:36:22 +02:00
Ken	288cef591a	Timeline viser popover på hover (#1995 )	2023-05-25 12:25:26 +02:00
Ken	aa3b4c22d6	🎨 Mulighet for manuell sortering av elementer i grunnleggende-sidebar	2023-05-24 18:26:38 +02:00
github-actions[bot]andgithub-actions[bot]	46af5defd9	Version Packages (#2001 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-24 15:32:35 +02:00
Ken	30eee0dac4	🐛 Fikset htmlSize-prop for `<Search />` (#2000 )	2023-05-24 14:36:34 +02:00
Ken	76b3a65572	Update README.md	2023-05-23 12:39:10 +02:00