fix(sbb-notification): avoid resizeObserver loop warning

src/elements/notification/notification.stories.ts

@@ -47,10 +47,10 @@ const animation: InputType = {
 
 const basicArgTypes: ArgTypes = {
   'title-content': titleContent,
-  type: type,
-  size: size,
-  readonly: readonly,
-  animation: animation,
+  type,
+  size,
+  readonly,
+  animation,
 };
 
 const basicArgs: Args = {

src/elements/notification/notification.ts

@@ -47,19 +47,13 @@ export class SbbNotificationElement extends LitElement {
     didClose: 'didClose',
   } as const;
 
-  /**
-   * The type of the notification.
-   */
+  /** The type of the notification. */
   @property({ reflect: true }) public type: 'info' | 'success' | 'warn' | 'error' = 'info';
 
-  /**
-   * Content of title.
-   */
+  /** Content of title. */
   @property({ attribute: 'title-content', reflect: true }) public titleContent?: string;
 
-  /**
-   * Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3.
-   */
+  /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
   @property({ attribute: 'title-level' }) public titleLevel: SbbTitleLevel = '3';
 
   /**
@@ -71,14 +65,10 @@ export class SbbNotificationElement extends LitElement {
   /** Size variant, either s or m. */
   @property({ reflect: true }) public size: 'm' | 's' = 'm';
 
-  /**
-   * The enabled animations.
-   */
+  /** The enabled animations. */
   @property({ reflect: true }) public animation: 'open' | 'close' | 'all' | 'none' = 'all';
 
-  /**
-   * The state of the notification.
-   */
+  /** The state of the notification. */
   private set _state(state: SbbOpenedClosedState) {
     this.setAttribute('data-state', state);
   }

src/elements/notification/notification.visual.spec.ts

@@ -0,0 +1,92 @@
+import { SbbBreakpointSmallMin } from '@sbb-esta/lyne-design-tokens';
+import { setViewport } from '@web/test-runner-commands';
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import '../link/link.js';
+import './notification.js';
+
+describe(`sbb-notification`, () => {
+  const defaultArgs = {
+    type: 'info',
+    size: 'm',
+    readonly: false,
+    title: true,
+    slotted: false,
+  };
+
+  const notificationTemplate = ({
+    type,
+    size,
+    readonly,
+    title,
+    slotted,
+  }: typeof defaultArgs): TemplateResult => html`
+    <sbb-notification
+      title-content=${title && !slotted ? 'Title' : nothing}
+      size=${size}
+      ?readonly=${readonly}
+      type="${type}"
+      style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
+    >
+      ${title && slotted ? html`<span slot="title">Slotted title</span>` : nothing} The quick brown
+      fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.&nbsp;
+      <sbb-link href="/">Link one</sbb-link>
+      <sbb-link href="/">Link two</sbb-link>
+      <sbb-link href="/">Link three</sbb-link>
+    </sbb-notification>
+    <p style="margin: 0;">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. <sbb-link href="/"> Link </sbb-link>
+    </p>
+  `;
+
+  const states = {
+    readonly: [false, true],
+    slottedTitle: [false, true],
+  };
+
+  const types = ['info', 'success', 'warn', 'error'];
+  const visualStates = {
+    state: [...types.map((type) => ({ type, multiple: false })), { multiple: true, type: 'all' }],
+    size: ['s', 'm'],
+  };
+
+  // FIXME setViewports should be called before withFixture to avoid errors generated by the resizeObserver
+  const vps = [
+    { name: 'zero' as const, width: 320 },
+    { name: 'small' as const, width: SbbBreakpointSmallMin },
+  ];
+
+  for (const vp of vps) {
+    describeViewports({ viewports: [vp.name] }, () => {
+      describeEach(states, ({ readonly, slottedTitle }) => {
+        it(
+          visualDiffDefault.name,
+          visualDiffDefault.with(async (setup) => {
+            await setViewport({ width: vp.width, height: 400 });
+            const args = { ...defaultArgs, readonly, title: slottedTitle, slotted: slottedTitle };
+            await setup.withFixture(html`${notificationTemplate(args)}`);
+          }),
+        );
+      });
+
+      describeEach(visualStates, ({ state, size }) => {
+        it(
+          visualDiffDefault.name,
+          visualDiffDefault.with(async (setup) => {
+            await setViewport({ width: vp.width, height: 400 });
+            await setup.withFixture(html`
+              ${repeat(
+                state.multiple ? types : [state.type],
+                (type: string) => html`${notificationTemplate({ ...defaultArgs, type, size })}`,
+              )}
+            `);
+          }),
+        );
+      });
+    });
+  }
+});