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

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 */
+    }
   }
 }

package/chip.css

@@ -1,173 +1,134 @@
-/*
-  The class is unused. There is no root chip component?
-  .chip {
-    display: flex;
-  }
-  */
-
-.ds-chip--button {
-  --dsc-chip-height: var(--ds-sizing-7);
-  --dsc-chip-padding: 0 var(--ds-spacing-3);
+.ds-chip {
   --dsc-chip-background: var(--ds-color-accent-surface-default);
-  --dsc-chip-text-color: var(--ds-color-accent-text-default);
-  --dsc-chip-border: var(--ds-color-accent-border-subtle);
+  --dsc-chip-border-color: var(--ds-color-accent-border-subtle);
   --dsc-chip-border-radius: var(--ds-border-radius-full);
+  --dsc-chip-color: var(--ds-color-accent-text-default);
+  --dsc-chip-height: var(--ds-sizing-8);
+  --dsc-chip-icon-size: var(--ds-spacing-6);
+  --dsc-chip-input-color: var(--ds-color-accent-border-default);
+  --dsc-chip-input-size: var(--ds-spacing-5);
+  --dsc-chip-padding: 0 var(--ds-spacing-3);
+
+  @composes ds-focus from './utilities.css';
+  @composes ds-paragraph-short from './utilities.css';
 
+  align-items: center;
   background: var(--dsc-chip-background);
-  padding: var(--dsc-chip-padding);
-  min-height: var(--dsc-chip-height);
   border-radius: var(--dsc-chip-border-radius);
-  border: 1px solid var(--dsc-chip-border);
-  color: var(--dsc-chip-text-color);
-  text-decoration: none;
-  font-family: inherit;
+  border: 1px solid var(--dsc-chip-border-color);
+  box-sizing: border-box;
+  color: var(--dsc-chip-color);
+  cursor: pointer;
   display: inline-flex;
-  align-items: center;
-}
-
-.ds-chip--button:disabled,
-.ds-chip--button[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-chip--button .ds-chip__label {
-  color: inherit;
-  line-height: normal;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-chip--removable {
-  --dsc-removable-background: var(--ds-color-accent-base-default);
-  --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
-  --dsc-removable-chip-size: var(--ds-sizing-7);
-  --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
-  --dsc-removable-chip-xmark-wrapper-width: calc(var(--dsc-removable-chip-xmark-size) + var(--dsc-removable-chip-xmark-padding_right));
-
-  color: var(--dsc-removable-text-color);
-  background: var(--dsc-removable-background);
-  border: 0;
-  padding-right: var(--ds-spacing-2);
+  font-family: inherit;
   min-height: var(--dsc-chip-height);
-}
-
-.ds-chip--removable.ds-chip--sm {
-  padding-right: var(--ds-spacing-1);
-}
-
-.ds-chip--removable.ds-chip--lg {
-  padding-right: var(--ds-spacing-2);
-}
-
-.ds-chip__x-mark {
-  color: var(--dsc-removable-chip-xmark-color);
-  height: var(--dsc-removable-chip-xmark-size);
-  width: var(--dsc-removable-chip-xmark-size);
-}
-
-.ds-chip__x-mark .ds-chip__icon {
-  height: var(--dsc-removable-chip-xmark-size);
-  width: var(--dsc-removable-chip-xmark-size);
-}
-
-.ds-chip--spacing {
-  padding-left: var(--ds-spacing-2) !important;
-}
-
-.ds-chip--sm .ds-chip__checkmark-icon {
-  height: var(--ds-sizing-5);
-  width: auto;
-}
-
-.ds-chip--md .ds-chip__checkmark-icon {
-  height: 24px;
-  width: auto;
-}
-
-.ds-chip--lg .ds-chip__checkmark-icon {
-  height: 26px;
-  width: auto;
-}
-
-.ds-chip--group-container {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--dsc-chip-group-gap);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  padding: var(--dsc-chip-padding);
+  text-decoration: none;
 
-.ds-chip--group-container.ds-chip--sm {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-}
+  /* Make focus ring also when input inside is focused */
+  &:has(:focus-visible) {
+    @composes ds-focus--visible from './utilities.css';
+  }
 
-.ds-chip--group-container.ds-chip--md {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-}
+  &:disabled,
+  &:has(input:disabled),
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--ds-disabled-opacity);
+  }
 
-.ds-chip--group-container.ds-chip--lg {
-  --dsc-chip-group-gap: var(--ds-spacing-2);
-}
+  &:has(input[type='checkbox']) {
+    --dsc-chip-border-radius: var(--ds-border-radius-lg);
+    --dsc-chip-padding: 0 var(--ds-spacing-2) 0 var(--ds-spacing-3);
+  }
 
-/* Only use hover for non-touch devices to prevent sticky-hovering */
-@media (hover: hover) and (pointer: fine) {
-  .ds-chip--button:not(:disabled, [aria-disabled='true']):hover {
-    --dsc-chip-background: var(--ds-color-accent-surface-hover);
-    --dsc-chip-text-color: var(--ds-color-accent-text-default);
-    --dsc-chip-border: var(--ds-color-accent-border-default);
+  &[data-removable]::after {
+    --gap: calc((var(--dsc-chip-height) - var(--dsc-chip-icon-size)) / 2); /* Gap is based on remaining space between icon and edge */
 
-    cursor: pointer;
+    background: currentcolor;
+    content: '';
+    height: var(--dsc-chip-icon-size);
+    margin: 0 calc(var(--gap) * -1) 0 var(--gap);
+    mask: center/contain no-repeat
+      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");
+    width: var(--dsc-chip-icon-size);
   }
 
-  .ds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
-    --dsc-chip-background: var(--ds-color-accent-surface-hover);
-    --dsc-chip-text-color: var(--ds-color-accent-text-default);
+  &[data-size='sm'] {
+    --dsc-chip-height: var(--ds-sizing-7);
+    --dsc-chip-icon-size: var(--ds-sizing-5);
+    --dsc-chip-input-size: var(--ds-spacing-4);
   }
 
-  .ds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
-  .ds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
-    --dsc-removable-background: var(--ds-color-accent-base-hover);
-    --dsc-removable-chip-xmark-color: var(--ds-color-accent-contrast-default);
+  &[data-size='lg'] {
+    --dsc-chip-height: var(--ds-sizing-9);
+    --dsc-chip-icon-size: var(--ds-sizing-7);
+    --dsc-chip-input-size: var(--ds-spacing-6);
   }
-}
-
-.ds-chip--button:is([aria-pressed='true']),
-.ds-chip--button:not(:disabled, [aria-disabled='true']):active,
-.ds-chip--removable:is([aria-pressed='true']),
-.ds-chip--removable:not(:disabled, [aria-disabled='true']):active {
-  --dsc-chip-background: var(--ds-color-accent-base-active);
-  --dsc-chip-text-color: var(--ds-color-accent-contrast-default);
-  --dsc-chip-border: var(--ds-color-accent-base-active);
-  --dsc-removable-background: var(--ds-color-accent-base-active);
-  --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
-}
 
-.ds-chip--sm {
-  --dsc-chip-height: var(--ds-sizing-7);
-  --dsc-chip-padding: 0 var(--ds-spacing-3);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-5);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
-}
+  & > input {
+    --gap: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2); /* Gap is based on remaining space between input and edge */
+
+    appearance: none;
+    background: none;
+    border-radius: calc(var(--dsc-chip-border-radius) - (var(--gap) / 2)); /* Use same radius as  */
+    border: 2px solid;
+    box-sizing: border-box;
+    color: var(--dsc-chip-input-color);
+    height: var(--dsc-chip-input-size);
+    margin: 0 var(--gap) 0 calc(var(--gap) * -1);
+    outline: none;
+    width: var(--dsc-chip-input-size);
+
+    &[type='radio']:checked {
+      border-width: calc(var(--dsc-chip-input-size) / 3.5); /* Matches Figma */
+    }
+
+    &[type='checkbox']:checked {
+      background: currentcolor;
+      mask: center/cover no-repeat
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M24 0H0v24h24V0Zm-4.44 8.56a1.5 1.5 0 0 0-2.12-2.12L10 13.88l-3.44-3.44a1.5 1.5 0 0 0-2.12 2.12l4.5 4.5a1.5 1.5 0 0 0 2.12 0l8.5-8.5Z'/%3E%3C/svg%3E");
+    }
+  }
 
-.ds-chip--md {
-  --dsc-chip-height: var(--ds-sizing-8);
-  --dsc-chip-padding: 0 var(--ds-spacing-3);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-2);
-}
+  &:has(input:checked),
+  &[data-removable] {
+    --dsc-chip-background: var(--ds-color-accent-base-default);
+    --dsc-chip-border-color: transparent;
+    --dsc-chip-color: var(--ds-color-accent-contrast-default);
+    --dsc-chip-input-color: currentcolor;
+  }
 
-.ds-chip--lg {
-  --dsc-chip-height: var(--ds-sizing-9);
-  --dsc-chip-padding: 0 var(--ds-spacing-4);
-  --dsc-removable-chip-xmark-size: var(--ds-sizing-7);
-  --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-3);
+  /* Only use hover for non-touch devices to prevent sticky-hovering */
+  @media (hover: hover) and (pointer: fine) {
+    &:where(:not(:disabled, :has(input:disabled), [aria-disabled='true'])) {
+      &:hover {
+        --dsc-chip-background: var(--ds-color-accent-surface-hover);
+        --dsc-chip-border-color: var(--ds-color-accent-border-default);
+        --dsc-chip-color: var(--ds-color-accent-text-default);
+        --dsc-chip-input-color: var(--ds-color-accent-border-strong);
+      }
+
+      &:active {
+        --dsc-chip-background: var(--ds-color-accent-surface-active);
+        --dsc-chip-border-color: var(--ds-color-accent-border-strong);
+        --dsc-chip-input-color: var(--ds-color-accent-border-strong);
+      }
+
+      &[data-removable]:hover,
+      &:has(input:checked):hover {
+        --dsc-chip-background: var(--ds-color-accent-base-hover);
+        --dsc-chip-border-color: transparent;
+        --dsc-chip-color: var(--ds-color-accent-contrast-default);
+        --dsc-chip-input-color: currentcolor;
+      }
+
+      &[data-removable]:active,
+      &:has(input:checked):active {
+        --dsc-chip-background: var(--ds-color-accent-base-active);
+        --dsc-chip-border-color: transparent;
+        --dsc-chip-color: var(--ds-color-accent-contrast-default);
+      }
+    }
+  }
 }

package/dist/accordion.css

@@ -1 +1 @@
-.ds-accordion-group{--dsc-accordion-background:var(--ds-color-neutral-background-default);--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)}.ds-accordion-group[data-border]>*{border:var(--dsc-accordion-border)}:is(.ds-accordion-group[data-border]>*):first-child,:is(.ds-accordion-group[data-border]>*):first-child>:is(summary,u-summary){border-top-left-radius:var(--dsc-accordion-border-radius);border-top-right-radius:var(--dsc-accordion-border-radius)}:is(.ds-accordion-group[data-border]>*):last-child,:is(.ds-accordion-group[data-border]>*):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-group[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-group[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-group[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-group[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)}.ds-accordion__item{background:var(--dsc-accordion-background);border-block:var(--dsc-accordion-border)}.ds-accordion__item>: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)}:is(.ds-accordion__item>:is(summary,u-summary)):focus-visible{position:relative}:is(.ds-accordion__item>:is(summary,u-summary)):before{background:currentcolor;border-radius:var(--ds-border-radius-md);content:"";height:var(--dsc-accordion-chevron-size);margin-inline:calc((var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap))*-1);-webkit-mask:50%/contain no-repeat url("data:image/svg+xml;charset=utf-8,%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");mask:50%/contain no-repeat url("data:image/svg+xml;charset=utf-8,%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);width:var(--dsc-accordion-chevron-size)}.ds-accordion__item+.ds-accordion__item{border-top:0}.ds-accordion__item>:not(summary,u-summary){border-radius:inherit;padding:var(--ds-spacing-5,1rem)}.ds-accordion__item[open]>:is(summary,u-summary){background:var(--dsc-accordion-heading-background--open)}.ds-accordion__item[open]:not([data-chevron-open=false]){--dsc-accordion-chevron-rotate:-180deg}@media (hover:hover) and (pointer:fine){.ds-accordion__item>:is(summary,u-summary):hover{background:var(--dsc-accordion-heading-background--hover)}}
+.ds-accordion-group{--dsc-accordion-background:var(--ds-color-neutral-background-default);--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-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)}.ds-accordion-group[data-border]>*{border:var(--dsc-accordion-border)}:is(.ds-accordion-group[data-border]>*):first-child,:is(.ds-accordion-group[data-border]>*):first-child>:is(summary,u-summary){border-top-left-radius:var(--dsc-accordion-border-radius);border-top-right-radius:var(--dsc-accordion-border-radius)}:is(.ds-accordion-group[data-border]>*):last-child,:is(.ds-accordion-group[data-border]>*):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-group[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-group[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-group[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-group[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)}.ds-accordion__item{background:var(--dsc-accordion-background);border-block:var(--dsc-accordion-border);box-sizing:border-box}.ds-accordion__item>: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)}:is(.ds-accordion__item>:is(summary,u-summary)):focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:var(--dsc-focus-outline);outline-offset:var(--dsc-focus-border-width)}:is(.ds-accordion__item>:is(summary,u-summary)){font-size:var(--ds-body-sm-font-size);font-weight:var(--ds-body-sm-font-weight);letter-spacing:var(--ds-body-sm-letter-spacing);line-height:var(--ds-body-sm-line-height)}:is(.ds-accordion__item>:is(summary,u-summary)):focus-visible{position:relative}:is(.ds-accordion__item>:is(summary,u-summary)):before{background:currentcolor;border-radius:var(--ds-border-radius-md);content:"";height:var(--dsc-accordion-chevron-size);margin-inline:calc((var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap))*-1);-webkit-mask:50%/contain no-repeat url("data:image/svg+xml;charset=utf-8,%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");mask:50%/contain no-repeat url("data:image/svg+xml;charset=utf-8,%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;width:var(--dsc-accordion-chevron-size)}.ds-accordion__item+.ds-accordion__item{border-top:0}.ds-accordion__item>:not(summary,u-summary){border-radius:inherit;padding:var(--ds-spacing-5,1rem)}.ds-accordion__item[open]>:is(summary,u-summary){background:var(--dsc-accordion-heading-background--open)}:is(.ds-accordion__item[open]>:is(summary,u-summary)):before{rotate:180deg}@media (hover:hover) and (pointer:fine){.ds-accordion__item>:is(summary,u-summary):hover{background:var(--dsc-accordion-heading-background--hover)}}@media (prefers-reduced-motion:no-preference){.ds-accordion__item{interpolate-size:allow-keywords}}.ds-accordion__item::part(details-content){block-size:0;overflow-y:clip;transition:content-visibility allow-discrete .4s,height .4s}.ds-accordion__item[open]::part(details-content){height:auto}

package/dist/alert.css

@@ -1 +1 @@
-.ds-alert{--dsc-alert-background:var(--ds-color-info-surface-default);--dsc-alert-border-color:var(--ds-color-info-border-strong);--dsc-alert-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-alert-color:var(--ds-color-neutral-text-default);--dsc-alert-gap:var(--ds-spacing-2);--dsc-alert-icon-color:var(--ds-color-info-text-subtle);--dsc-alert-icon-size:var(--ds-sizing-7);--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");--dsc-alert-padding:var(--ds-spacing-6);background:var(--dsc-alert-background);border:1px solid var(--dsc-alert-border-color);border-radius:var(--dsc-alert-border-radius);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)}.ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before,.ds-alert>:is(h1,h2,h3,h4,h5,h6):first-child:before{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);-webkit-mask:var(--dsc-alert-icon-url) center/contain no-repeat;mask:var(--dsc-alert-icon-url) center/contain no-repeat;position:absolute;translate:0 calc(.5lh - var(--dsc-alert-icon-size)/2);width:var(--dsc-alert-icon-size)}.ds-alert[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;charset=utf-8,%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")}.ds-alert[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;charset=utf-8,%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")}.ds-alert[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);--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E")}.ds-alert[data-size=sm]{--dsc-alert-icon-size:var(--ds-sizing-6);--dsc-alert-padding:var(--ds-spacing-5)}.ds-alert[data-size=lg]{--dsc-alert-icon-size:var(--ds-sizing-8);--dsc-alert-padding:var(--ds-spacing-7)}
+.ds-alert{--dsc-alert-background:var(--ds-color-info-surface-default);--dsc-alert-border-color:var(--ds-color-info-border-strong);--dsc-alert-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-alert-color:var(--ds-color-neutral-text-default);--dsc-alert-gap:var(--ds-spacing-2);--dsc-alert-icon-color:var(--ds-color-info-text-subtle);--dsc-alert-icon-size:var(--ds-sizing-7);--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");--dsc-alert-padding:var(--ds-spacing-6);background:var(--dsc-alert-background);border:1px solid var(--dsc-alert-border-color);border-radius:var(--dsc-alert-border-radius);box-sizing:border-box;color:var(--dsc-alert-color);font-size:var(--ds-body-md-font-size);font-weight:var(--ds-body-md-font-weight);letter-spacing:var(--ds-body-md-letter-spacing);line-height:var(--ds-body-md-line-height);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)}.ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before,.ds-alert>:is(h1,h2,h3,h4,h5,h6):first-child:before{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);-webkit-mask:var(--dsc-alert-icon-url) center/contain no-repeat;mask:var(--dsc-alert-icon-url) center/contain no-repeat;position:absolute;translate:0 calc((1lh - var(--dsc-alert-icon-size))/2);width:var(--dsc-alert-icon-size)}.ds-alert[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;charset=utf-8,%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")}.ds-alert[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;charset=utf-8,%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")}.ds-alert[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);--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E")}.ds-alert[data-size=sm]{--dsc-alert-icon-size:var(--ds-sizing-6);--dsc-alert-padding:var(--ds-spacing-5);font-size:var(--ds-body-sm-font-size);font-weight:var(--ds-body-sm-font-weight);letter-spacing:var(--ds-body-sm-letter-spacing);line-height:var(--ds-body-sm-line-height)}.ds-alert[data-size=lg]{--dsc-alert-icon-size:var(--ds-sizing-8);--dsc-alert-padding:var(--ds-spacing-7);font-size:var(--ds-body-lg-font-size);font-weight:var(--ds-body-lg-font-weight);letter-spacing:var(--ds-body-lg-letter-spacing);line-height:var(--ds-body-lg-line-height)}

package/dist/avatar.css

@@ -1 +1 @@
-.ds-avatar{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default);--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2);--dsc-avatar-border-radius:50%;align-items:center;aspect-ratio:1/1;background:var(--dsc-avatar-background);border-radius:var(--dsc-avatar-border-radius);color:var(--dsc-avatar-color);display:inline-flex;height:var(--dsc-avatar-size);justify-content:center;overflow:hidden;text-decoration:none;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ds-avatar:not(:has(>img)){padding:var(--dsc-avatar-padding)}.ds-avatar img{height:100%;object-fit:cover;width:100%}.ds-avatar svg{max-height:100%;max-width:100%}.ds-avatar:empty:before{background-color:currentcolor;content:"";height:100%;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:100%}.ds-avatar[data-variant=circle]{--dsc-avatar-border-radius:var(--ds-border-radius-full)}.ds-avatar[data-variant=square]{--dsc-avatar-border-radius:var(--ds-border-radius-sm)}.ds-avatar[data-color=accent]{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default)}.ds-avatar[data-color=neutral]{--dsc-avatar-background:var(--ds-color-neutral-base-default);--dsc-avatar-color:var(--ds-color-neutral-contrast-default)}.ds-avatar[data-color=brand1]{--dsc-avatar-background:var(--ds-color-brand1-base-default);--dsc-avatar-color:var(--ds-color-brand1-contrast-default)}.ds-avatar[data-color=brand2]{--dsc-avatar-background:var(--ds-color-brand2-base-default);--dsc-avatar-color:var(--ds-color-brand2-contrast-default)}.ds-avatar[data-color=brand3]{--dsc-avatar-background:var(--ds-color-brand3-base-default);--dsc-avatar-color:var(--ds-color-brand3-contrast-default)}.ds-avatar[data-size=xs]{--dsc-avatar-size:var(--ds-sizing-7);--dsc-avatar-padding:var(--ds-spacing-1)}.ds-avatar[data-size=sm]{--dsc-avatar-size:var(--ds-sizing-9);--dsc-avatar-padding:var(--ds-spacing-1)}.ds-avatar[data-size=md]{--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2)}.ds-avatar[data-size=lg]{--dsc-avatar-size:var(--ds-sizing-15);--dsc-avatar-padding:var(--ds-spacing-2)}
+.ds-avatar{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default);--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2);--dsc-avatar-border-radius:50%;align-items:center;aspect-ratio:1/1;background:var(--dsc-avatar-background);border-radius:var(--dsc-avatar-border-radius);box-sizing:border-box;color:var(--dsc-avatar-color);display:inline-flex;font-size:var(--ds-body-xs-font-size);font-weight:var(--ds-body-xs-font-weight);height:var(--dsc-avatar-size);justify-content:center;letter-spacing:var(--ds-body-xs-letter-spacing);line-height:var(--ds-body-xs-line-height);overflow:hidden;text-decoration:none;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ds-avatar:not(:has(>img)){padding:var(--dsc-avatar-padding)}.ds-avatar img{height:100%;object-fit:cover;width:100%}.ds-avatar svg{max-height:100%;max-width:100%}.ds-avatar:empty:before{background-color:currentcolor;content:"";height:100%;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:100%}.ds-avatar[data-variant=circle]{--dsc-avatar-border-radius:var(--ds-border-radius-full)}.ds-avatar[data-variant=square]{--dsc-avatar-border-radius:var(--ds-border-radius-sm)}.ds-avatar[data-color=accent]{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default)}.ds-avatar[data-color=neutral]{--dsc-avatar-background:var(--ds-color-neutral-base-default);--dsc-avatar-color:var(--ds-color-neutral-contrast-default)}.ds-avatar[data-color=brand1]{--dsc-avatar-background:var(--ds-color-brand1-base-default);--dsc-avatar-color:var(--ds-color-brand1-contrast-default)}.ds-avatar[data-color=brand2]{--dsc-avatar-background:var(--ds-color-brand2-base-default);--dsc-avatar-color:var(--ds-color-brand2-contrast-default)}.ds-avatar[data-color=brand3]{--dsc-avatar-background:var(--ds-color-brand3-base-default);--dsc-avatar-color:var(--ds-color-brand3-contrast-default)}.ds-avatar[data-size=xs]{--dsc-avatar-size:var(--ds-sizing-7);--dsc-avatar-padding:var(--ds-spacing-1);font-size:var(--ds-body-xs-font-size);font-weight:var(--ds-body-xs-font-weight);letter-spacing:var(--ds-body-xs-letter-spacing);line-height:var(--ds-body-xs-line-height)}.ds-avatar[data-size=sm]{--dsc-avatar-size:var(--ds-sizing-9);--dsc-avatar-padding:var(--ds-spacing-1);font-size:var(--ds-heading-2xs-font-size);font-weight:var(--ds-heading-2xs-font-weight);letter-spacing:var(--ds-heading-2xs-letter-spacing);line-height:var(--ds-heading-2xs-line-height)}.ds-avatar[data-size=md]{--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2);font-size:var(--ds-heading-sm-font-size);font-weight:var(--ds-heading-sm-font-weight);letter-spacing:var(--ds-heading-sm-letter-spacing);line-height:var(--ds-heading-sm-line-height)}.ds-avatar[data-size=lg]{--dsc-avatar-size:var(--ds-sizing-15);--dsc-avatar-padding:var(--ds-spacing-2);font-size:var(--ds-heading-md-font-size);font-weight:var(--ds-heading-md-font-weight);letter-spacing:var(--ds-heading-md-letter-spacing);line-height:var(--ds-heading-md-line-height)}