@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

package/dist/collection/components/bal-carousel/bal-carousel.js

@@ -1,47 +1,23 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { debounce, raf, rLCP } from "../../utils/helpers";
+import { rOnLoad } from "../../utils/helpers";
 import { BEM } from "../../utils/bem";
 import { TabControl } from "./controls/tab-control";
-import { DotControl } from "./controls/dot-control";
-import { LargeControl } from "./controls/large-control";
-import { SmallControl } from "./controls/small-control";
 import { stopEventBubbling } from "../../utils/form-input";
 import { balBreakpoints } from "../../utils/breakpoints";
 import { ListenToBreakpoints } from "../../utils/breakpoints/breakpoints.decorator";
 import { ListenToSwipe } from "../../utils/swipe";
 import { ListenToMutation } from "../../utils/mutation";
 import { ListenToResize } from "../../utils/resize";
-import { getComputedWidth } from "../../utils/style";
 import { ListenToConfig, defaultConfig } from "../../utils/config";
-import { i18nControlLabel } from "./bal-carousel.i18n";
-import { ListenTo } from "../../utils/listen";
+import { SwiperUtil } from "../../utils/swiper";
 export class Carousel {
     constructor() {
-        this.previousTransformValue = 0;
-        this.carouselId = `bal-carousel-${CarouselIds++}`;
-        this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
+        this.swiper = new SwiperUtil();
+        this.swiperIsLastSlideVisible = false;
         this.mutationObserverActive = true;
-        this.itemsChanged = debounce(() => this.itemsChangedInternal(), 100);
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onPreviousButtonClick = () => this.previous();
-        this.onNextButtonClick = () => this.next();
-        this.onControlChange = (selectedValue) => {
-            if (selectedValue !== this.value) {
-                const isForward = selectedValue > this.value;
-                if (isForward) {
-                    this.next(selectedValue - this.value);
-                }
-                else {
-                    this.previous(this.value - selectedValue);
-                }
-            }
-        };
         this.isLargestContentfulPaintDone = false;
-        this.isLastSlideVisible = true;
+        this.hasAnimated = false;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
         this.value = 0;
@@ -58,12 +34,38 @@ export class Carousel {
         this.scrollY = true;
         this.border = false;
     }
+    onValueChange() {
+        this.swiper.index = this.value;
+    }
+    onStepsChange() {
+        this.swiper.steps = this.steps;
+    }
+    onItemsPerViewChange() {
+        this.swiper.itemsPerView = this.itemsPerView;
+    }
+    onControlsChange() {
+        this.swiper.controls = this.controls;
+    }
+    onInterFaceChange() {
+        this.swiper.gapSize = this.interface === 'product' ? 16 : 0;
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    connectedCallback() {
+        this.swiper.connectedCallback(this);
+        this.onControlsChange();
+        this.onInterFaceChange();
+        this.onItemsPerViewChange();
+        this.onStepsChange();
+        this.onValueChange();
+    }
+    disconnectedCallback() {
+        this.swiper.disconnectedCallback();
+    }
     componentDidLoad() {
-        rLCP(() => {
+        rOnLoad(() => {
             this.isLargestContentfulPaintDone = true;
         });
     }
@@ -78,7 +80,7 @@ export class Carousel {
         }
     }
     mutationListener() {
-        this.itemsChanged();
+        this.swiper.notifyChange();
     }
     swipeListener({ left, right }) {
         if (left) {
@@ -90,22 +92,10 @@ export class Carousel {
     }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
-        this.itemsChanged();
+        this.swiper.notifyChange();
     }
     resizeListener() {
-        this.itemsChanged();
-    }
-    listenToKeyDown(ev) {
-        if (this.htmlRole !== 'tablist') {
-            if (ev.code === 'Tab') {
-                if (ev.shiftKey) {
-                    this.focusPreviousItem(ev);
-                }
-                else {
-                    this.focusNextItem(ev);
-                }
-            }
-        }
+        this.swiper.notifyChange();
     }
     /**
      * @internal define config for the component
@@ -118,167 +108,31 @@ export class Carousel {
      * ------------------------------------------------------
      */
     async previous(steps = this.steps) {
-        let previousValue = this.value - steps;
-        if (previousValue < 0) {
-            previousValue = 0;
-        }
-        const activeSlide = await this.buildSlide(previousValue);
-        if (activeSlide) {
-            const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (didAnimate || this.value !== previousValue) {
-                this.value = previousValue;
-                this.balChange.emit(this.value);
-            }
-        }
-        return activeSlide;
+        this.swiper.previous(steps);
     }
     async next(steps = this.steps) {
-        const items = this.getAllItemElements();
-        const length = items.length;
-        let nextValue = this.value + steps;
-        if (nextValue >= length) {
-            nextValue = length - 1;
-        }
-        const activeSlide = await this.buildSlide(nextValue);
-        if (activeSlide) {
-            const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (didAnimate || this.value !== nextValue) {
-                this.value = nextValue;
-                this.balChange.emit(this.value);
-            }
-        }
-        return activeSlide;
+        this.swiper.next(steps);
     }
     /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
+     * @internal
      */
-    async animate(amount = 0, animated = true) {
-        return new Promise(resolve => {
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            this.currentRaf = raf(async () => {
-                if (this.containerEl && this.innerEl) {
-                    const lastSlide = await this.buildSlide();
-                    if (lastSlide) {
-                        const containerWidth = this.innerEl.clientWidth || 0;
-                        const itemsWith = lastSlide.transformNext || 0;
-                        const noNeedForSlide = itemsWith <= containerWidth;
-                        let maxAmount = itemsWith - containerWidth;
-                        let isLastSlideVisible = maxAmount <= amount;
-                        // -1 one is needed for example when we use items per view 3 with 33.333%
-                        if (this.itemsPerView === 3) {
-                            maxAmount = itemsWith - containerWidth - 1;
-                            isLastSlideVisible = maxAmount <= amount;
-                        }
-                        const isFirst = amount === 0 || maxAmount <= 2;
-                        if (isFirst) {
-                            this.value = 0;
-                            this.balChange.emit(this.value);
-                        }
-                        const hasSmallControls = this.controls === 'small';
-                        const hasLargeControls = this.controls === 'large';
-                        let transformValue = noNeedForSlide ? 0 : isLastSlideVisible ? maxAmount : amount;
-                        if (!isFirst && !noNeedForSlide && (hasSmallControls || (hasLargeControls && !this.isMobile))) {
-                            transformValue = transformValue - (isLastSlideVisible ? 0 : hasLargeControls ? 56 : 48);
-                        }
-                        this.containerEl.style.transitionDuration = animated ? '0.6s' : '0';
-                        this.containerEl.style.transform = `translate3d(-${transformValue}px, 0px, 0px)`;
-                        const didAnimate = transformValue !== this.previousTransformValue;
-                        this.previousTransformValue = transformValue;
-                        this.isLastSlideVisible = isLastSlideVisible;
-                        if (this.borderEl) {
-                            this.borderEl.style.transitionDuration = animated ? '0.6s' : '0';
-                            this.borderEl.style.transform = `translate3d(${transformValue}px, 0px, 0px)`;
-                        }
-                        if (!didAnimate) {
-                            return resolve(false);
-                        }
-                        return resolve(true);
-                    }
-                }
-            });
-        });
-    }
-    async buildSlide(slideIndex) {
-        const items = this.getAllItemElements();
-        const index = slideIndex === undefined ? items.length - 1 : slideIndex;
-        if (items.length > index && index >= 0) {
-            const data = await this.getAllItemData();
-            const gapSize = this.interface === 'product' ? 16 : 0;
-            return {
-                el: items[index],
-                data: data[index],
-                transformNext: items
-                    .filter((_, n) => n < index + 1)
-                    .reduce((acc, item) => acc + getComputedWidth(item) + gapSize, 0),
-                transformActive: items
-                    .filter((_, n) => n < index)
-                    .reduce((acc, item) => acc + getComputedWidth(item) + gapSize, 0),
-                isFirst: index === 0,
-                isLast: index === items.length - 1,
-                total: items.length,
-                index,
-            };
-        }
-        return undefined;
-    }
-    async itemsChangedInternal() {
-        if (this.isLargestContentfulPaintDone) {
-            const activeSlide = await this.buildSlide(this.value);
-            if (activeSlide) {
-                this.animate(activeSlide.transformActive, false);
-            }
-        }
-    }
-    async focusNextItem(ev) {
-        if (!this.isLast) {
-            const slide = await this.next(1);
-            if (slide && slide.el) {
-                stopEventBubbling(ev);
-                await slide.el.setFocus();
-            }
-        }
-    }
-    async focusPreviousItem(ev) {
-        if (!this.isFirst) {
-            const slide = await this.previous(1);
-            if (slide && slide.el) {
-                stopEventBubbling(ev);
-                await slide.el.setFocus();
-            }
-        }
+    async getContainerId() {
+        return this.swiper.containerId;
     }
     /**
      * GETTERS
      * ------------------------------------------------------
      */
-    async getAllItemData() {
-        const queue = this.getAllItemElements().map(el => el.getData());
-        return await Promise.all(queue);
-    }
-    getAllItemElements() {
+    swiperGetAllChildrenElements() {
         return Array.from(this.el.querySelectorAll('bal-carousel-item'));
     }
-    getAllControlItems() {
-        const items = this.getAllItemElements();
-        return items.map((item, index) => ({ value: index, label: item.label }));
-    }
-    hasShadow() {
-        return this.itemsPerView === 'auto' || this.itemsPerView > 1 || this.interface === 'card';
-    }
-    hasShadowLeft() {
-        return this.hasShadow() && (this.value !== 0 || this.interface === 'card');
-    }
-    hasShadowRight() {
-        return this.hasShadow() && (!this.isLastSlideVisible || this.interface === 'card');
-    }
-    isFirst() {
-        return this.value === 0;
-    }
-    isLast() {
-        return this.isLastSlideVisible;
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    swiperOnChange(index) {
+        this.value = index;
+        this.balChange.emit(index);
     }
     /**
      * RENDER
@@ -288,10 +142,7 @@ export class Carousel {
         const block = BEM.block('carousel');
         const inner = block.element('inner');
         const container = inner.element('container');
-        const leftControlTitle = i18nControlLabel[this.language].left;
-        const rightControlTitle = i18nControlLabel[this.language].right;
-        const controlItems = this.getAllControlItems();
-        return (h(Host, { key: '9805dc838ffaf76bf0db144968685dd4c8483816', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.isLargestContentfulPaintDone && this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { key: 'dced19705178ae9cdca9ab3594793ed9b86d0a9f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { key: '64b95814c1bba169bab81a1384a2d753dfcf964d', role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", { key: '2baee20f00ff09cc771ba6743bff97f62a1a7570' }), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone && this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.isLargestContentfulPaintDone && this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.isLargestContentfulPaintDone && this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
+        return (h(Host, { key: '5466ee14c351f73d1455cbf258797eda4bc87b03', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.isLargestContentfulPaintDone && this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: 'de7e102cdba0dfe74f09979413f7f059625eeac0', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: '31266d0268cd3ff5414317ef027304d7b13bcdd8', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: 'a78dd80c90bd70442f4f152492acac041fb93ae3' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone ? this.swiper.renderControls() : ''));
     }
     static get is() { return "bal-carousel"; }
     static get originalStyleUrls() {
@@ -320,6 +171,8 @@ export class Carousel {
                     "tags": [],
                     "text": "Defines the active slide index."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
@@ -338,6 +191,8 @@ export class Carousel {
                     "tags": [],
                     "text": "When how many slides are moved when going forward or backward."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "steps",
                 "reflect": false,
                 "defaultValue": "1"
@@ -356,6 +211,8 @@ export class Carousel {
                     "tags": [],
                     "text": "Defines how many slides are visible in the container for the user.\n`auto` will use the size of the actual item content"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "items-per-view",
                 "reflect": false,
                 "defaultValue": "1"
@@ -374,6 +231,8 @@ export class Carousel {
                     "tags": [],
                     "text": "Defines the layout of the navigation controls."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "controls",
                 "reflect": false,
                 "defaultValue": "'none'"
@@ -389,9 +248,14 @@ export class Carousel {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Defines the role of the carousel."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Defines the role of the carousel."
+                        }],
+                    "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "html-role",
                 "reflect": false,
                 "defaultValue": "'list'"
@@ -410,6 +274,8 @@ export class Carousel {
                     "tags": [],
                     "text": "If `true` items move under the controls, instead of having a gap"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "controls-overflow",
                 "reflect": false,
                 "defaultValue": "false"
@@ -428,6 +294,8 @@ export class Carousel {
                     "tags": [],
                     "text": "If `true` the carousel can be used on dark background"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
@@ -446,6 +314,8 @@ export class Carousel {
                     "tags": [],
                     "text": "If `true` the carousel uses the full height"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-height",
                 "reflect": false,
                 "defaultValue": "false"
@@ -464,6 +334,8 @@ export class Carousel {
                     "tags": [],
                     "text": "Defines the image aspect ratio.\nShould be combined with the interface `product`"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aspect-ratio",
                 "reflect": false,
                 "defaultValue": "'16by9'"
@@ -482,6 +354,8 @@ export class Carousel {
                     "tags": [],
                     "text": "Defines special looks."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "''"
@@ -500,6 +374,8 @@ export class Carousel {
                     "tags": [],
                     "text": "If `true` the controls will be sticky to the top."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "controls-sticky",
                 "reflect": false,
                 "defaultValue": "false"
@@ -518,6 +394,8 @@ export class Carousel {
                     "tags": [],
                     "text": "If `true` vertical scrolling on mobile is enabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "scroll-y",
                 "reflect": false,
                 "defaultValue": "true"
@@ -536,6 +414,8 @@ export class Carousel {
                     "tags": [],
                     "text": "If `true` a light border is shown at the bottom."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "border",
                 "reflect": false,
                 "defaultValue": "false"
@@ -545,7 +425,7 @@ export class Carousel {
     static get states() {
         return {
             "isLargestContentfulPaintDone": {},
-            "isLastSlideVisible": {},
+            "hasAnimated": {},
             "isMobile": {},
             "language": {}
         };
@@ -606,7 +486,7 @@ export class Carousel {
             },
             "previous": {
                 "complexType": {
-                    "signature": "(steps?: number) => Promise<BalSlide | undefined>",
+                    "signature": "(steps?: number) => Promise<void>",
                     "parameters": [{
                             "name": "steps",
                             "type": "number",
@@ -616,14 +496,9 @@ export class Carousel {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "BalSlide": {
-                            "location": "import",
-                            "path": "./bal-carousel.type",
-                            "id": "src/components/bal-carousel/bal-carousel.type.ts::BalSlide"
                         }
                     },
-                    "return": "Promise<BalSlide>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "PUBLIC METHODS\n------------------------------------------------------",
@@ -632,7 +507,7 @@ export class Carousel {
             },
             "next": {
                 "complexType": {
-                    "signature": "(steps?: number) => Promise<BalSlide | undefined>",
+                    "signature": "(steps?: number) => Promise<void>",
                     "parameters": [{
                             "name": "steps",
                             "type": "number",
@@ -642,30 +517,66 @@ export class Carousel {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "BalSlide": {
-                            "location": "import",
-                            "path": "./bal-carousel.type",
-                            "id": "src/components/bal-carousel/bal-carousel.type.ts::BalSlide"
                         }
                     },
-                    "return": "Promise<BalSlide>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "",
                     "tags": []
                 }
+            },
+            "getContainerId": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "steps",
+                "methodName": "onStepsChange"
+            }, {
+                "propName": "itemsPerView",
+                "methodName": "onItemsPerViewChange"
+            }, {
+                "propName": "controls",
+                "methodName": "onControlsChange"
+            }, {
+                "propName": "interface",
+                "methodName": "onInterFaceChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "touchmove",
+                "method": "blockVerticalScrolling",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
-__decorate([
-    ListenTo('touchmove', { target: 'window', passive: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Carousel.prototype, "blockVerticalScrolling", null);
 __decorate([
     ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
     __metadata("design:type", Function),
@@ -690,16 +601,9 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Carousel.prototype, "resizeListener", null);
-__decorate([
-    ListenTo('keydown'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], Carousel.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], Carousel.prototype, "configChanged", null);
-let CarouselIds = 0;

package/dist/collection/components/bal-carousel/controls/tab-control.js

@@ -1,7 +1,14 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
+import { ariaBooleanToString } from "../../../utils/aria";
+import { toKebabCase } from "../../../utils/string";
 export const TabControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-card", null, h("bal-card-content", null, items.map(item => (h("bal-button", { "aria-controls": containerId, key: item.value, expanded: true, color: value === item.value ? 'primary' : 'light', onClick: () => onControlChange(item) }, item.label)))))));
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-card", null, h("bal-card-content", { role: "tabs" }, items.map(item => (h("button", { class: {
+            'button': true,
+            'is-fullwidth': true,
+            'is-primary': value === item.value,
+            'is-light': value !== item.value,
+        }, role: "tab", "aria-selected": ariaBooleanToString(value === item.value), "aria-controls": containerId + '-' + toKebabCase(item.label), key: item.value, onClick: () => onControlChange(item) }, item.label)))))));
 };

package/dist/collection/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.js

@@ -199,6 +199,8 @@ export class CheckboxButton {
                     "tags": [],
                     "text": "If `true` the component gets a invalid red style."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -217,6 +219,8 @@ export class CheckboxButton {
                     "tags": [],
                     "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -235,6 +239,8 @@ export class CheckboxButton {
                     "tags": [],
                     "text": "If `true` the element can not mutated, meaning the user can not edit the control."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -258,6 +264,8 @@ export class CheckboxButton {
                     "tags": [],
                     "text": "If `true` the component gets a invalid red style."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false
             },
@@ -283,6 +291,8 @@ export class CheckboxButton {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "col-size",
                 "reflect": false,
                 "defaultValue": "1"
@@ -309,6 +319,8 @@ export class CheckboxButton {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "col-size-tablet",
                 "reflect": false,
                 "defaultValue": "1"
@@ -335,6 +347,8 @@ export class CheckboxButton {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "col-size-mobile",
                 "reflect": false,
                 "defaultValue": "1"