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

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

@@ -0,0 +1,362 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, v as defaultConfig, D as raf, 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 { s as stopEventBubbling } from './form-control-DhinyMa9.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 TABS_COLORS = ['', 'purple', 'green', 'red', 'yellow'];
+const TABS_VERTICAL_COL_SIZES = [
+    'full',
+    'half',
+    'one-quarter',
+    'one-third',
+    'three-quarters',
+    'two-thirds',
+];
+
+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',
+    },
+};
+
+const tabsHostCss = () => `: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:-ms-flexbox;display:flex;-ms-flex-align:stretch;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;-webkit-transition:opacity 120ms ease;transition:opacity 120ms ease}:host(.has-overflow) .tablist-outer::before{left:2.75rem;background:-webkit-gradient(linear, left top, right top, from(var(--_tabs-scroll-fade-bg)), to(transparent));background:linear-gradient(to right, var(--_tabs-scroll-fade-bg), transparent)}:host(.has-overflow) .tablist-outer::after{right:2.75rem;background:-webkit-gradient(linear, right top, left top, from(var(--_tabs-scroll-fade-bg)), to(transparent));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{-ms-flex-negative:0;flex-shrink:0;width:0;min-width:0;margin:0;padding:0;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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;-webkit-transition:width 120ms ease,min-width 120ms ease,margin 120ms ease,opacity 120ms ease,background-color 120ms ease,color 120ms ease;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{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:stretch;align-items:stretch;gap:var(--_tabs-gap);position:relative;padding-bottom:var(--_tabs-indicator-height);background:-webkit-gradient(linear, left top, left bottom, from(var(--_tabs-border-color)), to(var(--_tabs-border-color))) bottom/100% var(--_tabs-indicator-height) no-repeat;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;-webkit-transition:width 250ms ease,-webkit-transform 250ms ease;transition:width 250ms ease,-webkit-transform 250ms ease;transition:transform 250ms ease,width 250ms ease;transition:transform 250ms ease,width 250ms ease,-webkit-transform 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;-webkit-transition:height 250ms ease,-webkit-transform 250ms ease;transition:height 250ms ease,-webkit-transform 250ms ease;transition:transform 250ms ease,height 250ms ease;transition:transform 250ms ease,height 250ms ease,-webkit-transform 250ms ease}:host(.is-fullwidth) #tablist{width:100%}:host(.is-fullwidth) #tablist ::slotted(ds-tab){-ms-flex:1;flex:1}:host(.is-vertical){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;gap:var(--_tabs-vertical-gap)}@media screen and (max-width: 768px){:host(.is-vertical){gap:1rem}}:host(.is-vertical) #tablist{-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-direction:column;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){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;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){-ms-flex:1;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}`;
+
+const Tabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsChange = createEvent(this, "dsChange");
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        /**
+         * Accent color applied to the bottom border track and selected indicator.
+         */
+        this.color = '';
+        /**
+         * If `true`, tab buttons expand to fill the available width equally.
+         */
+        this.fullwidth = false;
+        /**
+         * If `true`, the component adapts for use on a dark (primary) background — all labels and the indicator become white.
+         */
+        this.inverted = false;
+        /**
+         * Accessible label for the navigation landmark (navigation variant only).
+         */
+        this.label = '';
+        /**
+         * If `true`, the tablist is displayed vertically on the left side.
+         */
+        this.vertical = false;
+        /**
+         * The col size of the tablist in vertical mode.
+         */
+        this.verticalColSize = 'one-third';
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.checkOverflow = () => {
+            const el = this.tablistEl;
+            if (!el)
+                return;
+            this.canScrollLeft = el.scrollLeft > 0;
+            this.canScrollRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        };
+        this.scrollPrev = () => {
+            const el = this.tablistEl;
+            if (el)
+                el.scrollBy({ left: -(el.clientWidth / 2), behavior: 'smooth' });
+        };
+        this.scrollNext = () => {
+            const el = this.tablistEl;
+            if (el)
+                el.scrollBy({ left: el.clientWidth / 2, behavior: 'smooth' });
+        };
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d;
+            if (this.isNavigation())
+                return;
+            const focusable = this.getTabs();
+            const currentIndex = focusable.findIndex(t => t.name === this.value);
+            const isForward = this.vertical ? ev.key === 'ArrowDown' : ev.key === 'ArrowRight';
+            const isBackward = this.vertical ? ev.key === 'ArrowUp' : ev.key === 'ArrowLeft';
+            if (ev.key === 'Home') {
+                ev.preventDefault();
+                this.activateTab((_a = focusable[0]) === null || _a === void 0 ? void 0 : _a.name);
+            }
+            else if (ev.key === 'End') {
+                ev.preventDefault();
+                this.activateTab((_b = focusable[focusable.length - 1]) === null || _b === void 0 ? void 0 : _b.name);
+            }
+            else if (isForward) {
+                ev.preventDefault();
+                this.activateTab((_c = focusable[(currentIndex + 1) % focusable.length]) === null || _c === void 0 ? void 0 : _c.name);
+            }
+            else if (isBackward) {
+                ev.preventDefault();
+                this.activateTab((_d = focusable[(currentIndex - 1 + focusable.length) % focusable.length]) === null || _d === void 0 ? void 0 : _d.name);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.setup();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    componentDidLoad() {
+        this.setup();
+        this.initCarousel();
+        raf(() => this.moveIndicator(false));
+    }
+    componentDidUpdate() {
+        this.updateChildren();
+        this.checkOverflow();
+        this.moveIndicator(true);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.tablistEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', this.checkOverflow);
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsTabSelect(ev) {
+        stopEventBubbling(ev);
+        this.activateTab(ev.detail.name);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    getTabs() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-tab'));
+    }
+    getPanels() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-tab-panel'));
+    }
+    isNavigation() {
+        return this.getPanels().length === 0;
+    }
+    setup() {
+        const tabs = this.getTabs();
+        const panels = this.getPanels();
+        const isNav = this.isNavigation();
+        tabs.forEach(tab => {
+            // Place ds-tab into the named tablist slot
+            tab.slot = 'tab';
+            tab.navigation = isNav;
+            if (!isNav && tab.name) {
+                if (!tab.id)
+                    tab.id = `ds-tab-${tabIds++}`;
+                const panel = panels.find(p => p.for === tab.name);
+                if (panel) {
+                    if (!panel.id)
+                        panel.id = `ds-tab-panel-${tabIds++}`;
+                    tab.setAttribute('aria-controls', panel.id);
+                    panel.setAttribute('aria-labelledby', tab.id);
+                }
+            }
+        });
+        if (!isNav && !this.value) {
+            const first = tabs[0];
+            if (first)
+                this.value = first.name;
+        }
+        this.updateChildren();
+    }
+    updateChildren() {
+        const isNav = this.isNavigation();
+        this.getTabs().forEach(tab => {
+            tab.navigation = isNav;
+            tab.fullwidth = this.fullwidth;
+            tab.inverted = this.inverted;
+            tab.selected = isNav ? !!tab.querySelector('[aria-current]') : tab.name === this.value;
+            tab.vertical = this.vertical;
+        });
+        this.getPanels().forEach(panel => {
+            panel.selected = panel.for === this.value;
+        });
+    }
+    activateTab(name) {
+        if (name === this.value)
+            return;
+        this.value = name;
+        this.dsChange.emit({ value: name });
+        this.focusSelectedTab();
+    }
+    focusSelectedTab() {
+        const selected = this.getTabs().find(t => t.name === this.value);
+        if (!selected)
+            return;
+        selected.focus();
+        selected.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+    }
+    initCarousel() {
+        if (this.vertical || !this.tablistEl)
+            return;
+        this.tablistEl.addEventListener('scroll', this.checkOverflow, { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkOverflow);
+        this.resizeObserver.observe(this.tablistEl);
+        this.checkOverflow();
+    }
+    moveIndicator(animate) {
+        const indicator = this.indicatorEl;
+        const tablist = this.tablistEl;
+        if (!indicator || !tablist || this.isNavigation())
+            return;
+        const selected = this.getTabs().find(t => t.name === this.value);
+        if (!selected) {
+            indicator.style[this.vertical ? 'height' : 'width'] = '0px';
+            return;
+        }
+        // offsetLeft/offsetTop of slotted elements is relative to the shadow host, not
+        // #tablist. Use getBoundingClientRect() to get the position relative to #tablist's
+        // visible area, then add scroll offset to convert to the scrollable coordinate space.
+        const tablistRect = tablist.getBoundingClientRect();
+        const selectedRect = selected.getBoundingClientRect();
+        if (!animate)
+            indicator.style.transition = 'none';
+        if (this.vertical) {
+            const top = selectedRect.top - tablistRect.top + tablist.scrollTop;
+            indicator.style.height = `${selectedRect.height}px`;
+            indicator.style.transform = `translateY(${top}px)`;
+        }
+        else {
+            const left = selectedRect.left - tablistRect.left + tablist.scrollLeft;
+            indicator.style.width = `${selectedRect.width}px`;
+            indicator.style.transform = `translateX(${left}px)`;
+        }
+        if (!animate) {
+            indicator.style.transition = '';
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const isNav = this.isNavigation();
+        const tablistDiv = (h("div", { key: 'b3b8934a8997c4ee17e2738c000b9df17e2db0c2', id: "tablist", part: "tablist", role: isNav ? undefined : 'tablist', "aria-orientation": !isNav && this.vertical ? 'vertical' : undefined, onKeyDown: this.handleKeyDown, ref: el => {
+                this.tablistEl = el;
+            } }, h("slot", { key: 'dd98a77986591a17f0b627019dd5f2076dfcc4c6', name: "tab", onSlotchange: this.handleSlotChange }), h("div", { key: '34697c2c75688748ea5b2c2ea3ad83a4ee40efcf', class: "indicator", "aria-hidden": "true", ref: el => {
+                this.indicatorEl = el;
+            } })));
+        const i18n = i18nDsTabs[this.language];
+        const tablistContainer = this.vertical ? (tablistDiv) : (h("div", { class: "tablist-outer" }, h("button", { class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { name: "caret-left", size: "sm" })), tablistDiv, h("button", { class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { name: "caret-right", size: "sm" }))));
+        return (h(Host, { key: 'a4509a1ab21b938602815e4d928a9c5925250472', class: {
+                'is-fullwidth': this.fullwidth,
+                'is-inverted': this.inverted,
+                'is-purple': this.color === 'purple',
+                'is-green': this.color === 'green',
+                'is-red': this.color === 'red',
+                'is-yellow': this.color === 'yellow',
+                'is-vertical': this.vertical,
+                [`is-col-${this.verticalColSize}`]: this.vertical,
+                'is-navigation': isNav,
+                'has-overflow': this.canScrollLeft || this.canScrollRight,
+                'can-scroll-left': this.canScrollLeft,
+                'can-scroll-right': this.canScrollRight,
+            } }, isNav ? h("nav", { "aria-label": this.label || undefined }, tablistContainer) : tablistContainer, h("slot", { key: '1d7f1a3897cd57c4f1fdc72aa581373f24c80637', onSlotchange: this.handleSlotChange })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('tabs'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "createLogger", null);
+__decorate([
+    OneOf(TABS_COLORS),
+    __metadata("design:type", String)
+], Tabs.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tabs.prototype, "fullwidth", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tabs.prototype, "inverted", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Tabs.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Tabs.prototype, "value", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tabs.prototype, "vertical", void 0);
+__decorate([
+    OneOf(TABS_VERTICAL_COL_SIZES),
+    __metadata("design:type", String)
+], Tabs.prototype, "verticalColSize", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Tabs.prototype, "configChanged", null);
+let tabIds = 0;
+Tabs.style = tabsHostCss();
+
+export { Tabs as ds_tabs };

package/dist/esm/ds-tag-group.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (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-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
+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 tagGroupHostCss = () => `:host{--_tags-m:var(--tags-m, var(--mod-tags-m, 0));--_tags-my:var(--tags-my, var(--mod-tags-my));--_tags-mx:var(--tags-mx, var(--mod-tags-mx));--_tags-ml:var(--tags-ml, var(--mod-tags-ml));--_tags-mr:var(--tags-mr, var(--mod-tags-mr));--_tags-mt:var(--tags-mt, var(--mod-tags-mt));--_tags-mb:var(--tags-mb, var(--mod-tags-mb));margin:var(--_tags-m);margin-inline:var(--_tags-mx);margin-block:var(--_tags-my);margin-left:var(--_tags-ml);margin-right:var(--_tags-mr);margin-top:var(--_tags-mt);margin-bottom:var(--_tags-mb);--_tags-gap:var(--tags-gap, var(--mod-tags-gap, 0.25rem));--_tags-display:var(--tags-display, var(--mod-tags-display, inline-flex));display:var(--_tags-display);gap:var(--_tags-gap);vertical-align:middle}`;
 
@@ -18,7 +18,7 @@ const TagGroup = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'dbd845c8ab569cb18f10733ab6aff67a63cba1b3' }, h("slot", { key: 'a9c2c76d2a02049d820996a1ee2c19d48ef89cbe' })));
+        return (h(Host, { key: 'a96c877fa4249aacb365574331462b5269347506' }, h("slot", { key: '7d0a574edd2fc4b6d2e7e64b309ccbfe6b3bc86f' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,11 +1,14 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, 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 { B as registerInstance, I as createEvent, 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 inheritAttributes } from './attributes-B62ocg4Q.js';
+import { h as hasValue } from './has-value-Dmsj8ZQw.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { s as setupValidation, V as ValidateType, a as ValidateOneOf } from './validate.decorator-82RSSk25.js';
+import { T as Type } from './type-7qEQcw90.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import './create-validator-decorator-fUav5byo.js';
 
 const TAG_COLORS = [
     'primary',
@@ -75,17 +78,10 @@ const Tag = class {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
-    }
     componentWillLoad() {
         this.inheritedAttributesClose = inheritAttributes(this.el, ['tabindex']);
     }
@@ -94,20 +90,17 @@ const Tag = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '3741b170ad658fde5052fded5b2555e52132ce6e', class: {
-                [`is-${this.color}`]: this.color == '',
-                [`is-shape-${this.shape}`]: this.shape == '',
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        return (h(Host, { key: 'b5661eb0f112158f6322cb7f68e8b2bc70b5539d', class: {
+                [`is-${this.color}`]: hasValue(this.color),
+                [`is-${size}`]: hasValue(this.size),
+                [`is-shape-${this.shape}`]: hasValue(this.shape),
                 'is-closable': this.closable,
                 'is-disabled': this.disabled,
                 'is-invalid': this.invalid,
-            } }, h("span", { key: 'abc4f7fb1bbc1b5736f2ec72c7972a6fc5174156', part: "label" }, h("slot", { key: '569a1dd2729db40686a981554b9cdc3cf5b3fa4a' })), this.closable && !this.disabled ? (h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
+            } }, h("span", { key: '79a20487f389ed804a44e1a85596e7499a755282', part: "label" }, h("slot", { key: '012168b23c6da831bdaca31a514156da9d618b8d' })), this.closable && !this.disabled ? (h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "size": [{
-                "sizeChanged": 0
-            }]
-    }; }
 };
 __decorate([
     Logger('tag'),
@@ -116,31 +109,31 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Tag.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Tag.prototype, "closable", void 0);
 __decorate([
-    ValidateOneOf(...TAG_COLORS),
+    OneOf(TAG_COLORS),
     __metadata("design:type", String)
 ], Tag.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Tag.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Tag.prototype, "invalid", void 0);
 __decorate([
-    ValidateOneOf(...TAG_PLACEMENTS),
+    OneOf(TAG_PLACEMENTS),
     __metadata("design:type", String)
 ], Tag.prototype, "position", void 0);
 __decorate([
-    ValidateOneOf(...TAG_SHAPES),
+    OneOf(TAG_SHAPES),
     __metadata("design:type", String)
 ], Tag.prototype, "shape", void 0);
 __decorate([
-    ValidateOneOf(...TAG_SIZES),
+    OneOf(TAG_SIZES),
     __metadata("design:type", String)
 ], Tag.prototype, "size", void 0);
 Tag.style = tagHostCss();