diff --git a/.changeset/spicy-flowers-exercise.md b/.changeset/spicy-flowers-exercise.md new file mode 100644 index 0000000000..ff48bcf53b --- /dev/null +++ b/.changeset/spicy-flowers-exercise.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-web": minor +--- + +Add individual exports diff --git a/packages/web/README.md b/packages/web/README.md index 121b5f5c57..118bc3440d 100644 --- a/packages/web/README.md +++ b/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-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 ``` + ## `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. diff --git a/packages/web/package.json b/packages/web/package.json index 6ca75a828e..e21a4c7cf9 100644 --- a/packages/web/package.json +++ b/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" } -} +} \ No newline at end of file