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

package/dist/collection/components/footer/footer.js

@@ -0,0 +1,350 @@
+/*!
+ * (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, OneOf, Type } from "../../utils/index";
+import { ListenToConfig, defaultConfig, } from "../../global/index";
+import { FOOTER_CONTAINERS, } from "./footer.interfaces";
+import { i18nDsFooter } from "./footer.i18n";
+/**
+ * Footer renders application level legal links, language selection, and social links.
+ * Link content is slot first to keep links crawlable and SEO friendly.
+ * Links and social media are shown by default unless disabled.
+ *
+ * @slot - Main content area above the divider.
+ * @slot logo - Optional custom logo markup.
+ * @slot social-links - Optional social link anchors (shows if provided or config available).
+ * @slot links - Optional legal or app links (shows if provided or config available).
+ */
+export class Footer {
+    constructor() {
+        // ========================================================================
+        // PUBLIC PROPERTY API
+        // ========================================================================
+        this.brand = defaultConfig.brand;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.allowedLanguages = defaultConfig.allowedLanguages;
+        /**
+         * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+         * Matches the `ds-container` sizing variants.
+         */
+        this.container = '';
+        /**
+         * If `true` the language selection will be hidden.
+         */
+        this.hideLanguageSelection = false;
+        /**
+         * If `true` the default legal links from config will not be rendered.
+         * User must provide links via the `links` slot.
+         */
+        this.disableDefaultLinks = false;
+        /**
+         * If `true` the default social links from config will not be rendered.
+         * User must provide social links via the `social-links` slot.
+         */
+        this.disableDefaultSocialLinks = false;
+        /**
+         * Copyright and address text below the divider.
+         * If not provided, uses the text from config based on region and language.
+         */
+        this.legalText = undefined;
+        this.handleLanguageChange = (ev) => {
+            const selectEl = ev.target;
+            const nextLanguage = selectEl.value;
+            this.language = nextLanguage;
+            this.dsLanguageChange.emit({ language: nextLanguage });
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    // ========================================================================
+    // LIFECYCLE
+    // ========================================================================
+    // ========================================================================
+    // PROPERTY VALIDATION
+    // ========================================================================
+    // ========================================================================
+    // PUBLIC METHODS
+    // ========================================================================
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        var _a, _b, _c, _d;
+        this.brand = state.brand;
+        this.language = state.language;
+        this.region = state.region;
+        this.allowedLanguages = state.allowedLanguages;
+        this.legalLinksConfig = (_a = state.legalLinks) === null || _a === void 0 ? void 0 : _a[state.region];
+        this.legalTextConfig = (_c = (_b = state.legalText) === null || _b === void 0 ? void 0 : _b[state.region]) === null || _c === void 0 ? void 0 : _c[state.language];
+        this.socialLinksConfig = (_d = state.socialLinks) === null || _d === void 0 ? void 0 : _d[state.region];
+    }
+    // ========================================================================
+    // PRIVATE METHODS
+    // ========================================================================
+    hasNamedSlot(name) {
+        return this.el.querySelector(`[slot="${name}"]`) !== null;
+    }
+    getLanguageLabel(languageCode) {
+        const labels = i18nDsFooter[this.language].languageLabels;
+        return labels[languageCode] || languageCode.toUpperCase();
+    }
+    renderLogo() {
+        if (this.hasNamedSlot('logo')) {
+            return h("slot", { name: "logo" });
+        }
+        return h("ds-logo", { brand: this.brand, color: "white" });
+    }
+    renderLinkList(links, className) {
+        return (h("ul", { class: className }, links.map(link => (h("li", { key: `${link.href}-${link.label}` }, h("a", { href: link.href, target: link.target, rel: link.rel }, link.label))))));
+    }
+    renderSocialList(links) {
+        return (h("ul", { class: "social-list", "aria-label": "Social links" }, links.map(link => (h("li", { key: `${link.href}-${link.icon}` }, h("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel || link.label, title: link.ariaLabel || link.label }, h("ds-icon", { name: link.icon, "aria-hidden": "true" })))))));
+    }
+    // ========================================================================
+    // RENDER
+    // ========================================================================
+    render() {
+        var _a;
+        const hasLinksSlot = this.hasNamedSlot('links');
+        const hasSocialSlot = this.hasNamedSlot('social-links');
+        const configLinks = !this.disableDefaultLinks && ((_a = this.legalLinksConfig) === null || _a === void 0 ? void 0 : _a[this.language]);
+        const configSocial = !this.disableDefaultSocialLinks && this.socialLinksConfig;
+        const textToDisplay = this.legalText || this.legalTextConfig;
+        const showLinks = hasLinksSlot || (configLinks && configLinks.length > 0);
+        const showSocial = hasSocialSlot || (configSocial && configSocial.length > 0);
+        return (h(Host, { key: 'f5041f27ffaa02706365e348e9fbcd433b61e597' }, h("footer", { key: 'fa7fc4395a0181d27866703ca109ee7b14e1be69', class: {
+                'is-fluid': this.container === 'fluid',
+                'is-compact': this.container === 'compact',
+            } }, h("div", { key: 'e99d0e4e3a2043579d74082828c433bfa49bee77', class: "top-row" }, h("div", { key: 'b6d3605f12ffbcc3a90474c7dff995d51a59ac3c', class: "logo-area" }, this.renderLogo()), !this.hideLanguageSelection && (h("label", { key: 'becbaddae40dce976c39033513e911d49611b9bf', class: "language-picker", "aria-label": i18nDsFooter[this.language].languageSelector }, h("ds-icon", { key: '6ff2ab4a2ac6bb92a817f55bafa5496c76a4c72f', name: "web", "aria-hidden": "true" }), h("select", { key: 'f12f1ad864b76d9ac7d4cd9958fa9b6a426fe80c', "data-testid": "footer-language-select", onChange: this.handleLanguageChange }, this.allowedLanguages.map(languageCode => (h("option", { key: languageCode, value: languageCode, selected: this.language === languageCode }, this.getLanguageLabel(languageCode)))))))), h("div", { key: '6179015e628411a0baa40db7f3c43e0a1fe73c24', class: "content" }, h("slot", { key: '1726a81dc4ab97761840e4b8540d1998479fc3f5' })), h("ds-divider", { key: 'c393531689e81c30a561a720bc9db3b53c0c7e7f', space: "sm", color: "primary-light" }), h("div", { key: '11bbe98d7c55c063275f6f1dfb2790b4027e6071', class: "bottom-row" }, textToDisplay && h("p", { key: '216b2953c145b87c50f1dbc6995a60b2fa38110f', class: "legal" }, textToDisplay), showSocial && (h("nav", { key: 'c0b32fc3ee82d898fd167c00415a947ca69c9c42', class: "social", "aria-label": "Social navigation" }, h("slot", { key: 'e1cd6bdccbe2b175135035d8bb3ca60bf7cf6c90', name: "social-links" }), !hasSocialSlot && configSocial && this.renderSocialList(configSocial))), showLinks && (h("nav", { key: '3fa8077bda4f64f43323be9867d6e379b310b20f', class: "links", "aria-label": "Footer links" }, h("slot", { key: '05cc5e0987afdf5eec45eac14fe146610e54c142', name: "links" }), !hasLinksSlot && configLinks && this.renderLinkList(configLinks, 'link-list')))))));
+    }
+    static get is() { return "ds-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["footer.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["footer.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "container": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FooterContainer",
+                    "resolved": "\"\" | \"compact\" | \"default\" | \"fluid\"",
+                    "references": {
+                        "FooterContainer": {
+                            "location": "import",
+                            "path": "./footer.interfaces",
+                            "id": "src/components/footer/footer.interfaces.ts::FooterContainer",
+                            "referenceLocation": "FooterContainer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.\nMatches the `ds-container` sizing variants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container",
+                "defaultValue": "''"
+            },
+            "hideLanguageSelection": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the language selection will be hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-language-selection",
+                "defaultValue": "false"
+            },
+            "disableDefaultLinks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the default legal links from config will not be rendered.\nUser must provide links via the `links` slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-default-links",
+                "defaultValue": "false"
+            },
+            "disableDefaultSocialLinks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the default social links from config will not be rendered.\nUser must provide social links via the `social-links` slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-default-social-links",
+                "defaultValue": "false"
+            },
+            "legalText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Copyright and address text below the divider.\nIf not provided, uses the text from config based on region and language."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legal-text",
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "brand": {},
+            "language": {},
+            "region": {},
+            "allowedLanguages": {},
+            "legalLinksConfig": {},
+            "legalTextConfig": {},
+            "socialLinksConfig": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsLanguageChange",
+                "name": "dsLanguageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the language select value changes."
+                },
+                "complexType": {
+                    "original": "FooterLanguageChangeDetail",
+                    "resolved": "FooterLanguageChangeDetail",
+                    "references": {
+                        "FooterLanguageChangeDetail": {
+                            "location": "import",
+                            "path": "./footer.interfaces",
+                            "id": "src/components/footer/footer.interfaces.ts::FooterLanguageChangeDetail",
+                            "referenceLocation": "FooterLanguageChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "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": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('footer'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Footer.prototype, "createLogger", null);
+__decorate([
+    OneOf(FOOTER_CONTAINERS),
+    __metadata("design:type", String)
+], Footer.prototype, "container", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Footer.prototype, "hideLanguageSelection", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Footer.prototype, "disableDefaultLinks", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Footer.prototype, "disableDefaultSocialLinks", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Footer.prototype, "legalText", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Footer.prototype, "configChanged", null);

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

@@ -0,0 +1,17 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('default', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-footer>
+      <p>Footer Content</p>
+      <a slot="links" href="/impressum">Impressum</a>
+      <a slot="links" href="/privacy">Datenschutz</a>
+      <a slot="social-links" href="https://www.linkedin.com" aria-label="LinkedIn">
+        <ds-icon name="linkedin"></ds-icon>
+      </a>
+    </ds-footer>
+  `);
+    await a11y('ds-footer');
+});

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

@@ -0,0 +1,74 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsFooter, expect, test } from "../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test('renders content and legal text', async ({ page }) => {
+        await page.mount(`
+      <ds-footer legal-text="Test Legal Text">
+        <p>Footer Content</p>
+      </ds-footer>
+    `);
+        const footer = new DsFooter(page.locator('ds-footer'));
+        await expect(footer.el).toContainText('Footer Content');
+        await footer.assertLegalTextContains('Test Legal Text');
+    });
+});
+test.describe('dsLanguageChange', () => {
+    test('emits dsLanguageChange with correct detail', async ({ page }) => {
+        await page.mount(`<ds-footer></ds-footer>`);
+        const footer = new DsFooter(page.locator('ds-footer'));
+        const languageChangeSpy = await footer.el.spyOnEvent('dsLanguageChange');
+        await footer.selectLanguage('fr');
+        expect(languageChangeSpy).toHaveReceivedEventTimes(1);
+        expect(languageChangeSpy).toHaveReceivedEventDetail({ language: 'fr' });
+    });
+});
+test.describe('props', () => {
+    test('renders language select by default', async ({ page }) => {
+        await page.mount(`<ds-footer></ds-footer>`);
+        const footer = new DsFooter(page.locator('ds-footer'));
+        await footer.assertLanguageSelectVisible();
+    });
+    test('hides language select when hide-language-selection is set', async ({ page }) => {
+        await page.mount(`<ds-footer hide-language-selection></ds-footer>`);
+        const footer = new DsFooter(page.locator('ds-footer'));
+        await footer.assertLanguageSelectHidden();
+    });
+    test('hides links when disableDefaultLinks is set', async ({ page }) => {
+        await page.mount(`
+      <ds-footer disable-default-links>
+        <a slot="links" href="/impressum">Impressum</a>
+      </ds-footer>
+    `);
+        const footer = new DsFooter(page.locator('ds-footer'));
+        await footer.assertLinksCount(1);
+    });
+    test('renders social links when disable-default-social-links is set', async ({ page }) => {
+        await page.mount(`
+      <ds-footer disable-default-social-links>
+        <a slot="social-links" href="https://www.linkedin.com" aria-label="LinkedIn">
+          <ds-icon name="linkedin"></ds-icon>
+        </a>
+      </ds-footer>
+    `);
+        const footer = new DsFooter(page.locator('ds-footer'));
+        await footer.assertSocialLinksCount(1);
+    });
+});
+test.describe('methods', () => {
+    test('configChanged updates allowed language options', async ({ page }) => {
+        await page.mount(`<ds-footer></ds-footer>`);
+        await page.evaluate(async () => {
+            const footer = document.querySelector('ds-footer');
+            await footer.configChanged({
+                language: 'de',
+                region: 'ch',
+                allowedLanguages: ['de', 'fr'],
+            });
+        });
+        const footer = new DsFooter(page.locator('ds-footer'));
+        await expect(footer.languageSelect.locator('option')).toHaveCount(2);
+        await expect(footer.languageSelect).toHaveValue('de');
+    });
+});

package/dist/collection/components/footer/test/footer.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 = 'footer';
+const VARIANTS = ['basic', 'custom', 'slotted-logo'];
+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/form/test/form.visual.play.js

@@ -3,7 +3,19 @@
  */
 import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
 const TAG = 'form';
-const VARIANTS = ['select', 'select-states', 'file', 'file-states', 'field-spacing'];
+const VARIANTS = [
+    'basic',
+    'disabled',
+    'invalid',
+    'numeric-sizes',
+    'numeric-mixed',
+    'semantic-sizes',
+    'responsive-half',
+    'responsive-thirds',
+    'responsive-multi-breakpoint',
+    'semantic-responsive',
+    'complex-layout',
+];
 const image = screenshot(TAG);
 test.beforeEach('Setup', async ({ page }) => {
     await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`);

package/dist/collection/components/heading/heading.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { dsBrowser, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { dsBrowser, Logger, hasValue, OneOf, Type } from "../../utils/index";
 import { HEADING_COLORS, HEADING_LEVELS, HEADING_SPACES, HEADING_VISUAL_LEVELS, } from "./heading.interfaces";
 import { HEADING_COLOR_MAP, HEADING_TAG_MAP, HEADING_ORDER, HEADING_SIZES, } from "./heading.const";
 /**
@@ -76,11 +76,10 @@ export class Heading {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.updateAutoFontSize();
     }
     componentDidRender() {
-        if (this.autoLevel && this.autoFontSize) {
+        if (hasValue(this.autoLevel) && this.autoFontSize) {
             const rows = this.rows;
             if (rows > 1) {
                 const minSize = HEADING_SIZES[this.autoLevel];
@@ -111,7 +110,7 @@ export class Heading {
         if (this.inverted) {
             return 'white';
         }
-        return HEADING_COLOR_MAP[this.color];
+        return hasValue(this.color) ? HEADING_COLOR_MAP[this.color] : '';
     }
     get fontSize() {
         return HEADING_SIZES[this.visualLevel ? this.visualLevel : this.level];
@@ -125,14 +124,14 @@ export class Heading {
      */
     render() {
         const Heading = this.tag;
-        return (h(Host, { key: '0b502ee9b85add9b3276695e5eb2b6497ba339f2', class: {
+        return (h(Host, { key: 'dd9df7b068c6a489c4a56437a19e6f7a27a1c1ea', class: {
                 [`is-${this.autoFontSize}`]: this.autoFontSize !== undefined,
-                [`is-${this.fontColor}`]: this.fontColor !== undefined,
+                [`is-${this.fontColor}`]: hasValue(this.fontColor),
                 'is-subtitle': this.subtitle,
                 'has-no-wrap': this.noWrap,
                 'has-shadow': this.shadow,
-                [`has-space-${this.space}`]: !!this.space,
-            } }, h(Heading, { key: 'c88498ebc2531d6060c9aec68cb33c051b0ef336', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, h("slot", { key: '51db87f89bcea927d039e4d2cc6b12c1c04ec19b' }))));
+                [`has-space-${this.space}`]: hasValue(this.space),
+            } }, h(Heading, { key: 'e437b9f774f324b5628d002210b1af6763cc9dc8', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, h("slot", { key: '61234ad53aa55043c4982b94e40155fb5b40b69b' }))));
     }
     static get is() { return "ds-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -391,38 +390,38 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Heading.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...HEADING_LEVELS),
+    OneOf(HEADING_LEVELS),
     __metadata("design:type", String)
 ], Heading.prototype, "level", void 0);
 __decorate([
-    ValidateOneOf(...HEADING_VISUAL_LEVELS),
+    OneOf(HEADING_VISUAL_LEVELS),
     __metadata("design:type", String)
 ], Heading.prototype, "visualLevel", void 0);
 __decorate([
-    ValidateOneOf(...HEADING_VISUAL_LEVELS),
+    OneOf(HEADING_VISUAL_LEVELS),
     __metadata("design:type", String)
 ], Heading.prototype, "autoLevel", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Heading.prototype, "noWrap", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Heading.prototype, "subtitle", void 0);
 __decorate([
-    ValidateOneOf(...HEADING_SPACES),
+    OneOf(HEADING_SPACES),
     __metadata("design:type", String)
 ], Heading.prototype, "space", void 0);
 __decorate([
-    ValidateOneOf(...HEADING_COLORS),
+    OneOf(HEADING_COLORS),
     __metadata("design:type", String)
 ], Heading.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Heading.prototype, "inverted", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Heading.prototype, "shadow", void 0);

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

@@ -0,0 +1,28 @@
+/*!
+ * (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 Text renders the body content inside a ds-hint panel. Place it as a direct child of ds-hint.
+ * Projects into the default slot of ds-hint.
+ *
+ * @slot - The hint body text.
+ */
+export class HintText {
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (h(Host, { key: 'e29a27c1f5176a5b9a29297d4b9f46db9fb9a58b', style: { display: 'contents' } }, h("slot", { key: '5135ac7a804d2a76c66df93aad918720fed7f0a5' })));
+    }
+    static get is() { return "ds-hint-text"; }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('hint-text'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], HintText.prototype, "createLogger", null);

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%}