@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/collection/components/toggle/toggle.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, inheritAttributes, ValidateOneOf, setupValidation, ValidateType, } from "../../utils/index";
+import { Logger, inheritAttributes, OneOf, Type } from "../../utils/index";
 import { TOGGLE_TILE_COLORS, TOGGLE_LABEL_POSITIONS, TOGGLE_GROUP_COLUMNS, } from "./toggle.interfaces";
 /**
  * Toggle renders a switch-like form control for toggling between on/off states with optional label and help text.
@@ -120,7 +120,6 @@ export class Toggle {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.initialValue = this.checked;
         this.internals.setFormValue(this.checked ? this.value : null);
     }
@@ -143,7 +142,7 @@ export class Toggle {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '477607550417767f9998d45960e40debe1eb6078', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: '82e0075aa3e76cc231d0e507de6f6abbc6947fbd', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
                 'is-disabled': this.disabled || this.readonly,
                 'is-invalid': this.invalid,
                 'is-checked': this.checked,
@@ -154,7 +153,7 @@ export class Toggle {
                 [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
                 [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
                 [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
-            } }, h("label", { key: '1087df9af44ad5d09af803670718f3e58135ea0d', id: "label", part: "label" }, h("input", Object.assign({ key: '95058b33011e865731dc90210768689361f38506', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: '72fa6a4159f5d589808a216af264a34cd1d9a5ba', id: "slot", part: "slot" }, h("slot", { key: '87c7705b319de57d26d38aa11f61567984be7e69' })))));
+            } }, h("label", { key: '0a6ec1155840f00f9cba605ed1436744d7ea5c44', id: "label", part: "label" }, h("input", Object.assign({ key: 'fce712af56287d341b3e096b87338e75aa078e7e', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: 'ddabd79fa0110eb5d3bf25023814af1cd75c4c28', id: "slot", part: "slot" }, h("slot", { key: '05f2ca777a6d522ecc30e5bff1fba852ef32b3a5' })))));
     }
     static get is() { return "ds-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -451,7 +450,7 @@ export class Toggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -630,63 +629,63 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Toggle.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "autoInvalidOff", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "checked", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "dense", void 0);
 __decorate([
-    ValidateOneOf(...TOGGLE_TILE_COLORS),
+    OneOf(TOGGLE_TILE_COLORS),
     __metadata("design:type", String)
 ], Toggle.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...TOGGLE_GROUP_COLUMNS),
+    OneOf(TOGGLE_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Toggle.prototype, "cols", void 0);
 __decorate([
-    ValidateOneOf(...TOGGLE_GROUP_COLUMNS),
+    OneOf(TOGGLE_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Toggle.prototype, "colsMobile", void 0);
 __decorate([
-    ValidateOneOf(...TOGGLE_GROUP_COLUMNS),
+    OneOf(TOGGLE_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Toggle.prototype, "colsTablet", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Toggle.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...TOGGLE_LABEL_POSITIONS),
+    OneOf(TOGGLE_LABEL_POSITIONS),
     __metadata("design:type", String)
 ], Toggle.prototype, "labelPosition", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Toggle.prototype, "name", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Toggle.prototype, "tile", void 0);
 let toggleIds = 0;

package/dist/collection/components/tooltip/test/tooltip.a11y.play.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test.describe('a11y', () => {
+    test('basic', async ({ page, a11y }) => {
+        await page.mount(`
+      <button id="trigger-basic">Hover over me</button>
+      <ds-tooltip reference="trigger-basic" open>Tooltip content</ds-tooltip>
+    `);
+        await a11y('ds-tooltip');
+    });
+    test('dismissed', async ({ page, a11y }) => {
+        await page.mount(`
+      <button id="trigger-dismissed">Hover over me</button>
+      <ds-tooltip reference="trigger-dismissed">Tooltip content</ds-tooltip>
+    `);
+        await a11y('ds-tooltip');
+    });
+    test.describe('placements', () => {
+        const placements = ['top', 'right', 'bottom', 'left'];
+        placements.forEach(placement => {
+            test(placement, async ({ page, a11y }) => {
+                await page.mount(`
+          <button id="trigger-${placement}">Hover over me</button>
+          <ds-tooltip reference="trigger-${placement}" placement="${placement}" open>Tooltip content</ds-tooltip>
+        `);
+                await a11y('ds-tooltip');
+            });
+        });
+    });
+});

package/dist/collection/components/tooltip/test/tooltip.component.play.js

@@ -0,0 +1,51 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsTooltip, test, expect } from "../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.mount(`
+      <button id="my-trigger">Hover over me</button>
+      <ds-tooltip reference="my-trigger">Tooltip content</ds-tooltip>
+    `);
+    });
+    test('should have a default slot', async ({ page }) => {
+        const dsTooltip = new DsTooltip(page.locator('ds-tooltip'));
+        await dsTooltip.assertToContainText('Tooltip content');
+    });
+    test('should be hidden by default', async ({ page }) => {
+        const dsTooltip = new DsTooltip(page.locator('ds-tooltip'));
+        await expect(dsTooltip.el).toHaveAttribute('aria-hidden', 'true');
+    });
+    test('should set aria-describedby on trigger after load', async ({ page }) => {
+        const trigger = page.locator('#my-trigger');
+        await expect(trigger).toHaveAttribute('aria-describedby');
+    });
+    test('should present and emit dsWillAnimate / dsDidAnimate', async ({ page }) => {
+        const dsTooltip = new DsTooltip(page.locator('ds-tooltip'));
+        const willSpy = await dsTooltip.el.spyOnEvent('dsWillAnimate');
+        const didSpy = await dsTooltip.el.spyOnEvent('dsDidAnimate');
+        await dsTooltip.el.evaluate((el) => el.present());
+        expect(willSpy).toHaveReceivedEventTimes(1);
+        expect(didSpy).toHaveReceivedEventTimes(1);
+        await expect(dsTooltip.el).toHaveAttribute('aria-hidden', 'false');
+    });
+    test('should dismiss and emit dsWillAnimate / dsDidAnimate', async ({ page }) => {
+        const dsTooltip = new DsTooltip(page.locator('ds-tooltip'));
+        await dsTooltip.el.evaluate((el) => el.present());
+        const willSpy = await dsTooltip.el.spyOnEvent('dsWillAnimate');
+        const didSpy = await dsTooltip.el.spyOnEvent('dsDidAnimate');
+        await dsTooltip.el.evaluate((el) => el.dismiss());
+        expect(willSpy).toHaveReceivedEventTimes(1);
+        expect(didSpy).toHaveReceivedEventTimes(1);
+        await expect(dsTooltip.el).toHaveAttribute('aria-hidden', 'true');
+    });
+    test('should show on trigger mouseenter and hide on mouseleave', async ({ page }) => {
+        const dsTooltip = new DsTooltip(page.locator('ds-tooltip'));
+        const trigger = page.locator('#my-trigger');
+        await trigger.hover();
+        await expect(dsTooltip.el).toHaveAttribute('aria-hidden', 'false');
+        await page.mouse.move(128, 128);
+        await expect(dsTooltip.el).toHaveAttribute('aria-hidden', 'true');
+    });
+});

package/dist/collection/components/tooltip/test/tooltip.visual.play.js

@@ -0,0 +1,16 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'tooltip';
+const VARIANTS = ['basic', 'placement-top', 'placement-right', 'placement-bottom', 'placement-left', 'content-width'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expectScreenshot(el, image(variant));
+    });
+});

package/dist/collection/components/tooltip/tooltip.host.css

@@ -0,0 +1 @@
+:host{--_tooltip-position: var(--tooltip-position, var(--mod-tooltip-position, static));--_tooltip-top: var(--tooltip-top, var(--mod-tooltip-top));--_tooltip-right: var(--tooltip-right, var(--mod-tooltip-right));--_tooltip-bottom: var(--tooltip-bottom, var(--mod-tooltip-bottom));--_tooltip-left: var(--tooltip-left, var(--mod-tooltip-left));position:var(--_tooltip-position);top:var(--_tooltip-top);right:var(--_tooltip-right);bottom:var(--_tooltip-bottom);left:var(--_tooltip-left);--_tooltip-m: var(--tooltip-m, var(--mod-tooltip-m, 0));--_tooltip-my: var(--tooltip-my, var(--mod-tooltip-my));--_tooltip-mx: var(--tooltip-mx, var(--mod-tooltip-mx));--_tooltip-ml: var(--tooltip-ml, var(--mod-tooltip-ml));--_tooltip-mr: var(--tooltip-mr, var(--mod-tooltip-mr));--_tooltip-mt: var(--tooltip-mt, var(--mod-tooltip-mt));--_tooltip-mb: var(--tooltip-mb, var(--mod-tooltip-mb));margin:var(--_tooltip-m);margin-inline:var(--_tooltip-mx);margin-block:var(--_tooltip-my);margin-left:var(--_tooltip-ml);margin-right:var(--_tooltip-mr);margin-top:var(--_tooltip-mt);margin-bottom:var(--_tooltip-mb);--_tooltip-bg: var(--tooltip-bg, var(--mod-tooltip-bg, var(--ds-tooltip-bg)));--_tooltip-color: var(--tooltip-color, var(--mod-tooltip-color, var(--ds-tooltip-color)));--_tooltip-max-width: var(--tooltip-max-width, var(--mod-tooltip-max-width, auto));--_tooltip-radius: var(--tooltip-radius, var(--mod-tooltip-radius, var(--ds-tooltip-radius)));--_tooltip-shadow: var(--tooltip-shadow, var(--mod-tooltip-shadow, var(--ds-tooltip-shadow)));--_tooltip-px: var(--tooltip-px, var(--mod-tooltip-px, var(--ds-tooltip-px)));--_tooltip-py: var(--tooltip-py, var(--mod-tooltip-py, var(--ds-tooltip-py)));--_tooltip-font-family: var(--tooltip-font-family, var(--mod-tooltip-font-family, var(--ds-tooltip-font-family)));--_tooltip-font-size: var(--tooltip-font-size, var(--mod-tooltip-font-size, var(--ds-tooltip-font-size)));--_tooltip-line-height: var(--tooltip-line-height, var(--mod-tooltip-line-height, var(--ds-tooltip-line-height)));--_tooltip-z-index: var(--tooltip-z-index, var(--mod-tooltip-z-index, var(--ds-tooltip-z-index)))}:host{position:static;display:inline;z-index:var(--_tooltip-z-index)}::slotted(*){all:initial}[part=container]{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),transform 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms;will-change:opacity,transform;position:fixed;top:0;left:0;box-sizing:border-box;width:max-content;max-width:var(--_tooltip-max-width);background-color:var(--_tooltip-bg);border-radius:var(--_tooltip-radius);box-shadow:var(--_tooltip-shadow);color:var(--_tooltip-color);font-family:var(--_tooltip-font-family);font-size:var(--_tooltip-font-size);line-height:var(--_tooltip-line-height);z-index:var(--_tooltip-z-index)}:host([aria-hidden=false]) [part=container]{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0, 0);transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),transform 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms}[part=container][data-placement=top]{transform:translateY(4px)}[part=container][data-placement=right]{transform:translateX(-4px)}[part=container][data-placement=left]{transform:translateX(4px)}[part=content]{position:relative;padding-block:var(--_tooltip-py);padding-inline:var(--_tooltip-px);overflow-y:auto;max-height:calc(100svh - 8rem)}

package/dist/collection/components/tooltip/tooltip.interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const TOOLTIP_PLACEMENTS = ['top', 'right', 'bottom', 'left'];

package/dist/collection/components/tooltip/tooltip.js

@@ -0,0 +1,407 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { h, Host } from "@stencil/core";
+import { Logger, dsBrowser, OneOf } from "../../utils/index";
+import { TOOLTIP_PLACEMENTS, } from "./tooltip.interfaces";
+let tooltipIds = 0;
+/**
+ * Tooltip displays contextual information when users hover over, focus on, or tap a trigger element.
+ *
+ * @slot - The tooltip content text.
+ * @part container - The floating tooltip container element.
+ * @part content - The inner content wrapper element.
+ */
+export class Tooltip {
+    constructor() {
+        this.tooltipId = `ds-tooltip-${tooltipIds++}`;
+        /**
+         * Internal presented state
+         */
+        this.presented = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Id of the reference element. Defaults to the trigger element.
+         */
+        this.reference = '';
+        /**
+         * Preferred placement of the tooltip relative to the trigger.
+         */
+        this.placement = 'bottom';
+        /**
+         * Offset in pixels from the trigger element to the tooltip.
+         */
+        this.offset = 8;
+        /**
+         * Defines the maximum width of the tooltip content in pixels.
+         */
+        this.contentWidth = undefined;
+        /**
+         * When true, the tooltip is shown immediately on load without user interaction.
+         */
+        this.open = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    contentWidthChanged(newValue) {
+        if (newValue === undefined) {
+            this.el.style.removeProperty('--tooltip-max-width');
+        }
+        else {
+            this.el.style.setProperty('--tooltip-max-width', `${newValue}px`);
+        }
+    }
+    componentDidLoad() {
+        this.contentWidthChanged(this.contentWidth);
+        const trigger = this.triggerElement;
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-describedby', this.tooltipId);
+        trigger.addEventListener('mouseenter', () => this.present());
+        trigger.addEventListener('focus', () => this.present());
+        trigger.addEventListener('mouseleave', () => this.dismiss());
+        trigger.addEventListener('blur', () => this.dismiss());
+        if (this.open) {
+            this.present();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanup) {
+            this.cleanup();
+        }
+        const trigger = this.triggerElement;
+        if (trigger) {
+            trigger.removeAttribute('aria-describedby');
+        }
+    }
+    /**
+     * INTERNAL METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Shows the tooltip and positions it relative to the trigger element.
+     */
+    async present() {
+        const trigger = this.triggerElement;
+        if (!trigger || !this.containerEl)
+            return false;
+        this.dsWillAnimate.emit(true);
+        this.presented = true;
+        this.cleanup = autoUpdate(trigger, this.containerEl, () => this.update(), {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: false,
+            layoutShift: true,
+            animationFrame: false,
+        });
+        this.dsDidAnimate.emit(true);
+        return true;
+    }
+    /**
+     * Hides the tooltip and cleans up the position updater.
+     */
+    async dismiss() {
+        if (!this.containerEl)
+            return false;
+        this.dsWillAnimate.emit(false);
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = undefined;
+        }
+        this.presented = false;
+        this.dsDidAnimate.emit(false);
+        return true;
+    }
+    /**
+     * Recomputes the tooltip position using floating-ui.
+     */
+    async update() {
+        const trigger = this.triggerElement;
+        if (!trigger || !this.containerEl)
+            return false;
+        const { x, y, placement } = await computePosition(trigger, this.containerEl, {
+            placement: this.placement,
+            strategy: 'fixed',
+            middleware: [
+                dsBrowser.hasWindow && !window.frameElement ? shift() : undefined,
+                flip(),
+                offset(this.offset),
+            ].filter(Boolean),
+        });
+        Object.assign(this.containerEl.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+        this.containerEl.dataset['placement'] = placement.split('-')[0];
+        return true;
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get triggerElement() {
+        if (!dsBrowser.hasDocument)
+            return null;
+        return document.querySelector(`[id="${this.reference}"]`);
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '70f12c4635b8547887442ac1be6a3384f0754f01', id: this.tooltipId, role: "tooltip", "aria-hidden": `${!this.presented}` }, h("div", { key: '6934ecd48ac24eabd34e190c9d00f7c40346102e', part: "container", ref: el => (this.containerEl = el) }, h("div", { key: 'c85391dbfa57c220d5176c6a65ccad6d88ecb135', part: "content", "data-testid": "ds-tooltip-content" }, h("slot", { key: '88af144938af076f3278e0a8579c75dccd71f36f' })))));
+    }
+    static get is() { return "ds-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "reference": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the reference element. Defaults to the trigger element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference",
+                "defaultValue": "''"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipPlacement": {
+                            "location": "import",
+                            "path": "./tooltip.interfaces",
+                            "id": "src/components/tooltip/tooltip.interfaces.ts::TooltipPlacement",
+                            "referenceLocation": "TooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred placement of the tooltip relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offset in pixels from the trigger element to the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset",
+                "defaultValue": "8"
+            },
+            "contentWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the maximum width of the tooltip content in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content-width",
+                "defaultValue": "undefined"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the tooltip is shown immediately on load without user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "presented": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsWillAnimate",
+                "name": "dsWillAnimate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the animation starts."
+                },
+                "complexType": {
+                    "original": "TooltipWillAnimateDetail",
+                    "resolved": "boolean",
+                    "references": {
+                        "TooltipWillAnimateDetail": {
+                            "location": "import",
+                            "path": "./tooltip.interfaces",
+                            "id": "src/components/tooltip/tooltip.interfaces.ts::TooltipWillAnimateDetail",
+                            "referenceLocation": "TooltipWillAnimateDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDidAnimate",
+                "name": "dsDidAnimate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the animation has finished."
+                },
+                "complexType": {
+                    "original": "TooltipDidAnimateDetail",
+                    "resolved": "boolean",
+                    "references": {
+                        "TooltipDidAnimateDetail": {
+                            "location": "import",
+                            "path": "./tooltip.interfaces",
+                            "id": "src/components/tooltip/tooltip.interfaces.ts::TooltipDidAnimateDetail",
+                            "referenceLocation": "TooltipDidAnimateDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "present": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Shows the tooltip and positions it relative to the trigger element.",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Hides the tooltip and cleans up the position updater.",
+                    "tags": []
+                }
+            },
+            "update": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Recomputes the tooltip position using floating-ui.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "contentWidth",
+                "methodName": "contentWidthChanged"
+            }];
+    }
+}
+__decorate([
+    Logger('tooltip'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Tooltip.prototype, "createLogger", null);
+__decorate([
+    OneOf(TOOLTIP_PLACEMENTS),
+    __metadata("design:type", String)
+], Tooltip.prototype, "placement", void 0);

package/dist/collection/foundation/colors.visual.play.js

@@ -0,0 +1,18 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../playwright/src/index";
+const TAG = 'colors';
+const VARIANTS = ['primary', 'grey', 'sky', 'purple', 'green', 'red', 'yellow'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/foundation/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test.skip(variant, async ({ page, isMobile }) => {
+        // eslint-disable-next-line playwright/no-skipped-test
+        test.skip(isMobile, 'Runs only on desktop');
+        const el = page.getByTestId(variant);
+        await expectScreenshot(el, image(variant));
+    });
+});