@digdir/designsystemet-css 1.0.0-next.34 → 1.0.0-next.35

package/accordion.css

@@ -4,7 +4,6 @@
   --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);
@@ -62,6 +61,7 @@
 .ds-accordion__item {
   background: var(--dsc-accordion-background);
   border-block: var(--dsc-accordion-border);
+  box-sizing: border-box;
 
   & > :is(summary, u-summary) {
     background: var(--dsc-accordion-heading-background);
@@ -72,6 +72,9 @@
     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);
 
+    @composes ds-focus from './utilities.css';
+    @composes ds-body-text--sm from './utilities.css';
+
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
     }
@@ -84,7 +87,6 @@
       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" */
@@ -104,11 +106,10 @@
 
   &[open] > :is(summary, u-summary) {
     background: var(--dsc-accordion-heading-background--open);
-  }
 
-  /* Make flip on click */
-  &[open]:not([data-chevron-open='false']) {
-    --dsc-accordion-chevron-rotate: -180deg;
+    &::before {
+      rotate: 180deg;
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -116,4 +117,20 @@
       background: var(--dsc-accordion-heading-background--hover);
     }
   }
+
+  @media (prefers-reduced-motion: no-preference) {
+    interpolate-size: allow-keywords; /* stylelint-disable-line property-no-unknown */
+  }
+
+  &::part(details-content) {
+    block-size: 0;
+    overflow-y: clip;
+    transition:
+      content-visibility 400ms allow-discrete,
+      height 400ms;
+  }
+
+  &[open]::part(details-content) {
+    height: auto;
+  }
 }

package/alert.css

@@ -12,41 +12,47 @@
   background: var(--dsc-alert-background);
   border-radius: var(--dsc-alert-border-radius);
   border: 1px solid var(--dsc-alert-border-color);
+  box-sizing: border-box;
   color: var(--dsc-alert-color);
   padding-block: var(--dsc-alert-padding);
   padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);
 
+  @composes ds-body-text--md from './utilities.css';
+
   & > :is(h1,h2,h3,h4,h5,h6):first-child::before, /* If Alert starts with Heading, align icon to this */
   &:not(:has(> :is(h1,h2,h3,h4,h5,h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
     background-color: var(--dsc-alert-icon-color);
     content: '';
     display: block;
     height: var(--dsc-alert-icon-size);
-    margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+    margin-inline: calc(
+      (var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1
+    ); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+
     mask: var(--dsc-alert-icon-url) center/contain no-repeat;
     position: absolute;
-    translate: 0 calc(.5lh - var(--dsc-alert-icon-size) / 2); /* Center icon to line height */
+    translate: 0 calc((1lh - var(--dsc-alert-icon-size)) / 2); /* Center icon to line height */
     width: var(--dsc-alert-icon-size);
   }
 
   /**
     * Colors
     */
-  &[data-color="warning"] {
+  &[data-color='warning'] {
     --dsc-alert-border-color: var(--ds-color-warning-border-default);
     --dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
     --dsc-alert-background: var(--ds-color-warning-surface-default);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
   }
 
-  &[data-color="success"] {
+  &[data-color='success'] {
     --dsc-alert-background: var(--ds-color-success-surface-default);
     --dsc-alert-border-color: var(--ds-color-success-border-default);
     --dsc-alert-icon-color: var(--ds-color-success-text-subtle);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
   }
 
-  &[data-color="danger"] {
+  &[data-color='danger'] {
     --dsc-alert-background: var(--ds-color-danger-surface-default);
     --dsc-alert-border-color: var(--ds-color-danger-border-default);
     --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
@@ -56,13 +62,17 @@
   /**
     * Sizes
     */
-  &[data-size="sm"] {
+  &[data-size='sm'] {
     --dsc-alert-icon-size: var(--ds-sizing-6);
     --dsc-alert-padding: var(--ds-spacing-5);
+
+    @composes ds-body-text--sm from './utilities.css';
   }
 
-  &[data-size="lg"] {
+  &[data-size='lg'] {
     --dsc-alert-icon-size: var(--ds-sizing-8);
     --dsc-alert-padding: var(--ds-spacing-7);
+
+    @composes ds-body-text--lg from './utilities.css';
   }
 }

package/avatar.css

@@ -5,18 +5,21 @@
   --dsc-avatar-padding: var(--ds-spacing-2);
   --dsc-avatar-border-radius: 50%;
 
-  background: var(--dsc-avatar-background);
-  height: var(--dsc-avatar-size);
+  align-items: center;
   aspect-ratio: 1 / 1;
-  color: var(--dsc-avatar-color);
+  background: var(--dsc-avatar-background);
   border-radius: var(--dsc-avatar-border-radius);
-  overflow: hidden;
+  box-sizing: border-box;
+  color: var(--dsc-avatar-color);
   display: inline-flex;
+  height: var(--dsc-avatar-size);
   justify-content: center;
-  align-items: center;
-  user-select: none;
-  text-transform: uppercase;
+  overflow: hidden;
   text-decoration: none;
+  text-transform: uppercase;
+  user-select: none;
+
+  @composes ds-body-text--xs from './utilities.css';
 
   &:not(:has(> img)) {
     padding: var(--dsc-avatar-padding);
@@ -79,20 +82,28 @@
   &[data-size='xs'] {
     --dsc-avatar-size: var(--ds-sizing-7);
     --dsc-avatar-padding: var(--ds-spacing-1);
+
+    @composes ds-body-text--xs from './utilities.css';
   }
 
   &[data-size='sm'] {
     --dsc-avatar-size: var(--ds-sizing-9);
     --dsc-avatar-padding: var(--ds-spacing-1);
+
+    @composes ds-heading-text--2xs from './utilities.css';
   }
 
   &[data-size='md'] {
     --dsc-avatar-size: var(--ds-sizing-12);
     --dsc-avatar-padding: var(--ds-spacing-2);
+
+    @composes ds-heading-text--sm from './utilities.css';
   }
 
   &[data-size='lg'] {
     --dsc-avatar-size: var(--ds-sizing-15);
     --dsc-avatar-padding: var(--ds-spacing-2);
+
+    @composes ds-heading-text--md from './utilities.css';
   }
 }

package/badge.css

@@ -4,9 +4,12 @@
   --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
   --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
 
+  box-sizing: border-box;
   display: inline-flex;
   position: relative;
 
+  @composes ds-body-text--short-sm from './utilities.css';
+
   &::before {
     content: attr(data-count);
     background: var(--dsc-badge-background);
@@ -24,6 +27,8 @@
     --dsc-badge-size: var(--ds-sizing-3);
     --dsc-badge-padding: 0 var(--ds-spacing-1);
 
+    @composes ds-body-text--short-xs from './utilities.css';
+
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-5);
     }
@@ -33,6 +38,8 @@
     --dsc-badge-size: var(--ds-sizing-4);
     --dsc-badge-padding: 0 var(--ds-spacing-2);
 
+    @composes ds-body-text--short-md from './utilities.css';
+
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-7);
     }

package/breadcrumbs.css

@@ -2,14 +2,20 @@
   --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
   --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
 
+  @composes ds-body-text--md from './utilities.css';
+
   &[data-size='sm'] {
     --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
     --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
+
+    @composes ds-body-text--sm from './utilities.css';
   }
 
   &[data-size='lg'] {
     --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
     --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
+
+    @composes ds-body-text--lg from './utilities.css';
   }
 
   & > :is(ol, ul) {
@@ -56,7 +62,7 @@
   }
 
   @media (min-width: 651px) {
-    & > :not(ol, ul) {
+    & > :is(:not(ol, ul)):not(:only-child) {
       display: none; /* Hide back link when desktop and having list */
     }
   }

package/button.css

@@ -9,8 +9,8 @@
   --dsc-button-padding-inline: var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
+  @composes ds-body-text--short-md from './utilities.css';
   @composes ds-focus from './utilities.css';
-  @composes ds-paragraph-short from './baseline/typography.css';
 
   align-items: center;
   background: var(--dsc-button-background);
@@ -42,12 +42,16 @@
     --dsc-button-padding-block: var(--ds-spacing-2);
     --dsc-button-padding-inline: var(--ds-spacing-3);
     --dsc-button-size: var(--ds-sizing-10);
+
+    @composes ds-body-text--short-sm from './utilities.css';
   }
 
   &[data-size='lg'] {
     --dsc-button-padding-block: var(--ds-spacing-3);
     --dsc-button-padding-inline: var(--ds-spacing-5);
     --dsc-button-size: var(--ds-sizing-14);
+
+    @composes ds-body-text--short-lg from './utilities.css';
   }
 
   &[data-icon] {

package/card.css

@@ -1,197 +1,139 @@
 .ds-card {
+  --dsc-card-background--active: var(--ds-color-neutral-surface-default);
+  --dsc-card-background--hover: var(--ds-color-neutral-background-subtle);
+  --dsc-card-background: var(--ds-color-neutral-background-default);
   --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-card-backround: var(--ds-color-neutral-background-default);
+  --dsc-card-border: 1px solid var(--dsc-card-border-color);
   --dsc-card-color: var(--ds-color-neutral-text-default);
+  --dsc-card-gap: 1rem;
+  --dsc-card-padding: var(--ds-spacing-6);
 
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+  all: unset; /* Reset if <button> */
+  display: block;
+  background: var(--dsc-card-background);
+  border-radius: min(1rem, var(--ds-border-radius-md));
+  border: var(--dsc-card-border);
   box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
   color: var(--dsc-card-color);
-  border-radius: min(1rem, var(--ds-border-radius-md));
-  border: 1px solid var(--dsc-card-border-color);
-  background: var(--dsc-card-backround);
+  overflow: clip; /* Needed to clip media elements and and Card.Block */
+  padding: var(--dsc-card-padding);
+
+  @composes ds-paragraph from './baseline/typography.css'; /* Must be after all: unset */
 
-  &[data-link] {
-    --dsc-card-border-color: var(--ds-color-neutral-border-default);
+  /* Style link in heading, or heading when Card is anchor */
+  :is(h1, h2, h3, h4, h5, h6) a:any-link, /* Using :any-link to target both a and a:visited */
+  &:is(a:any-link, button, [role='button']) :is(h1, h2, h3, h4, h5, h6) {
+    color: inherit;
+    outline: 0;
+    text-decoration: underline;
+    text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
+    text-underline-offset: max(6px, 0.25rem, 0.22em);
+  }
 
+  /* Add states when Card is a anchor, button, or when containing a anchor in heading */
+  &:where(a, button, [role='button']),
+  &:where(:has(:is(h1, h2, h3, h4, h5, h6) a)) {
+    cursor: pointer;
     text-decoration: none;
 
-    & h1,
-    & h2,
-    & h3,
-    & h4,
-    & h5,
-    & h6 {
-      color: var(--dsc-card-color);
-      text-decoration: underline;
-      text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
-      text-underline-offset: max(6px, 0.25rem, 0.22em);
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: var(--dsc-card-background--hover);
+      }
+    }
+
+    /* Using CSS custom property instead of composes since we need to support :has(:focus-visible) */
+    &:where(:focus-visible, :has(:focus-visible)) {
+      @composes ds-focus--visible from './utilities.css';
     }
 
     &:active {
-      --dsc-card-backround: var(--ds-color-neutral-surface-default);
+      background: var(--dsc-card-background--active);
     }
+  }
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        --dsc-card-backround: var(--ds-color-neutral-background-subtle);
-      }
-    }
+  &:has(> .ds-card__block) {
+    padding: 0; /* Let Card.Block own the padding */
   }
 
   &[data-color='subtle'] {
+    --dsc-card-background--active: var(--ds-color-neutral-surface-hover);
+    --dsc-card-background--hover: var(--ds-color-neutral-surface-default);
+    --dsc-card-background: var(--ds-color-neutral-background-subtle);
     --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-    --dsc-card-backround: var(--ds-color-neutral-background-subtle);
-
-    &[data-link] {
-      --dsc-card-border-color: var(--ds-color-neutral-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-neutral-surface-hover);
-      }
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-neutral-surface-default);
-        }
-      }
-    }
   }
 
   &[data-color='brand1'] {
+    --dsc-card-background--active: var(--ds-color-brand1-surface-active);
+    --dsc-card-background--hover: var(--ds-color-brand1-surface-hover);
+    --dsc-card-background: var(--ds-color-brand1-surface-default);
     --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
-    --dsc-card-backround: var(--ds-color-brand1-surface-default);
     --dsc-card-color: var(--ds-color-brand1-text-default);
-
-    &[data-link] {
-      --dsc-card-border-color: var(--ds-color-brand1-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-brand1-surface-active);
-      }
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-brand1-surface-hover);
-        }
-      }
-    }
   }
 
   &[data-color='brand2'] {
+    --dsc-card-background--active: var(--ds-color-brand2-surface-active);
+    --dsc-card-background--hover: var(--ds-color-brand2-surface-hover);
+    --dsc-card-background: var(--ds-color-brand2-surface-default);
     --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
-    --dsc-card-backround: var(--ds-color-brand2-surface-default);
     --dsc-card-color: var(--ds-color-brand2-text-default);
-
-    &[data-link] {
-      --dsc-card-border-color: var(--ds-color-brand2-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-brand2-surface-active);
-      }
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-brand2-surface-hover);
-        }
-      }
-    }
   }
 
   &[data-color='brand3'] {
+    --dsc-card-background--active: var(--ds-color-brand3-surface-active);
+    --dsc-card-background--hover: var(--ds-color-brand3-surface-hover);
+    --dsc-card-background: var(--ds-color-brand3-surface-default);
     --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
-    --dsc-card-backround: var(--ds-color-brand3-surface-default);
     --dsc-card-color: var(--ds-color-brand3-text-default);
-
-    &[data-link] {
-      --dsc-card-border-color: var(--ds-color-brand3-border-default);
-
-      &:active {
-        --dsc-card-backround: var(--ds-color-brand3-surface-active);
-      }
-
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --dsc-card-backround: var(--ds-color-brand3-surface-hover);
-        }
-      }
-    }
-  }
-
-  .ds-card__header h1,
-  .ds-card__header h2,
-  .ds-card__header h3,
-  .ds-card__header h4,
-  .ds-card__header h5,
-  .ds-card__header h6 {
-    color: inherit;
-  }
-
-  .ds-card__media > * {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    border: 0;
-  }
-
-  .ds-card__media {
-    width: auto;
-  }
-
-  .ds-card__media:first-child {
-    padding-bottom: var(--ds-spacing-4);
-  }
-
-  .ds-card__media:last-child {
-    padding-top: var(--ds-spacing-6);
   }
+}
 
-  .ds-card__footer,
-  .ds-card__content {
-    display: flex;
-    justify-content: flex-start;
-    gap: var(--ds-spacing-4);
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    padding: var(--ds-spacing-2) 0;
-    color: inherit;
+/* Using :where to overwrite user agent CSS, but not our own CSS */
+:where(.ds-card, .ds-card__block) {
+  & > :first-child {
+    margin-block: 0;
   }
 
-  .ds-card__content {
-    flex-direction: column;
+  & > * + * {
+    margin-block: var(--dsc-card-gap) 0; /* https://every-layout.dev/layouts/stack/ */
   }
+}
 
-  .ds-card__header {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    font-family: inherit;
-    padding: var(--ds-spacing-2) 0;
-  }
+.ds-card__block {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--dsc-card-padding);
+  position: relative;
 
-  & a:any-link {
-    color: var(--ds-color-neutral-text-default);
+  /* Needed to support automatic separator border between both vertical and horizontal stacking Card.Block: */
+  &::before {
+    content: '';
+    border-top: var(--dsc-card-border);
+    position: absolute;
+    inset: 0 0 auto;
+    translate: 0 -100%;
   }
 
-  & > hr {
-    width: 100%;
-    margin: var(--ds-spacing-3) 0;
+  &::after {
+    content: '';
+    border-left: var(--dsc-card-border);
+    position: absolute;
+    inset: 0 auto 0 0;
+    translate: -100%;
   }
 
-  & > *:not(.ds-card__media, hr) {
-    padding-left: var(--ds-spacing-6);
-    padding-right: var(--ds-spacing-6);
-  }
+  &:has(> :is(audio, figure, iframe, img, video):only-child) {
+    padding: 0;
 
-  & > *:not(.ds-card__media):first-child {
-    padding-top: var(--ds-spacing-6);
-  }
+    & > * {
+      border: 0;
+      display: block;
+      height: auto;
+      width: 100%;
+    }
 
-  & > *:not(.ds-card__media):last-child {
-    padding-bottom: var(--ds-spacing-6);
+    & > iframe {
+      aspect-ratio: 16 / 9; /* Make iframes scale responsively */
+    }
   }
 }