Fix styling issue where certain characters were cutoff due to not enough line-height

.changeset/five-dolls-admire.md

@@ -0,0 +1,22 @@
+---
+'@sl-design-system/avatar': patch
+'@sl-design-system/bingel-dc': patch
+'@sl-design-system/bingel-int': patch
+'@sl-design-system/clickedu': patch
+'@sl-design-system/editorial-suite': patch
+'@sl-design-system/itslearning': patch
+'@sl-design-system/kampus': patch
+'@sl-design-system/magister': patch
+'@sl-design-system/max': patch
+'@sl-design-system/my-digital-book': patch
+'@sl-design-system/myvanin': patch
+'@sl-design-system/neon': patch
+'@sl-design-system/nowa-era': patch
+'@sl-design-system/sanoma-learning': patch
+'@sl-design-system/sanoma-utbildning': patch
+'@sl-design-system/teas': patch
+---
+
+Minor style fixes:
+- Fix the title and subtitle text being cutoff for certain characters due not enough line-height
+- Use a different color for the subtitle text

.changeset/sweet-carrots-protect.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/avatar': patch
+---
+
+Due to #1371, the subtitle is no longer shown for the `md` size

packages/components/avatar/src/avatar.scss

@@ -26,7 +26,10 @@
   --_inline-gap: var(--sl-space-avatar-inline-sm);
   --_heading-font: var(--sl-text-avatar-header-sm);
   --_picture-size: var(--sl-size-avatar-sm);
+}
 
+:host([size='sm']),
+:host([size='md']) {
   [part='wrapper'] {
     grid-template: 'picture spacer name' auto / auto var(--_inline-gap) 1fr;
   }
@@ -192,6 +195,7 @@ slot[name='fallback'] {
 
 slot:not([name]) {
   align-self: start;
+  color: var(--sl-color-avatar-subheader);
   display: block;
   font: var(--_subheading-font);
   grid-area: subheader;

packages/components/avatar/src/avatar.stories.ts

@@ -147,6 +147,7 @@ export const Overflow: Story = {
 
 export const Subheading: Story = {
   args: {
+    size: 'lg',
     subheading: 'Subheading'
   }
 };
@@ -277,7 +278,7 @@ export const All: StoryObj = {
                   emphasis="bold"
                   size="sm"
                   slot="badge"
-                  variant="warning"
+                  variant="danger"
                 ></sl-badge>
               </sl-avatar>
             </td>
@@ -288,32 +289,32 @@ export const All: StoryObj = {
                   emphasis="bold"
                   size="sm"
                   slot="badge"
-                  variant="warning"
+                  variant="danger"
                 ></sl-badge>
               </sl-avatar>
             </td>
             <td>
               <sl-avatar .displayName=${users[3].name} size="lg" image-only>
-                <sl-badge aria-label="1 unread message" emphasis="bold" slot="badge" variant="warning">1</sl-badge>
+                <sl-badge aria-label="1 unread message" emphasis="bold" slot="badge" variant="danger">1</sl-badge>
               </sl-avatar>
             </td>
             <td>
               <sl-avatar .displayName=${users[3].name} size="xl" image-only>
-                <sl-badge aria-label="1 unread message" emphasis="bold" slot="badge" variant="warning">
+                <sl-badge aria-label="1 unread message" emphasis="bold" slot="badge" variant="danger">
                   <sl-icon name="check"></sl-icon>
                 </sl-badge>
               </sl-avatar>
             </td>
             <td>
               <sl-avatar .displayName=${users[3].name} size="2xl" image-only>
-                <sl-badge aria-label="1 unread message" emphasis="bold" size="lg" slot="badge" variant="warning">
+                <sl-badge aria-label="1 unread message" emphasis="bold" size="lg" slot="badge" variant="danger">
                   1234
                 </sl-badge>
               </sl-avatar>
             </td>
             <td>
               <sl-avatar .displayName=${users[3].name} size="3xl" image-only>
-                <sl-badge aria-label="1 unread message" emphasis="bold" size="lg" slot="badge" variant="warning">
+                <sl-badge aria-label="1 unread message" emphasis="bold" size="lg" slot="badge" variant="danger">
                   <sl-icon name="check"></sl-icon>1
                 </sl-badge>
               </sl-avatar>

packages/locales/src/nl.ts

@@ -23,6 +23,7 @@ export const templates = {
   sa996297f6a208e98: 'Kruimelpad',
   sb85774dc5d18ff0f: 'Bevestig',
   sb881081d4f28c851: 'Kies een optie uit de lijst.',
+  sbf1de7bf2881bae1: 'Vaak gebruikt',
   sc94053131f85fc8a: 'Vink dit vakje aan.',
   sc95c7150ab686f99: 'Voer een correcte waarde in.',
   sca81470958a97fc4: 'Filter op',
@@ -31,6 +32,5 @@ export const templates = {
   sd711c88b851db6c9: 'De volgende velden zijn incorrect:',
   sde6884478b7cc818: str`Voer tenminste ${0} karakters in (je hebt op dit momoment ${1} karakter${2}).`,
   sf1ec4acb8d744ed9: 'Mededeling',
-  sf677da98fa27f9b6: 'Meer links',
-  sbf1de7bf2881bae1: 'Frequently Used'
+  sf677da98fa27f9b6: 'Meer links'
 };