Version Packages (#2006)

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

.changeset/config.json

@@ -20,7 +20,12 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["shadow-dom", "aksel.nav.no", "@navikt/ds-navno"],
+  "ignore": [
+    "shadow-dom",
+    "aksel.nav.no",
+    "@navikt/ds-navno",
+    "aksel-icons-figma-plugin"
+  ],
 
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 3.3.1
+
+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3
 
 ### Patch Changes

@navikt/aksel-icons/config/metadata.js

@@ -24,6 +24,11 @@ fs.writeFileSync(
   `const metadata = ${JSON.stringify(metadata)};\n\n module.exports = metadata;`
 );
 
+fs.writeFileSync(
+  path.resolve(__dirname, "../dist/metadata.mjs"),
+  `const metadata = ${JSON.stringify(metadata)};\n\n export default metadata;`
+);
+
 fs.writeFileSync(
   path.resolve(__dirname, "../dist/metadata.d.ts"),
   `export type AkselIcon = {

@navikt/aksel-icons/figma-plugin/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+!src
+!*.d.ts

@navikt/aksel-icons/figma-plugin/README.md

@@ -0,0 +1,22 @@
+![](/src/assets/gh-cover.png)
+
+# Aksel Icons plugin
+
+Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene i fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
+
+Referer til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
+Har du ønsker om nye ikoner, eller ønsker å bidra med å lage nye, lag et issue på [GitHub-repoet for designsystemet](https://github.com/navikt/aksel).
+
+## Quickstart
+
+- `yarn dev` for development
+- `yarn build` for production-build
+
+### Test with Figma
+
+- Open `Figma` -> `Plugins` -> `Development` -> `Import plugin from manifest...` and choose `manifest.json` file from this repo.
+
+### Publish to Figma
+
+- Open `Figma` -> `Plugins` -> `Find more plugins` -> `Publish new versions`
+  (requires publish-access)

@navikt/aksel-icons/figma-plugin/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "Aksel Icons",
+  "id": "1221057403873975172",
+  "api": "1.0.0",
+  "main": "dist/plugin.js",
+  "ui": "dist/index.html",
+  "capabilities": [],
+  "enableProposedApi": false,
+  "editorType": ["figma", "figjam"]
+}

@navikt/aksel-icons/figma-plugin/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "aksel-icons-figma-plugin",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite -c ./vite.config.ui.ts",
+    "build:icon-plugin": "tsc && npm run build:ui && npm run build:plugin",
+    "build:ui": "vite build -c ./vite.config.ui.ts --emptyOutDir",
+    "build:plugin": "vite build -c ./vite.config.plugin.ts",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@navikt/ds-css": "*",
+    "@navikt/ds-react": "*",
+    "fuse.js": "^6.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@figma/plugin-typings": "^1.62.0",
+    "@svgr/core": "^6.5.1",
+    "@types/node": "^18.15.11",
+    "@types/postcss-url": "^10.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "postcss": "^8.4.0",
+    "postcss-url": "^10.1.3",
+    "typescript": "^4.8.0",
+    "vite": "^4.2.0",
+    "vite-plugin-singlefile": "^0.13.3",
+    "vite-plugin-svgr": "^2.4.0"
+  }
+}

@navikt/aksel-icons/figma-plugin/scripts/vite/vite-inline-svg.ts

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-anonymous-default-export */
+import fs from "fs";
+import { Plugin } from "vite";
+
+function svgToDataURL(svgStr: string) {
+  const encoded = encodeURIComponent(svgStr)
+    .replace(/'/g, "%27")
+    .replace(/"/g, "%22");
+
+  const header = "data:image/svg+xml,";
+  const dataUrl = header + encoded;
+
+  return dataUrl;
+}
+
+export default function (): Plugin {
+  return {
+    name: "vite-inline-svg",
+    enforce: "pre",
+
+    async load(id) {
+      const [path, query] = id.split("?", 2);
+
+      if (!path.endsWith(".svg")) return;
+      if (query !== "inline") return;
+
+      const svg = await fs.promises.readFile(path, "utf-8");
+      return `export default "${svgToDataURL(svg)}"`;
+    },
+  };
+}

@navikt/aksel-icons/figma-plugin/scripts/vite/vite-svgr-component.ts

@@ -0,0 +1,50 @@
+import { createFilter, FilterPattern } from "@rollup/pluginutils";
+import type { Config } from "@svgr/core";
+import fs from "fs";
+import type { Plugin } from "vite";
+import { transformWithEsbuild } from "vite";
+
+export interface ViteSvgrOptions {
+  svgrOptions?: Config;
+  esbuildOptions?: Parameters<typeof transformWithEsbuild>[2];
+  exclude?: FilterPattern;
+  include?: FilterPattern;
+}
+
+export default function viteSvgr({
+  svgrOptions,
+  esbuildOptions,
+  include = "**/*.svg?component",
+  exclude,
+}: ViteSvgrOptions = {}): Plugin {
+  const filter = createFilter(include, exclude);
+
+  return {
+    name: "vite-svgr-component",
+
+    async transform(code, id) {
+      if (filter(id)) {
+        const { transform } = await import("@svgr/core");
+        const svgCode = await fs.promises.readFile(
+          id.replace(/\?.*$/, ""),
+          "utf8"
+        );
+
+        const componentCode = await transform(svgCode, svgrOptions, {
+          filePath: id,
+          caller: { previousExport: null },
+        });
+
+        const res = await transformWithEsbuild(componentCode, id, {
+          loader: "jsx",
+          ...esbuildOptions,
+        });
+
+        return {
+          code: res.code,
+          map: null,
+        };
+      }
+    },
+  };
+}

@navikt/aksel-icons/figma-plugin/src/assets/logo.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.07318 54.5734C-0.692218 51.806 -0.690888 47.3204 2.07614 44.5546L38.6019 8.04512C38.7787 7.8684 38.9576 7.69433 39.1387 7.52295L39.1205 7.50476C42.7235 3.90124 47.1588 1.63753 51.8075 0.71364C53.8316 0.243049 55.9182 1.07479e-05 58.0297 1.01387e-05L142.517 0C157.695 5.55246e-06 170 12.3065 170 27.4874V111.958C170 113.916 169.791 115.852 169.386 117.737C168.522 122.523 166.241 127.103 162.542 130.803L162.533 130.794C162.342 130.997 162.148 131.197 161.95 131.395L125.425 167.925C122.659 170.692 118.174 170.692 115.408 167.925C112.642 165.158 112.642 160.673 115.408 157.906L151.933 121.376C153.698 119.61 154.917 117.4 155.48 115.008C155.999 111.779 155.014 108.355 152.525 105.866L64.1955 17.5236C61.632 14.9597 58.0865 13.9765 54.7698 14.574C52.4605 15.1572 50.3292 16.3547 48.6162 18.0669L12.0905 54.5764C9.32349 57.3422 4.83857 57.3409 2.07318 54.5734ZM80.8759 14.1688L155.833 89.1374V27.4874C155.833 20.1317 149.871 14.1688 142.517 14.1688L80.8759 14.1688Z" fill="#004367"/>
+<path d="M2.07466 167.925C-0.691554 165.158 -0.691554 160.673 2.07466 157.906L65.8247 94.1468C68.5909 91.3801 73.0758 91.3801 75.842 94.1468C78.6082 96.9134 78.6082 101.399 75.842 104.166L12.092 167.925C9.32579 170.692 4.84087 170.692 2.07466 167.925Z" fill="#004367"/>
+</svg>

@navikt/aksel-icons/figma-plugin/src/common/network/init.ts

@@ -0,0 +1,21 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-undef */
+import * as Networker from "monorepo-networker";
+import { NetworkMessages } from "@common/network/messages";
+import { NetworkSide } from "@common/network/sides";
+
+export const initializeNetwork = Networker.createInitializer({
+  messagesRegistry: NetworkMessages.registry,
+
+  initTransports: function (register) {
+    register(NetworkSide.PLUGIN, NetworkSide.UI, (message) => {
+      // @ts-ignore
+      figma.ui.postMessage(message);
+    });
+
+    register(NetworkSide.UI, NetworkSide.PLUGIN, (message) => {
+      // @ts-ignore
+      parent.postMessage({ pluginMessage: message }, "*");
+    });
+  },
+});

@navikt/aksel-icons/figma-plugin/src/common/network/messages.ts

@@ -0,0 +1,21 @@
+import { CreateRectMessage } from "@common/network/messages/CreateRectMessage";
+import { HelloMessage } from "@common/network/messages/HelloMessage";
+import { PingMessage } from "@common/network/messages/PingMessage";
+import { NetworkSide } from "@common/network/sides";
+import * as Networker from "monorepo-networker";
+
+export namespace NetworkMessages {
+  export const registry = new Networker.MessageTypeRegistry();
+
+  export const PING = registry.register(new PingMessage("ping"));
+
+  export const HELLO_PLUGIN = registry.register(
+    new HelloMessage(NetworkSide.PLUGIN)
+  );
+
+  export const HELLO_UI = registry.register(new HelloMessage(NetworkSide.UI));
+
+  export const CREATE_RECT = registry.register(
+    new CreateRectMessage("create-rect")
+  );
+}

@navikt/aksel-icons/figma-plugin/src/common/network/messages/CreateRectMessage.ts

@@ -0,0 +1,42 @@
+/* eslint-disable no-undef */
+import { NetworkSide } from "@common/network/sides";
+import * as Networker from "monorepo-networker";
+
+interface Payload {
+  width: number;
+  height: number;
+}
+
+export class CreateRectMessage extends Networker.MessageType<Payload> {
+  public receivingSide(): Networker.Side {
+    return NetworkSide.PLUGIN;
+  }
+
+  public handle(payload: Payload, from: Networker.Side): void {
+    // @ts-ignore
+    if (figma.editorType === "figma") {
+      // @ts-ignore
+      const rect = figma.createRectangle();
+      rect.x = 0;
+      rect.y = 0;
+      rect.name = "Plugin Rectangle # " + Math.floor(Math.random() * 9999);
+      rect.fills = [
+        {
+          type: "SOLID",
+          color: {
+            r: Math.random(),
+            g: Math.random(),
+            b: Math.random(),
+          },
+        },
+      ];
+      rect.resize(payload.width, payload.height);
+      // @ts-ignore
+      figma.currentPage.appendChild(rect);
+      // @ts-ignore
+      figma.viewport.scrollAndZoomIntoView([rect]);
+      // @ts-ignore
+      figma.closePlugin();
+    }
+  }
+}

@navikt/aksel-icons/figma-plugin/src/common/network/messages/HelloMessage.ts

@@ -0,0 +1,19 @@
+import * as Networker from "monorepo-networker";
+
+interface Payload {
+  text: string;
+}
+
+export class HelloMessage extends Networker.MessageType<Payload> {
+  constructor(private side: Networker.Side) {
+    super("hello-" + side.getName());
+  }
+
+  receivingSide(): Networker.Side {
+    return this.side;
+  }
+
+  handle(payload: Payload, from: Networker.Side) {
+    console.log(`${from.getName()} said "${payload.text}"`);
+  }
+}

@navikt/aksel-icons/figma-plugin/src/common/network/messages/PingMessage.ts

@@ -0,0 +1,17 @@
+import * as Networker from "monorepo-networker";
+import { NetworkSide } from "@common/network/sides";
+
+interface Payload {}
+
+type Response = string;
+
+export class PingMessage extends Networker.MessageType<Payload, Response> {
+  receivingSide(): Networker.Side {
+    return NetworkSide.PLUGIN;
+  }
+
+  handle(payload: Payload, from: Networker.Side): string {
+    console.log(from.getName(), "has pinged us!");
+    return `Pong, ${from.getName()}!`;
+  }
+}

@navikt/aksel-icons/figma-plugin/src/common/network/sides.ts

@@ -0,0 +1,24 @@
+/* eslint-disable no-undef */
+import * as Networker from "monorepo-networker";
+
+export namespace NetworkSide {
+  export const PLUGIN = Networker.Side.register(
+    new Networker.Side<MessageEvent<any>>("Plugin", {
+      // @ts-ignore
+      attachListener: (callback) => figma.ui.on("message", callback),
+      // @ts-ignore
+      detachListener: (callback) => figma.ui.off("message", callback),
+    })
+  );
+
+  export const UI = Networker.Side.register(
+    new Networker.Side("UI", {
+      shouldHandle: (event) => event.data?.pluginId != null,
+      messageGetter: (event) => event.data.pluginMessage,
+      attachListener: (callback) =>
+        window.addEventListener("message", callback),
+      detachListener: (callback) =>
+        window.removeEventListener("message", callback),
+    })
+  );
+}

@navikt/aksel-icons/figma-plugin/src/plugin/plugin.ts

@@ -0,0 +1,48 @@
+/* eslint-disable no-undef */
+
+figma.showUI(__html__, { width: 480, height: 600 });
+
+figma.ui.onmessage = (msg) => {
+  if (msg.type === "create-icon") {
+    const nodes = [];
+
+    const icon = figma.createNodeFromSvg(msg.svg);
+    icon.name = msg.name;
+    icon.resize(msg.size, msg.size);
+    nodes.push(icon);
+
+    figma.currentPage.appendChild(icon);
+
+    figma.viewport.scrollAndZoomIntoView(nodes);
+
+    figma.ui.postMessage({
+      type: "create-icon",
+      message: `Created ${msg.name} icon}`,
+    });
+  }
+};
+
+// https://github.com/figma/plugin-samples#icon-drag-and-drop
+figma.on("drop", (event) => {
+  const { files, node } = event;
+
+  if (files.length > 0 && files[0].type === "image/svg+xml") {
+    files[0].getTextAsync().then((text) => {
+      const newNode = figma.createNodeFromSvg(text);
+      newNode.name = `${files[0].name.replace(".svg", "")}Icon`;
+      newNode.resize(24, 24);
+
+      // We can only append page nodes to documents
+      if ("appendChild" in node && node.type !== "DOCUMENT") {
+        node.appendChild(newNode);
+      }
+
+      newNode.x = event.x;
+      newNode.y = event.y;
+
+      figma.currentPage.selection = [newNode];
+    });
+
+    return false;
+  }
+});

@navikt/aksel-icons/figma-plugin/src/ui/App.tsx

@@ -0,0 +1,193 @@
+import { Heading, Search, ToggleGroup } from "@navikt/ds-react";
+import Fuse from "fuse.js";
+import { useEffect, useMemo, useState } from "react";
+import * as Icons from "../../../";
+import meta from "../../../dist/metadata";
+import "./app.css";
+import { categorizeIcons, getFillIcon } from "./utils";
+
+const fuseStroke = new Fuse(
+  Object.values(meta).filter((x) => x.variant.toLowerCase() === "stroke"),
+  {
+    threshold: 0.2,
+    keys: [
+      { name: "name", weight: 3 },
+      { name: "category", weight: 2 },
+      { name: "sub_category", weight: 2 },
+      { name: "keywords", weight: 3 },
+      { name: "variant", weight: 1 },
+    ],
+    shouldSort: false,
+  }
+);
+
+const fuseFill = new Fuse(getFillIcon(Object.values(meta)), {
+  threshold: 0.2,
+  keys: [
+    { name: "name", weight: 3 },
+    { name: "category", weight: 2 },
+    { name: "sub_category", weight: 2 },
+    { name: "keywords", weight: 3 },
+    { name: "variant", weight: 1 },
+  ],
+  shouldSort: false,
+});
+
+const App = () => {
+  const [query, setQuery] = useState("");
+  const [toggle, setToggle] = useState<"stroke" | "fill">("stroke");
+
+  const [strokeIcons] = useState(
+    Object.values(meta).filter((x) => x.variant.toLowerCase() === "stroke")
+  );
+
+  const [fillIcons] = useState(getFillIcon(Object.values(meta)));
+
+  const categories = useMemo(() => {
+    if (toggle === "fill") {
+      return categorizeIcons(
+        query
+          ? fuseFill.search(query).map((result) => result.item as any)
+          : fillIcons
+      );
+    }
+    return categorizeIcons(
+      query
+        ? fuseStroke.search(query).map((result) => result.item as any)
+        : strokeIcons
+    );
+  }, [toggle, query, strokeIcons, fillIcons]);
+
+  const onCreate = (id: string, name: string) => {
+    let svg = document.getElementById(id)?.outerHTML;
+    let size = 24;
+    // eslint-disable-next-line no-restricted-globals
+    parent.postMessage(
+      {
+        pluginMessage: {
+          type: "create-icon",
+          svg,
+          size,
+          name,
+        },
+      },
+      "*"
+    );
+  };
+
+  useEffect(() => {
+    const dragEvent = (e) => {
+      // Don't proceed if the item was dropped inside the plugin window.
+      if (e.view.length === 0) {
+        return;
+      }
+
+      const file = new File([e.target.innerHTML], `${e.target.id}.svg`, {
+        type: "image/svg+xml",
+      });
+
+      window.parent.postMessage(
+        {
+          pluginDrop: {
+            clientX: e.clientX,
+            clientY: e.clientY,
+            files: [file],
+            name: e.target.id,
+          },
+        },
+        "*"
+      );
+    };
+
+    const icons = document.getElementsByClassName("icon-classname");
+    for (const icon of icons) {
+      icon.addEventListener("dragend", dragEvent);
+    }
+
+    return () => {
+      for (const icon of icons) {
+        icon.removeEventListener("dragend", dragEvent);
+      }
+    };
+  }, [categories]);
+
+  return (
+    <main tabIndex={-1} className="wrapper">
+      <form onSubmit={(e) => e.preventDefault()} className="form">
+        <div className="form-togglegroup">
+          <ToggleGroup
+            value={toggle}
+            onChange={(v) => setToggle(v as any)}
+            variant="neutral"
+          >
+            <ToggleGroup.Item value="stroke">Stroke</ToggleGroup.Item>
+            <ToggleGroup.Item value="fill">Fill</ToggleGroup.Item>
+          </ToggleGroup>
+        </div>
+        <div className="form-search">
+          <Search
+            variant="simple"
+            label="Ikonsøk"
+            style={{ border: "none" }}
+            placeholder="Søk"
+            autoComplete="off"
+            onChange={setQuery}
+            value={query}
+            clearButton={false}
+          />
+        </div>
+      </form>
+
+      <div className="categories">
+        {categories.map((cat) => {
+          return (
+            <div key={cat.category}>
+              <Heading level="2" size="small" spacing>
+                {cat.category}
+              </Heading>
+              <div className="sub-categories">
+                {cat.sub_categories.map((sub) => {
+                  return (
+                    <div key={sub.sub_category}>
+                      <Heading level="3" size="xsmall" className="sub-heading">
+                        {sub.sub_category}
+                      </Heading>
+                      <div className="icons-wrapper">
+                        {sub.icons.map((i) => {
+                          const T = Icons[`${i.id}Icon`];
+                          if (T === undefined) {
+                            console.log(i);
+                            return null;
+                          }
+                          return (
+                            <button
+                              key={i.id}
+                              id={i.id}
+                              onClick={() => {
+                                onCreate(`icon-id-${i.id}`, `${i.id}Icon`);
+                              }}
+                              draggable="true"
+                              className="icon-classname icon-button"
+                            >
+                              <T
+                                font-size="2rem"
+                                title={i.id}
+                                id={`icon-id-${i.id}`}
+                              />
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </main>
+  );
+};
+
+export default App;

@navikt/aksel-icons/figma-plugin/src/ui/app.css

@@ -0,0 +1,79 @@
+@import "@navikt/ds-css";
+
+.wrapper {
+  background-color: var(--a-bg-default);
+}
+
+.form {
+  border-bottom: 1px solid var(--a-border-subtle);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  height: fit-content;
+  width: 100%;
+  gap: 1rem;
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  background-color: var(--a-bg-default);
+}
+
+.form-togglegroup {
+  min-width: 10rem;
+}
+
+.form-search {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.categories {
+  display: grid;
+  width: 100%;
+  place-content: start;
+  gap: 2rem;
+  padding: 1.5rem;
+}
+
+.sub-categories {
+  display: grid;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+.sub-heading {
+  color: var(--a-text-subtle);
+  margin-bottom: 0.25rem;
+}
+
+.icons-wrapper {
+  gap: 0.125rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.icon-button {
+  min-height: 3rem;
+  min-width: 3rem;
+  border-radius: 2px;
+  display: grid;
+  place-content: center;
+  background-color: var(--a-surface-default);
+  cursor: pointer;
+  border: none;
+}
+
+.icon-button:hover {
+  background-color: var(--a-surface-hover);
+}
+
+.icon-button:active {
+  background-color: var(--a-surface-neutral-subtle-hover);
+}
+
+.icon-button:focus-visible {
+  outline: 2px solid var(--a-border-focus);
+}

@navikt/aksel-icons/figma-plugin/src/ui/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aksel icons</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

@navikt/aksel-icons/figma-plugin/src/ui/main.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

@navikt/aksel-icons/figma-plugin/src/ui/utils.ts

@@ -0,0 +1,56 @@
+import meta from "@navikt/aksel-icons/metadata";
+
+const subCategorizeIcons = (
+  icons: typeof meta[1][]
+): { sub_category: string; icons: typeof meta[1][] }[] => {
+  const categories: { sub_category: string; icons: typeof meta[1][] }[] = [];
+
+  for (const icon of icons) {
+    const i = categories.findIndex(
+      ({ sub_category }) => icon.sub_category === sub_category
+    );
+    i !== -1
+      ? categories[i].icons.push(icon)
+      : categories.push({ sub_category: icon.sub_category, icons: [icon] });
+  }
+  return categories.sort((a, b) =>
+    a.sub_category.localeCompare(b.sub_category)
+  );
+};
+
+export const categorizeIcons = (
+  icons: typeof meta[1][]
+): {
+  category: string;
+  sub_categories: { sub_category: string; icons: typeof meta[1][] }[];
+}[] => {
+  const categories: {
+    category: string;
+    icons: typeof meta[1][];
+  }[] = [];
+
+  for (const icon of icons) {
+    const i = categories.findIndex(
+      ({ category }) => icon.category === category
+    );
+    i !== -1
+      ? categories[i].icons.push(icon)
+      : categories.push({ category: icon.category, icons: [icon] });
+  }
+  return categories
+    .sort((a, b) => a.category.localeCompare(b.category))
+    .map((x) => ({ ...x, sub_categories: subCategorizeIcons(x.icons) }));
+};
+
+const noFill = (icon: typeof meta[1], icons: typeof meta[1][]) => {
+  const foundFill = icons.find(
+    (x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name
+  );
+  return !foundFill;
+};
+
+export const getFillIcon = (icons: typeof meta[1][]) => {
+  return icons.filter(
+    (x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z)
+  );
+};

@navikt/aksel-icons/figma-plugin/src/ui/vite-env.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="vite/client" />
+
+declare module "*.svg?component" {
+  import * as React from "react";
+
+  const ReactComponent: React.FunctionComponent<
+    React.ComponentProps<"svg"> & { title?: string }
+  >;
+
+  export default ReactComponent;
+}
+
+declare module "**/metadata.mjs" {
+  export type AkselIcon = {
+    id: string;
+    name: string;
+    category: string;
+    sub_category: "Time";
+    keywords: string[];
+    variant: "stroke" | "fill";
+    updated_at: Date;
+    created_at: Date;
+  };
+
+  declare const metadata: {
+    [iconId: string]: AkselIcon;
+  };
+
+  export default metadata;
+}

@navikt/aksel-icons/figma-plugin/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "CommonJS",
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "rootDir": ".",
+    "baseUrl": ".",
+    "outDir": "dist/",
+    "sourceMap": false,
+    "noImplicitAny": false,
+    "types": ["@figma/plugin-typings"]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.js",
+    "src/**/*.jsx"
+  ],
+  "exclude": ["src/common/**/*"]
+}

@navikt/aksel-icons/figma-plugin/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "vite.config.plugin.ts",
+    "vite.config.ui.ts",
+    "./scripts/vite/*.ts"
+  ]
+}

@navikt/aksel-icons/figma-plugin/vite.config.plugin.ts

@@ -0,0 +1,17 @@
+import path from "path";
+import { defineConfig } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+
+export default defineConfig({
+  plugins: [viteSingleFile()],
+  build: {
+    lib: {
+      name: "Aksel Icons",
+      entry: path.resolve(__dirname, "./src/plugin/plugin.ts"),
+      fileName: "plugin",
+      formats: ["es"],
+    },
+    emptyOutDir: false,
+    outDir: path.resolve(__dirname, "./dist"),
+  },
+});

@navikt/aksel-icons/figma-plugin/vite.config.ui.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from "vite";
+import path from "path";
+
+import { viteSingleFile } from "vite-plugin-singlefile";
+import react from "@vitejs/plugin-react";
+
+import inlineSvg from "./scripts/vite/vite-inline-svg";
+import svgComponent from "./scripts/vite/vite-svgr-component";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgComponent(), inlineSvg(), viteSingleFile()],
+  root: path.resolve(__dirname, "./src/ui/"),
+  build: {
+    outDir: path.resolve(__dirname, "./dist"),
+    rollupOptions: {
+      input: {
+        ui: path.relative(__dirname, "./src/ui/index.html"),
+      },
+      output: {
+        entryFileNames: "[name].js",
+      },
+    },
+  },
+});

@navikt/aksel-icons/package.json

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

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @navikt/aksel
 
+## 3.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.3.1
+
+## 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

@navikt/aksel/package.json

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

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-codemod
 
+## 3.3.1
+
+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3
 
 ## 3.2.2

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "3.2.3",
+  "version": "3.3.1",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -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.1",
+    "@navikt/ds-react": "^3.3.1",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css
 
+## 3.3.1
+
+## 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

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

@@ -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;

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "3.2.3",
+  "version": "3.3.1",
   "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.1",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @navikt/ds-react
 
+## 3.3.1
+
+### Patch Changes
+
+- [#2005](https://github.com/navikt/aksel/pull/2005) [`5533fbd5a`](https://github.com/navikt/aksel/commit/5533fbd5a3a2b3e08f3c818e2669daccafb6212a) Thanks [@cskrov](https://github.com/cskrov)! - Migrert `CopyButton` til `Clipboard API`
+
+  - `CopyButton` bruker nå [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).
+  - `execCommand()` er fjernet fordi den [er deprecated](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
+  - Nettlesere som ikke støtter `Clipboard API` vil falle tilbake på `window.prompt()`.
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.3.1
+
+## 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

@navikt/core/react/package.json

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

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

@@ -123,7 +123,7 @@ export const Link = () => (
 
 export const Loading = {
   render: () => (
-    <div className="colgap">
+    <div className="colgap chromatic-ignore">
       <div className="rowgap">
         {variants.map((variant) => (
           <Button key={variant} variant={variant} loading>
@@ -153,7 +153,7 @@ export const Loading = {
 };
 
 export const Icon = () => (
-  <div className="colgap">
+  <div className="colgap ">
     <div className="rowgap">
       {variants.map((variant) => (
         <Button
@@ -250,7 +250,7 @@ export const Disabled = () => (
 
 export const LoadingWithAs = {
   render: () => (
-    <div className="colgap">
+    <div className="colgap chromatic-ignore">
       <div className="rowgap">
         {variants.map((variant) => (
           <Button key={variant} variant={variant} loading size="small">

@navikt/core/react/src/form/search/Search.tsx

@@ -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

@navikt/core/react/src/form/search/search.stories.tsx

@@ -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>
+);

@navikt/core/react/src/popover/Popover.tsx

@@ -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(() => {

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -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 (

@navikt/core/react/src/util/copy.ts

@@ -1,81 +1,14 @@
-// https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
-
-const defaultMessage = "Kopier til utklippstavle: #{key}, Enter";
-
-function format(message) {
-  const copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
-  return message.replace(/#{\s*key\s*}/g, copyKey);
-}
-
-export default function copy(text) {
-  let debug,
-    message,
-    range,
-    selection,
-    mark,
-    success = false;
-  debug = process.env.NODE_ENV !== "production";
+export default async function copy(text: string): Promise<void> {
   try {
-    range = document.createRange();
-    selection = document.getSelection();
-
-    mark = document.createElement("span");
-    mark.textContent = text;
-    // avoid screen readers from reading out loud the text
-    mark.ariaHidden = "true";
-    // reset user styles for span element
-    mark.style.all = "unset";
-    // prevents scrolling to the end of the page
-    mark.style.position = "fixed";
-    mark.style.top = 0;
-    mark.style.clip = "rect(0, 0, 0, 0)";
-    // used to preserve spaces and line breaks
-    mark.style.whiteSpace = "pre";
-    // do not inherit user-select (it may be `none`)
-    mark.style.webkitUserSelect = "text";
-    mark.style.MozUserSelect = "text";
-    mark.style.msUserSelect = "text";
-    mark.style.userSelect = "text";
-    mark.addEventListener("copy", function (e) {
-      e.stopPropagation();
-    });
-
-    document.body.appendChild(mark);
-
-    range.selectNodeContents(mark);
-    selection.addRange(range);
-
-    const successful = document.execCommand("copy");
-    if (!successful) {
-      throw new Error("copy command was unsuccessful");
-    }
-    success = true;
+    await navigator.clipboard.writeText(text);
   } catch (err) {
-    debug && console.error("unable to copy using execCommand: ", err);
-    debug && console.warn("trying IE specific stuff");
-    try {
-      (window as any).clipboardData.setData("text", text);
-
-      success = true;
-    } catch (err) {
-      debug && console.error("unable to copy using clipboardData: ", err);
-      debug && console.error("falling back to prompt");
-      message = format(defaultMessage);
-      window.prompt(message, text);
-    }
-  } finally {
-    if (selection) {
-      if (typeof selection.removeRange == "function") {
-        selection.removeRange(range);
-      } else {
-        selection.removeAllRanges();
-      }
+    if (process.env.NODE_ENV !== "production") {
+      console.error("Unable to copy using Clipboard API", err);
     }
 
-    if (mark) {
-      document.body.removeChild(mark);
-    }
+    // Fallback for browsers that do not support the Clipboard API.
+    const copyKey = /mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl";
+    const message = `Kopier til utklippstavle: ${copyKey}+C, Enter`;
+    window.prompt(message, text);
   }
-
-  return success;
 }

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind
 
+## 3.3.1
+
+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3
 
 ## 3.2.2

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tokens
 
+## 3.3.1
+
+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3
 
 ## 3.2.2

@navikt/core/tokens/package.json

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-icons
 
+## 3.3.1
+
+## 3.3.0
+
+## 3.2.4
+
 ## 3.2.3
 
 ## 3.2.2

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "3.2.3",
+  "version": "3.3.1",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css-internal
 
+## 3.3.1
+
+## 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

@navikt/internal/css/package.json

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

@navikt/internal/css/timeline.css

@@ -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;
+}

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @navikt/ds-react-internal
 
+## 3.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`5533fbd5a`](https://github.com/navikt/aksel/commit/5533fbd5a3a2b3e08f3c818e2669daccafb6212a)]:
+  - @navikt/ds-react@3.3.1
+  - @navikt/aksel-icons@3.3.1
+
+## 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

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "3.2.3",
+  "version": "3.3.1",
   "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.1",
+    "@navikt/ds-react": "^3.3.1",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

@navikt/internal/react/src/timeline/Pin.tsx

@@ -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>
         )}
       </>
     );

@navikt/internal/react/src/timeline/period/ClickablePeriod.tsx

@@ -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>
         )}
       </>
     );

@navikt/internal/react/src/timeline/timeline.stories.tsx

@@ -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>
+  );
+};

README.md

@@ -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/>

aksel.nav.no/package.json

@@ -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.1",
+    "@navikt/ds-codemod": "^3.3.1",
+    "@navikt/ds-css": "^3.3.1",
+    "@navikt/ds-css-internal": "^3.3.1",
+    "@navikt/ds-icons": "^3.3.1",
+    "@navikt/ds-react": "^3.3.1",
+    "@navikt/ds-react-internal": "^3.3.1",
+    "@navikt/ds-tailwind": "^3.3.1",
+    "@navikt/ds-tokens": "^3.3.1"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -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);
             }),
         }))

aksel.nav.no/website/pages/eksempler/search/darkmode.tsx

@@ -12,5 +12,5 @@ const Example = () => {
 export default withDsExample(Example, "inverted");
 
 export const args = {
-  index: 6,
+  index: 7,
 };

aksel.nav.no/website/pages/eksempler/search/error.tsx

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

aksel.nav.no/website/pages/eksempler/search/input-size.tsx

@@ -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,
+};

aksel.nav.no/website/pages/eksempler/timeline-intern/active-periods.tsx

@@ -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>
       )}

aksel.nav.no/website/pages/eksempler/timeline-intern/aria-controls.tsx

@@ -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: 4,
+  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.",
+};

aksel.nav.no/website/sanity/interface/queries.js

@@ -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) => {

aksel.nav.no/website/sanity/schema/documents/grunnleggende/artikkel.tsx

@@ -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:

aksel.nav.no/website/types/sanity-schema.ts

@@ -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<{

examples/shadow-dom/package.json

@@ -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.1",
+    "@navikt/ds-react": "3.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package.json

@@ -25,6 +25,7 @@
     "@navikt/codemod",
     "@navikt/icons",
     "@navikt/aksel-icons",
+    "@navikt/aksel-icons/figma-plugin",
     "@navikt/aksel",
     "@navikt/community/*",
     "examples/*",

yarn.lock

@@ -2828,6 +2828,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/android-arm64@npm:0.17.19"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.15.18":
   version: 0.15.18
   resolution: "@esbuild/android-arm@npm:0.15.18"
@@ -2849,6 +2856,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/android-arm@npm:0.17.19"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/android-x64@npm:0.16.17"
@@ -2863,6 +2877,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/android-x64@npm:0.17.19"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/darwin-arm64@npm:0.16.17"
@@ -2877,6 +2898,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/darwin-arm64@npm:0.17.19"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/darwin-x64@npm:0.16.17"
@@ -2891,6 +2919,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/darwin-x64@npm:0.17.19"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/freebsd-arm64@npm:0.16.17"
@@ -2905,6 +2940,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/freebsd-arm64@npm:0.17.19"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/freebsd-x64@npm:0.16.17"
@@ -2919,6 +2961,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/freebsd-x64@npm:0.17.19"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-arm64@npm:0.16.17"
@@ -2933,6 +2982,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-arm64@npm:0.17.19"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-arm@npm:0.16.17"
@@ -2947,6 +3003,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-arm@npm:0.17.19"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-ia32@npm:0.16.17"
@@ -2961,6 +3024,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-ia32@npm:0.17.19"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.15.18":
   version: 0.15.18
   resolution: "@esbuild/linux-loong64@npm:0.15.18"
@@ -2982,6 +3052,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-loong64@npm:0.17.19"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-mips64el@npm:0.16.17"
@@ -2996,6 +3073,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-mips64el@npm:0.17.19"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-ppc64@npm:0.16.17"
@@ -3010,6 +3094,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-ppc64@npm:0.17.19"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-riscv64@npm:0.16.17"
@@ -3024,6 +3115,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-riscv64@npm:0.17.19"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-s390x@npm:0.16.17"
@@ -3038,6 +3136,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-s390x@npm:0.17.19"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/linux-x64@npm:0.16.17"
@@ -3052,6 +3157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/linux-x64@npm:0.17.19"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/netbsd-x64@npm:0.16.17"
@@ -3066,6 +3178,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/netbsd-x64@npm:0.17.19"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/openbsd-x64@npm:0.16.17"
@@ -3080,6 +3199,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/openbsd-x64@npm:0.17.19"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/sunos-x64@npm:0.16.17"
@@ -3094,6 +3220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/sunos-x64@npm:0.17.19"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/win32-arm64@npm:0.16.17"
@@ -3108,6 +3241,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/win32-arm64@npm:0.17.19"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/win32-ia32@npm:0.16.17"
@@ -3122,6 +3262,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/win32-ia32@npm:0.17.19"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.16.17":
   version: 0.16.17
   resolution: "@esbuild/win32-x64@npm:0.16.17"
@@ -3136,6 +3283,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.17.19":
+  version: 0.17.19
+  resolution: "@esbuild/win32-x64@npm:0.17.19"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^1.4.1":
   version: 1.4.1
   resolution: "@eslint/eslintrc@npm:1.4.1"
@@ -3160,6 +3314,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@figma/plugin-typings@npm:^1.62.0":
+  version: 1.64.0
+  resolution: "@figma/plugin-typings@npm:1.64.0"
+  checksum: 0f1816b0c38daa5e8d367e384dc6fb1b03d9f46e7ac28c14540080b0dce20afa44d995c2c8adb695090b943c371491dc0dc3fd39273dab5e1deda54c2cadb75c
+  languageName: node
+  linkType: hard
+
 "@floating-ui/core@npm:^1.2.0":
   version: 1.2.0
   resolution: "@floating-ui/core@npm:1.2.0"
@@ -3174,6 +3335,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 +3360,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 +3381,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 +3393,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 +4087,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^3.2.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^3.3.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3925,7 +4114,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.3.0
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3949,7 +4138,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-codemod@^3.2.2, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^3.3.0, @navikt/ds-codemod@workspace:@navikt/codemod":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
   dependencies:
@@ -3976,7 +4165,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.3.0, @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 +4176,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@*, @navikt/ds-css@3.3.0, @navikt/ds-css@^3.3.0, @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.3.0
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -4004,7 +4193,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@^3.2.2, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^3.3.0, @navikt/ds-icons@workspace:@navikt/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/icons"
   dependencies:
@@ -4040,8 +4229,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.3.0
+    "@navikt/ds-react": ^3.3.0
     "@rollup/plugin-babel": 6.0.2
     "@rollup/plugin-commonjs": 23.0.2
     "@rollup/plugin-node-resolve": ^15.0.1
@@ -4066,12 +4255,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.3.0, @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.3.0
+    "@navikt/ds-react": ^3.3.0
     clsx: ^1.1.1
     concurrently: 7.2.1
     copy-to-clipboard: ^3.3.1
@@ -4087,12 +4277,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@*, @navikt/ds-react@3.3.0, @navikt/ds-react@^3.3.0, @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.3.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -4128,11 +4318,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^3.2.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^3.3.0, @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.3.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -4143,7 +4333,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^3.2.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^3.3.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -4735,7 +4925,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^5.0.1":
+"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.2":
   version: 5.0.2
   resolution: "@rollup/pluginutils@npm:5.0.2"
   dependencies:
@@ -6664,7 +6854,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@svgr/core@npm:^6.2.1":
+"@svgr/core@npm:^6.2.1, @svgr/core@npm:^6.5.1":
   version: 6.5.1
   resolution: "@svgr/core@npm:6.5.1"
   dependencies:
@@ -7448,6 +7638,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^18.15.11":
+  version: 18.16.14
+  resolution: "@types/node@npm:18.16.14"
+  checksum: c11cb3c787236414efe58240ae71854971592554d82ff9d201876ce7cafd51c37aaa001c63602d002e8238614d7331bd6d48ac4c1c0caa826799980b6846fb08
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.1
   resolution: "@types/normalize-package-data@npm:2.4.1"
@@ -7469,6 +7666,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/postcss-url@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "@types/postcss-url@npm:10.0.0"
+  dependencies:
+    "@types/node": "*"
+    postcss: ^8.0.0
+  checksum: 6e818bb5768c6aa83fb9e18e6485ac512b89f3389a93e26f3352ee9c69b34115b6c02b0c83dc39a8237054982486471c9f006e3324f20e53f80c61bfa44f83dc
+  languageName: node
+  linkType: hard
+
 "@types/prettier@npm:^2.1.5":
   version: 2.7.2
   resolution: "@types/prettier@npm:2.7.2"
@@ -8052,7 +8259,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^3.0.0, @vitejs/plugin-react@npm:^3.0.1":
+"@vitejs/plugin-react@npm:^3.0.0, @vitejs/plugin-react@npm:^3.0.1, @vitejs/plugin-react@npm:^3.1.0":
   version: 3.1.0
   resolution: "@vitejs/plugin-react@npm:3.1.0"
   dependencies:
@@ -8298,19 +8505,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aksel-icons-figma-plugin@workspace:@navikt/aksel-icons/figma-plugin":
+  version: 0.0.0-use.local
+  resolution: "aksel-icons-figma-plugin@workspace:@navikt/aksel-icons/figma-plugin"
+  dependencies:
+    "@figma/plugin-typings": ^1.62.0
+    "@navikt/ds-css": "*"
+    "@navikt/ds-react": "*"
+    "@svgr/core": ^6.5.1
+    "@types/node": ^18.15.11
+    "@types/postcss-url": ^10.0.0
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18.0.0
+    "@vitejs/plugin-react": ^3.1.0
+    fuse.js: ^6.6.2
+    postcss: ^8.4.0
+    postcss-url: ^10.1.3
+    react: ^18.0.0
+    react-dom: ^18.0.0
+    typescript: ^4.8.0
+    vite: ^4.2.0
+    vite-plugin-singlefile: ^0.13.3
+    vite-plugin-svgr: ^2.4.0
+  languageName: unknown
+  linkType: soft
+
 "aksel.nav.no@workspace:aksel.nav.no":
   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.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
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -11248,6 +11480,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cuint@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "cuint@npm:0.2.2"
+  checksum: b8127a93a7f16ce120ffcb22108014327c9808b258ee20e7dbb4c6740d7cb0f0c12d18a054eb716b0f2470090666abaae8a082d3cd5ef0e94fa447dd155842c4
+  languageName: node
+  linkType: hard
+
 "cwd@npm:^0.9.1":
   version: 0.9.1
   resolution: "cwd@npm:0.9.1"
@@ -12804,6 +13043,83 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.17.5":
+  version: 0.17.19
+  resolution: "esbuild@npm:0.17.19"
+  dependencies:
+    "@esbuild/android-arm": 0.17.19
+    "@esbuild/android-arm64": 0.17.19
+    "@esbuild/android-x64": 0.17.19
+    "@esbuild/darwin-arm64": 0.17.19
+    "@esbuild/darwin-x64": 0.17.19
+    "@esbuild/freebsd-arm64": 0.17.19
+    "@esbuild/freebsd-x64": 0.17.19
+    "@esbuild/linux-arm": 0.17.19
+    "@esbuild/linux-arm64": 0.17.19
+    "@esbuild/linux-ia32": 0.17.19
+    "@esbuild/linux-loong64": 0.17.19
+    "@esbuild/linux-mips64el": 0.17.19
+    "@esbuild/linux-ppc64": 0.17.19
+    "@esbuild/linux-riscv64": 0.17.19
+    "@esbuild/linux-s390x": 0.17.19
+    "@esbuild/linux-x64": 0.17.19
+    "@esbuild/netbsd-x64": 0.17.19
+    "@esbuild/openbsd-x64": 0.17.19
+    "@esbuild/sunos-x64": 0.17.19
+    "@esbuild/win32-arm64": 0.17.19
+    "@esbuild/win32-ia32": 0.17.19
+    "@esbuild/win32-x64": 0.17.19
+  dependenciesMeta:
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: ac11b1a5a6008e4e37ccffbd6c2c054746fc58d0ed4a2f9ee643bd030cfcea9a33a235087bc777def8420f2eaafb3486e76adb7bdb7241a9143b43a69a10afd8
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1":
   version: 3.1.1
   resolution: "escalade@npm:3.1.1"
@@ -18034,7 +18350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2, make-dir@npm:^3.1.0":
+"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2, make-dir@npm:^3.1.0, make-dir@npm:~3.1.0":
   version: 3.1.0
   resolution: "make-dir@npm:3.1.0"
   dependencies:
@@ -18410,6 +18726,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:~2.5.2":
+  version: 2.5.2
+  resolution: "mime@npm:2.5.2"
+  bin:
+    mime: cli.js
+  checksum: dd3c93d433d41a09f6a1cfa969b653b769899f3bd573e7bfcea33bdc8b0cc4eba57daa2f95937369c2bd2b6d39d62389b11a4309fe40d1d3a1b736afdedad0ff
+  languageName: node
+  linkType: hard
+
 "mimer@npm:1.1.0":
   version: 1.1.0
   resolution: "mimer@npm:1.1.0"
@@ -18481,6 +18806,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:~3.0.4":
+  version: 3.0.8
+  resolution: "minimatch@npm:3.0.8"
+  dependencies:
+    brace-expansion: ^1.1.7
+  checksum: 850cca179cad715133132693e6963b0db64ab0988c4d211415b087fc23a3e46321e2c5376a01bf5623d8782aba8bdf43c571e2e902e51fdce7175c7215c29f8b
+  languageName: node
+  linkType: hard
+
 "minimist-options@npm:4.1.0, minimist-options@npm:^4.0.2":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
@@ -18820,6 +19154,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.6":
+  version: 3.3.6
+  resolution: "nanoid@npm:3.3.6"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3
+  languageName: node
+  linkType: hard
+
 "nanomatch@npm:^1.2.9":
   version: 1.2.13
   resolution: "nanomatch@npm:1.2.13"
@@ -21015,6 +21358,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-url@npm:^10.1.3":
+  version: 10.1.3
+  resolution: "postcss-url@npm:10.1.3"
+  dependencies:
+    make-dir: ~3.1.0
+    mime: ~2.5.2
+    minimatch: ~3.0.4
+    xxhashjs: ~0.2.2
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 5983dbd20eabc0ba394a80aec14b6d6fdb986632ff6a4d3a6f0afc478d639f8a753a5c1e2bc7b9f6692befdb578372e7b288ab3d29bfa6b0d3ee06afca645f06
+  languageName: node
+  linkType: hard
+
 "postcss-value-parser@npm:^3.3.0":
   version: 3.3.1
   resolution: "postcss-value-parser@npm:3.3.1"
@@ -21040,6 +21397,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.0.0, postcss@npm:^8.4.23":
+  version: 8.4.23
+  resolution: "postcss@npm:8.4.23"
+  dependencies:
+    nanoid: ^3.3.6
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 8bb9d1b2ea6e694f8987d4f18c94617971b2b8d141602725fedcc2222fdc413b776a6e1b969a25d627d7b2681ca5aabb56f59e727ef94072e1b6ac8412105a2f
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.0, postcss@npm:^8.4.18, postcss@npm:^8.4.19, postcss@npm:^8.4.21":
   version: 8.4.21
   resolution: "postcss@npm:8.4.21"
@@ -22839,6 +23207,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^3.21.0":
+  version: 3.23.0
+  resolution: "rollup@npm:3.23.0"
+  dependencies:
+    fsevents: ~2.3.2
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 0721065cf725c5611815be61d2b01f20b4d0027e17035f6e76384d38396b56cf6ed21a3db78eb004d9db4d24c8a6a19da4563b4ff96b5dd36f0a0f7a3baf85e8
+  languageName: node
+  linkType: hard
+
 "run-async@npm:^2.2.0, run-async@npm:^2.4.0":
   version: 2.4.1
   resolution: "run-async@npm:2.4.1"
@@ -23360,8 +23742,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.3.0
+    "@navikt/ds-react": 3.3.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0
@@ -26042,6 +26424,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-singlefile@npm:^0.13.3":
+  version: 0.13.5
+  resolution: "vite-plugin-singlefile@npm:0.13.5"
+  dependencies:
+    micromatch: ^4.0.5
+  peerDependencies:
+    rollup: ">=2.79.0"
+    vite: ">=3.2.0"
+  checksum: 97943405d9182152f1a926d2beccc7e5d933af4bfc13f006302eddfd29ca19d02b691e0ac4125c7eb2d772543014830ef3dcc5132cda6c162839051f97fbc358
+  languageName: node
+  linkType: hard
+
+"vite-plugin-svgr@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "vite-plugin-svgr@npm:2.4.0"
+  dependencies:
+    "@rollup/pluginutils": ^5.0.2
+    "@svgr/core": ^6.5.1
+  peerDependencies:
+    vite: ^2.6.0 || 3 || 4
+  checksum: 16b333a728ca9ca1904cad4dd288e1bc5ae50f4def578b94187c70c31eda596fb5bb2bd4c78b2f5bf22b61f9b1f1bbac1f8c464a80d2b887a138dbc187264ad9
+  languageName: node
+  linkType: hard
+
 "vite@npm:4.1.1, vite@npm:^4.0.1":
   version: 4.1.1
   resolution: "vite@npm:4.1.1"
@@ -26118,6 +26524,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^4.2.0":
+  version: 4.3.8
+  resolution: "vite@npm:4.3.8"
+  dependencies:
+    esbuild: ^0.17.5
+    fsevents: ~2.3.2
+    postcss: ^8.4.23
+    rollup: ^3.21.0
+  peerDependencies:
+    "@types/node": ">= 14"
+    less: "*"
+    sass: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 454a7c0c1bd1fd5611c9df28c62e3adbe75f48e87fc787179c5af60c4ab9a87aa0eda44be446d898851a135766d36f65f8e7d56317556aa807d30e561de369c4
+  languageName: node
+  linkType: hard
+
 "w3c-keyname@npm:^2.2.4":
   version: 2.2.6
   resolution: "w3c-keyname@npm:2.2.6"
@@ -26617,6 +27060,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xxhashjs@npm:~0.2.2":
+  version: 0.2.2
+  resolution: "xxhashjs@npm:0.2.2"
+  dependencies:
+    cuint: ^0.2.2
+  checksum: cf6baf05bafe5651dbf108008bafdb1ebe972f65228633f00b56c49d7a1e614a821fe3345c4eb27462994c7c954d982eae05871be6a48146f30803dd87f3c3b6
+  languageName: node
+  linkType: hard
+
 "y18n@npm:^3.2.1":
   version: 3.2.2
   resolution: "y18n@npm:3.2.2"