feat(web): individual exports

.changeset/spicy-flowers-exercise.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-web": minor
+---
+
+Add individual exports

packages/web/README.md

@@ -4,8 +4,9 @@
 
 - [`@digdir/designsystemet-web`](#digdirdesignsystemet-web)
   - [Table of contents](#table-of-contents)
-  - [Get started](#get-started)
-    - [Types](#types)
+- [Get started](#get-started)
+  - [Individual imports](#individual-imports)
+  - [Types](#types)
   - [Warnings:](#warnings)
 - [`<ds-breadcrumbs>`](#ds-breadcrumbs)
 - [`<ds-error-summary>`](#ds-error-summary)
@@ -26,14 +27,23 @@
   - [`popover`](#popover)
 
 
-### Get started
+## Get started
 
 We recommend to import the whole package.
 This will register all web components and observers globally, so you only need to do this once.
 ```ts
 import '@digdir/designsystemet-web';
 ```
-#### Types
+
+### Individual imports
+
+The package supports sub-path exports which means you can import individual parts of the package if needed, but this is used at own risk.
+
+For example - importing `tooltip`, you need to also import `popover` as its built using native popover functionality.
+
+The [invokers-polyfill](#invokers-polyfill) will **not be automatically attached using individual imports**.
+
+### Types
 Add the package to your `types` for types:
 ```json
 {
@@ -192,10 +202,12 @@ An observer will look for `[data-toggle-group]` and add proper arrow navigation
 ## `data-tooltip`
 Using a single element for rendering next to elements with `data-tooltip` attribute.
 Also automatically sets `aria-label` or `aria-description` as needed.
+Uses native popover functionality with our [`popover`](#popover) polyfill.
 
 ```html
 <button data-placement="left" data-tooltip="left" class="ds-button">left</button>
 ```
+
 ## `data-clickdelegatefor`
 Used for delegating click event. For example, you can use this to delegate click events from a parent element to child elements that are added dynamically.
 

packages/web/package.json

@@ -20,7 +20,67 @@
       "require": "./dist/cjs/index.cjs"
     },
     "./custom-elements.json": "./dist/custom-elements.json",
-    "./vscode.html-custom-data.json": "./dist/vscode.html-custom-data.json"
+    "./vscode.html-custom-data.json": "./dist/vscode.html-custom-data.json",
+    "./ds-breadcrumbs": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/breadcrumbs/breadcrumbs.js",
+      "require": "./dist/cjs/breadcrumbs/breadcrumbs.cjs"
+    },
+    "./clickdelegatefor": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/clickdelegatefor/clickdelegatefor.js",
+      "require": "./dist/cjs/clickdelegatefor/clickdelegatefor.cjs"
+    },
+    "./dialog": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/dialog/dialog.js",
+      "require": "./dist/cjs/dialog/dialog.cjs"
+    },
+    "./ds-error-summary": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/error-summary/error-summary.js",
+      "require": "./dist/cjs/error-summary/error-summary.cjs"
+    },
+    "./ds-field": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/field/field.js",
+      "require": "./dist/cjs/field/field.cjs"
+    },
+    "./ds-pagination": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/pagination/pagination.js",
+      "require": "./dist/cjs/pagination/pagination.cjs"
+    },
+    "./popover": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/popover/popover.js",
+      "require": "./dist/cjs/popover/popover.cjs"
+    },
+    "./readonly": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/readonly/readonly.js",
+      "require": "./dist/cjs/readonly/readonly.cjs"
+    },
+    "./ds-suggestion": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/suggestion/suggestion.js",
+      "require": "./dist/cjs/suggestion/suggestion.cjs"
+    },
+    "./ds-tabs": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/tabs/tabs.js",
+      "require": "./dist/cjs/tabs/tabs.cjs"
+    },
+    "./toggle-group": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/toggle-group/toggle-group.js",
+      "require": "./dist/cjs/toggle-group/toggle-group.cjs"
+    },
+    "./tooltip": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/tooltip/tooltip.js",
+      "require": "./dist/cjs/tooltip/tooltip.cjs"
+    }
   },
   "files": [
     "dist/**"
@@ -53,4 +113,4 @@
     "tsup": "^8.5.1",
     "vitest": "4.0.18"
   }
-}
+}