fix(Accordion): implement css adjustments and native details (#2363)

- Fixes #2100 🥳 
- Deprecates #2176, #2190
- Built on top of `<u-details>` for [better accessibility on
mobile](https://u-elements.github.io/u-elements/elements/u-details#accessibility)
- Removes `level` from `AccordionHeader` as this is not supported by
native `<details>`
- Removes `onHeaderClick` from `AccordionHeader` as this is identical to
adding a `onClick` handler
- JS-based animation can be removed and replaced by CSS when
`calc-size(auto)` is fully supported 🚀
- Fixes shrinking chevron on mobile/zoom
- Fixes text-align in AccordionHeader on mobile/zoom
- Follows: #2295 
- Also works in `dir="rtl"`

Question: It is now implemented so search-in-page only works when using
`defaultOpen`, as a controlled `open` should not be affected by user
interaction. Just checking - does this make sense to you guys as well?
:)

Author: eirikbacker

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

@@ -3,7 +3,7 @@ import {
   CardContent,
   Heading,
   Paragraph,
-  AccordionRoot,
+  Accordion,
   AccordionItem,
   AccordionContent,
   AccordionHeading
@@ -183,11 +183,11 @@ Her må vi gjøre det så tydelig som mulig for brukeren at flere felt påvirker
 
 I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis har alle opplysningene, men må fylle ut minst ett felt.
 
-<AccordionRoot
+<Accordion
   color='neutral'
 >
   <AccordionItem>
-    <AccordionHeading level={3}>Eksempel på feilmelding som gjelder flere felt</AccordionHeading>
+    <AccordionHeading>Eksempel på feilmelding som gjelder flere felt</AccordionHeading>
     <AccordionContent
         style={{
         paddingTop: '0px',
@@ -216,7 +216,7 @@ I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis ha
       />
     </AccordionContent>
   </AccordionItem>
-</AccordionRoot>
+</Accordion>
 
 ## Kode
 

apps/theme/components/Previews/Components/Components.tsx

@@ -339,9 +339,9 @@ export const Components = () => {
         <Heading size='xs' className={classes.cardTitle}>
           Ofte stillte spørsmål
         </Heading>
-        <Accordion.Root color='brand3' border className={classes.accordion}>
+        <Accordion color='brand3' border className={classes.accordion}>
           <Accordion.Item>
-            <Accordion.Heading level={3}>
+            <Accordion.Heading>
               Hvem kan registrere seg i Frivillighetsregisteret?
             </Accordion.Heading>
             <Accordion.Content>
@@ -353,7 +353,7 @@ export const Components = () => {
             </Accordion.Content>
           </Accordion.Item>
           <Accordion.Item>
-            <Accordion.Heading level={3}>
+            <Accordion.Heading>
               Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
             </Accordion.Heading>
             <Accordion.Content>
@@ -363,7 +363,7 @@ export const Components = () => {
             </Accordion.Content>
           </Accordion.Item>
           <Accordion.Item>
-            <Accordion.Heading level={3}>
+            <Accordion.Heading>
               Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
             </Accordion.Heading>
             <Accordion.Content>
@@ -372,7 +372,7 @@ export const Components = () => {
               registrene samtidig i Samordnet registermelding.
             </Accordion.Content>
           </Accordion.Item>
-        </Accordion.Root>
+        </Accordion>
       </div>
       <div className={cl(classes.card, classes.alert)}>
         <Alert color='info'>

packages/css/accordion.css

@@ -1,139 +1,119 @@
-.ds-accordion {
-  --dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
+.ds-accordion-group {
   --dsc-accordion-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background-open: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
-  --dsc-accordion-icon-background-active: var(--ds-color-neutral-surface-default);
-
-  border-bottom: 1px solid var(--dsc-accordion-border-color);
-  box-sizing: border-box;
-  background-color: var(--dsc-accordion-background);
-}
-
-.ds-accordion--border {
-  border: 1px solid var(--dsc-accordion-border-color);
-  border-radius: var(--dsc-accordion-border-radius);
-}
-
-.ds-accordion__expand-icon {
-  border-radius: var(--ds-border-radius-md);
-  color: var(--ds-color-neutral-text-default);
-}
-
-.ds-accordion__content {
-  padding: var(--ds-spacing-5, 1rem);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ds-accordion__heading {
-  margin: 0;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--ds-spacing-2);
-  text-align: left;
-  border: none;
-  border-top: 1px solid var(--dsc-accordion-border-color);
-  background-color: var(--dsc-accordion-button-background);
-}
-
-.ds-accordion__button {
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--ds-spacing-2);
-  margin: 0;
-  padding: var(--ds-spacing-4);
-  background-color: transparent;
-  border: none;
-  font-family: inherit;
-}
-
-.ds-accordion__item--open .ds-accordion__heading {
-  background-color: var(--dsc-accordion-button-background-open);
-}
-
-.ds-accordion__item:focus-within {
-  position: relative;
-}
-
-.ds-accordion__item:where(.ds-accordion__item--open) .ds-accordion__expand-icon {
-  transform: rotateZ(180deg);
-}
+  --dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
+  --dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
+  --dsc-accordion-chevron-gap: var(--ds-spacing-2);
+  --dsc-accordion-chevron-size: var(--ds-spacing-6);
+  --dsc-accordion-chevron-rotate: 0deg;
+  --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-default);
+  --dsc-accordion-heading-background--open: var(--ds-color-neutral-background-subtle);
+  --dsc-accordion-heading-background: var(--ds-color-neutral-background-default);
+  --dsc-accordion-padding: var(--ds-spacing-4);
+
+  &[data-border] > * {
+    border: var(--dsc-accordion-border);
+
+    &:first-child,
+    &:first-child > :is(summary, u-summary) {
+      border-top-left-radius: var(--dsc-accordion-border-radius);
+      border-top-right-radius: var(--dsc-accordion-border-radius);
+    }
+
+    &:last-child,
+    &:last-child:not([open]) > :is(summary, u-summary) {
+      border-bottom-left-radius: var(--dsc-accordion-border-radius);
+      border-bottom-right-radius: var(--dsc-accordion-border-radius);
+    }
+  }
 
-.ds-accordion__item:not(:first-child) .ds-accordion__heading {
-  border-top: 1px solid var(--dsc-accordion-border-color);
-}
+  &[data-color='subtle'] {
+    --dsc-accordion-background: var(--ds-color-neutral-background-subtle);
+    --dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
+    --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-hover);
+    --dsc-accordion-heading-background--open: var(--ds-color-neutral-surface-default);
+    --dsc-accordion-heading-background: var(--ds-color-neutral-background-subtle);
+  }
 
-.ds-accordion--border .ds-accordion__item:first-child .ds-accordion__heading {
-  border-top: 0;
-}
+  &[data-color='brand1'] {
+    --dsc-accordion-background: var(--ds-color-brand1-background-subtle);
+    --dsc-accordion-border: 1px solid var(--ds-color-brand1-border-subtle);
+    --dsc-accordion-heading-background--hover: var(--ds-color-brand1-surface-hover);
+    --dsc-accordion-heading-background--open: var(--ds-color-brand1-surface-default);
+    --dsc-accordion-heading-background: var(--ds-color-brand1-surface-default);
+  }
 
-.ds-accordion--border .ds-accordion__item:first-of-type .ds-accordion__heading:first-of-type {
-  border-top-left-radius: var(--dsc-accordion-border-radius);
-  border-top-right-radius: var(--dsc-accordion-border-radius);
-}
+  &[data-color='brand2'] {
+    --dsc-accordion-background: var(--ds-color-brand2-background-subtle);
+    --dsc-accordion-border: 1px solid var(--ds-color-brand2-border-subtle);
+    --dsc-accordion-heading-background--hover: var(--ds-color-brand2-surface-hover);
+    --dsc-accordion-heading-background--open: var(--ds-color-brand2-surface-default);
+    --dsc-accordion-heading-background: var(--ds-color-brand2-surface-default);
+  }
 
-.ds-accordion--border .ds-accordion__item:last-of-type:not(.ds-accordion__item--open) .ds-accordion__heading:first-of-type {
-  border-bottom-left-radius: var(--dsc-accordion-border-radius);
-  border-bottom-right-radius: var(--dsc-accordion-border-radius);
+  &[data-color='brand3'] {
+    --dsc-accordion-background: var(--ds-color-brand3-background-subtle);
+    --dsc-accordion-border: 1px solid var(--ds-color-brand3-border-subtle);
+    --dsc-accordion-heading-background--hover: var(--ds-color-brand3-surface-hover);
+    --dsc-accordion-heading-background--open: var(--ds-color-brand3-surface-default);
+    --dsc-accordion-heading-background: var(--ds-color-brand3-surface-default);
+  }
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .ds-accordion__heading:hover .ds-accordion__expand-icon {
-    background-color: var(--dsc-accordion-icon-background-hover);
+.ds-accordion__item {
+  background: var(--dsc-accordion-background);
+  border-block: var(--dsc-accordion-border);
+
+  & > :is(summary, u-summary) {
+    background: var(--dsc-accordion-heading-background);
+    box-sizing: border-box;
+    cursor: pointer;
+    list-style: none;
+    outline: none;
+    padding-block: var(--dsc-accordion-padding);
+    padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding);
+
+    &:focus-visible {
+      position: relative; /* Ensure foucs outline renders on top */
+    }
+
+    &::before {
+      background: currentcolor;
+      border-radius: var(--ds-border-radius-md);
+      content: '';
+      height: var(--dsc-accordion-chevron-size);
+      mask: 50% / contain no-repeat
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
+      position: absolute;
+      rotate: var(--dsc-accordion-chevron-rotate);
+      margin-inline: calc(
+        (var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) * -1
+      ); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+
+      width: var(--dsc-accordion-chevron-size);
+    }
   }
 
-  .ds-accordion__item--open .ds-accordion__heading:hover .ds-accordion__expand-icon {
-    background-color: var(--dsc-accordion-icon-background-active);
+  & + & {
+    border-top: 0; /* Skip border-top when .accordion__item is followed by .accordion__item */
   }
-}
 
-.ds-accordion--neutral {
-  --dsc-accordion-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background-open: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
-}
-
-.ds-accordion--subtle {
-  --dsc-accordion-background: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-neutral-border-default);
-  --dsc-accordion-button-background: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-button-background-open: var(--ds-color-neutral-surface-default);
-  --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
-  --dsc-accordion-icon-background-active: var(--ds-color-neutral-surface-active);
-}
+  & > :not(summary, u-summary) {
+    border-radius: inherit;
+    padding: var(--ds-spacing-5, 1rem);
+  }
 
-.ds-accordion--brand1 {
-  --dsc-accordion-background: var(--ds-color-brand1-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-brand1-border-subtle);
-  --dsc-accordion-button-background: var(--ds-color-brand1-surface-default);
-  --dsc-accordion-button-background-open: var(--ds-color-brand1-surface-hover);
-  --dsc-accordion-icon-background-hover: var(--ds-color-brand1-surface-active);
-  --dsc-accordion-icon-background-active: var(--ds-color-brand1-surface-active);
-}
+  &[open] > :is(summary, u-summary) {
+    background: var(--dsc-accordion-heading-background--open);
+  }
 
-.ds-accordion--brand2 {
-  --dsc-accordion-background: var(--ds-color-brand2-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-brand2-border-subtle);
-  --dsc-accordion-button-background: var(--ds-color-brand2-surface-default);
-  --dsc-accordion-button-background-open: var(--ds-color-brand2-surface-hover);
-  --dsc-accordion-icon-background-hover: var(--ds-color-brand2-surface-active);
-  --dsc-accordion-icon-background-active: var(--ds-color-brand2-surface-active);
-}
+  /* Make flip on click */
+  &[open]:not([data-chevron-open='false']) {
+    --dsc-accordion-chevron-rotate: -180deg;
+  }
 
-.ds-accordion--brand3 {
-  --dsc-accordion-background: var(--ds-color-brand3-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-brand3-border-subtle);
-  --dsc-accordion-button-background: var(--ds-color-brand3-surface-default);
-  --dsc-accordion-button-background-open: var(--ds-color-brand3-surface-hover);
-  --dsc-accordion-icon-background-hover: var(--ds-color-brand3-surface-active);
-  --dsc-accordion-icon-background-active: var(--ds-color-brand3-surface-active);
+  @media (hover: hover) and (pointer: fine) {
+    & > :is(summary, u-summary):hover {
+      background: var(--dsc-accordion-heading-background--hover);
+    }
+  }
 }

packages/react/package.json

@@ -39,7 +39,8 @@
     "@floating-ui/react": "0.26.23",
     "@navikt/aksel-icons": "^6.14.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@tanstack/react-virtual": "^3.10.7"
+    "@tanstack/react-virtual": "^3.10.7",
+    "@u-elements/u-details": "^0.0.5"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",

packages/react/src/components/Accordion/Accordion.mdx

@@ -25,7 +25,7 @@ Med `Accordion` kan du presentere mye innhold på liten plass i en eller flere r
 ```tsx
 import { Accordion } from '@digdir/designsystemet-react';
 
-<Accordion.Root>
+<Accordion>
   <Accordion.Item>
     <Accordion.Heading>Accordion heading text</Accordion.Heading>
     <Accordion.Content>Accordion content</Accordion.Content>
@@ -34,7 +34,7 @@ import { Accordion } from '@digdir/designsystemet-react';
     <Accordion.Heading>Accordion heading text</Accordion.Heading>
     <Accordion.Content>Accordion content</Accordion.Content>
   </Accordion.Item>
-</Accordion.Root>;
+</Accordion>;
 ```
 
 ## Eksempler