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

package/dist/esm/ds-footer.entry.js

@@ -0,0 +1,157 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { i as i18nDsFooter, F as FOOTER_CONTAINERS } from './footer.i18n-BrJFPhMA.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import { T as Type } from './type-7qEQcw90.js';
+import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import './create-validator-decorator-fUav5byo.js';
+import './config.utils-CR4Xudpz.js';
+
+const footerHostCss = () => `:host{--_footer-position:var(--footer-position, var(--mod-footer-position, static));--_footer-top:var(--footer-top, var(--mod-footer-top));--_footer-right:var(--footer-right, var(--mod-footer-right));--_footer-bottom:var(--footer-bottom, var(--mod-footer-bottom));--_footer-left:var(--footer-left, var(--mod-footer-left));position:var(--_footer-position);top:var(--_footer-top);right:var(--_footer-right);bottom:var(--_footer-bottom);left:var(--_footer-left);--_footer-m:var(--footer-m, var(--mod-footer-m, 0));--_footer-my:var(--footer-my, var(--mod-footer-my));--_footer-mx:var(--footer-mx, var(--mod-footer-mx));--_footer-ml:var(--footer-ml, var(--mod-footer-ml));--_footer-mr:var(--footer-mr, var(--mod-footer-mr));--_footer-mt:var(--footer-mt, var(--mod-footer-mt));--_footer-mb:var(--footer-mb, var(--mod-footer-mb));margin:var(--_footer-m);margin-inline:var(--_footer-mx);margin-block:var(--_footer-my);margin-left:var(--_footer-ml);margin-right:var(--_footer-mr);margin-top:var(--_footer-mt);margin-bottom:var(--_footer-mb);--_footer-background:var(--footer-background, var(--mod-footer-background, var(--ds-footer-color-background)));--_footer-color:var(--footer-color, var(--mod-footer-color, var(--ds-footer-color-text)));--_footer-link-color:var(--footer-link-color, var(--mod-footer-link-color, var(--ds-footer-color-link-base)));--_footer-link-color-hover:var(--footer-link-color-hover, var(--mod-footer-link-color-hover, var(--ds-footer-color-link-hover)));--_footer-divider-color:var(--footer-divider-color, var(--mod-footer-divider-color, var(--ds-footer-color-divider)));--_footer-content-max-width:var(--footer-content-max-width, var(--mod-footer-content-max-width, var(--ds-footer-space-content-max-width)));--_footer-padding:var(--footer-padding, var(--mod-footer-padding, var(--ds-footer-space-padding-base)));--_footer-content-padding-top:var(--footer-content-padding-top, var(--mod-footer-content-padding-top, var(--ds-footer-space-content-padding-top)));--_footer-gap-row:var(--footer-gap-row, var(--mod-footer-gap-row, var(--ds-footer-space-gap-row)));--_footer-gap-column:var(--footer-gap-column, var(--mod-footer-gap-column, var(--ds-footer-space-gap-column)));--_footer-language-font-family:var(--footer-language-font-family, var(--mod-footer-language-font-family, var(--ds-footer-typography-language-family)));--_footer-language-font-weight:var(--footer-language-font-weight, var(--mod-footer-language-font-weight, var(--ds-footer-typography-language-weight)));--_footer-language-gap:var(--footer-language-gap, var(--mod-footer-language-gap, var(--ds-footer-space-language-gap)));--_footer-bottom-gap:var(--footer-bottom-gap, var(--mod-footer-bottom-gap, var(--ds-footer-space-bottom-gap)));--_footer-link-gap:var(--footer-link-gap, var(--mod-footer-link-gap, var(--ds-footer-space-link-gap)));--_footer-social-gap:var(--footer-social-gap, var(--mod-footer-social-gap, var(--ds-footer-space-social-gap)));--_footer-font-size:var(--footer-font-size, var(--mod-footer-font-size, var(--ds-footer-typography-font-size)));--_footer-line-height:var(--footer-line-height, var(--mod-footer-line-height, var(--ds-footer-typography-line-height)));--_footer-social-icon-size:var(--footer-social-icon-size, var(--mod-footer-social-icon-size, var(--ds-footer-space-social-icon-size)));--_footer-social-icon-gap:var(--footer-social-icon-gap, var(--mod-footer-social-icon-gap, var(--ds-footer-space-social-icon-gap)));--_footer-slotted-margin-right:var(--footer-slotted-margin-right, var(--mod-footer-slotted-margin-right, var(--ds-footer-space-slotted-margin-right)));margin:var(--_footer-m);margin-inline:var(--_footer-mx);margin-block:var(--_footer-my);margin-left:var(--_footer-ml);margin-right:var(--_footer-mr);margin-top:var(--_footer-mt);margin-bottom:var(--_footer-mb);position:var(--_footer-position);top:var(--_footer-top);right:var(--_footer-right);bottom:var(--_footer-bottom);left:var(--_footer-left);display:block;color:var(--_footer-color);background:var(--_footer-background)}footer{margin:0 auto;padding-block:var(--_footer-padding);padding-inline:var(--ds-alias-container-space-device);width:100%;max-width:var(--ds-alias-container-width-base)}footer.is-fluid{max-width:var(--ds-alias-container-width-fluid)}footer.is-compact{max-width:var(--ds-alias-container-width-compact)}.top-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--_footer-gap-row) var(--_footer-gap-column);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.logo-area{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.logo-link{display:-ms-inline-flexbox;display:inline-flex;color:inherit}.logo-svg{display:-ms-inline-flexbox;display:inline-flex}.language-picker{-ms-flex-align:center;align-items:center;border:0;color:var(--_footer-color);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--_footer-language-font-family);font-weight:var(--_footer-language-font-weight);gap:var(--_footer-language-gap);margin:0 0 0 auto;max-width:100%;width:auto}.language-picker ds-icon{--icon-color:currentColor;-ms-flex-negative:0;flex-shrink:0}.language-picker select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:rgba(0,0,0,0);border:0;border-radius:0;color:inherit;cursor:pointer;-ms-flex:0 0 auto;flex:0 0 auto;font:inherit;line-height:1.3;min-width:auto;padding:0}.language-picker select:hover,.language-picker select:focus-visible{color:var(--_footer-link-color-hover)}.content{padding-top:var(--_footer-content-padding-top)}.bottom-row{display:grid;font-size:var(--_footer-font-size);gap:var(--_footer-bottom-gap);grid-template-columns:1fr;line-height:var(--_footer-line-height)}.legal{margin:0;font-size:var(--_footer-font-size);line-height:var(--_footer-line-height)}.links,.social{min-width:0}.link-list,.social-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--_footer-link-gap);margin:0;padding:0}.social-list{gap:var(--_footer-social-gap)}.link-list li,.social-list li{list-style:none}.links a,::slotted([slot=links]){color:var(--_footer-link-color);text-decoration:none}.links a:hover,::slotted([slot=links]:hover){color:var(--_footer-link-color-hover);text-decoration:underline}.social a,::slotted([slot=social-links]){--icon-color:var(--ds-alias-text-color-white);--icon-size:var(--ds-icon-size-sm);-ms-flex-align:center;align-items:center;color:var(--_footer-link-color);display:-ms-inline-flexbox;display:inline-flex;height:var(--_footer-social-icon-size);-ms-flex-pack:center;justify-content:center;text-decoration:none;width:var(--_footer-social-icon-size)}.social a:hover,::slotted([slot=social-links]:hover){--icon-color:var(--_footer-link-color-hover);color:var(--_footer-link-color-hover)}::slotted([slot=links]),::slotted([slot=social-links]){margin-right:var(--_footer-slotted-margin-right)}@media screen and (min-width: 769px){.bottom-row{-ms-flex-align:start;align-items:start;grid-template-columns:1fr}.social,.links{justify-self:start}}@media screen and (min-width: 1024px){.bottom-row{-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto;grid-template-areas:"legal social" "links links"}.legal{align-self:center;grid-area:legal}.social{align-self:center;grid-area:social;justify-self:end}.links{grid-area:links;justify-self:stretch;width:100%}}`;
+
+const Footer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsLanguageChange = createEvent(this, "dsLanguageChange");
+        // ========================================================================
+        // 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')))))));
+    }
+    get el() { return getElement(this); }
+};
+__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);
+Footer.style = footerHostCss();
+
+export { Footer as ds_footer };

package/dist/esm/ds-heading.entry.js

@@ -1,10 +1,13 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, d as dsBrowser, E as h, F as Host, G as getElement } from './index-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
-import { s as setupValidation, a as ValidateOneOf, V as ValidateType } from './validate.decorator-82RSSk25.js';
+import { B as registerInstance, d as dsBrowser, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { h as hasValue } from './has-value-Dmsj8ZQw.js';
 import { c as HEADING_LEVELS, b as HEADING_VISUAL_LEVELS, d as HEADING_SPACES, H as HEADING_COLORS } from './heading.interfaces-Ceu7FIWM.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import { T as Type } from './type-7qEQcw90.js';
+import './create-validator-decorator-fUav5byo.js';
 
 const HEADING_TAG_MAP = {
     'display': 'h1',
@@ -55,7 +58,7 @@ const HEADING_COLOR_MAP = {
     white: 'white',
 };
 
-const headingHostCss = () => `:host{--_heading-position:var(--heading-position, var(--mod-heading-position, static));--_heading-top:var(--heading-top, var(--mod-heading-top));--_heading-right:var(--heading-right, var(--mod-heading-right));--_heading-bottom:var(--heading-bottom, var(--mod-heading-bottom));--_heading-left:var(--heading-left, var(--mod-heading-left));position:var(--_heading-position);top:var(--_heading-top);right:var(--_heading-right);bottom:var(--_heading-bottom);left:var(--_heading-left);--_heading-m:var(--heading-m, var(--mod-heading-m, 0));--_heading-my:var(--heading-my, var(--mod-heading-my));--_heading-mx:var(--heading-mx, var(--mod-heading-mx));--_heading-ml:var(--heading-ml, var(--mod-heading-ml));--_heading-mr:var(--heading-mr, var(--mod-heading-mr));--_heading-mt:var(--heading-mt, var(--mod-heading-mt));--_heading-mb:var(--heading-mb, var(--mod-heading-mb));margin:var(--_heading-m);margin-inline:var(--_heading-mx);margin-block:var(--_heading-my);margin-left:var(--_heading-ml);margin-right:var(--_heading-mr);margin-top:var(--_heading-mt);margin-bottom:var(--_heading-mb);--_heading-color:var(--heading-color, var(--mod-heading-color, inherit));--_heading-family:var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight:var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height:var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size:var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));--_heading-space:var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));--_heading-shadow:var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align:var(--heading-text-align, var(--mod-heading-text-align, inherit))}#heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;color:var(--_heading-color);font-family:var(--_heading-family);font-weight:var(--_heading-weight);font-size:var(--_heading-font-size);line-height:var(--_heading-line-height);text-align:var(--_heading-text-align);text-shadow:var(--_heading-shadow)}#heading em:not(.text),#heading span:not(.text){font-weight:inherit}#heading b,#heading strong,#heading .is-bold{font-weight:var(--ds-text-weight-bold)}:host(.has-no-wrap) #heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.has-shadow){--mod-heading-shadow:var(--ds-heading-shadow)}:host(.is-subtitle){--mod-heading-family:var(--ds-heading-subtitle-family);--mod-heading-weight:var(--ds-heading-subtitle-weight);--mod-heading-line-height:var(--ds-heading-subtitle-line-height)}:host(.is-primary){--mod-heading-color:var(--ds-heading-color-primary)}:host(.is-success){--mod-heading-color:var(--ds-heading-color-success)}:host(.is-warning){--mod-heading-color:var(--ds-heading-color-warning)}:host(.is-danger){--mod-heading-color:var(--ds-heading-color-danger)}:host(.is-white){--mod-heading-color:var(--ds-heading-color-white)}:host(.is-black){--mod-heading-color:var(--ds-heading-color-black)}:host(.is-3xl){--mod-heading-font-size:var(--ds-heading-1-size-device);--mod-heading-space:var(--ds-heading-1-space)}:host(.is-2xl){--mod-heading-font-size:var(--ds-heading-2-size-device);--mod-heading-space:var(--ds-heading-2-space)}:host(.is-xl){--mod-heading-font-size:var(--ds-heading-3-size-device);--mod-heading-space:var(--ds-heading-3-space)}:host(.is-lg){--mod-heading-font-size:var(--ds-heading-4-size-device);--mod-heading-space:var(--ds-heading-4-space)}:host(.is-base){--mod-heading-font-size:var(--ds-heading-5-size-device);--mod-heading-space:var(--ds-heading-5-space)}:host(.is-5xl){--mod-heading-font-size:var(--ds-heading-display1-size-device);--mod-heading-space:var(--ds-heading-display1-space)}:host(.is-4xl){--mod-heading-font-size:var(--ds-heading-display2-size-device);--mod-heading-space:var(--ds-heading-display2-space)}:host(.has-space-all){--heading-mt:var(--_heading-space);--heading-mb:var(--_heading-space)}:host(.has-space-top){--heading-mt:var(--_heading-space);--heading-mb:0}:host(.has-space-bottom){--heading-mt:0;--heading-mb:var(--_heading-space)}:host(.has-space-none){--heading-mt:0;--heading-mb:0}:host{display:block}`;
+const headingHostCss = () => `:host{--_heading-position:var(--heading-position, var(--mod-heading-position, static));--_heading-top:var(--heading-top, var(--mod-heading-top));--_heading-right:var(--heading-right, var(--mod-heading-right));--_heading-bottom:var(--heading-bottom, var(--mod-heading-bottom));--_heading-left:var(--heading-left, var(--mod-heading-left));position:var(--_heading-position);top:var(--_heading-top);right:var(--_heading-right);bottom:var(--_heading-bottom);left:var(--_heading-left);--_heading-m:var(--heading-m, var(--mod-heading-m, 0));--_heading-my:var(--heading-my, var(--mod-heading-my));--_heading-mx:var(--heading-mx, var(--mod-heading-mx));--_heading-ml:var(--heading-ml, var(--mod-heading-ml));--_heading-mr:var(--heading-mr, var(--mod-heading-mr));--_heading-mt:var(--heading-mt, var(--mod-heading-mt));--_heading-mb:var(--heading-mb, var(--mod-heading-mb));margin:var(--_heading-m);margin-inline:var(--_heading-mx);margin-block:var(--_heading-my);margin-left:var(--_heading-ml);margin-right:var(--_heading-mr);margin-top:var(--_heading-mt);margin-bottom:var(--_heading-mb);--_heading-color:var(--heading-color, var(--mod-heading-color, inherit));--_heading-family:var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight:var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height:var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size:var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));--_heading-space:var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));--_heading-shadow:var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align:var(--heading-text-align, var(--mod-heading-text-align, inherit))}:host{--_heading-color:var(--heading-color, var(--mod-heading-color, inherit));--_heading-family:var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight:var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height:var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size:var(--heading-font-size, var(--mod-heading-font-size, var(--_heading-font-size, var(--ds-heading-1-size-device))));--_heading-shadow:var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align:var(--heading-text-align, var(--mod-heading-text-align, inherit))}#heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;color:var(--_heading-color);font-family:var(--_heading-family);font-weight:var(--_heading-weight);font-size:var(--_heading-font-size);line-height:var(--_heading-line-height);text-align:var(--_heading-text-align);text-shadow:var(--_heading-shadow)}#heading em:not(.text),#heading span:not(.text){font-weight:inherit}#heading b,#heading strong,#heading .is-bold{font-weight:var(--ds-alias-text-weight-bold)}:host(.has-no-wrap) #heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.has-shadow){--mod-heading-shadow:var(--ds-heading-shadow)}:host(.is-subtitle){--mod-heading-family:var(--ds-heading-subtitle-family);--mod-heading-weight:var(--ds-heading-subtitle-weight);--mod-heading-line-height:var(--ds-heading-subtitle-line-height)}:host(.is-primary){--mod-heading-color:var(--ds-heading-color-primary)}:host(.is-success){--mod-heading-color:var(--ds-heading-color-success)}:host(.is-warning){--mod-heading-color:var(--ds-heading-color-warning)}:host(.is-danger){--mod-heading-color:var(--ds-heading-color-danger)}:host(.is-white){--mod-heading-color:var(--ds-heading-color-white)}:host(.is-black){--mod-heading-color:var(--ds-heading-color-black)}:host(.is-3xl){--mod-heading-font-size:var(--ds-heading-1-size-device);--mod-heading-space:var(--ds-heading-1-space)}:host(.is-2xl){--mod-heading-font-size:var(--ds-heading-2-size-device);--mod-heading-space:var(--ds-heading-2-space)}:host(.is-xl){--mod-heading-font-size:var(--ds-heading-3-size-device);--mod-heading-space:var(--ds-heading-3-space)}:host(.is-lg){--mod-heading-font-size:var(--ds-heading-4-size-device);--mod-heading-space:var(--ds-heading-4-space)}:host(.is-base){--mod-heading-font-size:var(--ds-heading-5-size-device);--mod-heading-space:var(--ds-heading-5-space)}:host(.is-5xl){--mod-heading-font-size:var(--ds-heading-display1-size-device);--mod-heading-space:var(--ds-heading-display1-space)}:host(.is-4xl){--mod-heading-font-size:var(--ds-heading-display2-size-device);--mod-heading-space:var(--ds-heading-display2-space)}:host(.has-space-all){--heading-mt:var(--_heading-space);--heading-mb:var(--_heading-space)}:host(.has-space-top){--heading-mt:var(--_heading-space);--heading-mb:0}:host(.has-space-bottom){--heading-mt:0;--heading-mb:var(--_heading-space)}:host(.has-space-none){--heading-mt:0;--heading-mb:0}:host{display:block}`;
 
 const Heading = class {
     constructor(hostRef) {
@@ -122,11 +125,10 @@ const Heading = class {
      * ------------------------------------------------------
      */
     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];
@@ -157,7 +159,7 @@ const Heading = class {
         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];
@@ -171,14 +173,14 @@ const Heading = class {
      */
     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' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -200,39 +202,39 @@ __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);
 Heading.style = headingHostCss();

package/dist/esm/ds-hint-text.entry.js

@@ -0,0 +1,26 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+
+const HintText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (h(Host, { key: 'e29a27c1f5176a5b9a29297d4b9f46db9fb9a58b', style: { display: 'contents' } }, h("slot", { key: '5135ac7a804d2a76c66df93aad918720fed7f0a5' })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('hint-text'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], HintText.prototype, "createLogger", null);
+
+export { HintText as ds_hint_text };

package/dist/esm/ds-hint-title.entry.js

@@ -0,0 +1,29 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+
+const HintTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'title';
+    }
+    render() {
+        return (h(Host, { key: 'fd1b78370d7474d8ec7e514556fdb9444fa12e70', style: { display: 'contents' } }, h("slot", { key: 'd2d14b2c4cfe147042c8c9a93c1d980f2bfd343d' })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('hint-title'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], HintTitle.prototype, "createLogger", null);
+
+export { HintTitle as ds_hint_title };

package/dist/esm/ds-hint.entry.js

@@ -0,0 +1,241 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { i as isEscapeKey } from './keyboard-Uy_dVz21.js';
+import { P as POPUP_PLACEMENTS } from './popup.interfaces-BAY6Z8bT.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-D9M4v98c.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import { T as Type } from './type-7qEQcw90.js';
+import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import './breakpoints.subject-DHZ7TzYV.js';
+import './listener-DIZDQOuO.js';
+import './device-CapioAfe.js';
+import './create-validator-decorator-fUav5byo.js';
+import './config.utils-CR4Xudpz.js';
+
+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',
+    },
+};
+
+const hintHostCss = () => `: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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;vertical-align:middle;font-weight:var(--ds-global-font-weight-400)}:host [part=trigger]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;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{-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_hint-color-focus) 0 0 0 5px !important;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--ds-alias-space-sm-mobile)}:host .hint-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;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%}`;
+
+const Hint = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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)))))));
+    }
+    get el() { return getElement(this); }
+};
+__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);
+Hint.style = hintHostCss();
+
+export { Hint as ds_hint };