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

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

@@ -0,0 +1,364 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var formControl = require('./form-control-CtMcJUuC.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var type = require('./type-hmc4CJcO.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./config.utils-MhZvq4Qm.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) {
+        index.registerInstance(this, hostRef);
+        this.dsChange = index.createEvent(this, "dsChange");
+        this.language = index.defaultConfig.language;
+        this.region = index.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();
+        index.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) {
+        formControl.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 = (index.h("div", { key: '245fdce72c8ec78a305aba63b4aad162baf56660', id: "tablist", part: "tablist", role: isNav ? undefined : 'tablist', "aria-orientation": !isNav && this.vertical ? 'vertical' : undefined, onKeyDown: this.handleKeyDown, ref: el => {
+                this.tablistEl = el;
+            } }, index.h("slot", { key: '0216104ce661ec5341ced772c623903b1a0d7b69', name: "tab", onSlotchange: this.handleSlotChange }), index.h("div", { key: 'e155a48e10ecc834a37c0831b683146851f20eae', class: "indicator", "aria-hidden": "true", ref: el => {
+                this.indicatorEl = el;
+            } })));
+        const i18n = i18nDsTabs[this.language];
+        const tablistContainer = this.vertical ? (tablistDiv) : (index.h("div", { class: "tablist-outer" }, index.h("button", { class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollPrev }, index.h("ds-icon", { name: "caret-left", size: "sm" })), tablistDiv, index.h("button", { class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollNext }, index.h("ds-icon", { name: "caret-right", size: "sm" }))));
+        return (index.h(index.Host, { key: '9d12012542b086c78eb96c57582cc7a633f498bd', 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 ? index.h("nav", { "aria-label": this.label || undefined }, tablistContainer) : tablistContainer, index.h("slot", { key: '482832affe4d974a55db8e2b07d79316c0176701', onSlotchange: this.handleSlotChange })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('tabs'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Tabs.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    oneOf.OneOf(TABS_COLORS),
+    tslib_es6.__metadata("design:type", String)
+], Tabs.prototype, "color", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Tabs.prototype, "fullwidth", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Tabs.prototype, "inverted", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], Tabs.prototype, "label", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", Object)
+], Tabs.prototype, "value", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Tabs.prototype, "vertical", void 0);
+tslib_es6.__decorate([
+    oneOf.OneOf(TABS_VERTICAL_COL_SIZES),
+    tslib_es6.__metadata("design:type", String)
+], Tabs.prototype, "verticalColSize", void 0);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Tabs.prototype, "configChanged", null);
+let tabIds = 0;
+Tabs.style = tabsHostCss();
+
+exports.ds_tabs = Tabs;

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.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}`;
 
@@ -20,7 +20,7 @@ const TagGroup = class {
      * ------------------------------------------------------
      */
     render() {
-        return (index.h(index.Host, { key: 'dbd845c8ab569cb18f10733ab6aff67a63cba1b3' }, index.h("slot", { key: 'a9c2c76d2a02049d820996a1ee2c19d48ef89cbe' })));
+        return (index.h(index.Host, { key: 'bfd564c13597394e0c6d534b0f47fd0df4d2d1cd' }, index.h("slot", { key: '06a2320d225785d7aafe5b4a3f79c698dfcc39ff' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,11 +3,14 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
 var attributes = require('./attributes-D57TMQsY.js');
+var hasValue = require('./has-value-DK0oRqXI.js');
 var tShirt = require('./t-shirt-AyhbnEdJ.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
+var type = require('./type-hmc4CJcO.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
 
 const TAG_COLORS = [
     'primary',
@@ -77,17 +80,10 @@ const Tag = class {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = tShirt.normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        validate_decorator.setupValidation(this);
-        this.size = tShirt.normalizeDeprecatedTShirtSize(this.size);
-    }
     componentWillLoad() {
         this.inheritedAttributesClose = attributes.inheritAttributes(this.el, ['tabindex']);
     }
@@ -96,20 +92,17 @@ const Tag = class {
      * ------------------------------------------------------
      */
     render() {
-        return (index.h(index.Host, { key: '3741b170ad658fde5052fded5b2555e52132ce6e', class: {
-                [`is-${this.color}`]: this.color == '',
-                [`is-shape-${this.shape}`]: this.shape == '',
+        const size = tShirt.normalizeDeprecatedTShirtSize(this.size) || '';
+        return (index.h(index.Host, { key: 'f725d01419ff0d95f1539115a9c294bc0530891d', class: {
+                [`is-${this.color}`]: hasValue.hasValue(this.color),
+                [`is-${size}`]: hasValue.hasValue(this.size),
+                [`is-shape-${this.shape}`]: hasValue.hasValue(this.shape),
                 'is-closable': this.closable,
                 'is-disabled': this.disabled,
                 'is-invalid': this.invalid,
-            } }, index.h("span", { key: 'abc4f7fb1bbc1b5736f2ec72c7972a6fc5174156', part: "label" }, index.h("slot", { key: '569a1dd2729db40686a981554b9cdc3cf5b3fa4a' })), this.closable && !this.disabled ? (index.h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
+            } }, index.h("span", { key: '27a70b6402bce1bed3ada2b36a378a444f6dde59', part: "label" }, index.h("slot", { key: '77021c9a9ab7e596d3cc0917165b916f5e3d8621' })), this.closable && !this.disabled ? (index.h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "size": [{
-                "sizeChanged": 0
-            }]
-    }; }
 };
 tslib_es6.__decorate([
     tslib_es6.Logger('tag'),
@@ -118,31 +111,31 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Tag.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Tag.prototype, "closable", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TAG_COLORS),
+    oneOf.OneOf(TAG_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Tag.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Tag.prototype, "disabled", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Tag.prototype, "invalid", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TAG_PLACEMENTS),
+    oneOf.OneOf(TAG_PLACEMENTS),
     tslib_es6.__metadata("design:type", String)
 ], Tag.prototype, "position", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TAG_SHAPES),
+    oneOf.OneOf(TAG_SHAPES),
     tslib_es6.__metadata("design:type", String)
 ], Tag.prototype, "shape", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TAG_SIZES),
+    oneOf.OneOf(TAG_SIZES),
     tslib_es6.__metadata("design:type", String)
 ], Tag.prototype, "size", void 0);
 Tag.style = tagHostCss();

package/dist/cjs/ds-text.cjs.entry.js

@@ -3,9 +3,12 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var hasValue = require('./has-value-DK0oRqXI.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var type = require('./type-hmc4CJcO.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
 
 const TEXT_ALIGNS = ['', 'left', 'right', 'center', 'justify'];
 const TEXT_SIZES = [
@@ -114,13 +117,6 @@ const Text = class {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        validate_decorator.setupValidation(this);
-    }
     /**
      * PRIVATE METHODS
      * ------------------------------------------------------
@@ -154,19 +150,19 @@ const Text = class {
     render() {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
-        return (index.h(index.Host, { key: '9999aa5b3cdcea488d9f8677dbc619e3feefaac4', class: {
-                [`is-${color}`]: !!color,
+        return (index.h(index.Host, { key: '101acafa36573cc60a9fd5a325f0c2385dd97e16', class: {
+                [`is-${color}`]: hasValue.hasValue(color),
                 'is-bold': this.bold,
                 'has-shadow': this.shadow,
                 'is-inline': this.inline,
                 'is-heading': this.heading,
                 'is-subtitle': this.subtitle,
                 'has-no-wrap': this.noWrap,
-                [`has-space-${this.space}`]: !!this.space,
-                [`is-${this.size}`]: !!this.size,
-            } }, index.h(Text, { key: '5e55b5842bf00b3b9ee1ed2d050b122b06cd0b07', id: "text", part: "text", class: {
-                [`is-${this.align}`]: !!this.align,
-            } }, index.h("slot", { key: '5c60c4098c62e5b3fa41e35ae27ccbe335a5defe' }))));
+                [`has-space-${this.space}`]: hasValue.hasValue(this.space),
+                [`is-${this.size}`]: hasValue.hasValue(this.size),
+            } }, index.h(Text, { key: 'deccf1ef96652a71578d30e31b3f638c75cabda8', id: "text", part: "text", class: {
+                [`is-${this.align}`]: hasValue.hasValue(this.align),
+            } }, index.h("slot", { key: '1779627b8463bf67bf4b99e1050c9e3bad6567b9' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -177,63 +173,63 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Text.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TEXT_ALIGNS),
+    oneOf.OneOf(TEXT_ALIGNS),
     tslib_es6.__metadata("design:type", String)
 ], Text.prototype, "align", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "bold", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TEXT_COLORS),
+    oneOf.OneOf(TEXT_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Text.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "disabled", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "heading", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "hovered", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "inline", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "invalid", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "inverted", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "noWrap", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "pressed", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "shadow", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TEXT_SIZES),
+    oneOf.OneOf(TEXT_SIZES),
     tslib_es6.__metadata("design:type", String)
 ], Text.prototype, "size", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...TEXT_SPACES),
+    oneOf.OneOf(TEXT_SPACES),
     tslib_es6.__metadata("design:type", String)
 ], Text.prototype, "space", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Text.prototype, "subtitle", void 0);
 Text.style = textHostCss();