npm - @baloise/ds-core - Versions diffs - 20.0.0-next.4 → 20.0.0-next.6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (988) hide show

package/dist/collection/components/tabs/tab/tab.js ADDED Viewed

@@ -0,0 +1,278 @@
+/*!
+ * (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, Required, Type } from "../../../utils/index";
+/**
+ * Tab renders a single tab button inside a ds-tabs group, supporting both the panels and navigation variants.
+ *
+ * @slot - The tab label, or an <a> element in navigation mode.
+ */
+export class Tab {
+    constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Set by ds-tabs. When true, the tab expands to fill available width.
+         * @internal
+         */
+        this.fullwidth = false;
+        /**
+         * Set by ds-tabs. When true, the tab renders in inverted (dark background) mode.
+         * @internal
+         */
+        this.inverted = false;
+        /**
+         * Set by ds-tabs. When true, renders as a slot wrapper for navigation mode.
+         * @internal
+         */
+        this.navigation = false;
+        /**
+         * If `true`, this tab is currently selected. Set by the parent ds-tabs.
+         */
+        this.selected = false;
+        /**
+         * Set by ds-tabs. When true, renders in vertical layout.
+         * @internal
+         */
+        this.vertical = false;
+        /**
+         * PROPERTY VALIDATION
+         * ------------------------------------------------------
+         */
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleClick = (ev) => {
+            ev.preventDefault();
+            this.dsTabSelect.emit({ name: this.name });
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.dsTabSelect.emit({ name: this.name });
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const hostClass = {
+            'is-selected': this.selected,
+            'is-fullwidth': this.fullwidth,
+            'is-inverted': this.inverted,
+            'is-navigation': this.navigation,
+            'is-vertical': this.vertical,
+        };
+        if (this.navigation) {
+            return (h(Host, { role: "none", class: hostClass }, h("slot", null)));
+        }
+        return (h(Host, { role: "tab", class: hostClass, "aria-selected": String(this.selected), tabIndex: this.selected ? 0 : -1, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { class: { 'is-selected': this.selected } }, h("slot", null))));
+    }
+    static get is() { return "ds-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fullwidth": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-tabs. When true, the tab expands to fill available width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fullwidth",
+                "defaultValue": "false"
+            },
+            "inverted": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-tabs. When true, the tab renders in inverted (dark background) mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inverted",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique name that links this tab to a ds-tab-panel[for] of the same value in panels mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "navigation": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-tabs. When true, renders as a slot wrapper for navigation mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "navigation",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, this tab is currently selected. Set by the parent ds-tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-tabs. When true, renders in vertical layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsTabSelect",
+                "name": "dsTabSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks this tab (panels mode only)."
+                },
+                "complexType": {
+                    "original": "{ name: string }",
+                    "resolved": "{ name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('tab'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Tab.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "fullwidth", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "inverted", void 0);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], Tab.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "navigation", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "selected", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "vertical", void 0);

package/dist/collection/components/tabs/tab-panel/tab-panel.host.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ :host{--_tab-panel-padding: var(--tab-panel-padding, var(--mod-tab-panel-padding, var(--ds-tab-panel-padding)));display:none}:host(.is-selected){display:block;padding:var(--_tab-panel-padding)}

package/dist/collection/components/tabs/tab-panel/tab-panel.js ADDED Viewed

@@ -0,0 +1,104 @@
+/*!
+ * (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, Required, Type } from "../../../utils/index";
+/**
+ * Tab Panel displays the content area associated with a ds-tab, visible when its controlling tab is selected.
+ *
+ * @slot - The panel content.
+ */
+export class TabPanel {
+    constructor() {
+        /**
+         * If `true`, the panel is visible. Managed by the parent ds-tabs.
+         */
+        this.selected = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: 'ea4a246545d0c21beaae274d7b5cbb16d8ddb85d', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: '05489a1a0f725057ca6abf569222a242a60e16cf' })));
+    }
+    static get is() { return "ds-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab-panel.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab-panel.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches the `name` of the ds-tab that controls this panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "for"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the panel is visible. Managed by the parent ds-tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('tab-panel'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], TabPanel.prototype, "createLogger", null);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], TabPanel.prototype, "for", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], TabPanel.prototype, "selected", void 0);

package/dist/collection/components/tabs/tabs/tabs.host.css ADDED Viewed

@@ -0,0 +1 @@

+ :host{--_tabs-border-color: var(--tabs-border-color, var(--mod-tabs-border-color, var(--ds-tabs-border-color)));--_tabs-indicator-height: var(--tabs-indicator-height, var(--mod-tabs-indicator-height, var(--ds-tabs-indicator-height)));--_tabs-gap: var(--tabs-gap, var(--mod-tabs-gap, var(--ds-tabs-gap)));--_tabs-panel-padding: var(--tabs-panel-padding, var(--mod-tabs-panel-padding, var(--ds-tabs-panel-padding)));--_tabs-vertical-gap: var(--tabs-vertical-gap, var(--mod-tabs-vertical-gap, var(--ds-tabs-vertical-gap)));--_tabs-tab-padding: var(--tabs-tab-padding, var(--mod-tabs-tab-padding, var(--ds-tabs-tab-padding)));--_tabs-tab-font-family: var(--tabs-tab-font-family, var(--mod-tabs-tab-font-family, var(--ds-tabs-tab-font-family)));--_tabs-tab-font-size: var(--tabs-tab-font-size, var(--mod-tabs-tab-font-size, var(--ds-tabs-tab-font-size)));--_tabs-tab-font-weight: var(--tabs-tab-font-weight, var(--mod-tabs-tab-font-weight, var(--ds-tabs-tab-font-weight)));--_tabs-tab-color-focus: var(--tabs-tab-color-focus, var(--mod-tabs-tab-color-focus, var(--ds-tabs-tab-color-focus)));--_tabs-tab-color: var(--tabs-tab-color, var(--mod-tabs-tab-color, var(--ds-tabs-tab-color-base)));--_tabs-tab-color-hover: var(--tabs-tab-color-hover, var(--mod-tabs-tab-color-hover, var(--ds-tabs-tab-color-hover)));--_tabs-tab-color-active: var(--tabs-tab-color-active, var(--mod-tabs-tab-color-active, var(--ds-tabs-tab-color-active)));--_tabs-tab-color-selected: var(--tabs-tab-color-selected, var(--mod-tabs-tab-color-selected, var(--ds-tabs-tab-color-selected)));--_tabs-tab-border-color-selected: var(--tabs-tab-border-color-selected, var(--mod-tabs-tab-border-color-selected, var(--ds-tabs-tab-border-color-selected)));--_tabs-tab-font-weight-selected: var(--tabs-tab-font-weight-selected, var(--mod-tabs-tab-font-weight-selected, var(--ds-tabs-tab-font-weight-selected)));--_tabs-scroll-fade-bg: var(--tabs-scroll-fade-bg, var(--mod-tabs-scroll-fade-bg, var(--ds-tabs-scroll-fade-background)));--_tabs-scroll-btn-radius: var(--tabs-scroll-btn-radius, var(--mod-tabs-scroll-btn-radius, var(--ds-button-radius-base)));--_tabs-scroll-btn-color-text: var(--tabs-scroll-btn-color-text, var(--mod-tabs-scroll-btn-color-text, var(--ds-button-color-tertiary-base-text)));--_tabs-scroll-btn-color-hover-background: var(--tabs-scroll-btn-color-hover-background, var(--mod-tabs-scroll-btn-color-hover-background, var(--ds-button-color-tertiary-hover-background)));--_tabs-scroll-btn-color-hover-text: var(--tabs-scroll-btn-color-hover-text, var(--mod-tabs-scroll-btn-color-hover-text, var(--ds-button-color-tertiary-hover-text)));--_tabs-scroll-btn-color-active-background: var(--tabs-scroll-btn-color-active-background, var(--mod-tabs-scroll-btn-color-active-background, var(--ds-button-color-tertiary-active-background)));--_tabs-scroll-btn-color-active-text: var(--tabs-scroll-btn-color-active-text, var(--mod-tabs-scroll-btn-color-active-text, var(--ds-button-color-tertiary-active-text)));--_tabs-tab-indicator-color-idle: var(--tabs-tab-indicator-color-idle, var(--mod-tabs-tab-indicator-color-idle, var(--ds-global-color-grey-4)));--_tabs-tab-radius: var(--tabs-tab-radius, var(--mod-tabs-tab-radius, var(--ds-alias-radius-base)));--_tabs-tab-badge-size: var(--tabs-tab-badge-size, var(--mod-tabs-tab-badge-size, var(--ds-badge-size-sm)));--_tabs-color-purple: var(--tabs-color-purple, var(--mod-tabs-color-purple, var(--ds-tabs-color-purple)));--_tabs-color-purple-hover: var(--tabs-color-purple-hover, var(--mod-tabs-color-purple-hover, var(--ds-tabs-color-purple-hover)));--_tabs-color-green: var(--tabs-color-green, var(--mod-tabs-color-green, var(--ds-tabs-color-green)));--_tabs-color-green-hover: var(--tabs-color-green-hover, var(--mod-tabs-color-green-hover, var(--ds-tabs-color-green-hover)));--_tabs-color-red: var(--tabs-color-red, var(--mod-tabs-color-red, var(--ds-tabs-color-red)));--_tabs-color-red-hover: var(--tabs-color-red-hover, var(--mod-tabs-color-red-hover, var(--ds-tabs-color-red-hover)));--_tabs-color-yellow: var(--tabs-color-yellow, var(--mod-tabs-color-yellow, var(--ds-tabs-color-yellow)));--_tabs-color-yellow-hover: var(--tabs-color-yellow-hover, var(--mod-tabs-color-yellow-hover, var(--ds-tabs-color-yellow-hover)));display:block}:host(.is-purple){--_tabs-border-color: var(--_tabs-color-purple);--_tabs-tab-indicator-color-idle: var(--_tabs-color-purple-hover)}:host(.is-green){--_tabs-border-color: var(--_tabs-color-green);--_tabs-tab-indicator-color-idle: var(--_tabs-color-green-hover)}:host(.is-red){--_tabs-border-color: var(--_tabs-color-red);--_tabs-tab-indicator-color-idle: var(--_tabs-color-red-hover)}:host(.is-yellow){--_tabs-border-color: var(--_tabs-color-yellow);--_tabs-tab-indicator-color-idle: var(--_tabs-color-yellow-hover)}:host(.is-inverted){--_tabs-tab-color: var(--ds-alias-text-color-white);--_tabs-tab-color-hover: var(--ds-alias-text-color-white);--_tabs-tab-color-active: var(--ds-alias-text-color-white);--_tabs-tab-color-selected: var(--ds-alias-text-color-white);--_tabs-tab-border-color-selected: var(--ds-alias-text-color-white);--_tabs-tab-font-family: var(--ds-alias-text-family-body);--_tabs-tab-font-weight: var(--ds-alias-text-weight-regular);--_tabs-border-color: rgba(255, 255, 255, 0.3);--_tabs-tab-indicator-color-idle: rgba(255, 255, 255, 0.5);--_tabs-tab-color-focus: var(--ds-alias-interaction-focus-color-inverted);--_tabs-scroll-fade-bg: var(--ds-alias-background-color-primary);--_tabs-scroll-btn-color-text: var(--ds-alias-text-color-white);--_tabs-scroll-btn-color-hover-background: rgba(255, 255, 255, 0.12);--_tabs-scroll-btn-color-hover-text: var(--ds-alias-text-color-white);--_tabs-scroll-btn-color-active-background: rgba(255, 255, 255, 0.24);--_tabs-scroll-btn-color-active-text: var(--ds-alias-text-color-white)}:host .tablist-outer{position:relative;display:flex;align-items:stretch}:host(.has-overflow) .tablist-outer::before,:host(.has-overflow) .tablist-outer::after{content:"";position:absolute;top:0;bottom:var(--_tabs-indicator-height);width:2.5rem;pointer-events:none;z-index:1;opacity:0;transition:opacity 120ms ease}:host(.has-overflow) .tablist-outer::before{left:2.75rem;background:linear-gradient(to right, var(--_tabs-scroll-fade-bg), transparent)}:host(.has-overflow) .tablist-outer::after{right:2.75rem;background:linear-gradient(to left, var(--_tabs-scroll-fade-bg), transparent)}:host(.can-scroll-left) .tablist-outer::before{opacity:1}:host(.can-scroll-right) .tablist-outer::after{opacity:1}:host .scroll-btn{flex-shrink:0;width:0;min-width:0;margin:0;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--_tabs-scroll-btn-radius);background-color:rgba(0,0,0,0);color:var(--_tabs-scroll-btn-color-text);--mod-icon-color: currentColor;opacity:0;pointer-events:none;cursor:default;transition:width 120ms ease,min-width 120ms ease,margin 120ms ease,opacity 120ms ease,background-color 120ms ease,color 120ms ease}:host(.has-overflow) .scroll-btn{width:2.5rem;min-width:2.5rem;opacity:.3}:host(.has-overflow) .scroll-btn--prev{margin-right:.25rem}:host(.has-overflow) .scroll-btn--next{margin-left:.25rem}:host(.can-scroll-left) .scroll-btn--prev,:host(.can-scroll-right) .scroll-btn--next{opacity:1;pointer-events:auto;cursor:pointer}@media(hover: hover)and (pointer: fine){:host(.can-scroll-left) .scroll-btn--prev:hover,:host(.can-scroll-right) .scroll-btn--next:hover{background-color:var(--_tabs-scroll-btn-color-hover-background);color:var(--_tabs-scroll-btn-color-hover-text)}}:host(.can-scroll-left) .scroll-btn--prev:active,:host(.can-scroll-right) .scroll-btn--next:active{background-color:var(--_tabs-scroll-btn-color-active-background);color:var(--_tabs-scroll-btn-color-active-text)}:host #tablist{flex:1;min-width:0;display:flex;flex-direction:row;align-items:stretch;gap:var(--_tabs-gap);position:relative;padding-bottom:var(--_tabs-indicator-height);background:linear-gradient(var(--_tabs-border-color), var(--_tabs-border-color)) bottom/100% var(--_tabs-indicator-height) no-repeat;overflow-x:scroll;overflow-y:clip;scroll-behavior:smooth;scrollbar-width:none}:host #tablist::-webkit-scrollbar{display:none}:host #tablist .indicator{position:absolute;bottom:0;left:0;height:var(--_tabs-indicator-height);width:0;border-radius:9999px;background-color:var(--_tabs-tab-border-color-selected);pointer-events:none;transition:transform 250ms ease,width 250ms ease}:host(.is-vertical) #tablist .indicator{top:0;bottom:auto;left:calc(-1*var(--_tabs-indicator-height));width:var(--_tabs-indicator-height);height:0;transition:transform 250ms ease,height 250ms ease}:host(.is-fullwidth) #tablist{width:100%}:host(.is-fullwidth) #tablist ::slotted(ds-tab){flex:1}:host(.is-vertical){display:flex;flex-direction:row;align-items:flex-start;gap:var(--_tabs-vertical-gap)}@media screen and (max-width: 768px){:host(.is-vertical){gap:1rem}}:host(.is-vertical) #tablist{flex:0 0 auto;flex-direction:column;padding-bottom:0;background:none;border-left:var(--_tabs-indicator-height) solid var(--_tabs-border-color);overflow:visible;scroll-behavior:auto}:host(.is-vertical.is-col-full){flex-direction:column;align-items:stretch}:host(.is-vertical.is-col-full) #tablist{width:100%}:host(.is-vertical.is-col-half) #tablist{width:50%}:host(.is-vertical.is-col-two-thirds) #tablist{width:66.6667%}:host(.is-vertical.is-col-three-quarters) #tablist{width:75%}:host(.is-vertical.is-col-one-third) #tablist{width:33.3333%}:host(.is-vertical.is-col-one-quarter) #tablist{width:25%}:host(.is-vertical) ::slotted(ds-tab-panel){flex:1;min-width:0;min-height:2.5rem}:host ::slotted(ds-tab-panel){--tab-panel-padding: var(--_tabs-panel-padding)}:host(.is-vertical) ::slotted(ds-tab-panel){--tab-panel-padding: 0.5rem 0 0}:host(.is-navigation) nav{display:contents}

package/dist/collection/components/tabs/tabs/tabs.i18n.js ADDED Viewed

@@ -0,0 +1,45 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsTabs = {
+    de: {
+        scrollLeft: 'Tabs nach links scrollen',
+        scrollRight: 'Tabs nach rechts scrollen',
+    },
+    en: {
+        scrollLeft: 'Scroll tabs left',
+        scrollRight: 'Scroll tabs right',
+    },
+    fr: {
+        scrollLeft: 'Faire défiler les onglets vers la gauche',
+        scrollRight: 'Faire défiler les onglets vers la droite',
+    },
+    it: {
+        scrollLeft: 'Scorri le schede a sinistra',
+        scrollRight: 'Scorri le schede a destra',
+    },
+    nl: {
+        scrollLeft: 'Tabbladen naar links scrollen',
+        scrollRight: 'Tabbladen naar rechts scrollen',
+    },
+    es: {
+        scrollLeft: 'Desplazar pestañas a la izquierda',
+        scrollRight: 'Desplazar pestañas a la derecha',
+    },
+    pl: {
+        scrollLeft: 'Przewiń karty w lewo',
+        scrollRight: 'Przewiń karty w prawo',
+    },
+    pt: {
+        scrollLeft: 'Rolar abas para a esquerda',
+        scrollRight: 'Rolar abas para a direita',
+    },
+    sv: {
+        scrollLeft: 'Scrolla flikar åt vänster',
+        scrollRight: 'Scrolla flikar åt höger',
+    },
+    fi: {
+        scrollLeft: 'Vieritä välilehtiä vasemmalle',
+        scrollRight: 'Vieritä välilehtiä oikealle',
+    },
+};