Merge branch 'next' into details/color-var

.changeset/chilled-terms-look.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Suggestion.Empty**: Remove `asChild` support

.changeset/fluffy-pears-pull.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Badge**: Fix empty badge not being displayed

.changeset/serious-readers-marry.md

@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Dialog:
+- Add missing `overflow: auto`
+- Position with `transform` for easier `translate` animation

.github/workflows/preview-cleanup.yml

@@ -16,6 +16,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
       - id: get-aliases
         name: Get a list of all Vercel aliases and set it to ENV
         run: |

apps/storefront/app/bloggen/2024/altinn-studio/page.mdx

@@ -31,7 +31,7 @@ For at Team Altinn Studio skal nå sine mål om å skape et godt verktøy — m
 
 _"Det er viktig at det er mulig å utvide komponentene til det mer komplekse, fordi alle produkter skal løse et unikt behov i markedet, og ofte vil det forekomme situasjoner hvor mer spesialiserte komponenter er nødvendig. Hvis vi kan utvide eksisterende komponenter fra designsystemet, så vil vi kunne ivareta mye av tilgjengelighetskravene og visuell likhet med de grunnleggende komponentene uten å måtte legge inn for mye innsats."_
 
-<Card color='brand2'>
+<Card data-color='brand2'>
   David Øvrelid, Tech Lead i Altinn Studio, forklarer hvordan Altinn Studio
   bruker Designsystemet. Artikkelen ble først publisert på Medium. [Les den
   opprinnelige

apps/storefront/app/bloggen/_components/Card/BlogCard.module.css

@@ -16,13 +16,6 @@
   }
 }
 
-.card {
-  [data-color-scheme='dark'] &,
-  [data-color-scheme='auto'] & {
-    --dsc-card-background: var(--ds-color-neutral-surface-tinted);
-  }
-}
-
 .tag {
   margin-bottom: 0;
   padding: 3px 9px;

apps/storefront/app/bloggen/_components/Card/BlogCard.tsx

@@ -41,6 +41,8 @@ export const BlogCard = ({
     <Card
       data-featured={featured}
       className={cl(classes.card, className)}
+      data-color='neutral'
+      data-variant='tinted'
       {...props}
     >
       <CardBlock>

apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx

@@ -36,7 +36,7 @@ For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunn
 
 Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjenester. Web Content Accessibility Guidelines (WCAG) inneholder suksesskriterier og forslag til løsninger for å lykkes. Men det er ikke samsvar mellom dagens kontrastregler og kravet om at alle skal kunne se innholdet.
 
-<Card color='brand3' data-unstyled>
+<Card data-color='brand3' data-variant="tinted" data-unstyled>
   <Heading
     level={3}
     data-size='xs'
@@ -60,7 +60,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
 
 <br />
 
-<Card color='brand2' data-unstyled>
+<Card data-color='brand2' data-variant="tinted" data-unstyled>
   <Heading
     level={3}
     data-size='xs'
@@ -123,7 +123,7 @@ Vi vet at selv om en løsning oppfyller de konkrete kravene fra regelverket om u
 
 Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til universell utforming, men det betyr ikke at innholdet er tilgjengelig eller universelt utformet. Derfor strekker vi oss langt i å også oppfylle de fremtidige WCAG-3 kravene som bruker APCA-metoden.
 
-<Card color='brand3' data-unstyled>
+<Card data-color='brand3' data-variant="tinted" data-unstyled>
   **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
   _«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten
   mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for
@@ -135,7 +135,7 @@ Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til univer
 
 <br />
 
-<Card color='brand2' data-unstyled>
+<Card data-color='brand2' data-variant="tinted" data-unstyled>
   **Kontrast i WCAG 3 «visual contrast algorithm»** <br />I WCAG 3 benyttes en
   visuell-kontrast algoritme som kalles for APCA, det er fremdeles
   fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er
@@ -175,7 +175,7 @@ I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe min
 
 <br />
 <br />
-<Card color='brand1' data-unstyled>
+<Card data-color='brand1' data-variant="tinted" data-unstyled>
   **Bidra til artikkelen?** <br />
   Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
   e-post på: designsystem@digdir.no eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).

apps/storefront/app/monstre/feilmeldinger/page.mdx

@@ -158,7 +158,8 @@ Feltet må ha 3:1 kontrast til bakgrunnsfargen. Hvis vi også bruker rød tekst
 Vi viser feilmeldingen under feltet med feil. Dette er det vanligste mønsteret, selv om det også diskuteres om den skal stå mellom ledeteksten og feltet.
 
 <Card
-  color='brand1'
+  data-color='brand1'
+  data-variant="tinted"
   data-unstyled
 >
   Merk: Vi ønsker å holde oss oppdatert om andre anbefalinger om plassering, og har [pågående diskusjon om dette på Git](https://github.com/digdir/designsystemet/discussions/1684#discussioncomment-9339006).
@@ -245,7 +246,7 @@ Vi kan bruke disse aria-attributtene og rollene:
 - Vi setter `aria-invalid="true"` på felt med feil, for å si fra om at det er en feil der.
 - Vi bruker `aria-describedby` for å koble feilmelding til feltet.
 
-<Card color='brand1' data-unstyled>
+<Card data-color='brand1' data-variant="tinted" data-unstyled>
   Vi unngår inntill videre å bruke `aria-errormessage` da den ikke har full støtte av hjelpemidler per nå. Men vi kommer til å oppdatere retningslinjene om støtten blir bedre i fremtiden. [Se diskusjon på github](https://github.com/digdir/designsystemet/discussions/1684)
 </Card>
 
@@ -271,7 +272,7 @@ For feilmeldinger som dukker opp dynamisk må vi bruke `aria-live` for at meldin
 <br />
 <br />
 
-<Card color='brand3' data-unstyled>
+<Card data-color='brand3' data-variant="tinted" data-unstyled>
   Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://designsystemet.no/slack).
 </Card>
 

apps/storefront/app/monstre/obligatoriske-og-valgfrie-felt/page.mdx

@@ -92,7 +92,8 @@ En kombinasjon av obligatoriske og valgfrie felt er ikke ideellt! Men det vil v
 <br />
 
 <Card
-  color='brand3'
+  data-color='brand3'
+  data-variant="tinted"
   data-unstyled
 >
   *Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg og Oslo Origo. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/issues/new) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://designsystemet.no/slack).

apps/storefront/app/monstre/systemvarsler/page.mdx

@@ -252,7 +252,7 @@ Dette gjør at modaltittelen kan få fokus, selv om den normalt ikke er et inter
 
 <br/>
 
-<Card color='brand3' data-unstyled>
+<Card data-color='brand3' data-variant="tinted" data-unstyled>
   Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatteetaten, Brønnøysundregistrene, Politiet, KS, Entur, Mattilsynet og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1801) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://designsystemet.no/slack).
 </Card>
 

apps/storefront/components/NavigationCard/NavigationCard.module.css

@@ -10,7 +10,6 @@
 }
 
 .card:hover {
-  color: inherit;
   box-shadow: var(--ds-shadow-md);
   transform: translateY(-4px);
 }

apps/storefront/components/Tokens/TokenList/TokenList.tsx

@@ -35,7 +35,7 @@ type TokenTableProps = {
 
 const TokensTable = ({ tokens }: TokenTableProps) => {
   return (
-    <Table>
+    <Table data-color='neutral'>
       <Table.Head>
         <Table.Row>
           <Table.HeaderCell>Navn</Table.HeaderCell>

packages/css/src/badge.css

@@ -19,6 +19,10 @@
     box-sizing: border-box;
     line-height: var(--ds-line-height-sm);
     width: fit-content;
+
+    @supports (content: attr(data-count, '')) {
+      content: attr(data-count, '');
+    }
   }
 
   &[data-variant='base'] {

packages/css/src/button.css

@@ -44,7 +44,7 @@
     --dsc-button-color--hover: var(--ds-color-text-default);
   }
   &[data-variant='secondary'] {
-    --dsc-button-border-color: var(--ds-color-text-subtle);
+    --dsc-button-border-color: var(--ds-color-border-strong);
   }
 
   &:not([data-size]) {

packages/css/src/chip.css

@@ -15,6 +15,7 @@
   --dsc-chip-input-stroke-color: var(--ds-color-base-default);
   --dsc-chip-border-radius: var(--ds-border-radius-full);
   --dsc-chip-border-radius--checkbox: var(--ds-border-radius-md);
+  --dsc-chip-border-radius--checkbox-input: var(--ds-border-radius-sm);
   --dsc-chip-height: var(--ds-size-8);
   --dsc-chip-icon-size: var(--ds-size-7);
   --dsc-chip-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
@@ -79,6 +80,10 @@
   &:has(input[type='checkbox']) {
     border-radius: var(--dsc-chip-border-radius--checkbox);
     padding-inline: var(--dsc-chip-spacing);
+
+    & input {
+      border-radius: var(--dsc-chip-border-radius--checkbox-input);
+    }
   }
 
   & > input {

packages/css/src/details.css

@@ -28,9 +28,9 @@
 
   .ds-card[data-variant='tinted'] &,
   &[data-variant='tinted'] {
-    --dsc-details-background: var(--ds-color-background-tinted);
+    --dsc-details-background: var(--ds-color-surface-tinted);
     --dsc-details-summary-background--hover: var(--ds-color-surface-hover);
-    --dsc-details-summary-background--open: var(--ds-color-surface-tinted);
+    --dsc-details-summary-background--open: var(--ds-color-surface-hover);
     --dsc-details-summary-background: var(--ds-color-surface-tinted);
     --dsc-details-border-color: var(--ds-color-border-subtle);
   }

packages/css/src/dialog.css

@@ -32,11 +32,12 @@
   margin: 0;
   max-height: var(--dsc-dialog-max-height);
   max-width: var(--dsc-dialog-max-width);
+  overflow: auto;
   padding: var(--dsc-dialog-spacing);
   position: fixed;
   right: auto;
   top: 50%;
-  translate: -50% -50%;
+  transform: translate(-50%, -50%);
   width: 100%;
 
   &::backdrop {
@@ -106,7 +107,7 @@ body:has(.ds-dialog:modal) {
 
 @keyframes slide-in {
   from {
-    translate: -50% calc(-50% + 3rem);
+    translate: 0 3rem;
   }
 }
 

packages/css/src/suggestion.css

@@ -35,9 +35,13 @@
     max-height: 200px;
 
     /* Hide <suggestion.Empty> if any <suggestion.Option> is visible */
-    &:has(u-option:not([hidden]):not([aria-disabled='true'])) > :not(u-option) {
+    &:has(u-option:not([hidden]):not([aria-disabled='true'])) > u-option[data-empty] {
       display: none;
     }
+    & > u-option[data-empty] {
+      cursor: default;
+      display: block;
+    }
 
     &:not(:has(u-option:hover)) > u-option:focus-visible {
       border-left-color: var(--dsc-suggestion-option-border-color);
@@ -77,7 +81,7 @@
       }
 
       @media (hover: hover) and (pointer: fine) {
-        &:is(u-option):hover {
+        &:not([data-empty]):hover {
           border-left-color: var(--dsc-suggestion-option-border-color);
           background: var(--dsc-suggestion-option-background--selected);
         }

packages/react/package.json

@@ -47,7 +47,7 @@
     "@navikt/aksel-icons": "^7.0.0",
     "@radix-ui/react-slot": "^1.1.1",
     "@tanstack/react-virtual": "^3.11.2",
-    "@u-elements/u-datalist": "^0.1.2",
+    "@u-elements/u-datalist": "^0.1.3",
     "@u-elements/u-details": "^0.1.0",
     "clsx": "^2.1.1"
   },

packages/react/src/components/Suggestion/Suggestion.tsx

@@ -97,9 +97,8 @@ export const Suggestion = forwardRef<HTMLDivElement, SuggestionProps>(
         // Handle custom filter
         if (filter !== false) {
           let index = 0;
-          for (const option of list.children as HTMLCollectionOf<HTMLOptionElement>) {
-            // Skip <datalist> children that are not <option>
-            if ('value' in option)
+          for (const option of list.getElementsByTagName('u-option')) {
+            if (!option.hasAttribute('data-empty'))
               option.disabled = !filter({
                 index: index++, // Increment index for each <option>
                 input,

packages/react/src/components/Suggestion/SuggestionEmpty.tsx

@@ -1,19 +1,9 @@
-import { Slot } from '@radix-ui/react-slot';
-import type { HTMLAttributes } from 'react';
+import type { OptionHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import type { DefaultProps } from '../../types';
-import type { MergeRight } from '../../utilities';
 
-export type SuggestionEmptyProps = MergeRight<
-  DefaultProps & HTMLAttributes<HTMLDivElement>,
-  {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-  }
->;
+export type SuggestionEmptyProps = DefaultProps &
+  OptionHTMLAttributes<HTMLOptionElement>;
 
 /**
  * Component that provides an empty suggestion list.
@@ -25,18 +15,12 @@ export type SuggestionEmptyProps = MergeRight<
  *   <Suggestion.Empty>Tomt</Suggestion.Empty>
  * </Suggestion.List>
  */
-export const SuggestionEmpty = forwardRef<HTMLDivElement, SuggestionEmptyProps>(
-  function SuggestionEmpty({ asChild, ...rest }, ref) {
-    const Component = asChild ? Slot : 'div';
-
-    return (
-      <Component
-        aria-disabled='true'
-        ref={ref}
-        role='option'
-        tabIndex={0}
-        {...rest}
-      />
-    );
-  },
-);
+export const SuggestionEmpty = forwardRef<
+  HTMLOptionElement,
+  SuggestionEmptyProps
+>(function SuggestionEmpty(rest, ref) {
+  return (
+    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
+    <u-option data-empty role='none' ref={ref} {...rest} />
+  );
+});

plugins/figma/src/ui/app.tsx

@@ -1,5 +1,4 @@
 import '@digdir/designsystemet-theme';
-import './theme.css';
 import '@digdir/designsystemet-css';
 
 import './App.css';

yarn.lock

@@ -1105,7 +1105,7 @@ __metadata:
     "@testing-library/user-event": "npm:^14.6.0"
     "@types/react": "npm:^19.0.8"
     "@types/react-dom": "npm:^19.0.3"
-    "@u-elements/u-datalist": "npm:^0.1.2"
+    "@u-elements/u-datalist": "npm:^0.1.3"
     "@u-elements/u-details": "npm:^0.1.0"
     clsx: "npm:^2.1.1"
     copyfiles: "npm:^2.4.1"
@@ -3988,10 +3988,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@u-elements/u-datalist@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "@u-elements/u-datalist@npm:0.1.2"
-  checksum: 10/2744a43af147dcde85df252bf5831d3352dd57553ce36fecb8567d4b341aee1d396fc0ff6198d773da233562f2354d4821a86c7d4113ff3ac70540f7868e10ca
+"@u-elements/u-datalist@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@u-elements/u-datalist@npm:0.1.3"
+  checksum: 10/a52865ba5e23caebc0ae7240e84b7e98b72c2fd81393244ae4676e870a729632cfc3d650d90e4438ac9e82cf0917a2640d3583aaea6950acb534946854738c3b
   languageName: node
   linkType: hard