Version Packages (#2018)

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

.changeset/config.json

@@ -13,14 +13,20 @@
       "@navikt/ds-codemod",
       "@navikt/aksel-icons",
       "@navikt/aksel",
-      "@navikt/ds-icons"
+      "@navikt/ds-icons",
+      "@navikt/aksel-stylelint"
     ]
   ],
   "linked": [],
   "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,30 @@
 # @navikt/aksel-icons
 
+## 3.4.2
+
+## 3.4.1
+
+## 3.4.0
+
+## 3.3.1
+
+## 3.3.0
+
+## 3.2.4
+
+## 3.2.3
+
+### Patch Changes
+
+- [#1998](https://github.com/navikt/aksel/pull/1998) [`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner!
+
+  - :sparkles: FileParagraph
+  - :sparkles: FilePlus
+
+## 3.2.2
+
+## 3.2.1
+
 ## 3.2.0
 
 ## 3.1.3

@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/icons/Angle.yml

@@ -15,5 +15,5 @@ keywords:
   - skråning
   - helning
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 22.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/CurrencyExchange.yml

@@ -11,5 +11,5 @@ keywords:
   - handel
   - økonomi
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 16.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/EyeClosed.yml

@@ -7,5 +7,5 @@ keywords:
   - lukket
   - hidden
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 05.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/FileParagraph.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 4.75V19.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V19.5C18.75 20.1904 18.1904 20.75 17.5 20.75H6.5C5.80964 20.75 5.25 20.1904 5.25 19.5V4.5ZM9.96599 11.0256C9.96599 9.906 10.8749 9 11.9927 9C12.5664 9 13.0857 9.23917 13.4539 9.62112C13.7414 9.91932 13.7327 10.3941 13.4345 10.6816C13.1363 10.9691 12.6615 10.9604 12.3741 10.6622C12.2767 10.5613 12.1424 10.5 11.9927 10.5C11.7016 10.5 11.466 10.7362 11.466 11.0256C11.466 11.2386 11.5945 11.4305 11.7915 11.5116L13.7023 12.2984C14.5828 12.661 15.039 13.6373 14.7523 14.5454C14.6107 14.9939 14.3133 15.3485 13.9395 15.57C13.9933 15.7527 14.0218 15.9449 14.0218 16.1418C14.0218 17.2614 13.1128 18.1674 11.995 18.1674C11.0546 18.1674 10.264 17.5278 10.0337 16.6602C9.92739 16.2599 10.1658 15.8492 10.5661 15.7429C10.9665 15.6366 11.3772 15.875 11.4835 16.2753C11.5434 16.5012 11.7509 16.6674 11.995 16.6674C12.2862 16.6674 12.5218 16.4312 12.5218 16.1418C12.5218 15.9288 12.3932 15.7369 12.1963 15.6558L10.2855 14.869C9.40497 14.5065 8.9487 13.5301 9.23544 12.6221C9.37709 12.1735 9.67447 11.8189 10.0483 11.5974C9.99448 11.4147 9.96599 11.2225 9.96599 11.0256ZM10.8566 13.482L12.6473 14.2194C12.6562 14.2222 12.6651 14.2252 12.6739 14.2284L12.8915 14.3067C13.0695 14.3708 13.265 14.274 13.3219 14.0937C13.374 13.9287 13.2911 13.7513 13.1311 13.6854L11.3404 12.9481C11.3315 12.9452 11.3227 12.9422 11.3138 12.939L11.0962 12.8607C10.9183 12.7966 10.7228 12.8934 10.6658 13.0738C10.6137 13.2387 10.6966 13.4161 10.8566 13.482Z" fill="#262626"/>
+</svg>

@navikt/aksel-icons/icons/FileParagraph.yml

@@ -0,0 +1,17 @@
+name: FileParagraph
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Stroke
+updated_at: 22.05.2023
+created_at: 22.05.2023

@navikt/aksel-icons/icons/FileParagraphFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.25 7.5V3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V19.5C5.25 20.1904 5.80964 20.75 6.5 20.75H17.5C18.1904 20.75 18.75 20.1904 18.75 19.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5ZM15 7.25C14.8619 7.25 14.75 7.13807 14.75 7V4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98071 17.9298 7.25 17.7071 7.25H15ZM9.96599 11.0256C9.96599 9.906 10.8749 9 11.9927 9C12.5664 9 13.0857 9.23917 13.4539 9.62112C13.7414 9.91932 13.7327 10.3941 13.4345 10.6816C13.1363 10.9691 12.6615 10.9604 12.3741 10.6622C12.2767 10.5613 12.1424 10.5 11.9927 10.5C11.7016 10.5 11.466 10.7362 11.466 11.0256C11.466 11.2386 11.5945 11.4305 11.7915 11.5116L13.7023 12.2984C14.5828 12.661 15.039 13.6373 14.7523 14.5454C14.6318 14.927 14.3985 15.2407 14.1012 15.4622C14.0095 15.5306 13.9637 15.6466 13.9853 15.7589C14.0093 15.8836 14.0218 16.0117 14.0218 16.1418C14.0218 17.2614 13.1128 18.1674 11.995 18.1674C11.0546 18.1674 10.264 17.5278 10.0337 16.6602C9.92739 16.2599 10.1658 15.8492 10.5661 15.7429C10.9665 15.6366 11.3772 15.875 11.4835 16.2753C11.5434 16.5012 11.7509 16.6674 11.995 16.6674C12.2862 16.6674 12.5218 16.4312 12.5218 16.1418C12.5218 15.9288 12.3932 15.7369 12.1963 15.6558L10.2855 14.869C9.40497 14.5065 8.9487 13.5301 9.23544 12.6221C9.35598 12.2404 9.58928 11.9267 9.8865 11.7052C9.97822 11.6368 10.024 11.5208 10.0024 11.4085C9.97844 11.2838 9.96599 11.1557 9.96599 11.0256ZM10.8566 13.482L12.6473 14.2194C12.6562 14.2222 12.6651 14.2252 12.6739 14.2284L12.8915 14.3067C13.0695 14.3708 13.265 14.274 13.3219 14.0937C13.374 13.9287 13.2911 13.7513 13.1311 13.6854L11.3404 12.9481C11.3315 12.9452 11.3227 12.9422 11.3138 12.939L11.0962 12.8607C10.9183 12.7966 10.7228 12.8934 10.6658 13.0738C10.6137 13.2387 10.6966 13.4161 10.8566 13.482Z" fill="#262626"/>
+</svg>

@navikt/aksel-icons/icons/FileParagraphFill.yml

@@ -0,0 +1,17 @@
+name: FileParagraphFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Fill
+updated_at: 22.05.2023
+created_at: 22.05.2023

@navikt/aksel-icons/icons/FilePlus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 19.25V4.75H13.25V7.5C13.25 8.19036 13.8096 8.75 14.5 8.75H17.25V19.25H6.75ZM16.1893 7.25L14.75 5.81066V7.25H16.1893ZM6.5 3.25C5.80964 3.25 5.25 3.80964 5.25 4.5V19.5C5.25 20.1904 5.80964 20.75 6.5 20.75H17.5C18.1904 20.75 18.75 20.1904 18.75 19.5V8C18.75 7.80109 18.671 7.61032 18.5303 7.46967L14.5303 3.46967C14.3897 3.32902 14.1989 3.25 14 3.25H6.5ZM9.12868 14C9.12868 13.5858 9.46447 13.25 9.87868 13.25H11.25V11.8787C11.25 11.4645 11.5858 11.1287 12 11.1287C12.4142 11.1287 12.75 11.4645 12.75 11.8787V13.25H14.1213C14.5355 13.25 14.8713 13.5858 14.8713 14C14.8713 14.4142 14.5355 14.75 14.1213 14.75H12.75V16.1213C12.75 16.5355 12.4142 16.8713 12 16.8713C11.5858 16.8713 11.25 16.5355 11.25 16.1213V14.75H9.87868C9.46447 14.75 9.12868 14.4142 9.12868 14Z" fill="#262626"/>
+</svg>

@navikt/aksel-icons/icons/FilePlus.yml

@@ -0,0 +1,17 @@
+name: FilePlus
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Stroke
+updated_at: 22.05.2023
+created_at: 22.05.2023

@navikt/aksel-icons/icons/FilePlusFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.25 7.5V3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V19.5C5.25 20.1904 5.80964 20.75 6.5 20.75H17.5C18.1904 20.75 18.75 20.1904 18.75 19.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5ZM15 7.25C14.8619 7.25 14.75 7.13807 14.75 7V4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98071 17.9298 7.25 17.7071 7.25H15ZM12.0001 11.1287C12.4143 11.1287 12.7501 11.4645 12.7501 11.8787V13C12.7501 13.1381 12.862 13.25 13.0001 13.25H14.1214C14.5356 13.25 14.8714 13.5858 14.8714 14C14.8714 14.4142 14.5356 14.75 14.1214 14.75H13.0001C12.862 14.75 12.7501 14.8619 12.7501 15V16.1213C12.7501 16.5355 12.4143 16.8713 12.0001 16.8713C11.5858 16.8713 11.2501 16.5355 11.2501 16.1213V15C11.2501 14.8619 11.1381 14.75 11.0001 14.75H9.87874C9.46453 14.75 9.12874 14.4142 9.12874 14C9.12874 13.5858 9.46453 13.25 9.87874 13.25H11.0001C11.1381 13.25 11.2501 13.1381 11.2501 13V11.8787C11.2501 11.4645 11.5858 11.1287 12.0001 11.1287Z" fill="#262626"/>
+</svg>

@navikt/aksel-icons/icons/FilePlusFill.yml

@@ -0,0 +1,17 @@
+name: FilePlusFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - error
+  - feil
+  - feilmelding
+  - corrupt
+  - bad file
+  - korrupt fil
+variant: Fill
+updated_at: 22.05.2023
+created_at: 22.05.2023

@navikt/aksel-icons/icons/InformationSquare.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.25C3.58579 3.25 3.25 3.58579 3.25 4V20C3.25 20.4142 3.58579 20.75 4 20.75H20C20.4142 20.75 20.75 20.4142 20.75 20V4C20.75 3.58579 20.4142 3.25 20 3.25H4ZM4.75 19.25V4.75H19.25V19.25H4.75ZM12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7ZM10.5 10.25C10.0858 10.25 9.75 10.5858 9.75 11C9.75 11.4142 10.0858 11.75 10.5 11.75H11.25V15.75H10.5C10.0858 15.75 9.75 16.0858 9.75 16.5C9.75 16.9142 10.0858 17.25 10.5 17.25H12H13.5C13.9142 17.25 14.25 16.9142 14.25 16.5C14.25 16.0858 13.9142 15.75 13.5 15.75H12.75V11C12.75 10.5858 12.4142 10.25 12 10.25H10.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.25C3.58579 3.25 3.25 3.58579 3.25 4V20C3.25 20.4142 3.58579 20.75 4 20.75H20C20.4142 20.75 20.75 20.4142 20.75 20V4C20.75 3.58579 20.4142 3.25 20 3.25H4ZM4.75 19.25V4.75H19.25V19.25H4.75ZM12 6.75C11.4477 6.75 11 7.19772 11 7.75C11 8.30228 11.4477 8.75 12 8.75C12.5523 8.75 13 8.30228 13 7.75C13 7.19772 12.5523 6.75 12 6.75ZM10.5 10C10.0858 10 9.75 10.3358 9.75 10.75C9.75 11.1642 10.0858 11.5 10.5 11.5H11.25V15.5H10.5C10.0858 15.5 9.75 15.8358 9.75 16.25C9.75 16.6642 10.0858 17 10.5 17H12H13.5C13.9142 17 14.25 16.6642 14.25 16.25C14.25 15.8358 13.9142 15.5 13.5 15.5H12.75V10.75C12.75 10.3358 12.4142 10 12 10H10.5Z" fill="#262626"/>
 </svg>

@navikt/aksel-icons/icons/InformationSquareFill.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8ZM9.75 11C9.75 10.5858 10.0858 10.25 10.5 10.25H12C12.4142 10.25 12.75 10.5858 12.75 11V15.75H13.5C13.9142 15.75 14.25 16.0858 14.25 16.5C14.25 16.9142 13.9142 17.25 13.5 17.25H12H10.5C10.0858 17.25 9.75 16.9142 9.75 16.5C9.75 16.0858 10.0858 15.75 10.5 15.75H11.25V11.75H10.5C10.0858 11.75 9.75 11.4142 9.75 11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 7.75C11 7.19772 11.4477 6.75 12 6.75C12.5523 6.75 13 7.19772 13 7.75C13 8.30228 12.5523 8.75 12 8.75C11.4477 8.75 11 8.30228 11 7.75ZM9.75 10.75C9.75 10.3358 10.0858 10 10.5 10H12C12.4142 10 12.75 10.3358 12.75 10.75V15.5H13.5C13.9142 15.5 14.25 15.8358 14.25 16.25C14.25 16.6642 13.9142 17 13.5 17H12H10.5C10.0858 17 9.75 16.6642 9.75 16.25C9.75 15.8358 10.0858 15.5 10.5 15.5H11.25V11.5H10.5C10.0858 11.5 9.75 11.1642 9.75 10.75Z" fill="#262626"/>
 </svg>

@navikt/aksel-icons/icons/Percent.yml

@@ -5,5 +5,5 @@ keywords:
   - "%"
   - prosent
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 05.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Waves.yml

@@ -15,5 +15,5 @@ keywords:
   - strand
   - natur
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 08.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "3.2.0",
+  "version": "3.4.2",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -53,7 +53,7 @@
   "scripts": {
     "create-icons": "svgr --silent --index-template config/index-template.js --out-dir src icons",
     "copy-util": "copyfiles util/* src",
-    "copy-svg": "copyfiles -f icons/*.svg dist/svg/",
+    "copy-svg": "copyfiles -f 'icons/*.svg' dist/svg/",
     "copy": "yarn copy-util && yarn copy-svg",
     "update-metadata": "node config/metadata.js",
     "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",

@navikt/aksel-stylelint/.gitignore

@@ -0,0 +1 @@
+/dist

@navikt/aksel-stylelint/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @navikt/aksel-stylelint
+
+## 3.4.2
+
+### Patch Changes
+
+- [#2017](https://github.com/navikt/aksel/pull/2017) [`7615dbbb5`](https://github.com/navikt/aksel/commit/7615dbbb54c7c96e2252366188547b27b2ac1142) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add missing dependency
+
+## 3.4.1
+
+### Patch Changes
+
+- :bug: Stylelint hotfix, inkluderer nå dist-mappe (kanskje..)
+
+## 3.4.0
+
+### Minor Changes
+
+- [#1973](https://github.com/navikt/aksel/pull/1973) [`61c411421`](https://github.com/navikt/aksel/commit/61c4114214841ec42f48e1abd0d72d2a42d265ab) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add stylelint plugin

@navikt/aksel-stylelint/README.md

@@ -0,0 +1,173 @@
+# Aksel stylelint rules & plugins
+
+This stylelint plugin is useful when working with the [Aksel design system](https://aksel.nav.no/).
+
+It is designed to be useful for both _internal_ and _external_ developers, so _everyone_ should install this 🙌.
+
+> **Warning**
+> The version of this plugin **_MUST MATCH_** the version of the other design system packages used in your project for the linting to make sense!
+> Otherwise you are very likely to get _incorrect_ errors that tell you to use the wrong token names.
+
+# Install
+
+```bash
+yarn add -D @navikt/aksel-stylelint
+npm install -D @navikt/aksel-stylelint
+```
+
+### How to configure
+
+It should be sufficient for most cases to extend the recommended defaults.
+
+```js
+  "stylelint": {
+    "extends": [
+        ...
+        "@navikt/aksel-stylelint/recommended"
+    ],
+    ...
+  }
+```
+
+## aksel/design-token-exists
+
+Makes sure all referenced CSS-variables with prefix `--a-` or `--ac-` exists in Aksels token-collection. As a side-effect Aksel reserves these prefixes for its design-tokens.
+
+❌ Incorrect:
+
+```css
+html {
+    --a-my-own-color-bg-hover: #f2f2f2;
+    ^^^^^^^^^^^^^^^^^^^^^^^^^
+    background-color: var(--a-my-own-color-bg-hover);
+                          ^^^^^^^^^^^^^^^^^^^^^^^^^
+}
+```
+
+✅ Correct:
+
+```css
+html {
+  background-color: var(--custom-tag-surface-default);
+}
+```
+
+## aksel/design-token-no-global-override
+
+Makes sure you don't override global level tokens with `--a-`-prefix. Global/Semantic tokens are supposed to be used as is, and not overridden. That is unless you are theming your solution to match a different sub-brands or brands. In those cases we encourage to make all the changes in a single 'config'-file, then disable the rule for that file only.
+
+❌ Incorrect:
+
+```css
+div {
+    --a-surface-default: #f2f2f2;
+    ^^^^^^^^^^^^^^^^^^^
+}
+```
+
+✅ Correct:
+
+```css
+div {
+  background-color: var(--a-surface-default);
+}
+```
+
+## aksel/design-token-no-component-reference
+
+Makes sure you don't reference component level tokens with `--ac-`-prefix. Component level tokens are only supposed to be overridden, not referenced.
+This is since they are by default not defined, leading to unknown side-effects when referenced incorrectly.
+
+❌ Incorrect:
+
+```css
+html {
+    stroke: var(--ac-button-loader-stroke);
+                ^^^^^^^^^^^^^^^^^^^^^^^^^
+}
+```
+
+✅ Correct:
+
+```css
+html {
+  --ac-button-loader-stroke: lawngreen;
+}
+```
+
+## aksel/no-internal-tokens
+
+Disallows use or override of internal Aksel design tokens. Internal tokens are not supposed to be used outside the design system, and may be changed or removed without warning. Be aware that the rule simply checks the prefix of the token, and not if it actually exists in the design system. Even if it doesn't exist, using design system prefixes should be avoided.
+
+❌ Incorrect:
+
+```css
+a {
+  --__ac-some-property: pink;
+} ^^^^^^^^^^^^^^^^^^^^
+```
+
+```css
+a {
+  color: var(--__ac-some-property);
+}            ^^^^^^^^^^^^^^^^^^^^
+```
+
+✅ Correct:
+
+```css
+a {
+  --some-property: pink;
+}
+```
+
+```css
+a {
+  color: var(--some-property);
+}
+```
+
+## aksel/no-class-override
+
+Warns when trying to override design system styling by using class selectors that starts with "navds-" or "navdsi-". Overriding styles in the design system is discouraged. We want to have consistent look and feel across applications. Even if it seems to work fine now, it might break on subsequent updates in the design system.
+
+❌ Incorrect:
+
+```css
+.navds-button {
+^^^^^^^^^^^^^
+}
+```
+
+```css
+.some-class .navdsi-header {
+}           ^^^^^^^^^^^^^^
+```
+
+✅ Correct:
+
+```css
+.some-class {
+}
+```
+
+## aksel/no-deprecated-classes
+
+Warns when you try to use deprecated class names.
+
+❌ Incorrect:
+
+```css
+.navdsi-deprecated-example {
+^^^^^^^^^^^^^^^^^^^^^^^^^^
+}
+```
+
+✅ Correct:
+
+```css
+.guaranteed-not-deprecated {
+}
+```
+
+🐛 Found a bug? https://github.com/navikt/aksel/issues

@navikt/aksel-stylelint/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@navikt/aksel-stylelint",
+  "version": "3.4.2",
+  "author": "Aksel | NAV",
+  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/aksel.git",
+    "directory": "@navikt/aksel-stylelint"
+  },
+  "keywords": [
+    "aksel",
+    "stylelint",
+    "config",
+    "linting"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "exports": {
+    "./recommended": "./dist/recommended.js"
+  },
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "test": "jest",
+    "copy-internal-tokens": "node -e \"require('fs').copyFileSync('../internal/css/tokens.json','dist/internal-tokens.json')\"",
+    "copy-css": "node -e \"require('fs').copyFileSync('../core/css/dist/index.css','dist/index.css')\"",
+    "copy-tokens": "node -e \"require('fs').copyFileSync('../core/css/tokens.json','dist/tokens.json')\"",
+    "copy": "yarn copy-internal-tokens && yarn copy-css && yarn copy-tokens",
+    "build": "tsc -p . && concurrently \"yarn:copy-*\"",
+    "watch:lint": "tsc --watch -p .",
+    "dev": "yarn watch:lint"
+  },
+  "devDependencies": {
+    "@navikt/ds-css": "^3.4.2",
+    "@navikt/ds-tokens": "^3.4.2",
+    "@types/jest": "^29.0.0",
+    "concurrently": "7.2.1",
+    "copyfiles": "2.4.1",
+    "jest": "^29.0.0",
+    "jest-preset-stylelint": "^6.1.0",
+    "postcss-selector-parser": "^6.0.13",
+    "postcss-value-parser": "^4.2.0",
+    "stylelint": "^14.8.5",
+    "typescript": "^4.8.0"
+  },
+  "jest": {
+    "preset": "jest-preset-stylelint",
+    "testMatch": [
+      "**/*.test.ts"
+    ],
+    "transform": {
+      "^.+\\.ts?$": "ts-jest"
+    }
+  }
+}

@navikt/aksel-stylelint/src/deprecations.ts

@@ -0,0 +1,8 @@
+type DeprecatedList = { classes: string[]; message: string }[];
+
+export const deprecations: DeprecatedList = [
+  {
+    classes: ["navdsi-deprecated-example", "navdsi-other-deprecated-example"],
+    message: "Removed in vX.X.X, see documentation [link] for more information",
+  },
+];

@navikt/aksel-stylelint/src/index.ts

@@ -0,0 +1,8 @@
+import { createPlugin } from "stylelint";
+import { rules } from "./rules";
+
+const rulesPlugins = Object.keys(rules).map((ruleName) => {
+  return createPlugin(`${ruleName}`, rules[ruleName]);
+});
+
+export default rulesPlugins;

@navikt/aksel-stylelint/src/recommended.ts

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: ["."],
+  rules: {
+    "aksel/design-token-exists": true,
+    "aksel/no-internal-tokens": true,
+    "aksel/no-class-override": [true, { severity: "warning" }],
+    "aksel/no-deprecated-classes": true,
+    "aksel/design-token-no-global-override": true,
+    "aksel/design-token-no-component-reference": true,
+  },
+};

@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.test.ts

@@ -0,0 +1,94 @@
+import { getTestRule } from "jest-preset-stylelint";
+import rule, { messages } from ".";
+
+getTestRule()({
+  plugins: ["./dist/index.js"],
+  ruleName: rule.ruleName,
+  config: true,
+
+  accept: [
+    {
+      code: ".foo { --ac-accordion-header-bg-hover: 1px; --ac-header-bg: red; }",
+      description: "existing '--ac-' tokens overridden",
+    },
+    {
+      code: ".foo { --my-custom-color: var(--a-orange-800); }",
+      description: "existing '--a-' token referenced",
+    },
+  ],
+
+  reject: [
+    {
+      code: ".foo { --a-does-not-exist: 1px }",
+      description: "attempt to override nonexistent '--a-' token",
+      warnings: [
+        {
+          message: messages.propNotExist({ prop: "--a-does-not-exist" }),
+          line: 1,
+          endLine: 1,
+          column: 8,
+          endColumn: 26,
+        },
+      ],
+    },
+    {
+      code: ".foo \n { \n --ac-does-not-exist: 1px; \n }",
+      description: "attempt to override nonexistent '--ac-' token",
+      message: messages.propNotExist({ prop: "--ac-does-not-exist" }),
+      line: 3,
+      endLine: 3,
+      column: 2,
+      endColumn: 21,
+    },
+
+    {
+      code: ".foo { color: var(--a-bar) }",
+      description: "attempt to use nonexistent token",
+      message: messages.valueNotExist({ prop: "color" }, "--a-bar"),
+      line: 1,
+      endLine: 1,
+      column: 19,
+      endColumn: 26,
+    },
+    {
+      code: ".foo { width: var(--ac-bar, --a-baz) }",
+      description: "attempt to use two nonexistent tokens in one var()",
+      warnings: [
+        {
+          message: messages.valueNotExist({ prop: "width" }, "--ac-bar"),
+          line: 1,
+          endLine: 1,
+          column: 19,
+          endColumn: 27,
+        },
+        {
+          message: messages.valueNotExist({ prop: "width" }, "--a-baz"),
+          line: 1,
+          endLine: 1,
+          column: 29,
+          endColumn: 36,
+        },
+      ],
+    },
+    {
+      code: ".foo { padding: var(--a-bar) var(--a-baz); }",
+      description: "attempt to use two nonexistent tokens as separate vars",
+      warnings: [
+        {
+          message: messages.valueNotExist({ prop: "padding" }, "--a-bar"),
+          line: 1,
+          endLine: 1,
+          column: 21,
+          endColumn: 28,
+        },
+        {
+          message: messages.valueNotExist({ prop: "padding" }, "--a-baz"),
+          line: 1,
+          endLine: 1,
+          column: 34,
+          endColumn: 41,
+        },
+      ],
+    },
+  ],
+});

@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts

@@ -0,0 +1,96 @@
+import stylelint from "stylelint";
+import valueParser from "postcss-value-parser";
+import { readFileSync } from "node:fs";
+import { Node as PostCSSNode } from "postcss";
+
+import { isCustomProperty, tokenExists } from "../../utils";
+
+const packageJson = JSON.parse(
+  readFileSync(`${__dirname}/../../../package.json`).toString()
+);
+
+const ruleName = "aksel/design-token-exists";
+
+const prefix_a = "--a-";
+const prefix_ac = "--ac-";
+export const controlledPrefixes = [prefix_a, prefix_ac];
+
+const packageVersion = packageJson.version;
+
+export const messages = stylelint.utils.ruleMessages(ruleName, {
+  propNotExist: (node: any) =>
+    `("${node.prop}") does not exist in the design system.\n\n` +
+    `Property "${node.prop}" has a name that seems like it intends to override a design token by ` +
+    `using one of the following prefixes [${controlledPrefixes}]. ` +
+    `However, that token doesn"t seem to exist in the design system. ` +
+    `\n\nVersion: ${packageVersion}`,
+  valueNotExist: (node: any, invalidValues: string) =>
+    `("${invalidValues}") does not exist in the design system.\n\n` +
+    `Property "${node.prop}" has offending value "${invalidValues}", ` +
+    `and the value seems like it intends to reference a design token by ` +
+    `using one of the following prefixes [${controlledPrefixes}]. ` +
+    `However, that token doesn't seem to exist in the design system. ` +
+    `\n\nVersion: ${packageVersion}`,
+});
+
+const checkDeclValue = (
+  controlledPrefixes: string[],
+  value: string,
+  postcssResult: stylelint.PostcssResult,
+  rootNode: PostCSSNode
+) => {
+  valueParser(value).walk((node) => {
+    if (
+      node.type === "word" &&
+      isCustomProperty(node.value) &&
+      controlledPrefixes.some((prefix) => node.value.startsWith(prefix)) &&
+      !tokenExists(controlledPrefixes, node.value)
+    ) {
+      stylelint.utils.report({
+        message: messages.valueNotExist(rootNode, node.value),
+        node: rootNode,
+        result: postcssResult,
+        ruleName,
+        word: node.value,
+      });
+    }
+  });
+};
+
+const checkDeclProp = (
+  controlledPrefixes: string[],
+  prop: string,
+  postcssResult: stylelint.PostcssResult,
+  rootNode: PostCSSNode
+) => {
+  if (
+    isCustomProperty(prop) &&
+    controlledPrefixes.some((prefix) => prop.startsWith(prefix)) &&
+    !tokenExists(controlledPrefixes, prop)
+  ) {
+    stylelint.utils.report({
+      message: messages.propNotExist(rootNode),
+      node: rootNode,
+      result: postcssResult,
+      ruleName,
+      word: prop,
+    });
+  }
+};
+
+const ruleFunction: stylelint.Rule = () => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkDecls((node) => {
+      checkDeclValue(controlledPrefixes, node.value, postcssResult, node);
+      checkDeclProp(controlledPrefixes, node.prop, postcssResult, node);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = {};
+ruleFunction.meta = {
+  url: `https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#${ruleName}`,
+};
+
+export default ruleFunction;

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-component-reference/index.test.ts

@@ -0,0 +1,34 @@
+import { getTestRule } from "jest-preset-stylelint";
+import rule, { messages } from ".";
+
+getTestRule()({
+  plugins: ["./dist/index.js"],
+  ruleName: rule.ruleName,
+  config: true,
+
+  accept: [
+    {
+      code: ".foo { --ac-accordion-header-bg-hover: 1px; --ac-header-bg: red; }",
+      description: "existing '--ac-' tokens overridden",
+    },
+    {
+      code: ".foo { --my-custom-color: var(--a-orange-800); }",
+      description: "existing '--a-' token referenced",
+    },
+  ],
+
+  reject: [
+    {
+      code: ".foo { width: var(--ac-button-padding) }",
+      description: "attempt to use '--ac-' token",
+      message: messages.valueRefComponent(
+        { prop: "width" },
+        "--ac-button-padding"
+      ),
+      line: 1,
+      endLine: 1,
+      column: 19,
+      endColumn: 38,
+    },
+  ],
+});

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-component-reference/index.ts

@@ -0,0 +1,60 @@
+import stylelint from "stylelint";
+import { Node as PostCSSNode } from "postcss";
+import valueParser from "postcss-value-parser";
+
+import { getPackageVersion, isCustomProperty, tokenExists } from "../../utils";
+
+const ruleName = "aksel/design-token-no-component-reference";
+const packageVersion = getPackageVersion();
+
+const prefix_ac = "--ac-";
+
+export const messages = stylelint.utils.ruleMessages(ruleName, {
+  valueRefComponent: (node: any, invalidValue: string) =>
+    `Referencing ("${prefix_ac}*") not allowed.\n\n` +
+    `Property "${node.prop}" has offending value "${invalidValue}". ` +
+    `The value references a component level token ("${prefix_ac}"). ` +
+    `It is better to either reference a global level token ("--a-") or ` +
+    `create a custom token instead. ` +
+    `\n\nVersion: ${packageVersion}`,
+});
+
+const checkDeclValue = (
+  controlledPrefixes: string[],
+  value: string,
+  postcssResult: stylelint.PostcssResult,
+  rootNode: PostCSSNode
+) => {
+  valueParser(value).walk((node) => {
+    if (
+      node.type === "word" &&
+      isCustomProperty(node.value) &&
+      node.value.startsWith(prefix_ac) &&
+      tokenExists(controlledPrefixes, node.value)
+    ) {
+      stylelint.utils.report({
+        message: messages.valueRefComponent(rootNode, node.value),
+        node: rootNode,
+        result: postcssResult,
+        ruleName,
+        word: node.value,
+      });
+    }
+  });
+};
+
+const ruleFunction: stylelint.Rule = () => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkDecls((node) => {
+      checkDeclValue([prefix_ac], node.value, postcssResult, node);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = {};
+ruleFunction.meta = {
+  url: `https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#${ruleName}`,
+};
+
+export default ruleFunction;

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-global-override/index.test.ts

@@ -0,0 +1,44 @@
+import { getTestRule } from "jest-preset-stylelint";
+import rule, { messages } from ".";
+
+getTestRule()({
+  plugins: ["./dist/index.js"],
+  ruleName: rule.ruleName,
+  config: true,
+
+  accept: [
+    {
+      code: ".foo { --ac-accordion-header-bg-hover: 1px; --ac-header-bg: red; }",
+      description: "existing '--ac-' tokens overridden",
+    },
+    {
+      code: ".foo { --my-custom-color: var(--a-orange-800); }",
+      description: "existing '--a-' token referenced",
+    },
+  ],
+
+  reject: [
+    {
+      code: ".foo { --a-surface-action: 1px }",
+      description: "existing '--a-' token overridden",
+      message: messages.propOverrideGlobal({ prop: "--a-surface-action" }),
+      line: 1,
+      endLine: 1,
+      column: 8,
+      endColumn: 26,
+    },
+    {
+      code: ".foo { --a-does-not-exist: 1px }",
+      description: "attempt to override nonexistent '--a-' token",
+      warnings: [
+        {
+          message: messages.propOverrideGlobal({ prop: "--a-does-not-exist" }),
+          line: 1,
+          endLine: 1,
+          column: 8,
+          endColumn: 26,
+        },
+      ],
+    },
+  ],
+});

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-global-override/index.ts

@@ -0,0 +1,62 @@
+import stylelint from "stylelint";
+import { readFileSync } from "node:fs";
+
+import { Node as PostCSSNode } from "postcss";
+import { isCustomProperty } from "../../utils";
+
+const packageJson = JSON.parse(
+  readFileSync(`${__dirname}/../../../package.json`).toString()
+);
+
+const ruleName = "aksel/design-token-no-global-override";
+
+const prefix_a = "--a-";
+
+const packageVersion = packageJson.version;
+
+export const messages = stylelint.utils.ruleMessages(ruleName, {
+  propOverrideGlobal: (node: any) =>
+    `Overriding ("${node.prop}*") not allowed.\n\n` +
+    `Property "${node.prop}" tries to override a global level token ("${prefix_a}"), this is highly discouraged. ` +
+    `It is better to override a component level token ("--ac-") or create a custom token instead. ` +
+    `Overriding global tokens should only be done when creating custom global themes.` +
+    `\n\nVersion: ${packageVersion}`,
+});
+
+const checkDeclProp = (
+  controlledPrefixes: string[],
+  prop: string,
+  postcssResult: stylelint.PostcssResult,
+  rootNode: PostCSSNode
+) => {
+  if (
+    isCustomProperty(prop) &&
+    controlledPrefixes.some((prefix) => prop.startsWith(prefix))
+  ) {
+    if (prop.startsWith(prefix_a)) {
+      stylelint.utils.report({
+        message: messages.propOverrideGlobal(rootNode),
+        node: rootNode,
+        result: postcssResult,
+        ruleName,
+        word: prop,
+      });
+    }
+  }
+};
+
+const ruleFunction: stylelint.Rule = () => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkDecls((node) => {
+      checkDeclProp([prefix_a], node.prop, postcssResult, node);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = {};
+ruleFunction.meta = {
+  url: `https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#${ruleName}`,
+};
+
+export default ruleFunction;

@navikt/aksel-stylelint/src/rules/aksel-no-class-override/index.test.ts

@@ -0,0 +1,31 @@
+import { getTestRule } from "jest-preset-stylelint";
+import rule, { messages } from ".";
+
+getTestRule()({
+  plugins: ["./dist/index.js"],
+  ruleName: rule.ruleName,
+  config: true,
+
+  accept: [{ code: ".foo-navds-bar {}", description: "allowed class name" }],
+
+  reject: [
+    {
+      code: ".foo, \n .navds-button \n .bar {}",
+      description: "selector with disallowed class name .navds-*",
+      message: messages.unexpected("navds-button"),
+      line: 2,
+      endLine: 2,
+      column: 3,
+      endColumn: 15,
+    },
+    {
+      code: ".foo .navdsi-button \n .bar {}",
+      description: "selector with disallowed class name .navdsi-*",
+      message: messages.unexpected("navdsi-button"),
+      line: 1,
+      endLine: 1,
+      column: 7,
+      endColumn: 20,
+    },
+  ],
+});

@navikt/aksel-stylelint/src/rules/aksel-no-class-override/index.ts

@@ -0,0 +1,42 @@
+import stylelint from "stylelint";
+import selectorParser from "postcss-selector-parser";
+
+const ruleName = "aksel/no-class-override";
+const url =
+  "https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#aksel/no-class-override";
+const prefixes = ["navds-", "navdsi-"];
+
+export const messages = stylelint.utils.ruleMessages(ruleName, {
+  unexpected: (value) =>
+    `("${value}") not allowed.\n\n` +
+    `"${value}" looks like a class name used in the design system, ` +
+    `because it starts with "${prefixes.join('" or "')}". ` +
+    "It is not recommended to override the styling in the design system.",
+});
+
+const ruleFunction: stylelint.Rule = () => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkRules((node) => {
+      selectorParser((selectors) => {
+        selectors.walkClasses((className) => {
+          if (!prefixes.some((prefix) => className.value.startsWith(prefix))) {
+            return;
+          }
+          stylelint.utils.report({
+            message: messages.unexpected(className.value),
+            node,
+            result: postcssResult,
+            ruleName,
+            word: className.value,
+          });
+        });
+      }).processSync(node.selector);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = { url };
+
+export default ruleFunction;

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.test.ts

@@ -0,0 +1,44 @@
+import { getTestRule } from "jest-preset-stylelint";
+import rule, { messages } from ".";
+import { deprecations } from "../../deprecations";
+
+getTestRule()({
+  plugins: ["./dist/index.js"],
+  ruleName: rule.ruleName,
+  config: true,
+
+  accept: [
+    {
+      code: ".navds-foo, navdsi-bar, .baz {}",
+      description: "allowed class names",
+      // Allowed because this rule only checks deprecated class names. See also aksel/no-class-override.
+    },
+  ],
+
+  reject: [
+    {
+      code: ".foo, \n .navdsi-deprecated-example \n .bar {}",
+      description: "selector with deprecated class name 1",
+      message: messages.unexpected(
+        "navdsi-deprecated-example",
+        deprecations[0].message
+      ),
+      line: 2,
+      endLine: 2,
+      column: 3,
+      endColumn: 28,
+    },
+    {
+      code: ".foo .navdsi-other-deprecated-example \n .bar {}",
+      description: "selector with deprecated class name 2",
+      message: messages.unexpected(
+        "navdsi-other-deprecated-example",
+        deprecations[0].message
+      ),
+      line: 1,
+      endLine: 1,
+      column: 7,
+      endColumn: 38,
+    },
+  ],
+});

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.ts

@@ -0,0 +1,44 @@
+import stylelint from "stylelint";
+import selectorParser from "postcss-selector-parser";
+import { deprecations } from "../../deprecations";
+
+const ruleName = "aksel/no-deprecated-classes";
+const url =
+  "https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#aksel/no-deprecated-classes";
+
+export const messages = stylelint.utils.ruleMessages(ruleName, {
+  unexpected: (value, secondaryOption) =>
+    `Class "${value}" is deprecated. ` + secondaryOption,
+});
+
+const ruleFunction: stylelint.Rule = () => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkRules((node) => {
+      selectorParser((selectors) => {
+        selectors.walkClasses((className) => {
+          for (const deprecation of deprecations) {
+            if (!deprecation.classes.includes(className.value)) {
+              return;
+            }
+            stylelint.utils.report({
+              message: messages.unexpected(
+                className.value,
+                deprecation.message
+              ),
+              node,
+              result: postcssResult,
+              ruleName,
+              word: className.value,
+            });
+          }
+        });
+      }).processSync(node.selector);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = { url };
+
+export default ruleFunction;

@navikt/aksel-stylelint/src/rules/aksel-no-internal-tokens/index.test.ts

@@ -0,0 +1,80 @@
+import { getTestRule } from "jest-preset-stylelint";
+import rule, { messages } from ".";
+
+getTestRule()({
+  plugins: ["./dist/index.js"],
+  ruleName: rule.ruleName,
+  config: true,
+
+  accept: [
+    {
+      code: ".foo { --bar--__ac-baz: 1px }",
+      description: "non-internal token defined",
+    },
+    {
+      code: ".foo { font-size: var(--bar--__ac-baz) }",
+      description: "non-internal token used",
+    },
+  ],
+
+  reject: [
+    {
+      code: ".foo { --__ac-bar: 1px; }",
+      description: "internal token overridden",
+      message: messages.tokenOverridden("--__ac-bar"),
+      line: 1,
+      endLine: 1,
+      column: 8,
+      endColumn: 24,
+    },
+    {
+      code: ".foo { color: var(--__ac-bar) }",
+      description: "one internal token used",
+      message: messages.tokenUsed("--__ac-bar", "color"),
+      line: 1,
+      endLine: 1,
+      column: 19,
+      endColumn: 29,
+    },
+    {
+      code: ".foo { width: var(--__ac-bar, --__ac-baz) }",
+      description: "two internal tokens used in one var()",
+      warnings: [
+        {
+          message: messages.tokenUsed("--__ac-bar", "width"),
+          line: 1,
+          endLine: 1,
+          column: 19,
+          endColumn: 29,
+        },
+        {
+          message: messages.tokenUsed("--__ac-baz", "width"),
+          line: 1,
+          endLine: 1,
+          column: 31,
+          endColumn: 41,
+        },
+      ],
+    },
+    {
+      code: ".foo { padding: var(--__ac-bar) var(--__ac-baz); }",
+      description: "two internal tokens used as separate vars",
+      warnings: [
+        {
+          message: messages.tokenUsed("--__ac-bar", "padding"),
+          line: 1,
+          endLine: 1,
+          column: 21,
+          endColumn: 31,
+        },
+        {
+          message: messages.tokenUsed("--__ac-baz", "padding"),
+          line: 1,
+          endLine: 1,
+          column: 37,
+          endColumn: 47,
+        },
+      ],
+    },
+  ],
+});

@navikt/aksel-stylelint/src/rules/aksel-no-internal-tokens/index.ts

@@ -0,0 +1,62 @@
+import stylelint from "stylelint";
+import valueParser from "postcss-value-parser";
+
+const ruleName = "aksel/no-internal-tokens";
+const url =
+  "https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#aksel/no-internal-tokens";
+const prefix = "--__ac-";
+
+export const messages = stylelint.utils.ruleMessages(ruleName, {
+  tokenUsed: (token, prop) =>
+    `("${token}") not allowed.\n\n` +
+    `"${token}" (inside decleration "${prop}") looks like an internal design token, ` +
+    `because it starts with "${prefix}". Internal tokens should not be used outside the design system.`,
+  tokenOverridden: (token) =>
+    `("${token}") not allowed.\n\n` +
+    `"${token}" looks like an internal design token, because it starts with "${prefix}". ` +
+    `Internal tokens should not be overridden.`,
+});
+
+const getInternalTokensUsed = (value: string) => {
+  const invalidValues: string[] = [];
+
+  valueParser(value).walk((node) => {
+    if (node.type === "word" && node.value.startsWith(prefix)) {
+      invalidValues.push(node.value);
+    }
+  });
+
+  return invalidValues;
+};
+
+const ruleFunction: stylelint.Rule = () => {
+  return (postcssRoot, postcssResult) => {
+    postcssRoot.walkDecls((node) => {
+      getInternalTokensUsed(node.value).forEach((token) => {
+        stylelint.utils.report({
+          message: messages.tokenUsed(token, node.prop),
+          node,
+          result: postcssResult,
+          ruleName,
+          word: token,
+        });
+      });
+
+      const isTokenOverride = node.prop.startsWith(prefix);
+      if (isTokenOverride) {
+        stylelint.utils.report({
+          message: messages.tokenOverridden(node.prop),
+          node,
+          result: postcssResult,
+          ruleName,
+        });
+      }
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = {};
+ruleFunction.meta = { url };
+
+export default ruleFunction;

@navikt/aksel-stylelint/src/rules/index.ts

@@ -0,0 +1,16 @@
+import { Rule } from "stylelint";
+import designTokenExists from "./aksel-design-token-exists";
+import internalTokens from "./aksel-no-internal-tokens";
+import classOverride from "./aksel-no-class-override";
+import deprecatedClasses from "./aksel-no-deprecated-classes";
+import noGlobalOverride from "./aksel-design-token-no-global-override";
+import noComponentReference from "./aksel-design-token-no-component-reference";
+
+export const rules: Record<string, Rule> = {
+  "aksel/design-token-exists": designTokenExists,
+  "aksel/design-token-no-global-override": noGlobalOverride,
+  "aksel/design-token-no-component-reference": noComponentReference,
+  "aksel/no-internal-tokens": internalTokens,
+  "aksel/no-class-override": classOverride,
+  "aksel/no-deprecated-classes": deprecatedClasses,
+};

@navikt/aksel-stylelint/src/utils.ts

@@ -0,0 +1,138 @@
+import { readFileSync } from "node:fs";
+import valueParser from "postcss-value-parser";
+
+export const isCustomProperty = (property) => {
+  return property.startsWith("--");
+};
+
+export const matchesStringOrRegExp = (input, comparison) => {
+  if (!Array.isArray(input)) {
+    return testAgainstStringOrRegExpOrArray(input, comparison);
+  }
+
+  for (const inputItem of input) {
+    const testResult = testAgainstStringOrRegExpOrArray(inputItem, comparison);
+
+    if (testResult) {
+      return testResult;
+    }
+  }
+
+  return false;
+};
+
+export const testAgainstStringOrRegExpOrArray = (value, comparison) => {
+  if (!Array.isArray(comparison)) {
+    return testAgainstStringOrRegExp(value, comparison);
+  }
+
+  for (const comparisonItem of comparison) {
+    const testResult = testAgainstStringOrRegExp(value, comparisonItem);
+
+    if (testResult) {
+      return testResult;
+    }
+  }
+
+  return false;
+};
+
+export const testAgainstStringOrRegExp = (value, comparison) => {
+  // If it's a RegExp, test directly
+  if (comparison instanceof RegExp) {
+    return comparison.test(value)
+      ? { match: value, pattern: comparison }
+      : false;
+  }
+
+  // Check if it's RegExp in a string
+  const firstComparisonChar = comparison[0];
+  const lastComparisonChar = comparison[comparison.length - 1];
+  const secondToLastComparisonChar = comparison[comparison.length - 2];
+
+  const comparisonIsRegex =
+    firstComparisonChar === "/" &&
+    (lastComparisonChar === "/" ||
+      (secondToLastComparisonChar === "/" && lastComparisonChar === "i"));
+
+  const hasCaseInsensitiveFlag =
+    comparisonIsRegex && lastComparisonChar === "i";
+
+  // If so, create a new RegExp from it
+  if (comparisonIsRegex) {
+    const valueMatches = hasCaseInsensitiveFlag
+      ? new RegExp(comparison.slice(1, -2), "i").test(value)
+      : new RegExp(comparison.slice(1, -1)).test(value);
+
+    return valueMatches ? { match: value, pattern: comparison } : false;
+  }
+
+  // Otherwise, it's a string. Do a strict comparison
+  return value === comparison ? { match: value, pattern: comparison } : false;
+};
+
+export const vendorUnprefixed = (prop) => {
+  return prop.replace(/^-\w+-/, "");
+};
+
+export const flattenObject = (obj) => {
+  const flattened = Object.keys(obj).reduce((acc, key) => {
+    if (typeof obj[key] === "string") {
+      acc.push(key);
+    } else {
+      acc.push(flattenObject(obj[key]));
+    }
+    return acc;
+  }, []);
+  return flattened.flat();
+};
+
+const tokenCSSFile = "./index.css";
+const tokenJsonFile = "./tokens.json";
+const internalTokensJSONFile = "./internal-tokens.json";
+
+let allowedTokenNames = [];
+
+export const addTokens = (
+  tokenJSONFile: string,
+  allowedTokenNames: string[]
+) => {
+  const jsonFileBuffer = readFileSync(`${__dirname}/${tokenJSONFile}`);
+  const fileString = jsonFileBuffer.toString();
+  const flattened = flattenObject(JSON.parse(fileString));
+  flattened.forEach((token) => allowedTokenNames.push(token));
+};
+
+export const tokenExists = (
+  controlledPrefixes: string[],
+  inputToken: string
+) => {
+  // "singleton" if statement (attempt at caching file parsing)
+  if (!allowedTokenNames.length) {
+    const cssFileBuffer = readFileSync(`${__dirname}/${tokenCSSFile}`);
+    const cssFileString = cssFileBuffer.toString();
+
+    valueParser(cssFileString).walk((node) => {
+      if (
+        node.type === "word" &&
+        isCustomProperty(node.value) &&
+        controlledPrefixes.some((prefix) => node.value.startsWith(prefix))
+      ) {
+        allowedTokenNames.push(node.value);
+      }
+    });
+
+    addTokens(tokenJsonFile, allowedTokenNames);
+    addTokens(internalTokensJSONFile, allowedTokenNames);
+  }
+
+  return allowedTokenNames.includes(inputToken);
+};
+
+const packageJson = JSON.parse(
+  readFileSync(`${__dirname}/../package.json`).toString()
+);
+
+export const getPackageVersion = () => {
+  return packageJson.version;
+};

@navikt/aksel-stylelint/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "sourceMap": false,
+    "esModuleInterop": true,
+    "target": "es2020",
+    "preserveWatchOutput": true,
+    "declaration": false,
+    "types": ["node", "jest", "@types/jest"],
+    "outDir": "dist",
+    "rootDir": "./src",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "**/tests/**"]
+}

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @navikt/aksel
 
+## 3.4.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.4.2
+
+## 3.4.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.4.1
+
+## 3.4.0
+
+### Patch Changes
+
+- Updated dependencies [[`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a)]:
+  - @navikt/ds-css@3.4.0
+
+## 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
+
+- Updated dependencies [[`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969), [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221)]:
+  - @navikt/ds-css@3.2.3
+
+## 3.2.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.2.2
+
+## 3.2.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.2.1
+
 ## 3.2.0
 
 ### Patch Changes

@navikt/aksel/package.json

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

@navikt/aksel/src/codemod/transforms/v1.0.0/chat/chat.ts

@@ -1,3 +1,4 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
 import renameProps from "../../../utils/rename-props";
 
 /**
@@ -64,5 +65,5 @@ export default function transformer(file, api, options) {
     });
   }
 
-  return root.toSource(options.printOptions);
+  return root.toSource(getLineTerminator(file.source));
 }

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts

@@ -1,3 +1,5 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
+
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -79,5 +81,5 @@ export default function transformer(file, api, options) {
     });
   }
 
-  return root.toSource(options.printOptions);
+  return root.toSource(getLineTerminator(file.source));
 }

@navikt/aksel/src/codemod/transforms/v1.0.0/tabs/tabs.ts

@@ -1,3 +1,4 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
 import renameProps from "../../../utils/rename-props";
 
 /**
@@ -79,5 +80,5 @@ export default function transformer(file, api, options) {
     });
   }
 
-  return root.toSource(options.printOptions);
+  return root.toSource(getLineTerminator(file.source));
 }

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -6,6 +6,7 @@ import {
 } from "../../../utils/imports";
 import { translateToken } from "../../../utils/translate-token";
 import { tokens } from "../../../tokens-map.mjs";
+import { getLineTerminator } from "../../../utils/lineterminator";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -55,7 +56,7 @@ export default function transformer(file: JSCodeshift, api) {
         "@navikt/ds-tokens/dist/tokens"
       );
 
-      let code = root.toSource();
+      let code = root.toSource(getLineTerminator(file.source));
 
       const rgx = new RegExp("(" + localName + ")", "gm");
       code = code.replace(rgx, out);
@@ -63,5 +64,5 @@ export default function transformer(file: JSCodeshift, api) {
     }
   });
 
-  return root.toSource();
+  return root.toSource(getLineTerminator(file.source));
 }

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts

@@ -1,6 +1,7 @@
 import chalk from "chalk";
 import moveAndRenameImport from "../../../utils/moveAndRenameImport";
 import removePropsFromComponent from "../../../utils/removeProps";
+import { getLineTerminator } from "../../../utils/lineterminator";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -25,7 +26,7 @@ export default function transformer(file, api, options, ...rest) {
   });
 
   if (localName === null) {
-    return root.toSource(options.printOptions);
+    return root.toSource(getLineTerminator(file.source));
   }
 
   /* Finds and replaces import from CopyToClipboard -> CopyButton */
@@ -85,5 +86,5 @@ export default function transformer(file, api, options, ...rest) {
     });
   }
 
-  return root.toSource(options.printOptions);
+  return root.toSource(getLineTerminator(file.source));
 }

@navikt/aksel/src/codemod/utils/lineterminator.ts

@@ -0,0 +1,3 @@
+export const getLineTerminator = (source: string) => ({
+  lineTerminator: source.includes("\r\n") ? "\r\n" : "\n",
+});

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-codemod
 
+## 3.4.2
+
+## 3.4.1
+
+## 3.4.0
+
+## 3.3.1
+
+## 3.3.0
+
+## 3.2.4
+
+## 3.2.3
+
+## 3.2.2
+
+## 3.2.1
+
 ## 3.2.0
 
 ## 3.1.3

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "3.2.0",
+  "version": "3.4.2",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "jscodeshift-add-imports": "1.0.10",
     "lodash": "4.17.21",
     "meow": "7.0.1",
-    "prettier": "2.7.1"
+    "prettier": "2.8.8"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.0.0",

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @navikt/ds-css
 
+## 3.4.2
+
+## 3.4.1
+
+## 3.4.0
+
+### Minor Changes
+
+- [#2010](https://github.com/navikt/aksel/pull/2010) [`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Ny variant "moderate" i Tag
+
+## 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
+
+- [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
+
+  - :recycle: Refactored Datepicker.Input-button for bugfix
+
+- [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
+
+  - Kan nå lettere brukes i tabeller
+
+## 3.2.2
+
+## 3.2.1
+
 ## 3.2.0
 
 ### Minor Changes

@navikt/core/css/copybutton.css

@@ -27,6 +27,12 @@
   min-height: 2rem;
 }
 
+.navds-copybutton--xsmall {
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
+
+  min-height: 1.5rem;
+}
+
 .navds-copybutton--icon-only {
   --__ac-copybutton-padding: var(--a-spacing-3);
 }
@@ -35,6 +41,14 @@
   --__ac-copybutton-padding: var(--a-spacing-1);
 }
 
+.navds-copybutton--xsmall.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-05);
+}
+
+.navds-copybutton--xsmall .navds-copybutton__icon {
+  font-size: 1.25rem;
+}
+
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
@@ -45,6 +59,10 @@
   margin: 0;
 }
 
+:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
+  margin: -2px;
+}
+
 .navds-copybutton:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
@@ -108,6 +126,10 @@
   gap: var(--a-spacing-2);
 }
 
+.navds-copybutton--xsmall > .navds-copybutton__content {
+  gap: var(--a-spacing-1);
+}
+
 .navds-copybutton--active > .navds-copybutton__content {
   animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
 }

@navikt/core/css/date.css

@@ -198,11 +198,11 @@
 }
 
 .navds-date__field-input {
-  padding-right: var(--a-spacing-12);
+  padding-right: var(--a-spacing-14);
 }
 
 .navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-8);
+  padding-right: var(--a-spacing-10);
 }
 
 /* Error-handling */
@@ -223,24 +223,51 @@
 
 .navds-date__field-button {
   position: absolute;
-  right: var(--a-spacing-2);
+  right: 1px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--ac-date-input-button-text, var(--a-text-default));
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: 3px;
+  padding: var(--a-spacing-3);
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: calc(100% - 2px);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 
 .navds-form-field--small .navds-date__field-button {
-  right: var(--a-spacing-2);
-  height: 1.5rem;
-  width: 1.5rem;
+  padding: var(--a-spacing-1);
 }
 
-.navds-form-field--small .navds-date__field-button svg {
-  font-size: var(--a-font-size-medium);
+.navds-date__field-button:hover:where(:not([disabled])) {
+  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
 .navds-form-field--disabled .navds-date__field-button {
   opacity: 1;
+  cursor: not-allowed;
+}
+
+.navds-date__field-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-medium);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
 }
 
 .navds-date__caption__year {

@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.0",
+  "version": "3.4.2",
   "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.0",
+    "@navikt/ds-tokens": "^3.4.2",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/tag.css

@@ -31,6 +31,12 @@
   color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
 }
 
+.navds-tag--error-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
+  color: var(--ac-tag-error-moderate-text, var(--a-text-default));
+}
+
 .navds-tag--success {
   border-color: var(--ac-tag-success-border, var(--a-border-success));
   background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
@@ -43,6 +49,12 @@
   color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
 }
 
+.navds-tag--success-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
+  color: var(--ac-tag-success-moderate-text, var(--a-text-default));
+}
+
 .navds-tag--warning {
   border-color: var(--ac-tag-warning-border, var(--a-border-warning));
   background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
@@ -55,6 +67,12 @@
   color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
 }
 
+.navds-tag--warning-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
+  color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
+}
+
 .navds-tag--info {
   border-color: var(--ac-tag-info-border, var(--a-border-info));
   background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
@@ -67,6 +85,12 @@
   color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
 }
 
+.navds-tag--info-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
+  color: var(--ac-tag-info-moderate-text, var(--a-text-default));
+}
+
 .navds-tag--neutral {
   border-color: var(--ac-tag-neutral-border, var(--a-border-default));
   background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
@@ -79,6 +103,12 @@
   color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
 }
 
+.navds-tag--neutral-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
+  color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
+}
+
 .navds-tag--alt1 {
   border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
   background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
@@ -91,6 +121,12 @@
   color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
 }
 
+.navds-tag--alt1-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
+  color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
+}
+
 .navds-tag--alt2 {
   border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
   background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
@@ -103,6 +139,12 @@
   color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
 }
 
+.navds-tag--alt2-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
+  color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
+}
+
 .navds-tag--alt3 {
   border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
   background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
@@ -114,3 +156,9 @@
   background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
   color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
 }
+
+.navds-tag--alt3-moderate {
+  border-color: transparent;
+  background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
+  color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
+}

@navikt/core/css/tokens.json

@@ -131,7 +131,9 @@
     "--ac-date-today-border": "--a-border-action-selected",
     "--ac-date-caption-text": "--a-text-default",
     "--ac-date-input-error-border": "--a-border-danger",
-    "--ac-date-input-button-text": "--a-text-default"
+    "--ac-date-input-button-text": "--a-text-default",
+    "--ac-date-input-button-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-date-input-button-hover-bg": "--a-surface-action-subtle-hover"
   },
   "expansioncard": {
     "--ac-expansioncard-bg": "--a-surface-default",
@@ -249,41 +251,57 @@
     "--ac-tag-error-text": "--a-text-default",
     "--ac-tag-error-filled-bg": "--a-surface-danger",
     "--ac-tag-error-filled-text": "--a-text-on-danger",
+    "--ac-tag-error-moderate-bg": "--a-surface-danger-moderate",
+    "--ac-tag-error-moderate-text": "--a-text-default",
     "--ac-tag-success-border": "--a-border-success",
     "--ac-tag-success-bg": "--a-surface-success-subtle",
     "--ac-tag-success-text": "--a-text-default",
     "--ac-tag-success-filled-bg": "--a-surface-success",
     "--ac-tag-success-filled-text": "--a-text-on-success",
+    "--ac-tag-success-moderate-bg": "--a-surface-success-moderate",
+    "--ac-tag-success-moderate-text": "--a-text-default",
     "--ac-tag-warning-border": "--a-border-warning",
     "--ac-tag-warning-bg": "--a-surface-warning-subtle",
     "--ac-tag-warning-text": "--a-text-default",
     "--ac-tag-warning-filled-bg": "--a-surface-warning",
     "--ac-tag-warning-filled-text": "--a-text-on-warning",
+    "--ac-tag-warning-moderate-bg": "--a-surface-warning-moderate",
+    "--ac-tag-warning-moderate-text": "--a-text-default",
     "--ac-tag-info-border": "--a-border-info",
     "--ac-tag-info-bg": "--a-surface-info-subtle",
     "--ac-tag-info-text": "--a-text-default",
     "--ac-tag-info-filled-bg": "--a-surface-info",
     "--ac-tag-info-filled-text": "--a-text-on-info",
+    "--ac-tag-info-moderate-bg": "--a-surface-info-moderate",
+    "--ac-tag-info-moderate-text": "--a-text-default",
     "--ac-tag-neutral-border": "--a-border-default",
     "--ac-tag-neutral-bg": "--a-surface-neutral-subtle",
     "--ac-tag-neutral-text": "--a-text-default",
     "--ac-tag-neutral-filled-bg": "--a-surface-neutral",
     "--ac-tag-neutral-filled-text": "--a-text-on-neutral",
+    "--ac-tag-neutral-moderate-bg": "--a-surface-neutral-moderate",
+    "--ac-tag-neutral-moderate-text": "--a-text-default",
     "--ac-tag-alt-1-border": "--a-border-alt-1",
     "--ac-tag-alt-1-bg": "--a-surface-alt-1-subtle",
     "--ac-tag-alt-1-text": "--a-text-default",
     "--ac-tag-alt-1-filled-bg": "--a-surface-alt-1",
     "--ac-tag-alt-1-filled-text": "--a-text-on-alt-1",
+    "--ac-tag-alt-1-moderate-bg": "--a-surface-alt-1-moderate",
+    "--ac-tag-alt-1-moderate-text": "--a-text-default",
     "--ac-tag-alt-2-border": "--a-border-alt-2",
     "--ac-tag-alt-2-bg": "--a-surface-alt-2-subtle",
     "--ac-tag-alt-2-text": "--a-text-default",
     "--ac-tag-alt-2-filled-bg": "--a-surface-alt-2",
     "--ac-tag-alt-2-filled-text": "--a-text-on-alt-2",
+    "--ac-tag-alt-2-moderate-bg": "--a-surface-alt-2-moderate",
+    "--ac-tag-alt-2-moderate-text": "--a-text-default",
     "--ac-tag-alt-3-border": "--a-border-alt-3",
     "--ac-tag-alt-3-bg": "--a-surface-alt-3-subtle",
     "--ac-tag-alt-3-text": "--a-text-default",
     "--ac-tag-alt-3-filled-bg": "--a-surface-alt-3",
-    "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
+    "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3",
+    "--ac-tag-alt-3-moderate-bg": "--a-surface-alt-3-moderate",
+    "--ac-tag-alt-3-moderate-text": "--a-text-default"
   },
   "togglegroup": {
     "--ac-toggle-group-bg": "--a-surface-transparent",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,96 @@
 # @navikt/ds-react
 
+## 3.4.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.4.2
+
+## 3.4.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.4.1
+
+## 3.4.0
+
+### Minor Changes
+
+- [#2010](https://github.com/navikt/aksel/pull/2010) [`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Ny variant "moderate" i Tag
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.4.0
+
+## 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
+
+- [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
+
+  - :recycle: Refactored Datepicker.Input-button for bugfix
+
+- [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
+
+  - Kan nå lettere brukes i tabeller
+
+- Updated dependencies [[`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a)]:
+  - @navikt/aksel-icons@3.2.3
+
+## 3.2.2
+
+### Patch Changes
+
+- [`6d6267fe0`](https://github.com/navikt/aksel/commit/6d6267fe01f438f3bd67e1b4266ca3e82709561c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :fire: Fjernet use-client directive fra copybutton
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.2.2
+
+## 3.2.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.2.1
+
 ## 3.2.0
 
 ### Minor Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "3.2.0",
+  "version": "3.4.2",
   "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.0",
+    "@floating-ui/react": "0.24.1",
+    "@navikt/aksel-icons": "^3.4.2",
     "@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/copybutton/CopyButton.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
@@ -15,8 +14,9 @@ export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   /**
    * @default "medium"
+   * xsmall should only be used in tables/
    */
-  size?: "medium" | "small";
+  size?: "medium" | "small" | "xsmall";
   /**
    * @default "neutral"
    */

@navikt/core/react/src/copybutton/copy-button.stories.tsx

@@ -11,7 +11,7 @@ export default {
     size: {
       defaultValue: "medium",
       control: { type: "radio" },
-      options: ["small", "medium"],
+      options: ["small", "medium", "xsmall"],
     },
     variant: {
       defaultValue: undefined,
@@ -85,6 +85,22 @@ export const Sizes = {
           text="Kopier"
         />
       </div>
+      <div className="rowgap">
+        <CopyButton size="xsmall" copyText="3.14" variant="action" />
+        <CopyButton size="xsmall" copyText="3.14" variant="neutral" />
+        <CopyButton
+          size="xsmall"
+          copyText="3.14"
+          variant="action"
+          text="Kopier"
+        />
+        <CopyButton
+          size="xsmall"
+          copyText="3.14"
+          variant="neutral"
+          text="Kopier"
+        />
+      </div>
     </div>
   ),
 };
@@ -107,6 +123,14 @@ export const Texts = {
           activeText="Kopierte XYZ"
         />
       </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="xsmall"
+          text="Kopier XYZ"
+          activeText="Kopierte XYZ"
+        />
+      </div>
     </div>
   ),
 };
@@ -129,6 +153,14 @@ export const Icons = {
           activeIcon={<ThumbUpIcon title="Kopiert" />}
         />
       </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="xsmall"
+          icon={<LinkIcon title="Kopier" />}
+          activeIcon={<ThumbUpIcon title="Kopiert" />}
+        />
+      </div>
     </div>
   ),
 };

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

@@ -1,7 +1,7 @@
 import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
+import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
 
@@ -115,24 +115,22 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
             )}
             size={14}
           />
-          <Button
-            variant="tertiary"
-            type="button"
-            size="small"
-            onClick={() => onOpen()}
-            className="navds-date__field-button"
-            tabIndex={open ? -1 : 0}
+          <button
             disabled={inputProps.disabled}
-            icon={
-              <CalendarIcon
-                title={
-                  open
-                    ? conditionalVariables.iconTitle.close
-                    : conditionalVariables.iconTitle.open
-                }
-              />
-            }
-          />
+            tabIndex={open ? -1 : 0}
+            onClick={() => onOpen()}
+            type="button"
+            className="navds-date__field-button"
+          >
+            <CalendarIcon
+              pointerEvents="none"
+              title={
+                open
+                  ? conditionalVariables.iconTitle.close
+                  : conditionalVariables.iconTitle.open
+              }
+            />
+          </button>
         </div>
         <div
           className="navds-form-field__error"

@navikt/core/react/src/date/datepicker/datepicker.stories.tsx

@@ -324,3 +324,22 @@ export const defaultShownMonth = () => {
     </div>
   );
 };
+
+export const Size = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input size="medium" {...inputProps} label="Velg dato" />
+      </DatePicker>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input size="small" {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};

@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/tag/Tag.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import { BodyShort, Detail } from "..";
+import { BodyShort } from "..";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
@@ -10,20 +10,28 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   variant:
     | "warning"
     | "warning-filled"
+    | "warning-moderate"
     | "error"
     | "error-filled"
+    | "error-moderate"
     | "info"
     | "info-filled"
+    | "info-moderate"
     | "success"
     | "success-filled"
+    | "success-moderate"
     | "neutral"
     | "neutral-filled"
+    | "neutral-moderate"
     | "alt1"
     | "alt1-filled"
+    | "alt1-moderate"
     | "alt2"
     | "alt2-filled"
+    | "alt2-moderate"
     | "alt3"
-    | "alt3-filled";
+    | "alt3-filled"
+    | "alt3-moderate";
   /**
    * @default "medium"
    */
@@ -31,24 +39,20 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size = "medium", ...rest }, ref) => {
-    const Component = size === "medium" ? BodyShort : Detail;
-
-    return (
-      <Component
-        {...rest}
-        ref={ref}
-        as="span"
-        size={size === "medium" ? "medium" : "small"}
-        className={cl(
-          "navds-tag",
-          className,
-          `navds-tag--${variant}`,
-          `navds-tag--${size}`
-        )}
-      />
-    );
-  }
+  ({ className, variant, size = "medium", ...rest }, ref) => (
+    <BodyShort
+      {...rest}
+      ref={ref}
+      as="span"
+      size={size === "medium" ? "medium" : "small"}
+      className={cl(
+        "navds-tag",
+        className,
+        `navds-tag--${variant}`,
+        `navds-tag--${size}`
+      )}
+    />
+  )
 );
 
 export default Tag;

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

@@ -1,62 +1,8 @@
 import React from "react";
-import { Tag } from ".";
+import type { Meta } from "@storybook/react";
+import { Tag, TagProps } from ".";
 
-export default {
-  title: "ds-react/Tag",
-  component: Tag,
-  argTypes: {
-    variant: {
-      defaultValue: "info",
-      control: {
-        type: "radio",
-        options: [
-          "warning",
-          "error",
-          "info",
-          "success",
-          "neutral",
-          "alt1",
-          "alt2",
-          "alt3",
-          "warning-filled",
-          "error-filled",
-          "info-filled",
-          "success-filled",
-          "neutral-filled",
-          "alt1-filled",
-          "alt2-filled",
-          "alt3-filled",
-        ],
-      },
-    },
-    size: {
-      defaultValue: "medium",
-      control: {
-        type: "radio",
-        options: ["xsmall", "small", "medium"],
-      },
-    },
-  },
-};
-
-const variants: Array<
-  | "warning"
-  | "warning-filled"
-  | "error"
-  | "error-filled"
-  | "info"
-  | "info-filled"
-  | "success"
-  | "success-filled"
-  | "neutral"
-  | "neutral-filled"
-  | "alt1"
-  | "alt1-filled"
-  | "alt2"
-  | "alt2-filled"
-  | "alt3"
-  | "alt3-filled"
-> = [
+const variants: TagProps["variant"][] = [
   "warning",
   "error",
   "info",
@@ -73,8 +19,37 @@ const variants: Array<
   "alt1-filled",
   "alt2-filled",
   "alt3-filled",
+  "warning-moderate",
+  "error-moderate",
+  "info-moderate",
+  "success-moderate",
+  "neutral-moderate",
+  "alt1-moderate",
+  "alt2-moderate",
+  "alt3-moderate",
 ];
 
+export default {
+  title: "ds-react/Tag",
+  component: Tag,
+  argTypes: {
+    variant: {
+      defaultValue: "info",
+      control: {
+        type: "radio",
+      },
+      options: variants,
+    },
+    size: {
+      defaultValue: "medium",
+      control: {
+        type: "radio",
+      },
+      options: ["xsmall", "small", "medium"],
+    },
+  },
+} satisfies Meta<typeof Tag>;
+
 export const Default = {
   render: (props) => (
     <Tag variant={props.variant} size={props.size}>

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