Merge branch 'next' into refactor/auto-generate-builtin-colors

.changeset/clever-camels-allow.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+**tokens**: Renamed `font.family` to `font-family`

.changeset/cool-dancers-prove.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Dialog**: Remove `backdropClose`, and replace with `closedby="none | closerequest | any"` to align with [upcoming browser standard](https://chromestatus.com/feature/5097714453577728)

.changeset/early-houses-remain.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+**tokens**: `extra-bold` token should now have correct value according to Token Studio

.changeset/flat-turtles-cry.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+**tokens**: Added `font-weight` to token name for fontWeight tokens (e.g. `font-weight.medium`)

.changeset/good-melons-report.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Radio**: fix filled error state in `Fieldset`

.changeset/happy-hornets-lie.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Tabs**: Focus now fully encompasses `Tab`

.changeset/khaki-cows-grow.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**MultiSelect**: New experimental component replacing `Combobox` in multiple mode

.changeset/lazy-starfishes-run.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Details**: Change to inset focus

.changeset/loud-trees-swim.md

@@ -0,0 +1,10 @@
+---
+"@digdir/designsystemet-react": major
+"@digdir/designsystemet-theme": major
+"@digdir/designsystemet": major
+"@digdir/designsystemet-css": major
+---
+
+🎉 Version 1.0 of Designsystemet! 🎉
+
+We are excited to announce the release of Version 1.0 of Designsystemet! This marks a significant milestone as we establish a solid foundation for future development. 🚀

.changeset/nine-worms-spend.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**`Badge`, `Card`, `Details`, `Popover`**: Rename `data-variant` prop to `variant`

.changeset/ninety-oranges-march.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Fix `peerDependencies` definition for React 19

.changeset/old-monkeys-grab.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Dropdown**: Move dropdown closer to trigger

.changeset/purple-tigers-pump.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet": patch
+"@digdir/designsystemet-css": patch
+---
+
+Removed `--ds-global` colors from tokens build

.changeset/quick-loops-send.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": patch
+---
+
+Some options supplied to the CLI were being overridden by their default values

.changeset/seven-hornets-cheat.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Breadcrumbs**: Fix arrow to inherit color when in a link

.changeset/sour-tips-poke.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**`ToggleGroup.Item`**: Disallow setting `variant` directly, it should only be set based on which item in the group is active

.changeset/thick-horses-sing.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Rename `--ds-disabled-opacity` to `--ds-opacity-disabled`

.changeset/tricky-baboons-invite.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Added `:not([hidden])` around `display` CSS properties to respect native `hidden` attribute

.changeset/warm-walls-boil.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet": patch
+"@digdir/designsystemet-css": patch
+---
+
+Added `--ds-link-color-visited` for styling visited links

.github/workflows/deploy-storefront.yml

@@ -38,22 +38,22 @@ jobs:
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 
-      - name: Set default environment value if push event is triggered
-        id: defaultenvironment
+      - name: Set Vercel environment
+        id: environment
         run: |
-          ENVIRONMENT=${{ github.event.inputs.environment }}
-          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+          ENVIRONMENT=${{ github.event.inputs.environment == 'production' && 'production' || 'preview' }}
+          echo "vercel=${ENVIRONMENT}" >> "$GITHUB_OUTPUT"
 
       - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel pull --yes --environment=${{steps.environment.outputs.vercel}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build Project Artifacts
-        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel build ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - id: deploy
         name: Deploy Project Artifacts to Vercel
-        run: echo "url=$(vercel deploy --prebuilt ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
 
       - name: Set Vercel alias
+        if:  steps.environment.outputs.vercel == 'preview'
         run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} next.designsystemet.no
-        if: steps.defaultenvironment.outputs.value == 'next'

.github/workflows/deploy-storybook.yml

@@ -43,22 +43,22 @@ jobs:
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 
-      - name: Set default environment value if push event is triggered
-        id: defaultenvironment
+      - name: Set Vercel environment
+        id: environment
         run: |
-          ENVIRONMENT=${{ github.event.inputs.environment }}
-          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+          ENVIRONMENT=${{ github.event.inputs.environment == 'production' && 'production' || 'preview'  }}
+          echo "vercel=${ENVIRONMENT}" >> "$GITHUB_OUTPUT"
 
       - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel pull --yes --environment=${{steps.environment.outputs.vercel}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build Project Artifacts
-        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel build ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - id: deploy
         name: Deploy Project Artifacts to Vercel
-        run: echo "url=$(vercel deploy --prebuilt ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
 
       - name: Set Vercel alias
+        if: steps.environment.outputs.vercel == 'preview'
         run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} next.storybook.designsystemet.no
-        if: steps.defaultenvironment.outputs.value == 'next'

.github/workflows/deploy-theme.yml

@@ -38,22 +38,22 @@ jobs:
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 
-      - name: Set default environment value if push event is triggered
-        id: defaultenvironment
+      - name: Set Vercel environment
+        id: environment
         run: |
-          ENVIRONMENT=${{ github.event.inputs.environment }}
-          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+          ENVIRONMENT=${{ github.event.inputs.environment == 'production' && 'production' || 'preview'  }}
+          echo "vercel=${ENVIRONMENT}" >> "$GITHUB_OUTPUT"
 
       - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel pull --yes --environment=${{steps.environment.outputs.vercel}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build Project Artifacts
-        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel build ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - id: deploy
         name: Deploy Project Artifacts to Vercel
-        run: echo "url=$(vercel deploy --prebuilt ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
 
       - name: Set Vercel alias
+        if: steps.environment.outputs.vercel == 'preview'
         run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} next.theme.designsystemet.no
-        if: steps.defaultenvironment.outputs.value == 'next'

.vscode/settings.json

@@ -22,7 +22,7 @@
   ],
   "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}",
   "[github-actions-workflow]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "redhat.vscode-yaml"
   },
   "[html]": {
     "editor.defaultFormatter": "biomejs.biome"

RELEASE.md

@@ -0,0 +1,39 @@
+Follow these steps to ensure a smooth and consistent release process.
+# Release 
+
+We currently use [changesets](https://github.com/changesets/changesets) for tracking changes, generating changelogs, and publishing releases.
+
+We don't use changesets prerelease mode yet as we want to avoid additonal steps when creating a new release.
+
+## 1. Update Main with changes from next
+
+- Make a PR from `next` into `main` branch
+
+- Merge PR into `main` using a merge commit
+
+## 2. Publish new package version
+
+- [Changeset bot](https://github.com/apps/changeset-bot) should now pickup the changesets (inside `.changeset/`) and generate a PR with bumped version and changelog.
+
+- Approve and merge the PR.
+
+- [Changeset bot](https://github.com/apps/changeset-bot) will now publish new a package version to npmjs and create [github releases](https://github.com/digdir/designsystemet/releases)
+
+- Verify that new version is available in [npmjs](https://www.npmjs.com/package/@digdir/designsystemet) (under `latest` tag) and on [github releases](https://github.com/digdir/designsystemet/releases)
+
+## 3. Deploy new application version to production
+
+- Manually trigger the github action deployment to `production` environment from `main` branch: 
+  - Deploy Storefront
+  - Deploy Theme
+  - Deploy Storybook
+
+## 4. Update next branch with changes from main
+
+- Make a PR from `main` into `next` branch
+
+- Merge PR into `next` using a rebase merge commit
+
+### **Next**
+
+- Use Release Snapshot to publish new version for testing on `@next` before releasing to production

apps/_components/src/ClipboardButton/ClipboardButton.tsx

@@ -41,7 +41,7 @@ export const ClipboardButton = ({
           data-size='sm'
           aria-label={ariaLabel}
         >
-          <ClipboardIcon fontSize={'1.4rem'} />
+          <ClipboardIcon fontSize={'1.4rem'} aria-hidden='true' />
           {text && <span className={classes.text}>{text}</span>}
         </Button>
       </Tooltip>

apps/_components/src/CodeSnippet/CodeSnippet.tsx

@@ -92,12 +92,12 @@ const CodeSnippet = ({
               onMouseEnter={() => setToolTipText('Kopier')}
               onClick={() => onButtonClick()}
               className={classes.copyButton}
-              aria-label='Kopier'
+              aria-label='Kopier kodesnutt'
               icon
               data-color='neutral'
               data-size='sm'
             >
-              <FilesIcon fontSize='1.5rem' />
+              <FilesIcon fontSize='1.5rem' aria-hidden='true' />
             </Button>
           </Tooltip>
           {/* @ts-ignore -- This has yet to be updated to use react 19 */}

apps/_components/src/ColorModal/ColorModal.tsx

@@ -45,10 +45,10 @@ export const ColorModal = ({
   return (
     <Dialog
       ref={colorModalRef}
+      closedby='any'
       style={{
         maxWidth: '1100px',
       }}
-      backdropClose
     >
       <Dialog.Block>
         <Heading data-size='xs'>

apps/_components/src/Header/Header.module.css

@@ -53,7 +53,7 @@
 }
 
 .tag {
-  background-color: var(--ds-global-purple-4);
+  background-color: light-dark(#e0d6eb, #4f2776);
   border-radius: 4px;
   padding: 4px 10px;
   font-size: 16px;

apps/_components/src/Showcase/Showcase.tsx

@@ -4,17 +4,19 @@ import {
   Button,
   Card,
   Checkbox,
-  Combobox,
   Details,
   Divider,
+  Field,
   Fieldset,
   Heading,
+  Label,
   Link,
   Pagination,
   Paragraph,
   Radio,
   Search,
   Select,
+  EXPERIMENTAL_Suggestion as Suggestion,
   Switch,
   Table,
   Tabs,
@@ -28,6 +30,16 @@ import cl from 'clsx/lite';
 import { type HTMLAttributes, useState } from 'react';
 import classes from './Showcase.module.css';
 
+const DATA_PLACES = [
+  'Sogndal',
+  'Oslo',
+  'Brønnøysund',
+  'Stavanger',
+  'Trondheim',
+  'Bergen',
+  'Lillestrøm',
+];
+
 type ShowcaseProps = HTMLAttributes<HTMLDivElement>;
 
 export function Showcase({ className, ...props }: ShowcaseProps) {
@@ -240,22 +252,22 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
             <ToggleGroup.Item value='sweden'>Sverige</ToggleGroup.Item>
             <ToggleGroup.Item value='utlandet'>Utlandet</ToggleGroup.Item>
           </ToggleGroup>
-          <Combobox
-            description='Velg et sted'
-            label='Hvor går reisen?'
-            portal={false}
-            multiple
-          >
-            <Combobox.Empty>Fant ingen treff</Combobox.Empty>
-            <Combobox.Option value='leikanger'>Leikanger</Combobox.Option>
-            <Combobox.Option value='oslo'>Oslo</Combobox.Option>
-            <Combobox.Option value='bronnoysund'>Brønnøysund</Combobox.Option>
-            <Combobox.Option value='stavanger'>Stavanger</Combobox.Option>
-            <Combobox.Option value='trondheim'>Trondheim</Combobox.Option>
-            <Combobox.Option value='tromso'>Tromsø</Combobox.Option>
-            <Combobox.Option value='bergen'>Bergen</Combobox.Option>
-            <Combobox.Option value='moirana'>Mo i Rana</Combobox.Option>
-          </Combobox>
+          <Field>
+            <Label>Velg en destinasjon</Label>
+            <Suggestion>
+              <Suggestion.Input />
+              <Suggestion.Clear />
+              <Suggestion.List>
+                <Suggestion.Empty>Tomt</Suggestion.Empty>
+                {DATA_PLACES.map((place) => (
+                  <Suggestion.Option key={place} value={place}>
+                    {place}
+                    <div>Kommune</div>
+                  </Suggestion.Option>
+                ))}
+              </Suggestion.List>
+            </Suggestion>
+          </Field>
         </div>
       </div>
       <div className={cl(classes.card, classes.tabs)}>