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

package/dist/collection/components/hint/hint-title/hint-title.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger } from "../../../utils/index";
+/**
+ * Hint Title renders the heading inside a ds-hint panel. Place it as a direct child of ds-hint.
+ * Uses light DOM (no shadow) so ds-hint's named slot projects the content correctly.
+ *
+ * @slot - The hint title text.
+ */
+export class HintTitle {
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'title';
+    }
+    render() {
+        return (h(Host, { key: 'fd1b78370d7474d8ec7e514556fdb9444fa12e70', style: { display: 'contents' } }, h("slot", { key: 'd2d14b2c4cfe147042c8c9a93c1d980f2bfd343d' })));
+    }
+    static get is() { return "ds-hint-title"; }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('hint-title'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], HintTitle.prototype, "createLogger", null);

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

@@ -0,0 +1 @@
+:host{--_hint-position: var(--hint-position, var(--mod-hint-position, static));--_hint-top: var(--hint-top, var(--mod-hint-top));--_hint-right: var(--hint-right, var(--mod-hint-right));--_hint-bottom: var(--hint-bottom, var(--mod-hint-bottom));--_hint-left: var(--hint-left, var(--mod-hint-left));position:var(--_hint-position);top:var(--_hint-top);right:var(--_hint-right);bottom:var(--_hint-bottom);left:var(--_hint-left);--_hint-m: var(--hint-m, var(--mod-hint-m, 0));--_hint-my: var(--hint-my, var(--mod-hint-my));--_hint-mx: var(--hint-mx, var(--mod-hint-mx));--_hint-ml: var(--hint-ml, var(--mod-hint-ml));--_hint-mr: var(--hint-mr, var(--mod-hint-mr));--_hint-mt: var(--hint-mt, var(--mod-hint-mt));--_hint-mb: var(--hint-mb, var(--mod-hint-mb));margin:var(--_hint-m);margin-inline:var(--_hint-mx);margin-block:var(--_hint-my);margin-left:var(--_hint-ml);margin-right:var(--_hint-mr);margin-top:var(--_hint-mt);margin-bottom:var(--_hint-mb);--_hint-color-trigger: var(--hint-color-trigger, var(--mod-hint-color-trigger, var(--ds-alias-text-color-primary)));--_hint-color-trigger-background-hover: var(--hint-color-trigger-background-hover, var(--mod-hint-color-trigger-background-hover, var(--ds-alias-interaction-selection-background)));--_hint-color-focus: var(--hint-color-focus, var(--mod-hint-color-focus, var(--ds-alias-interaction-focus-color-base)));--_hint-color-title: var(--hint-color-title, var(--mod-hint-color-title, var(--ds-alias-text-color-primary)));--_hint-color-body: var(--hint-color-body, var(--mod-hint-color-body, var(--ds-alias-text-color-primary)))}:host{display:inline-flex;align-items:center;vertical-align:middle;font-weight:var(--ds-global-font-weight-400)}:host [part=trigger]{display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background:none;padding:.25rem;border-radius:50%;cursor:pointer;color:var(--_hint-color-trigger);line-height:0}@media(hover: hover)and (pointer: fine){:host [part=trigger]:hover{background:var(--_hint-color-trigger-background-hover)}}@media(hover: hover)and (pointer: fine){:host [part=trigger]:focus-visible{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_hint-color-focus) 0 0 0 5px !important}}:host [part=trigger] ds-icon{--icon-size: 20px;--icon-inner-size: 20px}:host ds-popup{--popup-background: var(--ds-alias-background-color-grey-light);--popup-radius: var(--ds-alias-radius-lg);--popup-max-width: 20rem}:host ds-drawer{--drawer-background: var(--ds-alias-background-color-grey-light);--drawer-radius: var(--ds-alias-radius-lg)}:host .hint-content{display:flex;flex-direction:column;gap:var(--ds-alias-space-sm-mobile)}:host .hint-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-alias-space-sm-mobile)}:host .hint-title{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-alias-text-weight-bold);font-size:var(--ds-alias-text-size-xl-mobile);line-height:var(--ds-alias-text-line-height-heading);color:var(--_hint-color-title)}:host .hint-body{font-family:var(--ds-alias-text-family-body);font-size:var(--ds-alias-text-size-base-mobile);line-height:var(--ds-alias-text-line-height-body);color:var(--_hint-color-body)}:host .hint-close-btn{margin-top:var(--ds-alias-space-sm-mobile);width:100%}

package/dist/collection/components/hint/hint.i18n.js

@@ -0,0 +1,35 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsHint = {
+    de: {
+        triggerLabel: 'Weitere Informationen',
+    },
+    en: {
+        triggerLabel: 'More information',
+    },
+    fr: {
+        triggerLabel: "Plus d'informations",
+    },
+    it: {
+        triggerLabel: 'Ulteriori informazioni',
+    },
+    nl: {
+        triggerLabel: 'Meer informatie',
+    },
+    es: {
+        triggerLabel: 'Más información',
+    },
+    pl: {
+        triggerLabel: 'Więcej informacji',
+    },
+    pt: {
+        triggerLabel: 'Mais informações',
+    },
+    sv: {
+        triggerLabel: 'Mer information',
+    },
+    fi: {
+        triggerLabel: 'Lisätiedot',
+    },
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/hint/hint.js

@@ -0,0 +1,410 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { ListenToBreakpoints, Logger, isEscapeKey, OneOf, Type, } from "../../utils/index";
+import { ListenToConfig, defaultConfig, } from "../../global/index";
+import { POPUP_PLACEMENTS } from "../popup/popup.interfaces";
+import { i18nDsHint } from "./hint.i18n";
+/**
+ * Hint displays contextual help via an info-circle trigger button.
+ * On touch viewports (< 1024 px) it opens a ds-drawer (bottom sheet);
+ * on desktop it opens a ds-popup (floating panel).
+ *
+ * @slot title - The hint panel heading.
+ * @slot       - The hint body content.
+ * @part trigger - The info-circle trigger button.
+ */
+export class Hint {
+    constructor() {
+        this.isOpen = false;
+        this.isTouch = false;
+        this.animated = true;
+        this.innerCloseLabel = 'Close';
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Preferred placement of the popup panel on desktop viewports.
+         */
+        this.placement = 'right';
+        /**
+         * Title text displayed in the hint panel.
+         * When provided, renders in the title section without needing a named slot.
+         */
+        this.label = undefined;
+        /**
+         * Label for the close button shown in the drawer on touch viewports.
+         * When omitted the label is localised from the language config.
+         */
+        this.closeLabel = undefined;
+        /**
+         * Accessible label for the trigger button.
+         * When omitted the label is localised from the language config.
+         */
+        this.triggerLabel = undefined;
+        this.handleTriggerClick = () => {
+            this.toggle();
+        };
+        this.handleWillPresent = () => {
+            this.isOpen = true;
+        };
+        this.handleWillDismiss = () => {
+            this.isOpen = false;
+        };
+        this.handleCloseClick = () => {
+            this.dismiss();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    componentDidLoad() {
+        this.wirePopupTrigger();
+    }
+    componentDidUpdate() {
+        this.wirePopupTrigger();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the hint panel. */
+    async present() {
+        var _a, _b;
+        if (this.isTouch) {
+            await ((_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.present());
+        }
+        else {
+            await ((_b = this.popupEl) === null || _b === void 0 ? void 0 : _b.present());
+        }
+    }
+    /** Closes the hint panel. */
+    async dismiss() {
+        var _a, _b;
+        if (this.isTouch) {
+            await ((_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.dismiss());
+        }
+        else {
+            await ((_b = this.popupEl) === null || _b === void 0 ? void 0 : _b.dismiss());
+        }
+    }
+    /** Toggles the hint panel open or closed. */
+    async toggle() {
+        this.isOpen ? this.dismiss() : this.present();
+    }
+    /**
+     * @internal
+     */
+    async configChanged(state) {
+        this.animated = state.animated;
+        this.language = state.language;
+        this.region = state.region;
+        if (!this.closeLabel) {
+            switch (state.language) {
+                case 'de':
+                    this.innerCloseLabel = 'Schliessen';
+                    break;
+                case 'fr':
+                    this.innerCloseLabel = 'Fermer';
+                    break;
+                case 'it':
+                    this.innerCloseLabel = 'Chiudere';
+                    break;
+                case 'nl':
+                    this.innerCloseLabel = 'Sluiten';
+                    break;
+                default:
+                    this.innerCloseLabel = 'Close';
+            }
+        }
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    listenToBreakpoint(breakpoints) {
+        const wasTouch = this.isTouch;
+        this.isTouch = breakpoints.touch;
+        if (wasTouch !== this.isTouch) {
+            this.isOpen = false;
+        }
+    }
+    wirePopupTrigger() {
+        if (!this.isTouch && this.popupEl && this.triggerButtonEl) {
+            this.popupEl.trigger = this.triggerButtonEl;
+        }
+    }
+    hasTitle() {
+        var _a, _b;
+        const titleSlot = this.el.querySelector('[slot="title"]');
+        return titleSlot !== null && ((_b = (_a = titleSlot.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== null && _b !== void 0 ? _b : 0) > 0;
+    }
+    /**
+     * EVENT BINDING
+     * ------------------------------------------------------
+     */
+    listenToKeyDown(ev) {
+        if (!this.isOpen || this.isTouch)
+            return;
+        if (isEscapeKey(ev)) {
+            ev.stopPropagation();
+            this.dismiss();
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const closeLabel = this.closeLabel || this.innerCloseLabel;
+        const triggerLabel = this.triggerLabel || i18nDsHint[this.language].triggerLabel;
+        return (h(Host, { key: 'e8a9e9e57768c5ca46710453b1ed7698df22a897' }, h("button", { key: '7ea41a18615ec50bbffb0bb5211db8d827ab701c', part: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "dialog", "aria-label": triggerLabel, ref: el => (this.triggerButtonEl = el), onClick: this.handleTriggerClick }, h("ds-icon", { key: '4b539e28416f080109972241e2304340a3edb0d5', name: "info-circle", "aria-hidden": "true" })), this.isTouch ? (h("ds-drawer", { ref: el => (this.drawerEl = el), closable: false, backdropDismiss: true, onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (h("div", { class: "hint-header" }, h("div", { class: "hint-title" }, this.label || h("slot", { name: "title" })))), h("div", { class: "hint-body" }, h("slot", null))), h("ds-button", { color: "primary", class: "hint-close-btn", onClick: this.handleCloseClick }, closeLabel))) : (h("ds-popup", { ref: el => (this.popupEl = el), closable: false, placement: this.placement, backdropDismiss: true, role: "dialog", onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (h("div", { class: "hint-header" }, h("div", { class: "hint-title" }, this.label || h("slot", { name: "title" })), h("ds-close", { onClick: this.handleCloseClick }))), h("div", { class: "hint-body" }, h("slot", null)))))));
+    }
+    static get is() { return "ds-hint"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["hint.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["hint.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopupPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PopupPlacement": {
+                            "location": "import",
+                            "path": "../popup/popup.interfaces",
+                            "id": "src/components/popup/popup.interfaces.ts::PopupPlacement",
+                            "referenceLocation": "PopupPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred placement of the popup panel on desktop viewports."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'right'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text displayed in the hint panel.\nWhen provided, renders in the title section without needing a named slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "undefined"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the close button shown in the drawer on touch viewports.\nWhen omitted the label is localised from the language config."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "undefined"
+            },
+            "triggerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the trigger button.\nWhen omitted the label is localised from the language config."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-label",
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "isTouch": {},
+            "animated": {},
+            "innerCloseLabel": {},
+            "language": {},
+            "region": {}
+        };
+    }
+    static get methods() {
+        return {
+            "present": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the hint panel.",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the hint panel.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the hint panel open or closed.",
+                    "tags": []
+                }
+            },
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "listenToKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    Logger('hint'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Hint.prototype, "createLogger", null);
+__decorate([
+    OneOf(POPUP_PLACEMENTS),
+    __metadata("design:type", String)
+], Hint.prototype, "placement", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Hint.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Hint.prototype, "closeLabel", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Hint.prototype, "triggerLabel", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Hint.prototype, "configChanged", null);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Hint.prototype, "listenToBreakpoint", null);

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

@@ -0,0 +1,41 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('closed hint', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-hint>
+      <ds-hint-title>Spider-Man</ds-hint-title>
+      <ds-hint-text>Spider-Man is a superhero in Marvel Comics.</ds-hint-text>
+    </ds-hint>
+  `);
+    await a11y('ds-hint');
+});
+test('open hint popup (desktop)', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-hint>
+      <ds-hint-title>Spider-Man</ds-hint-title>
+      <ds-hint-text>Spider-Man is a superhero in Marvel Comics.</ds-hint-text>
+    </ds-hint>
+  `);
+    await page.evaluate(() => document.querySelector('ds-hint').present());
+    await a11y('ds-hint');
+});
+test('hint with custom trigger label', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-hint trigger-label="Learn more about this topic">
+      <ds-hint-title>Details</ds-hint-title>
+      <ds-hint-text>More information about this topic.</ds-hint-text>
+    </ds-hint>
+  `);
+    await a11y('ds-hint');
+});
+test('hint with raw slots', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-hint>
+      <span slot="title">What is a deductible?</span>
+      <p>A deductible is the amount you pay before insurance covers the rest.</p>
+    </ds-hint>
+  `);
+    await a11y('ds-hint');
+});

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

@@ -0,0 +1,110 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsHint, expect, test } from "../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test('should render ds-hint closed by default', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>Title</ds-hint-title>
+        <ds-hint-text>Body content.</ds-hint-text>
+      </ds-hint>
+    `);
+        const dsHint = new DsHint(page.locator('ds-hint'));
+        await dsHint.assertToBeClosed();
+    });
+    test('should have aria-haspopup="dialog" on trigger', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>Title</ds-hint-title>
+        <ds-hint-text>Body.</ds-hint-text>
+      </ds-hint>
+    `);
+        const dsHint = new DsHint(page.locator('ds-hint'));
+        await expect(dsHint.trigger).toHaveAttribute('aria-haspopup', 'dialog');
+    });
+    test('should use triggerLabel as aria-label on trigger', async ({ page }) => {
+        await page.mount(`
+      <ds-hint trigger-label="Learn more">
+        <ds-hint-title>Title</ds-hint-title>
+        <ds-hint-text>Body.</ds-hint-text>
+      </ds-hint>
+    `);
+        const dsHint = new DsHint(page.locator('ds-hint'));
+        await expect(dsHint.trigger).toHaveAttribute('aria-label', 'Learn more');
+    });
+    test('should open on present()', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>Title</ds-hint-title>
+        <ds-hint-text>Body.</ds-hint-text>
+      </ds-hint>
+    `);
+        const dsHint = new DsHint(page.locator('ds-hint'));
+        await dsHint.assertToBeClosed();
+        await page.evaluate(() => document.querySelector('ds-hint').present());
+        await dsHint.assertToBeOpen();
+    });
+    test('should close on dismiss()', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>Title</ds-hint-title>
+        <ds-hint-text>Body.</ds-hint-text>
+      </ds-hint>
+    `);
+        const dsHint = new DsHint(page.locator('ds-hint'));
+        await page.evaluate(() => document.querySelector('ds-hint').present());
+        await dsHint.assertToBeOpen();
+        await page.evaluate(() => document.querySelector('ds-hint').dismiss());
+        await dsHint.assertToBeClosed();
+    });
+    test('should toggle on trigger click', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>Title</ds-hint-title>
+        <ds-hint-text>Body.</ds-hint-text>
+      </ds-hint>
+    `);
+        const dsHint = new DsHint(page.locator('ds-hint'));
+        await dsHint.clickTrigger();
+        await dsHint.assertToBeOpen();
+        await dsHint.clickTrigger();
+        await dsHint.assertToBeClosed();
+    });
+    test('should set aria-expanded to true when open', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>Title</ds-hint-title>
+        <ds-hint-text>Body.</ds-hint-text>
+      </ds-hint>
+    `);
+        const dsHint = new DsHint(page.locator('ds-hint'));
+        await page.evaluate(() => document.querySelector('ds-hint').present());
+        await expect(dsHint.trigger).toHaveAttribute('aria-expanded', 'true');
+    });
+    test('should assign ds-hint-title to title slot', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>My Hint Title</ds-hint-title>
+        <ds-hint-text>Body.</ds-hint-text>
+      </ds-hint>
+    `);
+        const slotValue = await page.evaluate(() => {
+            var _a;
+            return (_a = document.querySelector('ds-hint-title')) === null || _a === void 0 ? void 0 : _a.slot;
+        });
+        expect(slotValue).toBe('title');
+    });
+    test('should render title and body content in panel', async ({ page }) => {
+        await page.mount(`
+      <ds-hint>
+        <ds-hint-title>My Title</ds-hint-title>
+        <ds-hint-text>My body text.</ds-hint-text>
+      </ds-hint>
+    `);
+        await page.evaluate(() => document.querySelector('ds-hint').present());
+        const hint = page.locator('ds-hint');
+        await expect(hint.locator('ds-hint-title')).toContainText('My Title');
+        await expect(hint.locator('ds-hint-text')).toContainText('My body text.');
+    });
+});

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

@@ -0,0 +1,39 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsHint, expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'hint';
+const VARIANTS = [
+    // New structure with label prop
+    { testId: 'basic-label', description: 'Basic with label prop' },
+    { testId: 'trigger-label', description: 'Custom trigger label' },
+    { testId: 'placement-top', description: 'Placement: top' },
+    { testId: 'placement-bottom', description: 'Placement: bottom' },
+    { testId: 'placement-left', description: 'Placement: left' },
+    { testId: 'close-label', description: 'Custom close label' },
+    { testId: 'no-title', description: 'Without title' },
+    { testId: 'inline', description: 'Inline' },
+    // Raw slots structure for custom styling
+    { testId: 'custom-styling', description: 'Custom styling with slots' },
+    // Legacy/migration structures
+    { testId: 'migration-subcomponents', description: 'Legacy sub-components' },
+];
+const image = screenshot(TAG);
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    VARIANTS.forEach(({ testId, description }) => {
+        test(description, async ({ page }) => {
+            const section = page.getByTestId(testId);
+            const dsHint = new DsHint(section.locator('ds-hint').first());
+            await dsHint.clickTrigger();
+            await dsHint.assertToBeOpen();
+            await expectScreenshot(page.locator('body'), image(testId));
+            await page.evaluate(() => {
+                document.querySelectorAll('ds-hint').forEach((el) => el.dismiss());
+            });
+            await dsHint.assertToBeClosed();
+        });
+    });
+});