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

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

@@ -1,7 +1,8 @@
 import { h, Host, } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-import { rLCP, waitAfterFramePaint } from "../../../utils/helpers";
+import { rOnLoad, waitAfterFramePaint } from "../../../utils/helpers";
 import { inheritAttributes } from "../../../utils/attributes";
+import { toKebabCase } from "../../../utils/string";
 export class CarouselItem {
     constructor() {
         this.imageInheritAttributes = {};
@@ -17,12 +18,13 @@ export class CarouselItem {
             this.balBlur.emit();
         };
         this.isLargestContentfulPaintDone = false;
+        this.containerId = '';
         this.src = undefined;
         this.label = '';
         this.htmlRole = 'listitem';
         this.elementType = 'button';
-        this.name = '';
-        this.value = '';
+        this.name = undefined;
+        this.value = undefined;
         this.href = undefined;
         this.target = '_self';
         this.rel = undefined;
@@ -34,18 +36,13 @@ export class CarouselItem {
      * ------------------------------------------------------
      */
     componentDidLoad() {
-        rLCP(() => {
+        rOnLoad(() => {
             this.isLargestContentfulPaintDone = true;
         });
     }
     componentWillLoad() {
         this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
-    }
-    async getData() {
-        return {
-            clientWidth: this.el.clientWidth,
-            label: this.label,
-        };
+        this.getContainerId();
     }
     async setFocus() {
         await waitAfterFramePaint();
@@ -53,12 +50,19 @@ export class CarouselItem {
             this.buttonEl.focus();
         }
     }
+    async getContainerId() {
+        const parentEl = this.el.closest('bal-carousel');
+        this.containerId = await parentEl.getContainerId();
+    }
     render() {
         const block = BEM.block('carousel');
         const itemEl = block.element('item');
         const isProduct = !!this.color && !!this.label;
+        const parentEl = this.el.closest('bal-carousel');
+        const role = parentEl && parentEl.controls === 'tabs' ? 'tabpanel' : 'listitem';
+        const id = `${this.containerId}-${toKebabCase(this.label)}`;
         if (!isProduct) {
-            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
+            return (h(Host, { id: id, role: role, class: Object.assign({}, itemEl.class()), "aria-label": this.label }, this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
         }
         const button = itemEl.element('button');
         const image = button.element('image');
@@ -73,7 +77,7 @@ export class CarouselItem {
                 rel,
                 target,
             };
-        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+        return (h(Host, { id: id, role: role, "aria-label": this.label, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
     }
     static get is() { return "bal-carousel-item"; }
     static get properties() {
@@ -92,6 +96,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "Src path to the image"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "src",
                 "reflect": true
             },
@@ -109,6 +115,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "Label of the slide which will be used for pagination tabs"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true,
                 "defaultValue": "''"
@@ -124,9 +132,14 @@ export class CarouselItem {
                 "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": "'listitem'"
@@ -150,6 +163,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "The type of button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "element-type",
                 "reflect": false,
                 "defaultValue": "'button'"
@@ -168,9 +183,11 @@ export class CarouselItem {
                     "tags": [],
                     "text": "The name of the button, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true,
-                "defaultValue": "''"
+                "defaultValue": "undefined"
             },
             "value": {
                 "type": "any",
@@ -186,9 +203,11 @@ export class CarouselItem {
                     "tags": [],
                     "text": "The value of the button, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
-                "defaultValue": "''"
+                "defaultValue": "undefined"
             },
             "href": {
                 "type": "string",
@@ -204,6 +223,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "Specifies the URL of the page the link goes to"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -226,6 +247,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
@@ -244,6 +267,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rel",
                 "reflect": false
             },
@@ -261,6 +286,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "download",
                 "reflect": false
             },
@@ -283,6 +310,8 @@ export class CarouselItem {
                     "tags": [],
                     "text": "Color of the background"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false
             }
@@ -290,7 +319,8 @@ export class CarouselItem {
     }
     static get states() {
         return {
-            "isLargestContentfulPaintDone": {}
+            "isLargestContentfulPaintDone": {},
+            "containerId": {}
         };
     }
     static get events() {
@@ -358,28 +388,6 @@ export class CarouselItem {
     }
     static get methods() {
         return {
-            "getData": {
-                "complexType": {
-                    "signature": "() => Promise<BalCarouselItemData>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "BalCarouselItemData": {
-                            "location": "import",
-                            "path": "../bal-carousel.type",
-                            "id": "src/components/bal-carousel/bal-carousel.type.ts::BalCarouselItemData"
-                        }
-                    },
-                    "return": "Promise<BalCarouselItemData>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "setFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",

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

@@ -1 +1 @@
-:root{--bal-carousel-inner-border-background: var(--bal-color-border);--bal-carousel-inner-border-background-inverted: var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before: var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after: var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before: var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after: var(--bal-color-primary);--bal-carousel-product-item-button-background: var(--bal-color-white);--bal-carousel-product-item-button-background-green: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active: var(--bal-color-green-2);--bal-carousel-product-item-button-background-red: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active: var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active: var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active: var(--bal-color-purple-2);--bal-carousel-inner-border-radius: var(--bal-radius-rounded);--bal-carousel-image-border-radius: var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius: var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color: var(--bal-color-text-primary);--bal-carousel-sticky-top: 0}.bal-carousel{display:block;position:relative}.bal-carousel__inner{display:block;position:relative;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;touch-action:pan-y}.bal-carousel--full-height{height:100%}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container{position:relative;width:100%;height:100%;display:flex;box-sizing:content-box;transition-property:transform;transition-duration:0ms;transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:flex;justify-content:center;align-items:center;flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.bal-carousel__inner--shadow-left::before,.bal-carousel__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-carousel__inner--shadow-left::before{content:"";left:0;background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-carousel__inner--shadow-right::after{content:"";right:0;background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-carousel__inner--shadow-left.bal-carousel__inner--inverted::before{background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-carousel__inner--shadow-right.bal-carousel__inner--inverted::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-carousel__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-carousel__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-carousel__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-carousel__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:calc(100% - 2rem);padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:calc(100% - 5rem);padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:flex;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;object-fit:cover;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:fit-content}.bal-carousel--product .bal-carousel__item{display:flex;width:10rem;height:11rem;text-align:center;padding-top:.5rem;padding-bottom:.5rem;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:flex;flex:1;flex-direction:column;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media(hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}@media screen and (max-width: 768px){.bal-carousel__controls--large{display:flex;justify-content:center;width:100%;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-carousel__controls--large .bal-carousel__controls__button{position:absolute;top:calc(50% - 24px);z-index:7}.bal-carousel__controls--large .bal-carousel__controls__button--left{left:0}.bal-carousel__controls--large .bal-carousel__controls__button--right{right:0}}.bal-carousel__controls__button--hidden{display:none !important;visibility:none !important}.bal-carousel__controls--small .bal-carousel__controls__button{position:absolute;top:calc(50% - 1rem);z-index:7}.bal-carousel__controls--small .bal-carousel__controls__button--left{left:0}.bal-carousel__controls--small .bal-carousel__controls__button--right{right:0}.bal-carousel__controls--small .bal-carousel__controls__button--hidden{display:none !important;visibility:hidden !important}
+:root{--bal-carousel-inner-border-background: var(--bal-color-border);--bal-carousel-inner-border-background-inverted: var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before: var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after: var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before: var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after: var(--bal-color-primary);--bal-carousel-product-item-button-background: var(--bal-color-white);--bal-carousel-product-item-button-background-green: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active: var(--bal-color-green-2);--bal-carousel-product-item-button-background-red: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active: var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active: var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active: var(--bal-color-purple-2);--bal-carousel-inner-border-radius: var(--bal-radius-rounded);--bal-carousel-image-border-radius: var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius: var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color: var(--bal-color-text-primary);--bal-carousel-sticky-top: 0}.bal-swiper{position:relative}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;position:relative;overflow:clip;list-style:none;padding:0;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:flex;box-sizing:content-box;transition-property:transform;transition-duration:0ms;transform:translate3d(0px, 0px, 0px)}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:flex;justify-content:center;width:100%;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;top:calc(50% - 24px);z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;top:calc(50% - 1rem);z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:"";left:0;background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:"";right:0;background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--full-height{height:100%}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{box-sizing:border-box;text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:flex;justify-content:center;align-items:center;flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;round:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:100%;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:100%;padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:flex;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;object-fit:cover;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:fit-content}.bal-carousel--product .bal-carousel__item{display:flex;width:10rem;height:11rem;text-align:center;padding-top:.5rem;padding-bottom:.5rem;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:flex;flex:1;flex-direction:column;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media(hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}