@digdir/designsystemet-css 1.0.0-next.33 → 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

@@ -2,43 +2,46 @@
   --dsc-badge-background: var(--ds-color-accent-base-default);
   --dsc-badge-color: var(--ds-color-accent-contrast-default);
   --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
-  --dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
-  --dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
+  --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
 
-  background-color: var(--dsc-badge-background);
-  color: var(--dsc-badge-color);
-  border-radius: var(--ds-border-radius-full);
-  display: grid;
-  place-items: center;
-  padding: var(--dsc-badge-padding);
-  height: var(--dsc-badge-height);
-  width: var(--dsc-badge-width);
+  box-sizing: border-box;
+  display: inline-flex;
+  position: relative;
+
+  @composes ds-body-text--short-sm from './utilities.css';
 
-  &.ds-badge--count {
-    --dsc-badge-height: var(--ds-sizing-6);
-    --dsc-badge-width: auto;
-    --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
+  &::before {
+    content: attr(data-count);
+    background: var(--dsc-badge-background);
+    border-radius: var(--ds-border-radius-full);
+    box-sizing: border-box;
+    color: var(--dsc-badge-color);
+    display: grid;
+    min-height: var(--dsc-badge-size);
+    min-width: var(--dsc-badge-size);
+    padding: var(--dsc-badge-padding);
+    place-items: center;
   }
 
   &[data-size='sm'] {
-    --dsc-badge-height: var(--ds-sizing-3);
-    --dsc-badge-width: var(--ds-sizing-3);
+    --dsc-badge-size: var(--ds-sizing-3);
+    --dsc-badge-padding: 0 var(--ds-spacing-1);
 
-    &.ds-badge--count {
-      --dsc-badge-height: var(--ds-sizing-5);
-      --dsc-badge-width: auto;
-      --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);
     }
   }
 
   &[data-size='lg'] {
-    --dsc-badge-height: var(--ds-sizing-4);
-    --dsc-badge-width: var(--ds-sizing-4);
+    --dsc-badge-size: var(--ds-sizing-4);
+    --dsc-badge-padding: 0 var(--ds-spacing-2);
+
+    @composes ds-body-text--short-md from './utilities.css';
 
-    &.ds-badge--count {
-      --dsc-badge-height: var(--ds-sizing-7);
-      --dsc-badge-width: auto;
-      --dsc-badge-padding: 0 var(--ds-spacing-2);
+    &[data-count] {
+      --dsc-badge-size: var(--ds-sizing-7);
     }
   }
 
@@ -68,66 +71,55 @@
   }
 
   /* If placement is present, we are floating */
-  &[data-placement] {
-    transform-origin: center;
+  &[data-placement]::before {
     position: absolute;
   }
 
-  &[data-placement='top-right'][data-overlap='rectangle'] {
+  &[data-placement='top-right']::before {
     top: 0;
     right: 0;
-    transform: translateX(50%) translateY(-50%);
+    translate: 50% -50%;
   }
 
-  &[data-placement='top-left'][data-overlap='rectangle'] {
+  &[data-placement='top-left']::before {
     top: 0;
     left: 0;
-    transform: translateX(-50%) translateY(-50%);
+    translate: -50% -50%;
   }
 
-  &[data-placement='bottom-right'][data-overlap='rectangle'] {
+  &[data-placement='bottom-right']::before {
     bottom: 0;
     right: 0;
-    transform: translateX(50%) translateY(50%);
+    translate: 50% 50%;
   }
 
-  &[data-placement='bottom-left'][data-overlap='rectangle'] {
+  &[data-placement='bottom-left']::before {
     bottom: 0;
     left: 0;
-    transform: translateX(-50%) translateY(50%);
+    translate: -50% 50%;
   }
 
-  &[data-placement='top-right'][data-overlap='circle'] {
+  &[data-placement='top-right'][data-overlap='circle']::before {
     top: 14%;
     right: 14%;
-    transform: translateX(50%) translateY(-50%);
+    translate: 50% -50%;
   }
 
-  &[data-placement='top-left'][data-overlap='circle'] {
+  &[data-placement='top-left'][data-overlap='circle']::before {
     top: 14%;
     left: 14%;
-    transform: translateX(-50%) translateY(-50%);
+    translate: -50% -50%;
   }
 
-  &[data-placement='bottom-right'][data-overlap='circle'] {
+  &[data-placement='bottom-right'][data-overlap='circle']::before {
     bottom: 14%;
     right: 14%;
-    transform: translateX(50%) translateY(50%);
+    translate: 50% 50%;
   }
 
-  &[data-placement='bottom-left'][data-overlap='circle'] {
+  &[data-placement='bottom-left'][data-overlap='circle']::before {
     bottom: 14%;
     left: 14%;
-    transform: translateX(-50%) translateY(50%);
+    translate: -50% 50%;
   }
 }
-
-.ds-badge__wrapper {
-  display: inline-flex;
-  position: relative;
-  width: fit-content;
-  height: fit-content;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}

package/breadcrumbs.css

@@ -1,72 +1,69 @@
 .ds-breadcrumbs {
   --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
   --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
-  --dsc-breadcrumbs-link-color: inherit;
-}
 
-.ds-breadcrumbs--sm {
-  --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
-  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
-}
+  @composes ds-body-text--md from './utilities.css';
 
-.ds-breadcrumbs--md {
-  --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
-  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
-}
+  &[data-size='sm'] {
+    --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
+    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
 
-.ds-breadcrumbs--lg {
-  --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
-  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
-}
+    @composes ds-body-text--sm from './utilities.css';
+  }
 
-.ds-breadcrumbs__list {
-  display: flex;
-  flex-wrap: wrap;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--dsc-breadcrumbs-spacing) 0;
-}
+  &[data-size='lg'] {
+    --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
+    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
 
-.ds-breadcrumbs__item:where(:not(:last-child))::after,
-.ds-breadcrumbs > .ds-breadcrumbs__link::before {
-  background: currentcolor;
-  content: '';
-  display: inline-block;
-  height: var(--dsc-breadcrumbs-chevron-size);
-  margin-inline: var(--dsc-breadcrumbs-spacing);
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")
-    50% / contain no-repeat;
-  vertical-align: middle;
-  width: var(--dsc-breadcrumbs-chevron-size);
-}
+    @composes ds-body-text--lg from './utilities.css';
+  }
 
-/* When link is direct child of Breadcrumbs, make it back button */
-.ds-breadcrumbs > .ds-breadcrumbs__link::before {
-  margin: 0;
-  rotate: 180deg;
-}
+  & > :is(ol, ul) {
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--dsc-breadcrumbs-spacing) 0;
+  }
 
-.ds-breadcrumbs__link {
-  --dsc-link-color: var(--dsc-breadcrumbs-link-color);
-  --dsc-link-color-visited: var(--dsc-breadcrumbs-link-color);
-}
+  & a:not(:focus-visible) {
+    color: inherit;
+  }
 
-.ds-breadcrumbs__link[aria-current='page'] {
-  text-decoration: none;
-}
+  & a[aria-current='page'] {
+    text-decoration: none;
+  }
 
-.ds-breadcrumbs > .ds-breadcrumbs__link:where(:not(:only-child)) {
-  display: none;
-}
+  /* Draw chevron between items and before back link */
+  & li:where(:not(:last-child))::after,
+  & > :not(ol, ul)::before {
+    background: currentcolor;
+    content: '';
+    display: inline-block;
+    height: var(--dsc-breadcrumbs-chevron-size);
+    margin-inline: var(--dsc-breadcrumbs-spacing);
+    mask: center / contain no-repeat
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
+    vertical-align: middle;
+    width: var(--dsc-breadcrumbs-chevron-size);
+  }
+
+  /* When link is direct child of Breadcrumbs, make it back button */
+  & > :not(ol, ul)::before {
+    margin: 0;
+    rotate: 180deg;
+  }
 
-@media (max-width: 650px) {
-  .ds-breadcrumbs > .ds-breadcrumbs__nav:where(:not(:only-child)) {
-    display: none;
+  @media (max-width: 650px) {
+    & > :is(ol, ul):not(:only-child) {
+      display: none; /* Hide list when mobile and having back link */
+    }
   }
 
-  .ds-breadcrumbs > .ds-breadcrumbs__link {
-    display: block;
-    width: fit-content;
+  @media (min-width: 651px) {
+    & > :is(:not(ol, ul)):not(:only-child) {
+      display: none; /* Hide back link when desktop and having list */
+    }
   }
 }

package/button.css

@@ -9,6 +9,7 @@
   --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';
 
   align-items: center;
@@ -28,6 +29,10 @@
   text-align: inherit;
   text-decoration: none;
 
+  &:focus-visible {
+    position: relative; /* Place focusring on top */
+  }
+
   &:not([hidden]) {
     display: flex;
   }
@@ -37,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] {
@@ -137,8 +146,8 @@
     */
 
   @media (hover: hover) and (pointer: fine) {
-    /* Only use hover for non-touch devices to prevent sticky-hovering */
-    &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):hover {
+    /* Only use hover for non-touch devices to prevent sticky-hovering, using :where to prevent adding specificity */
+    &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover {
       background: var(--dsc-button-background--hover);
     }
   }
@@ -152,7 +161,8 @@
     opacity: var(--ds-disabled-opacity);
   }
 
-  &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):active {
+  /* Using :where to prevent adding specificity */
+  &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):active {
     background-color: var(--dsc-button-background--active);
   }
 }