digdir · Barsnes · Oct 8, 2025 · Oct 8, 2025 · Oct 8, 2025 · Oct 8, 2025
@@ -20,7 +20,8 @@
       "!**/packages/theme/**/*.css",
       "!**/tsconfig.*.json", // https://github.com/biomejs/biome/issues/1151
       "!**/.react-router/",
-      "!**/package.json" // changeset wants the files to be formatted differently
+      "!**/package.json", // changeset wants the files to be formatted differently
+      "!**/wc/public"
     ]
   },
   "formatter": {

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./public/theme.css">
+    <link rel="stylesheet" href="./public/index.css">
+    <title>test-app</title>
+    <link
+      rel="stylesheet"
+      href="https://altinncdn.no/fonts/inter/v4.1/inter.css"
+      integrity="sha384-OcHzc/By/OPw9uJREawUCjP2inbOGKtKb4A/I2iXxmknUfog2H8Adx71tWVZRscD"
+      crossorigin="anonymous"
+    />
+
+    <script src="./dist/esm/index.js" type="module" crossorigin="anonymous"></script>
+  </head>
+  <body data-color-scheme="dark" style="display:flex; flex-direction:column; gap:20px; padding:20px;font-family: Inter;">
+
+    <h1 class="ds-heading">Test webcomponents</h1>
+
+    <ds-field class="ds-field">
+      <label>Label</label>
+      <input type="text" placeholder="Placeholder" class="ds-input" />
+    </ds-field>
+
+    <br>
+    <br>
+    <br>
+
+    <ds-tooltip content="eg forklarer" anchor="tlp">
+      <button class="ds-button" id="tlp">forklar meg</button>
+    </ds-tooltip>
+
+    <p>
+      Eg ligger i tekst, men trenger ein
+      <ds-tooltip content="eg forklarer" anchor="tlp2">
+        <span id="tlp2" style="text-decoration:underline dotted">forklaring</span>
+      </ds-tooltip>
+      på dette ordet.
+    </p>
+
+    <br>
+    <br>
+    <br>
+
+    <ds-popover anchor="p-anc" placement="left">
+      <button class="ds-button" id="p-anc" style="margin:200px">Open popover</button>
+      <div popover="manual" id="popover">
+        This is some popover content. It can be very long, but it will wrap and
+        stay within the viewport.
+
+        <ds-popover anchor="p-anc1" placement="right">
+          <button class="ds-button" id="p-anc1">Open nested popover</button>
+          <div popover="manual">
+            This is some nested popover content. It can be very long, but it will wrap and
+            stay within the viewport.
+          </div>
+        </ds-popover>
+      </div>
+    </ds-popover>
+    <ds-popover anchor="p-anc2" placement="bottom-end">
+      <button class="ds-button" id="p-anc2">Open dropdown</button>
+      <div class="ds-dropdown" popover="manual">
+        <h2 class="ds-heading">First heading</h2>
+        <ul><li><button class="ds-button" data-variant="tertiary" type="button">Button 1.1</button></li><li><button class="ds-button" data-variant="tertiary" type="button">Button 1.2</button></li></ul>
+        <h2 class="ds-heading">Second heading</h2>
+        <ul><li><button class="ds-button" data-variant="tertiary" type="button">Button 2.1</button></li><li><button class="ds-button" data-variant="tertiary" type="button">Button 2.2</button></li></ul>
+      </div>
+    </ds-popover>
+  </body>
+</html>
@@ -0,0 +1,47 @@
+{
+  "name": "@digdir/designsystemet-wc",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Web components for Designsystemet",
+  "author": "Designsystemet team",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digdir/designsystemet.git"
+  },
+  "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/react",
+  "license": "MIT",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist/**"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "scripts": {
+    "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",
+    "clean": "rimraf dist && rimraf tsc-build && rimraf --glob \"*.tsbuildinfo\"",
+    "copy-css-to-build": "copyfiles -u 1 ./src/**/*.css ./tsc-build/",
+    "types": "tsc --noEmit",
+    "dev": "pnpm build && npx http-server . -p 5173"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "rimraf": "^6.0.1",
+    "rollup": "4.52.3",
+    "rollup-plugin-copy": "^3.5.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2"
+  }
+}