feat: @digdir/designsystemet-web

.changeset/brave-berries-kneel.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Breadcrumbs**: Now uses `<ds-breadcrumbs>` internally.

.changeset/brave-ties-suffer.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**suggestion**: various changes to chip styling. You no longer need to pass a class to `<data>`

.changeset/breezy-badgers-remain.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**input**: add support for `[aria-readonly='true']`

.changeset/calm-weeks-rescue.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Card**: Fix deeply nested anchors in headings causing navigation

.changeset/clever-cows-pump.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Input** Support for new attribute `data-indeterminate` to toggle indeterminate state when `type="checkbox"` inside `Field`/`ds-field`.

.changeset/clever-knives-sip.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**link**: don't set `:visited` color and set default `border-radius` to 0

.changeset/config.json

@@ -12,7 +12,8 @@
       "@digdir/designsystemet",
       "@digdir/designsystemet-css",
       "@digdir/designsystemet-types",
-      "@digdir/designsystemet-react"
+      "@digdir/designsystemet-react",
+      "@digdir/designsystemet-web"
     ]
   ],
   "linked": [],

.changeset/famous-books-hunt.md

@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**field**: add new css variables:
+  `--dsc-field-counter-over: '%d tegn for mye';`
+  `--dsc-field-counter-under: '%d tegn igjen';`

.changeset/flat-bees-sniff.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Support for new package with custom elements and observers for Designsystemet.

.changeset/gentle-eagles-cry.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**ToggleGroup**: Updated DOM structure and now uses new web observer `data-toggle-group`.

.changeset/icy-taxes-see.md

@@ -0,0 +1,32 @@
+---
+"@digdir/designsystemet-web": patch
+---
+
+New package with custom elements and observers for Designsystemet.
+
+| Custom elements |
+| --- |
+| `ds-breadcrumbs` |
+| `ds-error-summary` |
+| `ds-field` |
+| `ds-pagination` |
+| `ds-suggestion` |
+| `ds-tabs` |
+| `ds-tablist` |
+| `ds-tab` |
+| `ds-tabpanel` |
+
+| Observer | |
+| --- | --- |
+| `data-clickdelegatefor` | Used for delegating click event |
+| `data-toggle-group` | Used for adding arrow navigation plus Enter-key support |
+| `data-tooltip`| Used for adding tooltip text on element |
+| `readonly` | Used for fixing `readonly` support on `select` and `input` elements |
+| `popover`| Event listnener on `popovertarget` for placement of `ds-floating` elements. |
+
+| Polyfill | |
+| --- | --- |
+| `details` & `summary` | Bugfix for Firefox. |
+| `dialog` | Support for [closedby="any"](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy#any). |
+| `command` & `commandfor` | Support for [invokers](https://www.npmjs.com/package/invokers-polyfill/v/0.5.2). |
+

.changeset/late-ants-juggle.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**dialog**: style `.ds-dialog button[command='close']:empty::before` with X-icon

.changeset/long-moose-join.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": "patch"
+---
+
+**toggle-group**: remove `--dsc-togglegroup-text-color`, as this was not used

.changeset/loud-ligers-battle.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+**Card**: fix issues with deeply nested heading links. Now uses web observer `data-clickdelegatefor` internally.

.changeset/moody-horses-laugh.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**toggle-group**: add styling for new DOM structure introduced in `@digdir/designsystemet-web`

.changeset/neat-boats-learn.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Pagination**: Now uses `<ds-pagination>` internally.

.changeset/nice-kings-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**popover**: add `--dsc-popover-placement` with default value `top`

.changeset/odd-days-complain.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**field**: add styling for `<ds-field>` counter.

.changeset/old-eyes-listen.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Add `suppressHydrationWarning` to various components. This is to support `@digdir/designsystemet-web` being used internally.

.changeset/quiet-crabs-call.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**fieldset**: add `--dsc-fieldset-gap` with default value `var(--ds-size-4)`

.changeset/rare-actors-hunt.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Field.Counter**: Deprecate `hint` 

.changeset/real-worms-act.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Field**: Deprecated `asChild` as this component now uses `<ds-field>` internally.

.changeset/rich-ravens-remain.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**tooltip**: add `--dsc-tooltip-placement` with default value `top`

.changeset/rude-yaks-refuse.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**tabs**: add support for `<ds-tabs>`

.changeset/silent-coins-begin.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Tabs**: Now uses `<ds-tabs>` and related web components internally

.changeset/silent-needles-smash.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**ErrorSummary**: Deprecate `asChild` as this component now uses `<ds-error-summary>` internally.

.changeset/silver-monkeys-hammer.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**breadcrumbs**: don't remove underline on `a[aria-current='page']`, but on `li:last-child a`

.changeset/slimy-berries-run.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Select**: Deprecate `readOnly`. Use `aria-readonly` instead.

.changeset/small-baboons-grin.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**RovingFocus**: Deprecate component. This will be removed in the next major version

.changeset/spicy-bats-punch.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Tooltip**: Deprecate `open`. This should not be used on Tooltip. Use a `Popover` instead.

.changeset/stupid-tigers-judge.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Tooltip**: Now uses `data-tooltip` from `@digdir/designsystemet-web` internally

.changeset/swift-planes-admire.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Details**: Use `<details>` and `<summary>` internally.

.changeset/ten-crabs-wave.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Dialog**: Deprecate `data-command="close"`. Use `command="close"` and `commandfor="DIALOG-ID"` instead.

.changeset/twenty-wasps-do.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**dropdown**: add `--dsc-dropdown-placement` with default value `bottom`

.changeset/unlucky-ties-laugh.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+added class `ds-floating`, which is used on floating elements internally

.changeset/wet-crabs-kneel.md

@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**pagination**:
+- add `--dsc-pagination-ellipsis` with default value `'\2026'`
+- set `--dsc-pagination-label: 'Bla i sider';` if language is `'nn'`, `'nb'` or `'no'`

.github/workflows/test.yml

@@ -4,8 +4,8 @@ on:
   pull_request:
     paths:
       - .github/workflows/test.yml
-      - 'packages/**'
-      - 'apps/storybook/**'
+      - "packages/**"
+      - "apps/storybook/**"
 
 permissions:
   checks: write
@@ -45,25 +45,26 @@ jobs:
 
       - name: Install Playwright browsers
         if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install --with-deps chromium
+        run: pnpm exec playwright install --with-deps chromium firefox webkit
         working-directory: apps/storybook
 
       - name: Install Playwright system dependencies (if cached)
         if: steps.playwright-cache.outputs.cache-hit == 'true'
-        run: pnpm exec playwright install-deps chromium
+        run: pnpm exec playwright install-deps chromium firefox webkit
         working-directory: apps/storybook
 
       - name: Build
         run: pnpm build
 
       - name: Types
         run: pnpm types:react
-
+      - name: Test Web
+        run: pnpm test:web
       - name: Run Storybook tests
         run: pnpm --filter @web/storybook vitest
       - name: Test
         run: pnpm test
-      - name: 'Report Coverage'
+      - name: "Report Coverage"
         if: success() || failure()
         uses: davelosert/vitest-coverage-report-action@15b5b41bb7d36796d89f4bf482b09529c53f3446 # v2.9.2
         with:
@@ -72,11 +73,11 @@ jobs:
         uses: mikepenz/action-junit-report@74626db7353a25a20a72816467ebf035f674c5f8 # v6.2.0
         if: success() || failure()
         with:
-          report_paths: 'test-report.xml'
+          report_paths: "test-report.xml"
           detailed_summary: true
           check_name: Unit Test Report
           check_annotations: true
-          check_title_template: '{{FILE_NAME}} / {{TEST_NAME}}'
+          check_title_template: "{{FILE_NAME}} / {{TEST_NAME}}"
 
       - name: Test CLI (create tokens, then build the theme)
         run: pnpm test:cli
@@ -85,16 +86,16 @@ jobs:
         uses: jacobtomlinson/gha-find-replace@f1069b438f125e5395d84d1c6fd3b559a7880cb5 # v3.0.5
         if: success() || failure()
         with:
-          include: 'apps/storybook/test-report.xml'
-          find: '../../'
-          replace: ''
+          include: "apps/storybook/test-report.xml"
+          find: "../../"
+          replace: ""
           regex: false
       - name: Publish Storybook test report
         uses: mikepenz/action-junit-report@74626db7353a25a20a72816467ebf035f674c5f8 # v6.2.0
         if: success() || failure()
         with:
-          report_paths: 'apps/storybook/test-report.xml'
+          report_paths: "apps/storybook/test-report.xml"
           detailed_summary: true
           check_name: Storybook Test Report
           check_annotations: true
-          check_title_template: '{{FILE_NAME}} / {{TEST_NAME}}'
+          check_title_template: "{{FILE_NAME}} / {{TEST_NAME}}"

apps/storybook/.storybook/main.ts

@@ -1,12 +1,12 @@
-import path, { dirname as nodeDirname, resolve } from 'node:path';
+import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type { StorybookConfig } from '@storybook/react-vite';
 import * as R from 'ramda';
 import type { PropItem } from 'react-docgen-typescript';
 import { defineConfig, mergeConfig } from 'vite';
 
 const __filename = fileURLToPath(import.meta.url);
-const __dirname = nodeDirname(__filename);
+const __dirname = path.dirname(__filename);
 
 const dirname =
   typeof __dirname !== 'undefined'
@@ -35,7 +35,7 @@ const config: StorybookConfig = {
     /* If in prod, use docgen-typescript, locally use docgen */
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
-      include: [resolve(dirname, '../../../packages/react/**/**.tsx')], // <- This is the important line.
+      include: [path.resolve(dirname, '../../../packages/react/**/**.tsx')], // <- This is the important line.
       shouldExtractLiteralValuesFromEnum: true,
       shouldRemoveUndefinedFromOptional: true,
       propFilter: (prop: PropItem) => {
@@ -52,6 +52,9 @@ const config: StorybookConfig = {
     '../../../packages/*/!(node_modules)/**/*.mdx',
     '../../../packages/*/!(node_modules)/**/*.@(stories|chromatic).@(ts|tsx)',
   ],
+  features: {
+    developmentModeForBuild: true, // Make axe not run too early (see https://storybook.js.org/docs/writing-tests/accessibility-testing#the-addon-panel-does-not-show-expected-violations)
+  },
   experimental_indexers: (existingIndexers) => {
     /*
      * The following is required in order to process .chromatic.tsx with the default indexer
@@ -87,7 +90,7 @@ const config: StorybookConfig = {
     options: {
       strictMode: true,
       builder: {
-        viteConfigPath: resolve(dirname, '../../../vite.config.ts'),
+        viteConfigPath: path.resolve(dirname, '../../../vite.config.ts'),
       },
     },
   },
@@ -99,6 +102,7 @@ const config: StorybookConfig = {
       chromatic: {
         excludeFromDocsStories: true,
         excludeFromSidebar: options.configType === 'PRODUCTION',
+        exitOnceUploaded: true, // Exit Storybook once Chromatic stories are uploaded, to speed up CI builds.
         ...tagOptions?.chromatic,
       },
     };