feat: @digdir/designsystemet-web

.changeset/brave-berries-kneel.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**breadcrumbs**: use `<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-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
+---
+
+First implementation on `@digdir/designsystemet-web`

.changeset/gentle-eagles-cry.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**ToggleGroup**: change internal DOM

.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

.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**: use `<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/real-worms-act.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**field**: use `<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**: use `<ds-tabs>` and related web components internally

.changeset/silent-needles-smash.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**ErrorSummary**: use `<ds-error-summary>` internally, and deprecate `asChild`, since we now recommend to use our web component

.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/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/stupid-tigers-judge.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**tooltip**: use `[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,
       },
     };

apps/storybook/.storybook/vitest.setup.ts

@@ -2,6 +2,18 @@ import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
 import { setProjectAnnotations } from '@storybook/react-vite';
 import * as projectAnnotations from './preview';
 
+// Speed up by using instant animations/transitions during testing
+document.head.appendChild(
+  Object.assign(document.createElement('style'), {
+    textContent: `*, *::before, *::after {
+    transition-duration: 0ms !important;
+    animation-duration: 0ms !important;
+    transition-delay: 0ms !important;
+    animation-delay: 0ms !important;
+  }`,
+  }),
+);
+
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
 setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

apps/storybook/vitest.config.ts

@@ -27,6 +27,7 @@ export default mergeConfig(viteConfig, {
       provider: playwright(),
       headless: true,
     },
+    testTimeout: 10000,
     setupFiles: ['./.storybook/vitest.setup.ts'],
     reporters: [
       'default',

apps/themebuilder/app/_components/color-preview/color-preview.tsx

@@ -56,6 +56,7 @@ export const ColorPreview = () => {
         <div className='panelBottom'>
           <div className={classes.label}>{t('colorPreview.view')}</div>
           <ToggleGroup
+            data-toggle-group='Visning'
             data-size='sm'
             defaultValue={DEFAULT_VIEW}
             onChange={(value: string) => setView(value as ViewType)}

apps/themebuilder/app/_components/config-paste/config-paste.tsx

@@ -74,14 +74,14 @@ export function ConfigPaste() {
         </Button>
         {configText && (
           <Button
-            onClick={() => {
+            onClick={(event) => {
               setConfigText('');
               setValidatedConfig(null);
               setError(null);
+              event.currentTarget.closest('dialog')?.close();
             }}
             variant='secondary'
             data-size='sm'
-            data-command='close'
           >
             {t('colorPane.cancel')}
           </Button>

apps/themebuilder/app/_components/previews/previews.tsx

@@ -36,6 +36,7 @@ export const Previews = () => {
     <>
       <div className={classes.toolbar} data-size='sm'>
         <ToggleGroup
+          data-toggle-group='Tema'
           value={theme as string}
           onChange={(v) => setTheme(v as keyof typeof themes)}
         >
@@ -47,6 +48,7 @@ export const Previews = () => {
           </ToggleGroup.Item>
         </ToggleGroup>
         <ToggleGroup
+          data-toggle-group='Modus'
           value={colorScheme}
           onChange={(v) => setColorScheme(v as ColorScheme)}
         >